/* Jashtrix — light theme in the brand colours (Jashtrix_Logo_04-05-2026-Final.pdf).
   Cream ground; the logo's navy #110F40 for text and every dark surface (no
   black anywhere); electric blue #00A8DC to vibrant teal #00E4B4 as the accent.
   Contrast (WCAG): navy on ground 15.3:1 · muted on ground 4.9:1 ·
   accent-ink on ground 4.9:1 · navy on blue 6.5:1 · navy on teal 10.7:1 ·
   cream on navy 15.3:1 · muted-dark on navy 7.7:1. The bright blue and teal
   are never used for small text on cream; accent-ink is. */

:root {
  --bg: #F3EDE6;
  --bg-2: #EBE3D9;
  --paper: #FBF7F2;
  --stage: #FEFEFE;       /* the logo animation's own white, for the loader */
  --ink: #110F40;         /* logo navy: text, dark cards, the contact/footer panel */
  --ink-2: #1B1957;       /* raised surface on navy (form fields) */
  --muted: #6E655C;
  --muted-dark: #A9A8D0;
  --accent: #00A8DC;      /* brand electric blue */
  --accent-2: #00E4B4;    /* brand vibrant teal */
  --grad: linear-gradient(100deg, var(--accent), var(--accent-2));
  --accent-ink: #00739F;  /* the blue, deep enough for text on cream */
  --line: rgba(21, 18, 15, .12);
  --line-dark: rgba(243, 237, 230, .16);

  --sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;

  --pad: clamp(16px, 4vw, 56px);
  --radius: 28px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* Stand-in fonts sized to the web fonts (Arial / Times / Courier, or their
   metric twins on Linux and ChromeOS), so text keeps its place when Geist and
   Instrument Serif land: the swap was the page's biggest layout shift.
   Numbers measured against the real fonts (size-adjust = width ratio). */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 450; size-adjust: 102.19%; ascent-override: 98.84%; descent-override: 29.36%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo");
  font-weight: 451 900; size-adjust: 104.66%; ascent-override: 96.51%; descent-override: 28.67%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Courier New"), local("Liberation Mono"), local("Cousine");
  size-adjust: 99.98%; ascent-override: 101.02%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Tinos Italic");
  font-style: italic; size-adjust: 87.36%; ascent-override: 113.32%; descent-override: 35.48%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* WebP wrappers: the img inside lays out as if the wrapper weren't there */
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brandmark { display: block; aspect-ratio: 448.5 / 104; height: auto; }

/* ---------- preloader (from the previous site) ----------
   Two white panels with a thick rule and a hairline, a stroked ring and the
   X. They part onto the logo animation, already playing on the same white;
   its logo then shrinks into the nav logo's exact spot (js: initLoader). */
.intro { position: fixed; inset: 0; z-index: 1150; background: var(--stage); overflow: hidden; }
/* The video sits in a frame that moves by its real left/top/width/height
   (js: initLoader), never by a transform: a transformed video gets its edges
   blended into grey hairlines on the right and bottom. The frame's white
   inner border covers the video's edge pixels at any size as a second guard;
   the video's own margins are plain white, so it is invisible. */
/* Starting box = what placeIntroVideo() sets (90% of the screen, 16:9, centred),
   so the frame doesn't jump (a layout shift) when the script places it. */
.intro__frame {
  position: absolute; overflow: hidden;
  width: min(90vw, 160vh); height: min(50.625vw, 90vh);
  left: calc((100vw - min(90vw, 160vh)) / 2); top: calc((100vh - min(50.625vw, 90vh)) / 2);
}
.intro__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--stage); pointer-events: none; }
.intro__video { display: block; width: 100%; height: 100%; max-width: none; background: var(--stage); }
.loader { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.loader__panel { position: relative; width: 50%; height: 100%; background: var(--stage); }
.loader__pin { position: absolute; inset: 0; overflow: hidden; }
.loader__rule { position: absolute; inset: 0 0 0 auto; width: 4px; background: var(--ink); }
.loader__panel--r .loader__rule { inset: 0 auto 0 0; }
.loader__hair { position: absolute; inset: 0 0 0 auto; width: 1px; background: var(--ink); }
.loader__panel--r .loader__hair { inset: 0 auto 0 0; }
.loader__logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.loader__mark { position: relative; width: 92px; height: 92px; }
.loader__ringsvg { position: absolute; inset: 0; }
.loader__ring { fill: none; stroke: var(--ink); stroke-width: 1; }
.loader__glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.loader__x { width: 34px; height: 35px; }
/* Safety net: if the script never runs, the cover still gets out of the way. */
.loader, .intro { animation: loader-bail 0s 12s forwards; }
@keyframes loader-bail { to { visibility: hidden; } }
html.is-locked, html.is-locked body { overflow: hidden; }
html.is-locked { scrollbar-gutter: stable; } /* keep the scrollbar's space: losing it shifted everything sideways */

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.eyebrow {
  font: 500 .78rem/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.h2 {
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  font-weight: 500; line-height: 1; letter-spacing: -.04em;
  max-width: 16ch;
}
em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em;
}
.h2 em, .hero__title em, .statement em { color: var(--accent-ink); }
.dark em { color: var(--accent-2); }
/* SplitText wraps each revealed line in a clipping box exactly one line tall,
   which cuts the tails off g, p and y at these tight line-heights. Extend
   each box downward (and give the space back) so descenders show. */
[data-split] > div, [data-hero-title] > div { padding-bottom: .18em; margin-bottom: -.18em; }
/* ...and once a heading has revealed, nothing clips it at all (js: revealed). */
.is-revealed > div { overflow: visible !important; }
.sec-head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.sec-head--row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1em 1.6em; border-radius: 999px;
  font-weight: 500; font-size: 1rem; line-height: 1; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  will-change: transform;
}
.btn--sm { padding: .8em 1.25em; font-size: .9rem; }
.btn--accent { background: var(--grad); color: var(--ink); }
.btn--accent:hover { background: var(--ink); color: var(--bg); }
.dark .btn--accent:hover { background: var(--bg); color: var(--ink); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--bg); }

/* ---------- progress + nav ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 14px var(--pad);
  transition: transform .45s var(--ease), background-color .3s;
}
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { background: rgba(243, 237, 230, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.on-dark { color: var(--bg); }
.nav.on-dark.is-solid { background: rgba(17, 15, 64, .82); }
.nav__logo { display: block; width: clamp(110px, 10vw, 140px); color: currentColor; }
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); font-size: .95rem; }
.nav__links a { text-decoration: none; position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- hero ---------- */
.hero { position: relative; height: 620vh; } /* the scroll story in hero.js plays over this length */
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
}
.hero__gl, .hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fallback { display: none; left: 56%; width: 36%; height: 62%; top: 19%; }
.no-gl .hero__fallback { display: block; }
/* no 3D (no graphics chip): one screen with the static X, no scroll story */
.no-gl .hero { height: auto; }
.no-gl .hero__stage { position: relative; }
.no-gl .xfield { display: none; }
.hero__copy { position: relative; z-index: 2; align-self: center; padding-top: 72px; }
.hero__title {
  font-size: clamp(2.6rem, 6.4vw, 6.4rem);
  font-weight: 500; line-height: .96; letter-spacing: -.045em;
  max-width: 13ch;
}
.hero__sub { max-width: min(34rem, 46vw); margin-top: 1.75rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__foot {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem;
  padding-bottom: 28px;
  font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.hero__stack { text-align: center; }
.hero__scroll { justify-self: end; display: flex; align-items: center; gap: .75rem; }
.hero__scroll i { position: relative; width: 1px; height: 40px; background: var(--line); overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  animation: drip 1.8s var(--ease) infinite;
}
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* the particle X (js/xfield.js): behind the hero, then in front of the next section as it falls away */
.xfield { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.xfield.is-front { z-index: 3; }

/* captions for the hero's scroll story; main.js fades each one in and out */
.story { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.story__beat {
  position: absolute; inset: 0 auto 0 var(--pad); width: min(30rem, 31vw);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
}
/* each caption sits where the fibres are not (data-side, set per caption) */
.story__beat[data-side="right"] { inset: 0 var(--pad) 0 auto; align-items: flex-end; text-align: right; }
/* centre: inside the fibres' loop, a little above the middle (margins, not a transform: GSAP animates the transform) */
.story__beat[data-side="center"] { inset: 0; margin-inline: auto; align-items: center; text-align: center; justify-content: flex-start; padding-top: 32vh; }
/* low: under the rope while it runs across the middle */
.story__beat[data-v="low"] { justify-content: flex-end; padding-bottom: 11vh; }
.story__no { font: 500 .78rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 1rem; }
.story__line { font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 500; line-height: 1.02; letter-spacing: -.04em; color: var(--ink); }
.story__line em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--accent-ink); }
.no-gl .story { display: none; }

/* ---------- services ---------- */
.services { position: relative; z-index: 2; background: var(--bg); padding-block: clamp(5rem, 12vw, 10rem); }
.statement {
  font-size: clamp(1.8rem, 4.2vw, 3.8rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 500;
  max-width: 22ch; margin-bottom: clamp(5rem, 14vw, 12rem);
}
.stack { display: grid; gap: 3vh; }
.svc {
  position: sticky; top: calc(96px + var(--i, 0) * 14px);
  display: grid; grid-template-columns: 7rem 1fr; gap: 2rem; align-items: start;
  padding: clamp(1.75rem, 3.5vw, 3.5rem);
  border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
  transform-origin: 50% 0;
}
/* Covered cards dim through this layer, not opacity: a see-through card
   would show the cards stacked beneath it. */
.svc::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: var(--ink); opacity: var(--dim, 0); pointer-events: none;
}
.svc:nth-child(even) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.svc:nth-child(even)::after { background: #05041A; }
.svc__no { font: 500 clamp(2.5rem, 5vw, 4.5rem)/1 var(--mono); color: var(--accent-ink); letter-spacing: -.06em; }
.svc:nth-child(even) .svc__no { color: var(--accent); }
.svc h3 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.svc__body p { max-width: 36rem; margin-top: 1.25rem; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--muted); }
.svc:nth-child(even) .svc__body p { color: var(--muted-dark); }
.svc ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.svc li, .chips li {
  font: 500 .8rem/1 var(--mono); padding: .7em 1em; border-radius: 999px;
  border: 1px solid var(--line);
}
.svc:nth-child(even) li { border-color: var(--line-dark); }

/* ---------- work ---------- */
.work { position: relative; z-index: 2; background: var(--bg-2); }
.work__pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 88px 40px; overflow: hidden; }
.work__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.work__head .h2 { max-width: none; }
.work__track { display: flex; gap: clamp(1rem, 2vw, 2rem); padding-inline: var(--pad); width: max-content; }
.case {
  flex: none; width: min(86vw, 1240px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: min(58vh, 620px);
}
.case__meta { display: flex; gap: .75rem; font: 500 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case__meta span { color: var(--accent-ink); }
.case h3 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; margin-top: 1rem; }
.case__problem { margin-top: 1rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 30rem; }
.case__built { margin-top: 1.5rem; display: grid; gap: .5rem; }
.case__built li { padding-left: 1.4rem; position: relative; }
.case__built li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--grad); }
.case__stat { margin-top: 1.75rem; display: flex; align-items: baseline; gap: .75rem; color: var(--muted); font-size: .95rem; }
.case__stat b { font: 500 clamp(2.4rem, 4vw, 3.6rem)/1 var(--sans); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.case__visual { position: relative; display: grid; place-items: center; height: 100%; min-height: 0; }
.browser { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(21, 18, 15, .35); width: 100%; }
.browser__bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--bg-2); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(21, 18, 15, .18); }
.browser img { width: 100%; }
.phone {
  height: min(54vh, 560px); aspect-ratio: 780 / 1688;
  border-radius: 36px; border: 10px solid var(--ink); overflow: hidden; background: #fff;
  box-shadow: 0 40px 70px -35px rgba(21, 18, 15, .5);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case--end { grid-template-columns: 1fr; justify-items: start; align-content: center; gap: 2rem; width: min(60vw, 760px); background: var(--grad); border-color: transparent; }
.case--end .h2 em { color: var(--ink); }
.case--end .btn--accent { background: var(--ink); color: var(--bg); }
.case--end .btn--accent:hover { background: var(--bg); color: var(--ink); }

/* auction mock for PursePlay (no product screenshot yet) */
.bid { width: min(100%, 420px); padding: 2rem; border-radius: 22px; background: var(--ink); color: var(--bg); position: relative; overflow: hidden; }
.bid__live { display: flex; align-items: center; gap: .5rem; font: 500 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.bid__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.bid__lot { margin-top: 1.5rem; font-size: 1.1rem; }
.bid__label { margin-top: 1.5rem; font: 500 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dark); }
.bid__amt { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bid__bar { height: 4px; border-radius: 4px; background: var(--line-dark); margin-top: 1.5rem; overflow: hidden; }
.bid__bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.bid__sold {
  position: absolute; right: 1.5rem; top: 1.5rem; padding: .4em .8em; border: 2px solid var(--accent-2); border-radius: 8px;
  font: 600 1rem/1 var(--mono); letter-spacing: .1em; color: var(--accent-2); transform: rotate(-8deg) scale(1.6); opacity: 0;
}

/* ---------- marquees ---------- */
.industries { position: relative; z-index: 2; background: var(--bg); padding-block: clamp(4rem, 10vw, 8rem); }
/* Clip sideways only: overflow: hidden would also cut the descenders of the
   big industry words (y, g, p). Older browsers fall back to hidden. */
.marquee { overflow: hidden; overflow: clip visible; white-space: nowrap; }
.marquee__row { display: inline-flex; align-items: center; will-change: transform; }
.marquee--big .marquee__row { font-size: clamp(3rem, 9vw, 8.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.1; }
.marquee--big span { padding-inline: .3em; }
.marquee--big i { font-style: normal; color: var(--accent); font-size: .5em; }
.tech { position: relative; z-index: 2; background: var(--bg); border-block: 1px solid var(--line); }
.marquee--tech .marquee__row { padding-block: 1.6rem; font: 500 clamp(1rem, 1.6vw, 1.35rem)/1 var(--mono); }
.marquee--tech span { padding-inline: 1.6em; position: relative; }
.marquee--tech span::after { content: "/"; position: absolute; right: -.3em; color: var(--accent); }

/* ---------- process ---------- */
.process { position: relative; z-index: 2; background: var(--bg); padding-block: clamp(5rem, 12vw, 10rem); }
.steps { position: relative; max-width: 980px; margin-left: auto; }
.steps__line { position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.steps__line i { display: block; height: 100%; background: linear-gradient(180deg, var(--accent), var(--accent-2)); transform-origin: 50% 0; transform: scaleY(0); }
.step { position: relative; display: grid; grid-template-columns: 24px 4rem 1fr; gap: 1.5rem; align-items: baseline; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.step + .step { border-top: 1px solid var(--line); }
.step__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); align-self: center; position: relative; z-index: 1; transition: background .3s, border-color .3s; }
.step.is-on .step__dot { background: var(--grad); border-color: transparent; }
.step__no { font: 500 .9rem/1 var(--mono); color: var(--muted); }
.step h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; transition: color .3s; }
.step p { margin-top: .5rem; color: var(--muted); max-width: 36rem; }
.step:not(.is-on) h3 { color: var(--muted); }
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 7vw, 6rem); }
.model { padding: 2rem; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); }
.model h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; }
.model p { margin-top: .6rem; color: var(--muted); }

/* ---------- testimonials ---------- */
.quote { position: relative; z-index: 2; background: var(--bg); padding-block: clamp(5rem, 12vw, 10rem); }
.quote__text { font-size: clamp(1.8rem, 4vw, 3.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; max-width: 24ch; }
.quote footer { margin-top: 2rem; color: var(--muted); }
.quote footer b { color: var(--ink); font-weight: 500; }

/* ---------- about ---------- */
.about { position: relative; z-index: 2; background: var(--bg); padding-block: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 3vw, 2.5rem); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.about__copy p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--muted); }
.about__copy p + p { margin-top: 1.25rem; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 7vw, 6rem); }
.value { padding: 2rem 1.75rem; border-top: 2px solid var(--ink); }
.value h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; }
.value p { margin-top: .5rem; color: var(--muted); }

/* ---------- faq ---------- */
.faq { position: relative; z-index: 2; background: var(--bg); padding-block: clamp(3rem, 6vw, 5rem) clamp(8rem, 16vw, 14rem); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 6vw, 6rem); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding-block: 1.5rem; font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); font: 400 1.2rem/1 var(--mono); transition: transform .35s var(--ease), background .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--grad); border-color: transparent; }
.faq details p { padding-bottom: 1.5rem; color: var(--muted); max-width: 40rem; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- dark panel: contact + footer ---------- */
.dark {
  position: relative; z-index: 3;
  background: var(--ink); color: var(--bg);
  border-radius: 48px 48px 0 0; margin-top: -48px;
}
.dark .eyebrow { color: var(--muted-dark); }
.contact { padding-block: clamp(6rem, 12vw, 10rem) clamp(4rem, 8vw, 6rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); }
.contact .h2 { max-width: 12ch; }
.contact__lead { margin-top: 1.5rem; color: var(--muted-dark); font-size: 1.15rem; }
.contact__ways { margin-top: 2.5rem; border-top: 1px solid var(--line-dark); }
.contact__ways li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line-dark); flex-wrap: wrap; }
.contact__ways span { font: 500 .78rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dark); }
.contact__ways a { text-decoration: none; overflow-wrap: anywhere; }
.contact__ways a:hover { color: var(--accent-2); }

.cform { display: grid; gap: 1.25rem; align-content: start; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cform__field { display: grid; gap: .5rem; }
.cform label { font: 500 .78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dark); }
.cform .opt { text-transform: none; letter-spacing: 0; }
.cform input, .cform select, .cform textarea {
  width: 100%; font-size: 16px; /* iOS zooms on focus under 16px */
  padding: .95rem 1.1rem; border-radius: 14px;
  background: var(--ink-2); border: 1px solid var(--line-dark); color: var(--bg);
  transition: border-color .2s, background-color .2s;
}
.cform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted-dark) 50%), linear-gradient(135deg, var(--muted-dark) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.cform select option { color: var(--ink); background: var(--bg); }
.cform textarea { resize: vertical; min-height: 7.5rem; }
.cform input::placeholder, .cform textarea::placeholder { color: #8E8DB8; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--accent); background: #232070; }
.cform__field.is-bad input, .cform__field.is-bad select, .cform__field.is-bad textarea { border-color: #ff8a65; }
.cform__err { min-height: 0; font-size: .85rem; color: #ff8a65; }
.cform__err:empty { display: none; }
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform__submit { justify-self: start; margin-top: .5rem; }
.cform__submit[disabled] { opacity: .6; cursor: progress; }
.cform__note { font-size: .85rem; color: var(--muted-dark); }
.cform__status { font-size: .95rem; }
.cform__status:empty { display: none; }
.cform__status.is-good { color: #9be7a6; }
.cform__status.is-bad { color: #ff8a65; }

.foot { padding-top: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-top: 3rem; border-top: 1px solid var(--line-dark); }
.foot__brand .brandmark { width: min(260px, 70%); color: var(--bg); }
.foot__brand p { margin-top: 1rem; color: var(--muted-dark); }
.foot__col { display: grid; gap: .6rem; align-content: start; }
.foot__col h3 { font: 500 .78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dark); margin-bottom: .4rem; }
.foot__col a { text-decoration: none; width: fit-content; }
.foot__col a:hover { color: var(--accent-2); }
/* The logo's wordmark, full width: cream letters (currentColor), gradient X. */
.foot__word {
  display: block; width: calc(100% - 2 * var(--pad)); height: auto; margin: clamp(3rem, 6vw, 5rem) auto 0;
  color: var(--bg); transform-origin: 50% 100%;
}
.foot__legal a { color: inherit; }
.foot__legal a:hover, .foot__cookies:hover { color: var(--accent-2); }
.foot__cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.foot__legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.5rem; padding-right: 96px; /* clear of the WhatsApp button */ font-size: .85rem; color: var(--muted-dark); }

/* ---------- floating WhatsApp ---------- */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 12px 30px -10px rgba(21, 18, 15, .5);
  transition: transform .3s var(--ease), background .3s;
}
.wa:hover, .wa.on-dark { background: var(--grad); color: var(--ink); }
.wa:hover { transform: scale(1.08); }
.wa svg { width: 26px; height: 26px; fill: currentColor; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .svc { grid-template-columns: 1fr; gap: 1rem; }
  .about__grid, .faq__grid, .contact__grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .models { grid-template-columns: 1fr; }

  /* Work stacks vertically: no pin below 1025px. */
  .work__pin { padding-block: clamp(5rem, 12vw, 8rem); }
  .work__track { flex-direction: column; width: auto; }
  .case, .case--end { width: auto; grid-template-columns: 1fr; min-height: 0; }
  .case__visual { order: -1; }
  .phone { height: 60vh; max-height: 520px; }
}
@media (max-width: 768px) {
  .hero { height: 480vh; }
  .hero__stage { grid-template-rows: 1fr auto; }
  .hero__copy { align-self: end; padding-top: 0; padding-bottom: 1rem; }
  .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .hero__sub { max-width: none; margin-top: 1.1rem; font-size: 1rem; }
  .hero__cta { margin-top: 1.5rem; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero__foot { grid-template-columns: 1fr; padding-bottom: 20px; }
  .hero__stack, .hero__scroll { display: none; }
  .hero__fallback { left: 15%; width: 70%; top: 10%; height: 29%; }
  .story__beat, .story__beat[data-side] { inset: auto var(--pad) 10vh var(--pad); width: auto; display: block; }
  .story__beat[data-side="center"] { text-align: center; padding-top: 0; }
  .story__beat[data-v="low"] { padding-bottom: 0; }
  .story__line { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .nav { padding-block: 10px; }
  .svc { top: calc(76px + var(--i, 0) * 10px); }
  .cform__row { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .dark { border-radius: 28px 28px 0 0; margin-top: -28px; }
  .wa { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader, .intro { display: none; }
  .hero { height: auto; }
  .hero__stage { position: relative; }
  .xfield, .story { display: none; }
  .hero__scroll i::after, .bid__live i { animation: none; }
  .faq details::details-content { transition: none; }
}