/* Srida Infotech - main.css: tokens, base, type, buttons, nav, footer, strip,
   reveal system, choreography, breakpoints, reduced motion. Theme overrides in theme.css. */

:root {
  --bg: #fdfbfa;
  --bg-raise: #ffffff;
  --surface: #ffffff;
  --surface-2: #faf5f3;
  --line: rgba(43, 43, 43, 0.10);
  --line-strong: rgba(43, 43, 43, 0.20);
  --text: #2b2b2b;
  --text-2: #5f5a56;
  --text-3: #736c67;
  --accent: #8b2f2f;
  --accent-strong: #6b1a1a;
  --accent-soft: #b85555;
  --accent-ink: #fdf8f6;
  --accent-dim: rgba(184, 85, 85, 0.10);
  --shadow-soft: 0 1px 2px rgba(107, 26, 26, 0.04), 0 12px 32px rgba(107, 26, 26, 0.06);
  --radius-card: 20px;
  --radius-chip: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Code", ui-monospace, monospace;

  /* ---- v2 tokens (spec 4.1) ---- */
  --paper-2: #f7f1ee;
  --ink-faint: rgba(43, 43, 43, 0.06);
  --ink-rule: rgba(43, 43, 43, 0.14);
  --ink-mute: rgba(43, 43, 43, 0.55);
  --accent-ghost: rgba(184, 85, 85, 0.12);
  --accent-line: rgba(184, 85, 85, 0.45);
  --accent-dim-2: rgba(184, 85, 85, 0.16);

  --font-note: var(--font-sans);
  --font-serif: Georgia, "Times New Roman", serif;

  --shadow-lift: 0 2px 4px rgba(107, 26, 26, .05), 0 24px 56px rgba(107, 26, 26, .10);
  --shadow-float: 0 1px 2px rgba(107, 26, 26, .05), 0 24px 64px rgba(107, 26, 26, .10);
  --shadow-inset: inset 0 1px 2px rgba(107, 26, 26, .18);

  --radius-shell: 24px; --radius-inner: 18px; --radius-pill: 999px; --shell-pad: 6px;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;
  --section-y: clamp(4.5rem, 8vw, 7.5rem);
  --chapter-gap: clamp(3rem, 6vw, 5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --container: 1200px; --container-wide: 1320px; --container-narrow: 860px;
  --measure: 38rem; --measure-wide: 44rem; --measure-card: 34rem;
  --margin-col: 16rem;
  --rail-col: 14rem;
  --nav-h: 3.9rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-mech: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);

  --dur-xs: 120ms; --dur-s: 240ms; --dur-m: 480ms; --dur-l: 700ms; --dur-xl: 1200ms;
  --dur-globe: 1600ms; --dur-packet: 2400ms;

  --stagger-words: 40ms; --stagger-cards: 60ms; --stagger-rows: 80ms;
  --rise: 16px;

  --fig-path: var(--ink-rule);
  --fig-path-lit: var(--accent);
  --fig-dash: 2 4;
  --fig-node-stroke: rgba(43, 43, 43, 0.28);
  --fig-node-fill: var(--surface);
  --fig-node-lit: var(--accent);
  --fig-node-fill-lit: #f7ebeb; /* --accent at 12% over --surface, opaque so routes pass behind lit nodes */
  --fig-node-fill-lit: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --fig-packet: var(--accent);
  --fig-packet-doc: var(--accent-ink);
  --fig-stroke-w: 1.5;

  --z-atmosphere: -1; --z-rail: 10; --z-probe: 20; --z-menu: 30; --z-nav: 40; --z-card: 45; --z-toast: 50; --z-skip: 60;

  /* type scale (4.2) */
  --t-display-xl: clamp(3rem, 7vw, 5.5rem);
  --t-display: clamp(2.6rem, 6vw, 4.3rem);
  --t-h1: clamp(2.2rem, 4.2vw, 3.4rem);
  --t-h2: clamp(1.9rem, 3.6vw, 2.85rem);
  --t-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-h4: 1.05rem;
  --t-lede: clamp(1.05rem, 1.4vw, 1.2rem);
  --t-body: 1rem;
  --t-small: .9rem;
  --t-caption: .8rem;
  --t-label: .66rem;
  --t-readout: .78rem;
  --t-num: .85rem;
  --t-numeral: clamp(4rem, 12vw, 9rem);
  --t-note: .95rem;

  /* dotted draw: 260 dots then a long gap; offset slides 1560 -> 1560 - len */
  --dash-draw: 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 10003;
  --dash-len: 1560;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
}

.skip-link:focus { transform: none; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

#main:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* ---------- Atmosphere ---------- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmosphere);
  pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 82% -8%, rgba(184, 85, 85, 0.09), transparent 60%),
    radial-gradient(44rem 26rem at 6% 12%, rgba(184, 85, 85, 0.045), transparent 60%),
    var(--bg);
}

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.display-xl { font-size: var(--t-display-xl); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; }

.display {
  font-size: var(--t-display);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.h1 { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; max-width: 18ch; }

.h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 22ch;
}

.h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.h4 { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }

.lede {
  color: var(--text-2);
  font-size: var(--t-lede);
  line-height: 1.65;
  max-width: var(--measure);
  text-wrap: pretty;
}

.small { font-size: var(--t-small); line-height: 1.55; }
.caption { font-size: var(--t-caption); line-height: 1.5; }

.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-2);
}

.readout {
  font-family: var(--font-mono);
  font-size: var(--t-readout);
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-feature-settings: "tnum";
}

.num {
  font-family: var(--font-mono);
  font-size: var(--t-num);
  font-weight: 500;
  line-height: 1;
  font-feature-settings: "tnum";
}

.big-num {
  font-size: var(--t-numeral);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  font-feature-settings: "tnum";
}

.note {
  font-family: var(--font-note);
  font-style: italic;
  font-size: var(--t-note);
  line-height: 1.5;
  color: var(--text-2);
}

.pull {
  font-family: var(--font-note);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h2);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.tnum, time, .clock, .counter { font-feature-settings: "tnum"; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-2);
  background: var(--surface);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.section-head .lede { margin-top: 1.1rem; }

/* Inline underline that draws left to right (4.4, M5). Footer links share it. */
.u, .footer-links a {
  --uw: 1px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% var(--uw);
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size var(--dur-s) var(--ease-mech), color var(--dur-s) var(--ease-out);
}

.nobr { white-space: nowrap; }

:is(h1, h2, .pull, .display, .display-xl) .u { --uw: 0.06em; padding-bottom: 0.04em; }

.u:hover, .u:focus-visible, .footer-links a:hover, .footer-links a:focus-visible {
  background-size: 100% var(--uw);
  color: var(--accent);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease),
    border-color 0.5s var(--ease), color 0.5s var(--ease);
}

.btn:active { transform: scale(0.98) !important; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 0.7rem 0.7rem 1.4rem;
}

.btn-primary:hover { background: var(--accent-strong); }

.btn-orb {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}

.btn-orb i { display: block; }

.btn-primary:hover .btn-orb { transform: translate(2px, -1px) scale(1.05); }

/* M4: the arrow rolls out to the right and back in from the left */
.btn-primary:is(:hover, :focus-visible) .btn-orb i { animation: orb-roll var(--dur-m) var(--ease-in-out); }

@keyframes orb-roll {
  0% { transform: translateX(0); opacity: 1; }
  49% { transform: translateX(160%); opacity: 0; }
  50% { transform: translateX(-160%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  padding: 0.7rem 1.5rem;
  background: transparent;
}

.btn-ghost:hover { border-color: rgba(43, 43, 43, 0.36); background: rgba(43, 43, 43, 0.035); }

.btn-ghost .btn-orb { background: rgba(43, 43, 43, 0.06); color: var(--text); }
.btn-ghost:has(.btn-orb) { padding-right: 0.7rem; }

/* ---------- Nav ---------- */

.nav-wrap {
  position: fixed;
  top: 1.1rem;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding-inline: clamp(1rem, 3vw, 2rem);
  display: flex;
  justify-content: center;
}

.nav {
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1.1rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(253, 251, 250, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 40px rgba(107, 26, 26, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0;
  font-size: 1.06rem;
}

.brand-mark {
  width: 1.9rem;
  height: 1.9rem;
  transition: transform var(--dur-m) var(--ease-out);
}

.brand:hover .brand-mark { transform: rotate(180deg); }

.brand-name {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-s) var(--ease-mech);
}

.brand:hover .brand-name { background-size: 100% 1px; }

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.nav-links li { display: flex; align-items: center; }

.nav-links a {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--text-2);
  transition: color 0.4s var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible { color: var(--text); }

body[data-page="services"] a[data-nav="services"],
body[data-page="products"] a[data-nav="products"],
body[data-page="how-we-work"] a[data-nav="how-we-work"],
body[data-page="company"] a[data-nav="company"] { color: var(--text); }

.has-card a { padding-right: 0.35rem; }

.nav-chevron {
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -0.35rem;
  border: 0;
  background: none;
  color: var(--text-2);
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}

.nav-chevron i { display: block; transition: transform var(--dur-s) var(--ease-mech); }
.nav-chevron[aria-expanded="true"] i { transform: rotate(180deg); }
.nav-chevron:hover { color: var(--text); }

/* M1 carriage: main.js sets --cx/--cw in px */
.nav-carriage {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  transform: translateX(calc(var(--cx, 0px) + var(--cw, 0px) / 2 - 2px));
  transition: transform 320ms var(--ease-mech), opacity var(--dur-s) var(--ease-out);
}

.nav-carriage.is-hidden,
body:is([data-page="contact"], [data-page="careers"], [data-page="404"]) .nav-links:not(:hover) .nav-carriage { opacity: 0; }
.nav-links:hover .nav-carriage { opacity: 1; }

/* M2 hairline: --read on <html> */
.nav-progress {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 5px;
  height: 2px;
  width: calc(var(--read, 0) * (100% - 2.8rem));
  max-width: calc(100% - 2.8rem);
  background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 6px);
  pointer-events: none;
  will-change: width;
}

.nav-progress.is-hidden { display: none; }

.scrolled .nav {
  background: rgba(253, 251, 250, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 16px 48px rgba(107, 26, 26, 0.12);
}

.nav-cta { display: inline-flex; }

/* index cards: main.js sets --x in px */
.nav-card {
  position: absolute;
  top: calc(var(--nav-h) + 0.5rem);
  left: var(--x, 50%);
  width: min(520px, calc(100vw - 2rem));
  z-index: var(--z-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  padding: var(--shell-pad);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  display: none;
}

.nav-card.is-open { display: block; animation: card-in var(--dur-s) var(--ease-out) both; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.nav-card-inner {
  border-radius: var(--radius-inner);
  background: var(--bg-raise);
  border: 1px solid rgba(43, 43, 43, 0.05);
  padding: var(--s-3) var(--s-4);
  display: grid;
  gap: var(--s-4);
}

.nav-card .index { border-top: 0; }

.nav-card-note {
  display: none;
  font-family: var(--font-note);
  font-style: italic;
  font-size: var(--t-note);
  line-height: 1.5;
  color: var(--text-2);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-left: 1px solid var(--line);
  align-self: start;
}

/* Hamburger */

.nav-burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}

.nav-burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.5s var(--ease);
}

.nav-burger span:first-child { transform: translate(-50%, calc(-50% - 3.5px)); }
.nav-burger span:last-child { transform: translate(-50%, calc(-50% + 3.5px)); }

.menu-open .nav-burger span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-open .nav-burger span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobile overlay, typeset as an index (3.2) */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(253, 251, 250, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow-y: auto;
  padding: calc(1.1rem + var(--nav-h) + 1.5rem) var(--gutter) var(--s-10);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}

.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease);
}

.mobile-menu { display: flex; flex-direction: column; }

/* §3.2: the eight direct children rise index x 60 ms apart (main.js writes --d) */
.mobile-menu > * {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}

.menu-open .mobile-menu > * { opacity: 1; transform: none; }

.menu-summary,
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 44px;
  padding: 0.55rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
}

.menu-summary::-webkit-details-marker { display: none; }
.mobile-menu .index-num { width: 1.6rem; flex: none; color: var(--text-2); font-size: var(--t-num); line-height: 1; transition: color var(--dur-s); }
.menu-summary:hover .index-num, .menu-group[open] .menu-summary .index-num, .menu-item:hover .index-num { color: var(--accent); }
.menu-chevron { margin-left: auto; font-size: 1.1rem; color: var(--text-2); transition: transform var(--dur-s) var(--ease-mech); }
.menu-group[open] .menu-chevron { transform: rotate(90deg); }

.menu-sub {
  list-style: none;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) 0 var(--s-4) calc(1.6rem + var(--s-4));
}

.menu-sub a { display: block; padding: 0.35rem 0; font-size: 1.05rem; color: var(--text-2); }
.menu-sub a:hover { color: var(--text); }
/* main.js marks the current page */
.menu-sub a.is-current { color: var(--text); font-weight: 500; }
.menu-sub a.is-current::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0.5rem 0.15em -0.9rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.menu-item.is-current .index-num { color: var(--accent); }
.menu-item.is-current .menu-label { text-decoration: underline 1px var(--accent); text-underline-offset: 0.2em; }

.mobile-menu > .menu-cta { width: auto; align-self: flex-start; margin-inline: max(0px, calc((100% - 30rem) / 2)); margin-top: var(--s-6); }

.menu-mono {
  color: var(--text-2);
  padding-top: var(--s-3);
}

.menu-mono:first-of-type { padding-top: var(--s-6); }
.menu-mono a:hover { color: var(--text); }

/* ---------- Hero ---------- */

.hero {
  min-height: 86dvh;
  display: grid;
  align-content: center;
  padding-top: 6rem;
  padding-bottom: 2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy .display {
  font-size: clamp(2.4rem, 3.9vw, 3.4rem);
  max-width: 20ch;
  margin-top: 1.4rem;
}

.hero-copy .lede { margin-top: 1.5rem; }

.hero-ctas {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero-globe {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: min(72vh, 600px);
  justify-self: center;
}

.hero-globe::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(184, 85, 85, 0.13), rgba(184, 85, 85, 0.05) 60%, transparent 76%);
  pointer-events: none;
}

.hero-globe canvas { position: relative; display: block; cursor: grab; }
.hero-globe canvas:active { cursor: grabbing; }

/* ---------- Platform strip (marquee) ---------- */

.strip {
  position: relative;
  border-block: 1px solid var(--line);
  padding-block: 1.4rem;
}

.strip-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.strip-track {
  display: flex;
  width: max-content;
  gap: 4.5rem;
  animation: strip-scroll 46s linear infinite;
}

.strip:hover .strip-track,
.strip:focus-within .strip-track,
.strip-paused .strip-track,
.strip--hold .strip-track {
  animation-play-state: paused;
}

.strip-set { display: flex; gap: 4.5rem; list-style: none; }

.strip-set li { position: relative; display: flex; }

/* 4 px sphere-dot separator halfway across the gap */
.strip-set li::after {
  content: "";
  position: absolute;
  right: -2.25rem;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
  transform: translate(50%, -50%);
}

.strip-track a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  padding: 0.25rem 0;
  transition: color var(--dur-s) var(--ease-out);
}

.strip-track a:hover, .strip-track a:focus-visible { color: var(--text); }

/* shift = one set + one gap, so the loop restarts without a jump */
@keyframes strip-scroll {
  to { transform: translateX(calc(-50% - 2.25rem)); }
}

.strip-toggle {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-2);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.strip-toggle:hover { border-color: var(--line-strong); color: var(--text); }

/* a cream backing fades the moving strip out before the control, so no letter is cut by the circle */
.strip-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.6rem;
  bottom: -0.6rem;
  left: -3.5rem;
  right: calc(-1 * clamp(1rem, 3vw, 2rem));
  background: linear-gradient(90deg, transparent, var(--bg) 3rem);
  pointer-events: none;
}

/* coarse pointers: strip links are 44 px targets (the strip keeps its height) */
@media (pointer: coarse) {
  .strip { padding-block: 0.6rem; }
  .strip-track a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(3.5rem, 5.5vw, 5rem); }

/* ---------- Services bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}

.tile {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}

.tile:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.tile i {
  font-size: 1.5rem;
  color: var(--accent);
}

.tile h3 {
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.tile p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* Featured AI tile: double-bezel shell */

.tile-featured {
  grid-column: span 2;
  grid-row: span 2;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
  padding: 6px;
  display: flex;
}

.tile-featured-inner {
  flex: 1;
  border-radius: 18px;
  background:
    radial-gradient(26rem 18rem at 88% -10%, rgba(184, 85, 85, 0.14), transparent 62%),
    var(--bg-raise);
  border: 1px solid rgba(43, 43, 43, 0.05);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.tile-featured i { font-size: 2rem; color: var(--accent); }

.tile-featured h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin-top: 1rem;
}

.tile-featured p {
  color: var(--text-2);
  margin-top: 0.9rem;
  max-width: 34rem;
}

.tile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 500;
  font-size: 0.95rem;
}

.tile-link i { font-size: 1rem; transition: transform 0.5s var(--ease); }
.tile-link:hover i { transform: translateX(3px); }

/* Tinted variation tiles */

.tile-tint {
  background: linear-gradient(160deg, var(--accent-dim), var(--surface) 55%);
}

@media (hover: hover) and (pointer: fine) {
  .spot { position: relative; }
  .spot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 85, 85, 0.10), transparent 65%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
  }
  .spot:hover::after { opacity: 1; }
}

.tile-featured, .product-flagship {
  transition: transform 0.5s var(--ease), border-color 0.6s var(--ease);
}

/* ---------- AI section ---------- */

.split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.split-copy .h2 { max-width: 16ch; }

.split-copy p {
  color: var(--text-2);
  margin-top: 1.4rem;
  max-width: 34rem;
  text-wrap: pretty;
}

.ai-rows { display: grid; gap: 0.9rem; }

.ai-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 1.35rem 1.5rem;
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}

.ai-row:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.ai-row i {
  font-size: 1.35rem;
  color: var(--accent);
  margin-top: 0.15rem;
}

.ai-row h3 { font-size: 1rem; }

.ai-row p { font-size: 0.9rem; color: var(--text-2); margin-top: 0.25rem; }

/* ---------- Products ---------- */

.products { display: grid; gap: 0.9rem; }

.product-flagship {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
  padding: 6px;
  display: flex;
}

.product-flagship-inner {
  flex: 1;
  border-radius: 18px;
  background:
    radial-gradient(30rem 20rem at -5% 115%, rgba(184, 85, 85, 0.11), transparent 60%),
    var(--bg-raise);
  border: 1px solid rgba(43, 43, 43, 0.05);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}

.product-flagship h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.product-flagship .product-body { color: var(--text-2); margin-top: 1rem; max-width: 40rem; }

.product-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}

.product-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.product-card h3 { font-size: 1.3rem; }

.product-card .product-body { color: var(--text-2); margin-top: 0.9rem; font-size: 0.95rem; }

.product-kind {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  display: block;
  margin-bottom: 0.9rem;
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--surface);
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  color: var(--text-2);
}

.tech-chip img { width: 1rem; height: 1rem; }

/* ---------- Statement band ---------- */

.statement {
  border-block: 1px solid var(--line);
  padding-block: clamp(3.5rem, 6vw, 5rem);
  text-align: left;
}

.statement .h2 { max-width: 22ch; }

.statement p {
  color: var(--text-2);
  margin-top: 1.4rem;
  max-width: 40rem;
}

/* ---------- Contact ---------- */

.contact-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 6px;
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
}

.contact-inner {
  border-radius: 18px;
  background:
    radial-gradient(34rem 22rem at 50% 130%, rgba(184, 85, 85, 0.12), transparent 65%),
    var(--bg-raise);
  border: 1px solid rgba(43, 43, 43, 0.05);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  display: grid;
  justify-items: center;
  text-align: center;
}

.contact-inner .lede { margin-top: 1.2rem; margin-inline: auto; }

.contact-inner .btn { margin-top: 2.4rem; }

.contact-mail {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-2);
}

.contact-mail a { color: var(--accent); }
.contact-mail a:hover { color: var(--accent-strong); }

/* ---------- Footer (3.3) ---------- */

footer, .footer { padding-block: var(--s-16) var(--s-8); }

.footer-grid {
  display: grid;
  gap: var(--s-10) var(--s-8);
}

.footer-brand { display: grid; gap: var(--s-3); justify-items: start; align-content: start; }

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.footer-desc { color: var(--text-2); max-width: 18rem; }

.footer-clock { color: var(--text-2); }

.footer-head {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-4);
}

.footer-links {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--text-2);
}

.footer-links i { font-size: 1rem; vertical-align: -0.15em; margin-right: 0.3rem; }

/* coarse pointers: each footer link is a 44 px row; the underline stays under the words */
@media (pointer: coarse) {
  .footer-links { gap: 0; }
  .footer-links a { display: inline-block; padding-block: 12px; background-position: 0 calc(100% - 11px); }
}

.footer-col { min-width: 0; }
.footer-contact a { font-family: var(--font-mono); font-size: var(--t-readout); letter-spacing: 0; overflow-wrap: anywhere; }
.footer-reach .copy-btn { width: 26px; margin-right: -6px; }
.footer-address { display: block; margin-top: var(--s-4); font-style: normal; font-size: var(--t-caption); line-height: 1.55; color: var(--text-2); max-width: 20rem; }
.footer-maps { display: inline-flex; min-height: 44px; align-items: center; gap: 0.35rem; margin-top: var(--s-3); font-size: 0.9rem; color: var(--accent); }
.footer-maps:hover { color: var(--accent-strong); }

.footer-bottom {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.footer-legal { font-size: 0.7rem; color: var(--text-2); }
.footer-route { letter-spacing: 0.18em; }

.btn-top {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
}

.btn-top .btn-orb { width: 1.75rem; height: 1.75rem; font-size: 0.85rem; }

/* ---------- Reveal system (4.3) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-l) var(--ease-out), transform var(--dur-l) var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="fade"] { transform: none; }

/* mask: the clip window starts below the box (paints nothing) instead of inset(0 0 100% 0),
   because Chromium applies clip-path when IntersectionObserver measures the target and a
   fully clipped heading would never reach the 15% threshold. */
.js [data-reveal="mask"] {
  opacity: 1;
  clip-path: inset(100% 0 -100% 0);
  transform: translateY(0.35em);
  transition: clip-path var(--dur-l) var(--ease-mech), transform var(--dur-l) var(--ease-mech);
  transition-delay: var(--d, 0s);
}

.js [data-reveal="mask"].is-in { clip-path: inset(0 0 -0.2em 0); transform: none; }

.js [data-reveal="fill"] {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js [data-reveal="fill"].is-in { opacity: 1; transform: none; }

/* draw: main.js writes --len (unitless) on every stroked descendant */
.js [data-reveal="draw"] { opacity: 1; transform: none; transition: none; }

.js svg[data-reveal="draw"] :is(path, line, polyline),
.js :is(path, line, polyline)[data-reveal="draw"] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset var(--dur-xl) var(--ease-mech);
  transition-delay: var(--d, 0s);
}

.js svg[data-reveal="draw"].is-in :is(path, line, polyline),
.js :is(path, line, polyline)[data-reveal="draw"].is-in { stroke-dashoffset: 0; }

/* dots at the end of a drawn line appear once the line has arrived */
.js svg[data-reveal="draw"] circle {
  opacity: 0;
  transition: opacity var(--dur-s) var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--dur-xl) * 0.8);
}

.js svg[data-reveal="draw"].is-in circle { opacity: 1; }

/* data-seq: main.js copies the value to --seq; components scale it (160 ms here, 300 ms on .path) */
.js [data-reveal="draw"] [data-seq],
.js [data-seq][data-reveal="draw"] { transition-delay: calc(var(--d, 0s) + var(--seq, 0) * 160ms); }

/* underline draw */
.js .u[data-reveal="draw"] {
  background-size: 0% var(--uw);
  transition: background-size var(--dur-s) var(--ease-mech) var(--d, 0s), color var(--dur-s) var(--ease-out);
}

.js .u[data-reveal="draw"].is-in,
.js .u[data-reveal="draw"]:hover { background-size: 100% var(--uw); }

/* data-words: main.js splits, then adds .is-in to the heading */
.js [data-words] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.js [data-words] .w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-l) var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js [data-words].is-in .w > span { transform: none; }

/* a .u inside a split word: lift the underline into the .w box, which clips at its padding edge */
.js [data-words] .u { background-position: 0 calc(100% - 0.16em); }

/* ---------- Page-load choreography (4.3) ---------- */

.js .nav-wrap { animation: fade-in 300ms var(--ease-out) both; }

.js :is(.hero, .hero-int) :is(.crumbs, .eyebrow) { animation: rise-in var(--dur-l) var(--ease-out) 80ms both; }
.js :is(.hero, .hero-int) h1[data-reveal="mask"] { animation: mask-in var(--dur-l) var(--ease-mech) 160ms both; }
.js :is(.hero, .hero-int) h1[data-words] .w > span { transition-delay: calc(160ms + var(--d, 0s)); }
.js :is(.hero, .hero-int) .lede { animation: rise-in var(--dur-l) var(--ease-out) 260ms both; }
.js :is(.hero, .hero-int) .hero-ctas { animation: rise-in var(--dur-l) var(--ease-out) 340ms both; }
.js :is(.hero-int-aside, .hero-globe) { animation: fade-in var(--dur-l) var(--ease-out) 500ms both; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: none; }
}

@keyframes mask-in {
  from { clip-path: inset(100% 0 -100% 0); transform: translateY(0.35em); }
  to { clip-path: inset(0 0 -0.2em 0); transform: none; }
}

/* ---------- Responsive (7.3: 640 / 860 / 900 / 1024 / 1200) ---------- */

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  /* the Reach column holds a mailto plus its 44 px copy button (about 193 px): give it a floor */
  .footer-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) minmax(12.5rem, 1.2fr); }
  .footer-brand { grid-column: auto; }
  .nav-card-inner { grid-template-columns: 1.5fr 1fr; }
  .nav-card-note { display: block; }
}

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile-featured { grid-column: span 2; grid-row: span 1; }
  .hero { min-height: auto; padding-top: 8rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-globe { max-width: 460px; }
}

@media (min-width: 861px) {
  .mobile-menu { display: none; }
}

@media (max-width: 860px) {
  .nav-links, .nav-cta, .nav-card { display: none; }
  .nav-burger { display: block; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .tile-featured { grid-column: span 1; }
  .tile-featured-inner { padding: 1.6rem; }
  .product-pair { grid-template-columns: 1fr; }
  .hero { padding-top: 7rem; }
  .hero-globe { max-width: 340px; }
  .strip-track { gap: 3rem; }
  .strip-set { gap: 3rem; }
  .strip-set li::after { right: -1.5rem; }
}

/* ---------- Reduced motion: media query (no-JS) and html[data-motion] ---------- */

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  :root .strip-track { animation: none; }
  :root .strip-toggle { display: none; }
  :root [data-reveal], :root [data-reveal="mask"], :root [data-reveal="fill"] {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
  :root svg[data-reveal="draw"] :is(path, line, polyline),
  :root :is(path, line, polyline)[data-reveal="draw"] { stroke-dashoffset: 0; transition: none; }
  :root svg[data-reveal="draw"] circle { opacity: 1; transition: none; }
  :root .u[data-reveal="draw"] { background-size: 100% var(--uw); transition: none; }
  :root [data-words] .w > span { transform: none; transition: none; }
  :root :is(.nav-wrap, .hero, .hero-int, .hero-int-aside, .hero-globe),
  :root :is(.hero, .hero-int) *,
  :root.js :is(.hero, .hero-int) :is(.crumbs, .eyebrow, h1, .lede, .hero-ctas),
  :root.js :is(.nav-wrap, .hero-int-aside, .hero-globe) { animation: none; }
  :root :is(.btn, .btn-orb, .btn-orb i, .nav-carriage, .nav-chevron i, .nav-card, .mobile-menu > *,
    .nav-burger span, .brand-mark, .brand-name, .tile, .ai-row, .product-card, .tile-link i, .tile-featured,
    .product-flagship, .u, .footer-links a, .strip-track a, .nav-links a, .menu-chevron) { transition: none; animation: none; }
  :root :is(.btn-primary:hover .btn-orb, .brand:hover .brand-mark, .tile:hover, .ai-row:hover, .product-card:hover, .tile-link:hover i) { transform: none; }
  :root .spot::after { display: none; }
}

html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] .strip-track { animation: none; }
html[data-motion="reduce"] .strip-toggle { display: none; }
html[data-motion="reduce"] [data-reveal], html[data-motion="reduce"] [data-reveal="mask"], html[data-motion="reduce"] [data-reveal="fill"] {
  opacity: 1; transform: none; clip-path: none; transition: none;
}
html[data-motion="reduce"] svg[data-reveal="draw"] :is(path, line, polyline),
html[data-motion="reduce"] :is(path, line, polyline)[data-reveal="draw"] { stroke-dashoffset: 0; transition: none; }
html[data-motion="reduce"] svg[data-reveal="draw"] circle { opacity: 1; transition: none; }
html[data-motion="reduce"] .u[data-reveal="draw"] { background-size: 100% var(--uw); transition: none; }
html[data-motion="reduce"] [data-words] .w > span { transform: none; transition: none; }
html[data-motion="reduce"] :is(.nav-wrap, .hero, .hero-int, .hero-int-aside, .hero-globe),
html[data-motion="reduce"] :is(.hero, .hero-int) *,
html[data-motion="reduce"].js :is(.hero, .hero-int) :is(.crumbs, .eyebrow, h1, .lede, .hero-ctas),
html[data-motion="reduce"].js :is(.nav-wrap, .hero-int-aside, .hero-globe) { animation: none; }
html[data-motion="reduce"] :is(.btn, .btn-orb, .btn-orb i, .nav-carriage, .nav-chevron i, .nav-card, .mobile-menu > *,
  .nav-burger span, .brand-mark, .brand-name, .tile, .ai-row, .product-card, .tile-link i, .tile-featured,
  .product-flagship, .u, .footer-links a, .strip-track a, .nav-links a, .menu-chevron) { transition: none; animation: none; }
html[data-motion="reduce"] :is(.btn-primary:hover .btn-orb, .brand:hover .brand-mark, .tile:hover, .ai-row:hover, .product-card:hover, .tile-link:hover i) { transform: none; }
html[data-motion="reduce"] .spot::after { display: none; }