/* ===========================================================================
   OSTENDIC — MOTION LAYER
   Premium depth, scroll-driven systems, infinite trust deck.
   Everything here degrades to a readable static state without JS and
   collapses entirely under prefers-reduced-motion (last block).
   =========================================================================== */

/* ---------- 1. CTA with physical depth ---------- */
.btn {
  position: relative;
  transform: translateY(0);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease),
              background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn--primary {
  box-shadow:
    0 1px 1px rgba(17,19,20,.18),
    0 6px 12px -4px rgba(17,19,20,.28),
    0 16px 28px -12px rgba(17,19,20,.34),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 2px rgba(17,19,20,.16),
    0 10px 20px -6px rgba(17,19,20,.30),
    0 28px 46px -16px rgba(17,19,20,.40),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:active {
  transform: translateY(1px);
  transition-duration: .09s;
  box-shadow:
    0 1px 1px rgba(17,19,20,.20),
    0 3px 6px -2px rgba(17,19,20,.26),
    0 6px 12px -6px rgba(17,19,20,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.btn--ghost {
  background: var(--bg-alt);
  box-shadow:
    0 1px 1px rgba(17,19,20,.05),
    0 4px 10px -4px rgba(17,19,20,.12),
    0 14px 24px -14px rgba(17,19,20,.18);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 3px rgba(17,19,20,.06),
    0 10px 18px -6px rgba(17,19,20,.16),
    0 24px 40px -18px rgba(17,19,20,.24);
}
.btn--ghost:active { transform: translateY(1px); transition-duration: .09s; }
.btn .btn__ico { transition: transform .34s var(--ease), background .22s var(--ease); }
.btn:hover .btn__ico { transform: translate(2px,-2px); }
.dark .btn--ghost { background: rgba(255,255,255,.05); box-shadow: none; }
.btn__lead { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.btn__lead svg { width: 100%; height: 100%; }

/* ---------- 1b. founder portrait crop ----------
   assets/harsh-dubey.jpg is an 800x800 three-quarter shot with the head in
   the upper third, so object-fit:cover in a square box crops nothing and
   renders the whole torso at thumbnail size. These numbers frame the head
   instead: a 420px square of the source centred on the face, scaled to fill.
   One rule, used everywhere the face appears small. */
.face { position: relative; overflow: hidden; }
.face img {
  position: absolute; left: -43%; top: -21%;
  width: 190%; height: 190%; max-width: none;
  object-fit: cover;
}

/* CTA with the founder's face in the badge slot. Same pill and the same
   badge geometry as .btn__ico — the portrait simply fills it, inset from the
   right edge by the pill's own padding so it reads as part of the component
   rather than an avatar parked next to a button. */
.btn__ava {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.34), 0 2px 8px -2px rgba(0,0,0,.5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--ava { padding-right: 6px; }
.btn--ava:hover .btn__ava { transform: scale(1.06); box-shadow: 0 0 0 1.5px rgba(255,255,255,.5), 0 4px 12px -2px rgba(0,0,0,.55); }
/* on a light pill the ring has to darken instead */
.btn--ghost .btn__ava { box-shadow: 0 0 0 1.5px var(--line-2), 0 2px 8px -3px rgba(17,19,20,.35); }

/* ---------- 1c. hero atmosphere ----------
   The hero ground stays light and the type stays near-black, so the clip sits
   under a scrim that is almost solid behind the headline and thins towards the
   edges. The vortex reads as movement around the type rather than behind it.
   Everything is declarative: one <video> on the browser's own loop, no JS,
   no scroll coupling, nothing repainting per frame. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: paint; }
.hero__media {
  position: absolute; inset: 0;
  background: url("/assets/hero-vortex-poster.jpg") center 44% / cover no-repeat;
  /* tuned on the rendered page: .27 was invisible, .50 started eating the lead
     paragraph's contrast. .42 shows the swirl and still reads as backdrop. */
  opacity: .42;
  /* pulled back towards the house palette: the source is a vivid green */
  filter: saturate(.72) contrast(1.04);
}
.hero__vid { width: 100%; height: 100%; object-fit: cover; object-position: center 44%;
  display: block; pointer-events: none; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    /* an ellipse that hugs the headline block, falling away towards the edges
       so the vortex is strongest in the periphery and weakest under the type */
    radial-gradient(72% 52% at 50% 39%,
      var(--bg) 0%, rgba(242,242,240,.95) 30%,
      rgba(242,242,240,.5) 64%, rgba(242,242,240,0) 100%),
    /* blends the clip into the header above and the logo deck below */
    linear-gradient(to bottom,
      rgba(242,242,240,.66) 0%, rgba(242,242,240,0) 20%,
      rgba(242,242,240,0) 56%, var(--bg) 100%);
}

/* ---------- 2. client / logo deck ----------
   Two rows of substantial cards. The roster is larger than the grid, so the
   cards flip to cycle the rest through rather than growing more rows.

   The flip is driven by a timer in motion.js, not by scroll position: the
   wheel is never listened to and the page is never held. Depth on entry is
   an IntersectionObserver plus a CSS transition that runs once per card. */
/* The deck sits on its own atmospheric ground. The clip is a bright painterly
   sky, so it is pushed under a deep veil rather than laid over the light page
   ground: white cards on a dark, moving field separate far better than white
   cards on a pale one. The cards themselves are untouched — still opaque,
   still bordered, still the brightest thing in the section. */
.logowall { position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg-dark); }
.logowall > .wrap { position: relative; z-index: 1; }
.lw__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: paint; }
/* Framed on the swirl rather than the horizon: the source is a painterly sky
   over a sea and a hillside, and the lower third reads as a literal landscape
   that competes with the cards. 22% keeps the vortex itself behind the grid. */
.lw__media { position: absolute; inset: 0;
  background: url("/assets/clients-vortex-poster.jpg") center 22% / cover no-repeat;
  /* Re-tuned after review: .46 let the vortex dominate the section and compete
     with the cards. Re-rendered at .08/.12/.16/.20 — .08 is flat black, .20
     reads as a photograph again. .16 is a texture you notice on a second look
     and never on the first, which is the intent. */
  opacity: .16; filter: saturate(.6) contrast(1.02); }
.lw__vid { width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  display: block; pointer-events: none; }
/* The veil lightened with the clip. A heavy veil over a faint video only
   yields flat black; this one just settles the top and bottom edges so the
   section still meets its neighbours cleanly. */
.lw__veil { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,15,16,.55) 0%, rgba(14,15,16,.2) 34%,
    rgba(14,15,16,.26) 70%, rgba(14,15,16,.7) 100%); }

/* section type inverts to sit on the darkened ground */
.logowall .lw__lede { color: var(--ink-inv); }
.lw__head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.lw__lede { font-size: clamp(1.08rem,.92rem + .78vw,1.55rem); line-height: 1.34;
  letter-spacing: -.022em; color: var(--ink); max-width: 38ch; text-wrap: balance; }

.lw { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(10px,1.1vw,16px);
  perspective: 1500px; }

/* the card is the box the grid measures; the slot inside it is what turns */
.lw__card { position: relative; min-height: clamp(112px,10vw,152px);
  perspective: 1100px; transition: transform .45s var(--ease); }
.lw__card:hover { transform: translateY(-3px); }
.lw__slot { position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .92s var(--ease); }
.lw__card.is-flipped .lw__slot { transform: rotateX(180deg); }

.lw__f, .lw__b {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 18px 14px; border-radius: var(--r-card);
  background: var(--bg-alt); border: 1px solid var(--line);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(17,19,20,.035), 0 14px 28px -22px rgba(17,19,20,.3);
  transition: box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.lw__b { transform: rotateX(180deg); }
.lw__card:hover .lw__f, .lw__card:hover .lw__b {
  box-shadow: var(--shadow-lift); border-color: var(--line-2); }
/* Client brands carry a quiet accent that sets them apart from the team-type
   cards beside them. It keys off the lockup, not the slot,
   because a client can be dealt into any card as the deck cycles. */
.lw__f:has(.is-client), .lw__b:has(.is-client) {
  box-shadow: inset 0 0 0 2px var(--accent-soft),
    0 1px 2px rgba(17,19,20,.035), 0 14px 28px -22px rgba(17,19,20,.3); }
.lw__logo.is-client .lw__mark { color: var(--accent); }

.lw__logo { display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink); text-align: center; }
.lw__mark { width: clamp(24px,2.3vw,32px); height: clamp(24px,2.3vw,32px); }
.lw__mark svg { width: 100%; height: 100%; }
.lw__img { width: auto; max-height: 36px; object-fit: contain; }
/* one wall, several wordmark treatments — a real logo wall is never uniform */
.lw__word { font-size: clamp(.9rem,.82rem + .3vw,1.06rem); font-weight: 600;
  letter-spacing: -.024em; line-height: 1.15; }
.lw__word--caps { text-transform: uppercase; font-weight: 500;
  font-size: clamp(.72rem,.66rem + .2vw,.84rem); letter-spacing: .17em; }
.lw__word--serif { font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.02rem,.9rem + .42vw,1.24rem); letter-spacing: -.008em; }
.lw__word--tight { font-weight: 700; letter-spacing: -.052em; }
/* team-type cards: a plain descriptor, never a wordmark */
.lw__logo--team .lw__mark { color: var(--ink-2); }
.lw__logo--team .lw__word { font-weight: 500; letter-spacing: -.02em; }

/* depth on entry — staggered per card by motion.js, then the page is left
   alone. No scroll listener drives this, so the wheel is never taxed. */
.js-wall .lw__card { opacity: 0; transform: translateY(30px) scale(.96) rotateX(11deg); }
.js-wall .lw__card.in { opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .72s var(--ease); }

/* ---------- 3. expertise + capability blocks ---------- */
.xpt { display: grid; grid-template-columns: 1.05fr .74fr; gap: clamp(28px,5vw,88px);
  align-items: start; padding-bottom: clamp(46px,5.6vw,86px); }
.xpt__list { display: flex; flex-direction: column; padding-top: 8px; }
.xpt__list li { display: flex; align-items: center; gap: 13px; padding: 17px 2px;
  border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.xpt__list li:first-child { border-top: 1px solid var(--line); }
.xpt__list svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }

.caps { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); }
.cap { position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; border-bottom: 1px solid var(--line);
  padding: clamp(46px,5.6vw,88px) clamp(20px,3.4vw,60px); }
.cap:nth-child(odd) { border-right: 1px solid var(--line); }
.cap__n { position: absolute; top: clamp(20px,2.4vw,32px); left: clamp(20px,2.4vw,32px);
  font-size: var(--t-xs); letter-spacing: .1em; color: var(--ink-3); }
.cap__eye { display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent);
  font-size: var(--t-xs); line-height: 1.3; }
.cap__i { width: clamp(36px,3.6vw,48px); height: clamp(36px,3.6vw,48px);
  color: var(--ink); margin-top: 4px; }
.cap__i svg { width: 100%; height: 100%; stroke-width: 1.15; }
/* the paint-server <defs> renders nothing of its own */
.cap__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Each icon takes a muted two-stop gradient on its stroke. Shape, weight and
   box are untouched — only the paint changes. If a browser cannot resolve the
   paint server it falls back to `color`, which is still var(--ink). */
.cap:nth-child(1) .cap__i svg { stroke: url(#capA); }
.cap:nth-child(2) .cap__i svg { stroke: url(#capB); }
.cap:nth-child(3) .cap__i svg { stroke: url(#capC); }
.cap:nth-child(4) .cap__i svg { stroke: url(#capD); }
/* the eyebrow pill above each icon picks up the same hue at low saturation */
.cap:nth-child(1) .cap__eye { background: #ECEAF7; color: #4E56A6; }
.cap:nth-child(2) .cap__eye { background: #E5EFF4; color: #2B617F; }
.cap:nth-child(3) .cap__eye { background: #F6EBE2; color: #96522B; }
.cap:nth-child(4) .cap__eye { background: var(--accent-soft); color: var(--accent); }
.cap__t { font-size: clamp(1.3rem,1.02rem + 1.05vw,1.9rem); letter-spacing: -.03em; line-height: 1.15; }
.cap__d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; max-width: 34ch; }
.cap__link { margin-top: 2px; }

/* ---------- 3b. founder signature (deliberately small) ---------- */
.fsig { display: grid; grid-template-columns: minmax(0,.58fr) minmax(0,1fr);
  gap: clamp(28px,4.6vw,76px); align-items: start; }
.fsig__by { display: flex; align-items: center; gap: 16px; }
.fsig__img { width: clamp(66px,6.2vw,86px); height: clamp(66px,6.2vw,86px);
  border-radius: 50%; object-fit: cover; object-position: center 16%; flex: none;
  border: 1px solid var(--line-dark); background: var(--bg-dark-2); }
.fsig__lbl { display: block; font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-inv-2); margin-bottom: 9px; }
.fsig__name { font-size: clamp(1.1rem,1rem + .45vw,1.35rem); font-weight: 600;
  letter-spacing: -.026em; line-height: 1.14; color: var(--ink-inv); }
.fsig__role { font-size: var(--t-sm); color: var(--ink-inv); line-height: 1.35; margin-top: 4px; }
.fsig__disc { font-size: var(--t-xs); color: var(--ink-inv-2); line-height: 1.35; margin-top: 2px; }
.fsig__say { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.fsig__q { font-size: clamp(1.24rem,.88rem + 1.2vw,1.95rem); line-height: 1.36;
  letter-spacing: -.026em; color: var(--ink-inv); }

/* ---------- 4. proof points ---------- */
.proof { display: grid; grid-template-columns: repeat(4,1fr); }
.pf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px;
  padding: clamp(24px,3vw,40px) clamp(14px,2vw,28px); border-left: 1px solid var(--line-dark); }
.pf:first-child { border-left: 0; }
.pf__i { width: 26px; height: 26px; color: var(--ink-inv-2); }
.pf__i svg { width: 100%; height: 100%; }
.pf__n { font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem,1.35rem + 3vw,4.2rem); line-height: 1; letter-spacing: -.02em;
  color: var(--ink-inv); }
.pf__l { font-size: var(--t-sm); color: var(--ink-inv-2); line-height: 1.5; max-width: 25ch; }

/* ---------- 5. proof / review cards ---------- */
.reviews { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.review {
  background: var(--bg-dark-2); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); padding: clamp(22px,2.6vw,30px);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.review:hover { transform: translateY(-4px); border-color: #3A3D3F; }
.review__q { font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.012em; color: var(--ink-inv); }
.review__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.review__av { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-dark);
  border: 1px solid var(--line-dark); flex: none; object-fit: cover; display: block; }
.review__av--txt { display: grid; place-items: center; font-size: var(--t-xs); color: var(--ink-inv-2); }
.review__n { font-size: var(--t-sm); color: var(--ink-inv); }
.review__r { font-size: var(--t-xs); color: var(--ink-inv-2); }

/* ---------- 5b. stars ---------- */
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 17px; height: 17px; fill: #3A3D3F; }
.stars svg.on { fill: #E8B23C; }
.tm__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.tm__head .eyebrow { align-self: center; }
.tm__rate { font-size: clamp(1.72rem,1rem + 2.4vw,3.1rem); line-height: 1.22;
  letter-spacing: -.032em; color: var(--ink-inv); max-width: 22ch; }
.tm__score { font-weight: 500; }
.tm__star { display: inline-block; width: .84em; height: .84em; vertical-align: -.05em;
  margin: 0 .12em 0 .05em; }
.tm__star svg { width: 100%; height: 100%; fill: #E8B23C; }
.tm__rate-b { display: block; }

/* ---------- 6. gradient collaboration ----------
   Four wide, low-opacity washes bled into one another instead of two hard
   blurred circles. Each one is an ellipse far larger than the area it lights,
   so no edge ever resolves into a visible disc — the eye reads a single
   atmospheric field. Muted plum, indigo, petrol and a warm ember, all at low
   alpha over a near-black ground, with grain on top to kill the banding that
   large dark gradients produce on wide screens and to keep the finish matte
   rather than glossy. */
.collab { position: relative; overflow: hidden; isolation: isolate;
  color: var(--ink-inv);
  background:
    radial-gradient(92% 70% at 2% -12%,  rgba(140, 102, 214, .66) 0%, rgba(140, 102, 214, 0) 60%),
    radial-gradient(80% 64% at 96% 4%,   rgba(62, 106, 190, .52) 0%, rgba(62, 106, 190, 0) 62%),
    radial-gradient(84% 72% at 90% 108%, rgba(194, 104, 128, .46) 0%, rgba(194, 104, 128, 0) 60%),
    radial-gradient(96% 76% at 12% 102%, rgba(18, 108, 98, .48) 0%, rgba(18, 108, 98, 0) 62%),
    linear-gradient(165deg, #1A1530 0%, #0E0C1A 50%, #171223 100%);
}
/* grain: the same inline turbulence used on the intro-call card, so the
   surface reads as matte paper rather than a polished gradient */
.collab::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
/* A whisper of a vignette. Tuned on the rendered page: at .55 it swallowed the
   corner washes entirely and the section came out darker than it started, which
   was the opposite of the brief. .22 just settles the outer edge. */
.collab::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(140% 110% at 50% 48%, rgba(0,0,0,0) 58%, rgba(6,5,12,.22) 100%);
}
.collab .wrap { position: relative; z-index: 2; }
.collab h2, .collab .h2, .collab .h3 { color: #fff; }
.collab .lead, .collab .body-sm { color: rgba(255,255,255,.72); }
.collab .eyebrow { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); background: rgba(255,255,255,.05); }
.chatwin {
  border-radius: var(--r-lg); padding: 18px; position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2);
  transform: perspective(1400px) rotateX(7deg) rotateY(-6deg);
}
.chatwin__bar { display: flex; align-items: center; gap: 7px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.13); margin-bottom: 16px; }
.chatwin__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); }
.chatwin__bar span { margin-left: 8px; font-size: var(--t-xs); color: rgba(255,255,255,.55); }
.msg { max-width: 84%; padding: 12px 15px; border-radius: 15px; font-size: var(--t-sm);
  line-height: 1.5; margin-bottom: 10px; }
.msg--them { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.92); border-bottom-left-radius: 5px; }
.msg--us { background: rgba(255,255,255,.95); color: #14121D; margin-left: auto; border-bottom-right-radius: 5px; }
.msg__t { display: block; font-size: 11px; opacity: .5; margin-top: 5px; }

/* ---------- 7. 3D category stack ---------- */
.stage { position: relative; }
.stage__pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center;
  overflow: hidden; perspective: 2000px; }

/* The stage is the card. Viewport-scale, not a content card. */
.stage__inner {
  position: relative; margin-inline: auto; padding-inline: 0;
  width: min(93vw, 1760px);
  height: clamp(600px, 78vh, 920px);
  max-height: calc(100vh - 104px);      /* never slides under the sticky header */
}
.panel {
  position: absolute; inset: 0;
  border-radius: 30px; background: var(--bg-alt); border: 1px solid var(--line);
  /* soft, large, diffused — physical lift rather than a hard edge */
  box-shadow:
    0 1px 2px rgba(17,19,20,.04),
    0 12px 28px -12px rgba(17,19,20,.18),
    0 48px 96px -40px rgba(17,19,20,.34),
    0 90px 150px -70px rgba(17,19,20,.30);
  padding: clamp(28px, 3.2vw, 60px);
  display: grid;
  grid-template-columns: 45fr 55fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "head media" "body media";
  column-gap: clamp(28px, 3.6vw, 68px);
  row-gap: clamp(18px, 2vw, 32px);
  transform-origin: 50% 88%; will-change: transform, opacity;
  overflow: hidden;
}
.panel__head { grid-area: head; display: flex; flex-direction: column; gap: 10px; }
.panel__body { grid-area: body; display: flex; flex-direction: column; gap: 20px;
  justify-content: flex-start; padding-top: clamp(14px, 1.6vw, 26px); }
.panel__body .btn-row { margin-top: auto; }
.panel__media { grid-area: media; height: 100%; min-height: 0;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-sunk); }
.panel__media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.panel__n { font-size: var(--t-sm); color: var(--ink); letter-spacing: .1em;
  font-variant-numeric: tabular-nums; }
.panel__n-of { color: var(--ink-3); }
.panel__t { font-size: clamp(2.1rem, 1.1rem + 2.9vw, 4rem); letter-spacing: -.035em;
  line-height: 1.02; margin: 6px 0 0; }
.panel__kick { font-size: clamp(1.05rem, .95rem + .6vw, 1.5rem); color: var(--ink-2);
  line-height: 1.3; letter-spacing: -.016em; }
.panel__lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.panel__caps { display: flex; flex-wrap: wrap; gap: 8px; }

/* no-JS / small-screen fallback: plain readable stack */
.stage.is-static .stage__pin { position: static; height: auto; display: block; overflow: visible; }
.stage.is-static .stage__inner { height: auto; max-height: none; width: min(93vw, 1760px); }
.stage.is-static .panel { position: relative; inset: auto;
  transform: none !important; opacity: 1 !important; margin-bottom: 24px; }
/* the stage is also flattened without JS on a wide screen, where there is no
   sticky stack — that case keeps the plain, readable list above */

/* ---------- 7b. small-screen card stack ----------
   Below the 3D stage breakpoint the panels stop being a plain list and
   become a sticky stack: each card pins a little lower than the one before
   it, so the next card rides up over the current one and leaves its top edge
   showing. The whole thing is `position: sticky` — no scroll listener, no
   rAF, no transforms recalculated per frame. The page scrolls natively and
   the cards simply pin where CSS told them to.

   --stack-top clears the sticky header; --stack-peek is how much of each
   earlier card stays visible above the current one. */
@media (max-width: 960px) {
  /* motion.js never runs the pinned 3D stage below 961px, so at this width the
     stage is always the sticky stack — with or without JavaScript. */
  .stage[data-stack] .stage__pin {
    position: static; height: auto; display: block; overflow: visible; }
  .stage[data-stack] .stage__inner {
    height: auto; max-height: none;
    --stack-top: 76px;
    --stack-peek: 13px;
    width: min(93vw, 1760px);
  }
  .stage[data-stack] .panel {
    position: sticky;
    top: calc(var(--stack-top) + var(--i) * var(--stack-peek));
    z-index: calc(1 + var(--i));
    margin-bottom: 0;
    border-radius: 24px; border-color: transparent;
    /* a card has to be opaque to cover the one behind it */
    color: var(--ink-inv);
    box-shadow: 0 -1px 0 rgba(255,255,255,.07) inset,
      0 -18px 34px -22px rgba(17,19,20,.55);
  }
  /* the stack needs somewhere to unstick at the end, or the last card stays
     pinned over whatever follows the section */
  .stage[data-stack] .stage__inner::after { content: ""; display: block; height: 12vh; }

  /* one card, one colour — a deep, low-chroma set that stays in the same
     family as the dark sections elsewhere on the page */
  .stage[data-stack] .panel:nth-child(1)  { background: #17191A; }  /* charcoal   */
  .stage[data-stack] .panel:nth-child(2)  { background: #2E2340; }  /* deep plum  */
  .stage[data-stack] .panel:nth-child(3)  { background: #4A2E1E; }  /* burnt umber*/
  .stage[data-stack] .panel:nth-child(4)  { background: #16233D; }  /* deep navy  */
  .stage[data-stack] .panel:nth-child(5)  { background: #0E4F47; }  /* house teal */
  .stage[data-stack] .panel:nth-child(6)  { background: #1B3A4B; }  /* steel blue */
  .stage[data-stack] .panel:nth-child(7)  { background: #2C3520; }  /* olive      */
  .stage[data-stack] .panel:nth-child(8)  { background: #1F2224; }  /* neutral    */

  /* type inverts with the surface */
  .stage[data-stack] .panel__n { color: rgba(255,255,255,.92); }
  .stage[data-stack] .panel__n-of { color: rgba(255,255,255,.5); }
  .stage[data-stack] .panel__t { color: #FFFFFF; }
  .stage[data-stack] .panel__kick { color: rgba(255,255,255,.78); }
  .stage[data-stack] .panel__lead { color: rgba(255,255,255,.72); }
  .stage[data-stack] .panel .tag {
    border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.84);
    background: rgba(255,255,255,.07); }
  .stage[data-stack] .panel .btn--ghost {
    background: rgba(255,255,255,.1); color: #FFFFFF;
    border-color: rgba(255,255,255,.26); box-shadow: none; }
  .stage[data-stack] .panel .btn--ghost .btn__ico { background: rgba(255,255,255,.16); color: #FFFFFF; }
  .stage[data-stack] .panel__media { border-color: rgba(255,255,255,.14); background: rgba(0,0,0,.18); }

  /* the card has to fit the viewport once it is pinned, so the content is
     tightened rather than allowed to run past the fold */
  .stage[data-stack] .panel { padding: 24px 22px 22px; row-gap: 14px;
    grid-template-rows: auto auto auto; will-change: auto; }
  .stage[data-stack] .panel__t { font-size: clamp(1.75rem, 6.6vw, 2.3rem); line-height: 1.05; }
  .stage[data-stack] .panel__kick { font-size: 1rem; }
  /* clamped so every card lands at roughly the same height — an even stack
     reads as a stack; ragged card heights read as a list */
  .stage[data-stack] .panel__lead { font-size: var(--t-sm); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .stage[data-stack] .panel__media { min-height: 0; aspect-ratio: 16/9; }
  .stage[data-stack] .panel__body { gap: 14px; padding-top: 0; }
  /* the typographic media would repeat the chips on a small card */
  .stage[data-stack] .panel__media--focus { display: none; }
  .stage[data-stack] .panel__caps { display: flex; }
}
/* a short phone (SE-class, 640-700px tall) has to lose another ~80px of card
   or the pinned card runs past the fold and the stack stops reading */
@media (max-width: 960px) and (max-height: 760px) {
  .stage[data-stack] .stage__inner { --stack-top: 58px; --stack-peek: 9px; }
  .stage[data-stack] .panel { padding: 18px 18px 16px; row-gap: 10px; }
  .stage[data-stack] .panel__t { font-size: clamp(1.5rem, 5.8vw, 1.95rem); }
  .stage[data-stack] .panel__kick { font-size: .94rem; }
  .stage[data-stack] .panel__lead { font-size: var(--t-xs); line-height: 1.45; -webkit-line-clamp: 3; }
  .stage[data-stack] .panel__media { aspect-ratio: 2.1/1; }
  .stage[data-stack] .panel__body { gap: 11px; }
}
@media (max-width: 720px) {
  .stage[data-stack] .stage__inner { --stack-peek: 11px; }
  .stage[data-stack] .panel { padding: 20px 18px 18px; }
  .stage[data-stack] .panel__media { aspect-ratio: 16/10; }
  /* the capability tags wrap to three rows at this width and push the card
     past the fold; two is enough to signal what the service covers */
  .stage[data-stack] .panel__caps .tag:nth-child(n+3) { display: none; }
}

/* ---------- 8. process roadmap ---------- */
.road { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,72px); align-items: start; }
.road__steps { position: relative; padding-left: 44px; }
.road__rail { position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden; }
.road__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 82%, #2C8478 100%);
  border-radius: 2px; transition: height .25s var(--ease);
  box-shadow: 0 0 12px rgba(14,79,71,.34); }
.step { position: relative; padding-block: clamp(44px,6vw,104px);
  opacity: .4; transition: opacity .5s var(--ease); }
.step.is-on { opacity: 1; }
.step__dot { position: absolute; left: -44px; top: calc(clamp(44px,6vw,104px) + 3px);
  width: 24px; height: 24px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--line); display: grid; place-items: center;
  transition: border-color .45s var(--ease), transform .45s var(--ease); }
.step__dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
  transition: background .45s var(--ease); }
.step.is-on .step__dot { border-color: var(--accent); transform: scale(1.14);
  box-shadow: 0 0 0 5px rgba(14,79,71,.10); }
.step.is-on .step__dot i { background: var(--accent); }
.step__ph { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); color: var(--ink-2);
  transition: color .45s var(--ease); }
.step.is-on .step__ph { color: var(--accent); }
.step__t { font-size: clamp(1.22rem,1rem + .8vw,1.65rem); letter-spacing: -.02em; margin: 6px 0 10px; }
/* Sticky stage for the active step card.
   The stage is deliberately shorter than the viewport and then offset so the
   stage itself sits centred — that gives the card a centred resting position
   AND leaves enough sticky travel to stay centred across every step. A
   full-height stage would consume all the travel and release early. */
.road__visuals {
  --road-stage: min(74vh, 640px);
  position: sticky;
  top: max(88px, calc((100vh - var(--road-stage)) / 2));
  height: var(--road-stage);
  display: flex;
  align-items: center;
}
.road__vwrap { position: relative; width: 100%; }
.road__v { position: absolute; inset: 0; opacity: 0; transform: scale(.975);
  transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.road__v.is-on { opacity: 1; transform: none; pointer-events: auto; }
.road__v:first-child { position: relative; }
.road__frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-alt); aspect-ratio: 4/3; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; padding: clamp(22px,3vw,38px); }

/* ---------- 9. editorial blog grid ---------- */
.posts { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,32px); }
.post { display: flex; flex-direction: column; gap: 14px; }
.post__media { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-sunk); aspect-ratio: 16/11; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__meta { display: flex; gap: 8px; align-items: center; font-size: var(--t-xs); color: var(--ink-3); }
.post__t { font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.22; }
.post__media img { background: var(--bg-sunk); }

/* ---------- 10. structural guides ---------- */
.guides { position: relative; }
.guides > .gline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line);
  opacity: .6; pointer-events: none; z-index: 0; }
.dark .guides > .gline, .collab .guides > .gline { background: var(--line-dark); }
@media (max-width: 1100px) { .guides > .gline { display: none; } }

/* ---------- 11. FAQ smooth expand ---------- */
.faq details[open] .faq__a { animation: faqIn .34s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 12. scroll reveal ---------- */
.js-reveal .rv { opacity: 0; transform: translateY(24px); }
.js-reveal .rv.in { opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ---------- 12b. founder call card (footer CTA) ----------
   The last CTA on every page, set into the dark footer. A soft matte surface
   rather than a plain white box: a low-contrast cyan / blue / green wash
   rising from the bottom, plus a faint grain so the panel does not band on a
   wide screen. The portrait sits inside the card, never floating beside it. */
.callcard {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.5);
  padding: clamp(24px,2.6vw,34px); gap: 14px; color: var(--ink);
  background:
    radial-gradient(90% 60% at 100% 108%, rgba(150,196,232,.55) 0%, rgba(150,196,232,0) 70%),
    radial-gradient(80% 58% at 0% 110%, rgba(170,226,206,.6) 0%, rgba(170,226,206,0) 72%),
    linear-gradient(to top, #D3EFF0 0%, rgba(222,241,242,.55) 36%, rgba(255,255,255,0) 72%),
    #F7F8F7;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 30px 60px -30px rgba(0,0,0,.6);
}
.callcard .h4 { color: var(--ink); }
.callcard .body-sm { color: var(--ink-2); max-width: 40ch; }
/* grain: one inline SVG turbulence, no asset request */
.callcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.callcard__face {
  display: block; flex: none;
  width: clamp(62px,5.2vw,76px); height: clamp(62px,5.2vw,76px);
  border-radius: 50%; background: var(--bg-sunk); margin-bottom: 4px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 10px 22px -10px rgba(17,19,20,.38);
}
.callcard .btn-row { margin-top: 4px; }
.callcard__mail { display: flex; align-items: center; gap: 13px; margin-top: 6px;
  min-height: 44px; transition: transform .3s var(--ease); }
.callcard__mail:hover { transform: translateX(2px); }
.callcard__mail-i {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--ink); color: var(--ink-inv); display: grid; place-items: center;
  box-shadow: 0 2px 6px -2px rgba(17,19,20,.4);
}
.callcard__mail-i svg { width: 18px; height: 18px; }
.callcard__mail-k { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.3; }
.callcard__mail-v { display: block; font-size: var(--t-sm); color: var(--ink); font-weight: 500;
  line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }

/* ---------- 12c. AI repositioning hooks ---------- */
/* hero: a quiet line of type, not a pill badge */
.hero__eye { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); text-align: center; text-wrap: balance; }
.hero__support { font-size: var(--t-sm); color: var(--ink-2); letter-spacing: .01em;
  text-align: center; margin-top: 10px; }

/* intro: statement left, answer right */
.xpt--intro { padding-bottom: 0; align-items: end; }
.xpt__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.xpt__say { font-size: clamp(1.2rem,.95rem + .9vw,1.7rem); line-height: 1.3;
  letter-spacing: -.022em; color: var(--ink); max-width: 30ch; }

/* services: the media side of each panel is typographic */
.panel__media--focus { position: relative; display: flex; flex-direction: column;
  justify-content: space-between; gap: 24px; padding: clamp(24px,2.8vw,44px);
  background:
    radial-gradient(90% 80% at 100% 0%, var(--focus-a, rgba(93,102,188,.20)) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(80% 70% at 0% 100%, var(--focus-b, rgba(63,160,178,.18)) 0%, rgba(0,0,0,0) 66%),
    var(--bg-sunk); }
.panel:nth-child(2) .panel__media--focus { --focus-a: rgba(179,100,54,.18); --focus-b: rgba(210,151,76,.16); }
.panel:nth-child(3) .panel__media--focus { --focus-a: rgba(46,111,166,.20); --focus-b: rgba(142,114,198,.16); }
.panel:nth-child(4) .panel__media--focus { --focus-a: rgba(14,79,71,.20); --focus-b: rgba(76,158,122,.18); }
.panel:nth-child(5) .panel__media--focus { --focus-a: rgba(46,35,64,.20); --focus-b: rgba(46,111,166,.16); }
.focus__i { width: clamp(34px,3vw,46px); height: clamp(34px,3vw,46px); color: var(--ink-2); }
.focus__i svg { width: 100%; height: 100%; stroke-width: 1.2; }
.focus { display: flex; flex-direction: column; }
.focus li { font-size: clamp(1.15rem,.8rem + 1.2vw,2.05rem); letter-spacing: -.03em;
  line-height: 1.15; color: var(--ink); padding: clamp(8px,.9vw,14px) 0;
  border-top: 1px solid rgba(17,19,20,.1); }
.focus li:last-child { border-bottom: 1px solid rgba(17,19,20,.1); }
/* the chips repeat the focus list, so they only show where the media hides */
.panel__caps { display: none; }

/* who we help: three cards with the capability-block anatomy */
.caps--3 { grid-template-columns: repeat(3,1fr); border-top: 0; gap: clamp(14px,1.6vw,22px); }
.caps--3 .cap { border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-alt); padding: clamp(52px,5vw,76px) clamp(20px,2.4vw,36px) clamp(32px,3.4vw,52px);
  box-shadow: 0 1px 2px rgba(17,19,20,.04), 0 18px 36px -26px rgba(17,19,20,.28);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.caps--3 .cap:nth-child(odd) { border-right: 1px solid var(--line); }
.caps--3 .cap:hover { transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(17,19,20,.05), 0 30px 54px -28px rgba(17,19,20,.36); }
.caps--3 .cap__t { font-size: clamp(1.2rem,1rem + .7vw,1.6rem); }

/* signature outcome: the three examples sit in the glass window */
p.msg { max-width: 92%; }

/* process: the sticky visual names the phase and shows where it sits */
.road__big { font-size: clamp(2.4rem,1.4rem + 3vw,4.2rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.road__path { display: flex; flex-direction: column; gap: 4px; }
.road__path li { display: flex; gap: 14px; align-items: baseline; font-size: var(--t-sm);
  color: var(--ink-3); padding: 6px 0; transition: color .4s var(--ease); }
.road__path li span { font-size: var(--t-xs); width: 22px; }
.road__path li.is-done { color: var(--ink-2); }
.road__path li.is-now { color: var(--accent); font-weight: 500; }

/* point of view */
.pov { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: clamp(22px,4vw,64px);
  align-items: start; max-width: 1120px; margin-inline: auto; }
.pov .body-sm { color: var(--ink-inv-2); }
.pov__q { font-size: clamp(1.2rem,.95rem + .9vw,1.7rem); line-height: 1.32;
  letter-spacing: -.022em; color: var(--ink-inv); text-align: center; }

/* about: the founder statement reads as a heading */
h2.fsig__q { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.03em; }

/* ---------- 13. responsive ---------- */
@media (max-width: 1100px) {
  .proof { grid-template-columns: repeat(2,1fr); }
  .pf:nth-child(odd) { border-left: 0; }
  .pf:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .reviews { grid-template-columns: repeat(2,1fr); }
  .posts { grid-template-columns: repeat(2,1fr); }
  /* two rows at every width: the column count sets how many slots are live,
     and motion.js only cycles the ones actually on screen */
  .lw { grid-template-columns: repeat(4,1fr); }
  .lw__card:nth-child(n+9) { display: none; }
}
@media (max-width: 960px) {
  .xpt { grid-template-columns: 1fr; }
  .xpt--intro { align-items: start; }
  .pov { grid-template-columns: 1fr; max-width: 60ch; }
  .pov__q { text-align: left; }
  .caps--3 { grid-template-columns: 1fr; }
  .fsig { grid-template-columns: 1fr; gap: 28px; }
  .road { grid-template-columns: 1fr; }
  .road__visuals { display: none; }
  .panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas: "head" "media" "body";
    padding: clamp(22px,3.4vw,34px); border-radius: 24px;
  }
  .panel__body { justify-content: flex-start; gap: 16px; }
  .panel__media { min-height: 150px; border-radius: 16px; }
}
@media (max-width: 860px) {
  .lw { grid-template-columns: repeat(3,1fr); }
  .lw__card:nth-child(n+7) { display: none; }
}
@media (max-width: 720px) {
  .proof, .reviews, .posts { grid-template-columns: 1fr; }
  .pf { border-left: 0; }
  .pf:not(:first-child) { border-top: 1px solid var(--line-dark); }
  .caps { grid-template-columns: 1fr; }
  .cap:nth-child(odd) { border-right: 0; }
  .cap { padding-inline: 4px; }
  /* audience cards turn matte on a phone: one deep, low-chroma colour each,
     from the same family as the services stack, never flat white */
  .caps--3 .cap, .caps--3 .cap:nth-child(odd) { padding: 48px 22px 30px; border-color: transparent; color: var(--ink-inv); }
  .caps--3 .cap:nth-child(1) { background: linear-gradient(160deg, #2B3346 0%, #1E2433 100%); }  /* slate navy */
  .caps--3 .cap:nth-child(2) { background: linear-gradient(160deg, #3C2C43 0%, #2A1F31 100%); }  /* aubergine  */
  .caps--3 .cap:nth-child(3) { background: linear-gradient(160deg, #1D4A45 0%, #133632 100%); }  /* deep pine  */
  .caps--3 .cap__t { color: #FFFFFF; }
  .caps--3 .cap__d { color: rgba(255,255,255,.74); }
  .caps--3 .cap__n { color: rgba(255,255,255,.55); }
  .caps--3 .cap__i svg { stroke: rgba(255,255,255,.88) !important; }
  .stage__inner { width: 92vw; height: auto; max-height: none; }
  .panel { position: relative; inset: auto; }
  .panel__lead { font-size: var(--t-sm); }
  .road__steps { padding-left: 34px; }
  .step { padding-block: clamp(32px,7vw,56px); }
  .step__dot { top: calc(clamp(32px,7vw,56px) + 3px); }
  .step__dot { left: -34px; width: 20px; height: 20px; }
  .road__rail { left: 9px; }
  .chatwin { transform: none; }
}
@media (max-width: 600px) {
  .lw { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .lw__card { min-height: 104px; }
  .lw__f, .lw__b { padding: 14px 10px; }
  .lw__card:nth-child(n+5) { display: none; }
  /* the pill must never outgrow a narrow screen */
  .btn--ava { padding-left: 18px; }
  .btn__ava { width: 36px; height: 36px; }
}

/* ---------- 14. reduced motion (mandatory) ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .btn:hover .btn__ico { transform: none !important; }
  .js-wall .lw__card { opacity: 1 !important; transform: none !important; }
  .lw__card:hover { transform: none !important; }
  .lw__card.is-flipped .lw__slot { transform: none !important; }
  .lw__slot { transition: none !important; }
  .lw__b { display: none !important; }
  .btn--ava:hover .btn__ava, .callcard__mail:hover { transform: none !important; }
  .caps--3 .cap:hover { transform: none !important; }
  /* the hero keeps its atmosphere, but as the still poster rather than motion */
  .hero__vid { display: none !important; }
  .review:hover, .post:hover .post__media img { transform: none !important; }
  .stage__pin { position: static !important; height: auto !important; display: block !important; overflow: visible !important; }
  .stage__inner { height: auto !important; }
  .panel { position: relative !important; left: auto !important; right: auto !important;
           top: auto !important; bottom: auto !important;
           transform: none !important; opacity: 1 !important; margin-bottom: 20px; }
  .road__v { position: relative !important; opacity: 1 !important; transform: none !important; }
  .step { opacity: 1 !important; }
  .js-reveal .rv { opacity: 1 !important; transform: none !important; }
  .faq details[open] .faq__a { animation: none !important; }
  .chatwin { transform: none !important; }
}

/* ---------- 15. footer final CTA on the dark ground ---------- */
.ftr__cta { align-items: center; }
.ftr__cta .lead { color: var(--ink-inv-2); max-width: 44ch; }