/* ==========================================================================
   AMINO — SECTIONS
   One block per section of the page. Each is custom-composed; none of them
   share a generic "feature grid" chassis.
   ========================================================================== */

/* ==========================================================================
   HERO
   The signature composition: mega wordmark cropped by the section edge, a
   generated light-trail subject behind it, an offcentre statement at left
   and a floating glass card at right. Type sits in front of and behind the
   imagery at the same time.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block-start: clamp(7rem, 14vh, 10rem);
  background: linear-gradient(178deg, #FAFAF9 0%, #EFEEEB 42%, #DEDDD9 100%);
  color: var(--ink);
  overflow: clip;
  isolation: isolate;
}

/* -- THE SUBJECT -----------------------------------------------------------
   A generated long-exposure plate: a soft dark mass caught mid-movement with
   an ember trail tearing through it. Pure CSS — layered gradients, blur and
   a masked streak. No molecule, no photography, no image asset.            */

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: clip;
}

/* -- the moving mass -------------------------------------------------------
   Real motion blur is DIRECTIONAL — it smears along the axis of travel and
   stays reasonably tight across it. An evenly-blurred blob just reads as a
   dirty lens, so the form is stretched hard on X, kept tight on Y, and
   feathered at both ends by a mask.                                        */

.hero__figure {
  position: absolute;
  left: 56%;
  top: 46%;
  width: min(46rem, 58vw);
  aspect-ratio: 1.9;
  translate: -50% -50%;
  will-change: transform;
  opacity: 0.72;
  -webkit-mask-image: radial-gradient(58% 74% at 50% 50%, #000 26%, transparent 78%);
          mask-image: radial-gradient(58% 74% at 50% 50%, #000 26%, transparent 78%);
}

.hero__figure::before,
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48% 52% 44% 56% / 58% 46% 54% 42%;
  background:
    radial-gradient(38% 62% at 46% 36%, rgba(14,14,13,.82), transparent 70%),
    radial-gradient(52% 44% at 58% 54%, rgba(38,38,35,.6), transparent 74%),
    radial-gradient(30% 34% at 34% 64%, rgba(8,8,8,.5), transparent 72%);
  filter: blur(clamp(8px, 1.1vw, 16px));
}

/* the second pass is stretched along X only — that IS the travel direction */
.hero__figure::after {
  scale: 1.45 0.72;
  translate: 5% 2%;
  opacity: 0.38;
  filter: blur(clamp(20px, 3vw, 40px));
}

/* the ember trail cutting through the mass */
.hero__trail {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 54%;
  height: clamp(3rem, 7vw, 6.5rem);
  translate: 0 -50%;
}

.hero__trail i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--streak);
}

.hero__trail i:nth-child(1) { top: 44%; filter: blur(14px); transform: scaleY(9); opacity: .5; }
.hero__trail i:nth-child(2) { top: 50%; filter: blur(4px);  transform: scaleY(3); opacity: .85; }
.hero__trail i:nth-child(3) { top: 52%; filter: blur(1px); }
.hero__trail i:nth-child(4) {
  top: 61%;
  filter: blur(9px);
  transform: scaleY(4) scaleX(.7);
  opacity: .42;
  background: linear-gradient(90deg, transparent, var(--amber) 46%, transparent);
}

/* a slow travelling highlight so the plate is never fully static */
.hero__trail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 46%;
  height: 10px;
  translate: 0 -50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 50%, transparent);
  filter: blur(7px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: trail-run 5.5s var(--e-inout) infinite;
}

@keyframes trail-run {
  0%, 58% { transform: translateX(-58%) scaleX(.5); opacity: 0; }
  70%     { opacity: .9; }
  100%    { transform: translateX(58%) scaleX(.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__trail::after { animation: none; opacity: .5; transform: none; }
}

.hero__body {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: start;
  align-content: start;
}

.hero__intro {
  grid-column: 1 / span 4;
  display: grid;
  gap: var(--s-6);
  justify-items: start;
}

.hero__title {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: var(--w-medium);
  max-width: 13ch;
}

.hero__sub {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--steel-dim);
  max-width: 34ch;
}

/* -- THE FLOATING CASE CARD, top right --------------------------------------
   Small, glassy, image-filled, with a second card peeking out behind it. The
   offset shadow-card is what stops it reading as a flat UI panel.          */

.hero__case {
  grid-column: 9 / span 4;
  position: relative;
  align-self: start;
  display: block;
  aspect-ratio: 1.72;
  border-radius: clamp(1rem, 1.7vw, 1.5rem);
  overflow: clip;
  isolation: isolate;
  border: var(--hair) solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--lift-hi);
  transition: transform 0.7s var(--e-out), box-shadow 0.7s var(--e-out);
}

/* the card stacked behind, slightly larger and lower */
.hero__case-stack {
  position: absolute;
  inset: auto 6% -1.25rem 6%;
  height: 3.5rem;
  border-radius: clamp(1rem, 1.7vw, 1.5rem);
  background: rgba(255, 255, 255, 0.55);
  border: var(--hair) solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;
}

.hero__case-art { position: absolute; inset: 0; z-index: -1; }
.hero__case-art > * { transition: transform 1.1s var(--e-out); }
.hero__case:hover { transform: translateY(-0.375rem); box-shadow: var(--lift-hi), var(--glow); }
.hero__case:hover .hero__case-art > * { transform: scale(1.07); }

.hero__case-in {
  position: absolute;
  inset: 0;
  padding: clamp(0.875rem, 1.3vw, 1.125rem);
  display: grid;
  align-content: space-between;
  justify-items: start;
  background: linear-gradient(180deg, rgba(10,10,10,.12) 0%, transparent 42%, rgba(10,10,10,.6) 100%);
}

.hero__case-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  border: var(--hair) solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFF;
  line-height: 1;
}

.hero__case-txt { display: grid; gap: 0.125rem; }

.hero__case-t {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: #FFF;
}

.hero__case-d {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

/* -- THE WORDMARK. Cropped by the section's bottom edge on purpose. */
.hero__mark {
  position: relative;
  z-index: 2;
  margin-block-start: auto;
  display: block;
  width: 100%;
  padding-inline: clamp(0.5rem, 1.6vw, 1.5rem);
  color: #FFF;
  font-size: clamp(5rem, 22.5vw, 20rem);
  line-height: 0.74;
  letter-spacing: -0.05em;
  font-weight: var(--w-medium);
  text-align: center;
  white-space: nowrap;
  /* baseline clipped by the section edge */
  margin-block-end: clamp(-1.5rem, -2.2vw, -2.75rem);
  mix-blend-mode: normal;
  user-select: none;
}

.hero__mark span { display: inline-block; will-change: transform; }

/* the hero's own scroll cue */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
}

.hero__cue i {
  display: block;
  width: 1px; height: 2.25rem;
  background: linear-gradient(180deg, var(--steel), transparent);
  position: relative;
  overflow: hidden;
}
.hero__cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ember);
  animation: cue-run 2.2s var(--e-inout) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.hero__meta {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 4;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-dim);
  display: grid;
  gap: 0.375rem;
}

/* ==========================================================================
   TRUST — client marquee
   ========================================================================== */

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

.trust__head {
  display: flex;
  justify-content: center;
  margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
}

/* ==========================================================================
   RESULTS — the stat row
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: var(--hair) solid var(--line);
}

.stat {
  position: relative;
  padding: clamp(2rem, 3.6vw, 3.25rem) clamp(1rem, 2vw, 2rem) clamp(2rem, 3.6vw, 3.25rem) 0;
  display: grid;
  gap: 0.625rem;
  align-content: start;
}

.stat + .stat {
  border-left: var(--hair) solid var(--line);
  padding-left: clamp(1rem, 2vw, 2rem);
}

.stat__fig {
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  font-weight: var(--w-medium);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}

.stat__unit { color: var(--ember-fg); font-size: 0.44em; margin-left: 0.06em; }

.stat__cap {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.5;
  max-width: 18ch;
}

/* ==========================================================================
   PROBLEMS — pinned stacking cards
   Cards stack on top of one another as you scroll, each scaling down and
   dimming as the next lands. The classic move, done with real depth.
   ========================================================================== */

.probs__deck {
  position: relative;
  display: grid;
  gap: 0;
}

.prob {
  position: sticky;
  top: max(6rem, 12vh);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: center;
  min-height: clamp(20rem, 46vh, 30rem);
  padding: clamp(1.75rem, 3.4vw, 3.25rem);
  border-radius: var(--r-card);
  background: var(--ink-card);
  border: var(--hair) solid var(--ink-line);
  overflow: clip;
  transform-origin: center top;
  will-change: transform;
}

.prob + .prob { margin-block-start: clamp(1rem, 2vw, 1.75rem); }

.prob__idx {
  grid-column: 1 / span 1;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--ember-fg);
  align-self: start;
}

.prob__body {
  grid-column: 2 / span 6;
  display: grid;
  gap: var(--s-5);
  align-content: start;
  justify-items: start;
}

.prob__q {
  font-size: clamp(1.625rem, 3.4vw, 2.875rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  line-height: 1.06;
  max-width: 15ch;
}

.prob__a { max-width: 42ch; font-size: var(--t-body); color: var(--fg-mute); line-height: 1.6; }

.prob__fix {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: var(--hair) solid var(--ink-line);
  font-size: 0.8125rem;
  color: var(--paper);
}

.prob__fix .pill-obj { width: 1.9em; height: 0.9em; margin: 0; }

.prob__art {
  grid-column: 9 / span 4;
  align-self: stretch;
  position: relative;
  border-radius: calc(var(--r-card) * 0.72);
  overflow: clip;
  min-height: clamp(9rem, 20vh, 14rem);
}

/* ==========================================================================
   SERVICES — the uniform rail with one active card
   Six identical neutral cards; the hovered one goes dark, grows, gains a
   CTA. Asymmetry from a single deviation, not from chaos.
   ========================================================================== */

.svc__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(0.625rem, 1vw, 1rem);
  align-items: end;
}

.svc {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--s-8);
  aspect-ratio: 0.83;
  padding: clamp(0.875rem, 1.3vw, 1.25rem);
  border-radius: var(--r-card);
  background: var(--fog);
  overflow: clip;
  isolation: isolate;
  transition: background 0.55s var(--e-out), color 0.55s var(--e-out),
              transform 0.65s var(--e-out), box-shadow 0.65s var(--e-out);
  will-change: transform;
  cursor: pointer;
}

.svc__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.6s var(--e-out), transform 0.9s var(--e-out);
}

.svc__label {
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.028em;
  line-height: 1.1;
  align-self: end;
}

.svc__cta {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--e-out);
}
.svc__cta > * { min-height: 0; }

.svc__cta-in {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--w-medium);
  width: fit-content;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.45s var(--e-out) 0.1s, transform 0.55s var(--e-out) 0.1s;
}

/* ACTIVE STATE — driven by JS so touch devices get it too */
/* No `transform` here on purpose. The lift is applied by js/modules/services.js
   together with the 3D tilt, so a single system owns this element's transform.
   Declaring it in CSS as well meant GSAP's per-frame writes erased it. */
.svc.is-active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--lift-hi);
  z-index: 2;
}
.svc.is-active .svc__art { opacity: 1; transform: scale(1); }
.svc.is-active .card__tag { border-color: var(--glass-line); color: var(--paper); }
.svc.is-active .svc__cta { grid-template-rows: 1fr; }
.svc.is-active .svc__cta-in { opacity: 1; transform: none; }

/* ==========================================================================
   SYSTEM — the six-step horizontal scroll
   ========================================================================== */

/* The whole section pins as one unit — heading and rail together — so the
   horizontal scroll engages the moment the section fills the screen, while
   its heading is still on screen. Pinning only the rail meant the heading
   scrolled away first and the rail then sat alone at the top of an otherwise
   empty viewport before anything moved sideways.

   Must NOT clip: ScrollTrigger pins with position:fixed, and a clipping
   ancestor swallows it. The viewport does the clipping instead. */
.sys {
  overflow: visible;
  /* Exactly one viewport tall. A pinned element taller than the screen has
     its lower half permanently cropped, so the rail must be sized to the
     space left over rather than to its own content. */
  height: 100svh;
  min-height: 34rem;              /* floor for short laptop screens */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Padding and gaps are deliberately tight here. In a height-constrained
     pinned section every pixel of chrome is taken straight out of the cards,
     so the generous section rhythm used elsewhere would starve the rail. */
  gap: clamp(1rem, 2.4vw, 1.75rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* the rail takes whatever height the heading leaves behind */
.sys__viewport {
  overflow: clip;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
}

/* Because the section is now height-constrained, the heading has to be more
   compact than the free-flowing ones elsewhere — at the page's normal display
   size it consumed 440px of a 900px viewport and left the cards 131px tall.
   Scoped to .sys only; every other section keeps the full display scale. */
.sys > .wrap { flex: none; }
/* both stack sizes: the homepage markup uses stack-9, the generated service
   pages use stack-8 — matching only one left the other uncompacted */
.sys .stack-8,
.sys .stack-9 { gap: clamp(0.875rem, 1.8vw, 1.375rem); }
.sys .stmt    { gap: clamp(0.625rem, 1.4vw, 1.125rem); }

.sys .stmt__head {
  font-size: clamp(1.75rem, 3.5vw, 3.125rem);
  max-width: 22ch;
}

.sys .measure-md {
  font-size: var(--t-small);
  max-width: 52ch;
}

.sys__track {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  padding-inline: var(--gutter);
  padding-block: 0.5rem;      /* room for the hover lift, else it clips */
  will-change: transform;
  align-items: stretch;
  /* Fill the space the heading left over, but never grow past the card's
     natural full size — beyond that the cards just look stretched. Any slack
     is absorbed by the viewport centring the track. */
  height: min(100%, 28rem);
}

.step {
  position: relative;
  flex: none;
  width: clamp(17rem, 30vw, 27rem);
  /* height comes from the track now, so the card can never push the pinned
     section past one viewport */
  min-height: 0;
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--ink-card);
  border: var(--hair) solid var(--ink-line);
  display: grid;
  align-content: space-between;
  gap: var(--s-8);
  overflow: clip;
  isolation: isolate;
  transition: border-color 0.5s var(--e-out), background 0.5s var(--e-out);
}

.step:hover { border-color: #3A3A38; background: #1E1E1C; }

/* The closing card in each rail is inverted. It carries data-theme="paper" so
   every token inside it — including the accessible --ember-fg — resolves
   against a light surface. Doing this with an inline background instead left
   accent text resolving from the section's ink theme: bright ember on
   off-white, 3.02:1. */
.step--invert {
  background: var(--paper);
  color: var(--ink);
  border-color: transparent;
}
.step--invert:hover { background: #FFF; border-color: transparent; }

.step__idx {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--ember-fg);
}

.step__t {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.step__d { font-size: var(--t-small); color: var(--fg-mute); line-height: 1.6; max-width: 34ch; }

/* the connective thread running behind the steps */
.step__thread {
  position: absolute;
  left: 0; right: 0;
  top: 3.25rem;
  height: 1px;
  background: var(--ink-line);
  z-index: -1;
}

.sys__progress {
  position: relative;
  height: 2px;
  border-radius: 999px;
  background: var(--ink-line);
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
  overflow: clip;
}
.sys__progress i {
  position: absolute;
  inset: 0;
  background: var(--streak);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ==========================================================================
   CASES — the coverflow rail
   ========================================================================== */

.cases__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 56vh, 38rem);
}

.cases__rail {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  will-change: transform;
}

.case {
  position: relative;
  flex: none;
  width: clamp(15rem, 28vw, 25rem);
  aspect-ratio: 0.9;
  border-radius: var(--r-card);
  overflow: clip;
  isolation: isolate;
  background: #141412;
  transition: transform 0.75s var(--e-out), opacity 0.6s var(--e-out), filter 0.6s var(--e-out);
  transform: scale(0.78);
  opacity: 0.42;
  filter: grayscale(1);
}

.case.is-center {
  transform: scale(1);
  opacity: 1;
  filter: grayscale(0);
  box-shadow: var(--lift-dark);
}

.case__art { position: absolute; inset: 0; z-index: -1; }

.case__mark {
  position: absolute;
  top: clamp(0.875rem, 1.4vw, 1.25rem);
  left: clamp(0.875rem, 1.4vw, 1.25rem);
  width: 1.75rem;
  opacity: 0.85;
}
.case__mark svg,
.case__mark img { width: 100%; height: auto; display: block; }

/* the caption plate, revealed only on the centre card */
.case__plate {
  position: absolute;
  inset: auto 0 0 0;
  margin: clamp(0.5rem, 0.9vw, 0.875rem);
  padding: clamp(1rem, 1.5vw, 1.375rem);
  border-radius: calc(var(--r-card) * 0.72);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  gap: 0.5rem;
  transform: translateY(120%);
  transition: transform 0.7s var(--e-out);
}
.case.is-center .case__plate { transform: none; }

.case__brand {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ember-fg);
}

.case__name {
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.case__note { font-size: 0.8125rem; line-height: 1.5; color: var(--steel-dim); }

.case__svcs {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9A9A96;
  padding-block-start: 0.5rem;
  border-top: var(--hair) solid var(--paper-line);
}

/* -- rail navigation, the two-square reference move */
.railnav { display: flex; gap: 0.5rem; justify-content: center; }

.railnav__btn {
  width: clamp(2.75rem, 3.6vw, 3.5rem);
  aspect-ratio: 1;
  border-radius: calc(var(--r-sm) * 1.1);
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.4s var(--e-out), background 0.4s var(--e-out), opacity 0.3s linear;
}
.railnav__btn:hover { transform: translateY(-2px); }
.railnav__btn--on { background: var(--ember); color: #FFF; }
.railnav__btn:disabled { opacity: 0.28; pointer-events: none; }
.railnav__btn svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ==========================================================================
   BAND — the full-bleed cinematic strip
   ========================================================================== */

.band {
  position: relative;
  min-height: clamp(22rem, 62vh, 38rem);
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
  background: #060606;
}

.band__art { position: absolute; inset: -10% 0; z-index: -1; will-change: transform; }

.band__copy {
  position: relative;
  padding: var(--gutter);
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

.band__t {
  font-size: clamp(1.875rem, 4.4vw, 4rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.038em;
  line-height: 0.98;
  color: #FFF;
  max-width: 14ch;
}

.band__d { font-size: var(--t-small); color: rgba(245,244,242,.66); max-width: 36ch; }

.band__mark {
  position: absolute;
  top: var(--gutter); left: var(--gutter);
  width: 2.25rem;
  opacity: 0.9;
}
.band__mark svg,
.band__mark img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   WHY — the vertically-offset card rail, one inverted
   ========================================================================== */

.why__rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  align-items: start;
}

.why {
  position: relative;
  padding: clamp(1.25rem, 1.9vw, 1.75rem);
  border-radius: var(--r-card);
  background: var(--fog);
  min-height: clamp(15rem, 28vw, 20rem);
  display: grid;
  align-content: space-between;
  gap: var(--s-7);
  overflow: clip;
  isolation: isolate;
  transition: transform 0.6s var(--e-out), background 0.5s var(--e-out);
}

/* the deliberate offsets — this is the grid-break */
.why:nth-child(2) { margin-block-start: clamp(2rem, 4vw, 4rem); }
.why:nth-child(3) { margin-block-start: clamp(1rem, 2vw, 2rem); }
.why:nth-child(4) { margin-block-start: clamp(3rem, 6vw, 6rem); }
.why:nth-child(5) { margin-block-start: clamp(0.5rem, 1vw, 1rem); }

/* one card is inverted — the single deviation */
.why--dark {
  background: var(--ink);
  color: var(--paper);
}
.why--dark .why__d { color: var(--steel-light); }
.why--dark .card__tag { border-color: var(--ink-line); color: var(--steel-light); }

.why:hover { transform: translateY(-0.5rem); }

.why__t {
  font-size: clamp(1.125rem, 1.55vw, 1.375rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.028em;
  line-height: 1.14;
}

.why__d { font-size: 0.8125rem; line-height: 1.55; color: var(--steel-dim); }

.why__glow {
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, var(--ember-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.55s var(--e-out);
  z-index: -1;
}
.why:hover .why__glow { opacity: 1; }

/* ==========================================================================
   FOUNDER
   ========================================================================== */

.founder {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: center;
}

.founder__art {
  grid-column: 1 / span 5;
  position: relative;
  aspect-ratio: 0.86;
  border-radius: var(--r-card);
  overflow: clip;
  isolation: isolate;
}

.founder__plate {
  position: absolute;
  inset: auto var(--s-4) var(--s-4) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: calc(var(--r-card) * 0.62);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--hair) solid var(--glass-line);
  display: grid;
  gap: 0.125rem;
}

.founder__name {
  font-size: 1.375rem;
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  color: var(--paper);
}
.founder__role {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-light);
}

.founder__body {
  grid-column: 7 / span 6;
  display: grid;
  gap: var(--s-6);
  justify-items: start;
}

.founder__quote {
  font-size: clamp(1.25rem, 2.1vw, 1.875rem);
  font-weight: var(--w-book);
  letter-spacing: -0.028em;
  line-height: 1.32;
  max-width: 26ch;
}

/* ==========================================================================
   LAB — insight cards
   ========================================================================== */

.lab__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
}

.post {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding-block-start: var(--s-5);
  border-top: var(--hair) solid var(--line);
}

.post__art {
  position: relative;
  aspect-ratio: 1.42;
  border-radius: var(--r-card);
  overflow: clip;
  isolation: isolate;
}
.post__art > * { transition: transform 0.9s var(--e-out); }
.post:hover .post__art > * { transform: scale(1.06); }

.post__t {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.026em;
  line-height: 1.24;
  transition: color 0.4s var(--e-out);
}
.post:hover .post__t { color: var(--ember-fg); }

.post__d { font-size: 0.8125rem; color: var(--fg-mute); line-height: 1.55; }

/* ==========================================================================
   VOICES — testimonials
   ========================================================================== */

.voices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  align-items: start;
}

.voice {
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  display: grid;
  gap: var(--s-6);
  align-content: space-between;
  min-height: clamp(15rem, 26vw, 20rem);
  transition: transform 0.6s var(--e-out), border-color 0.5s var(--e-out);
}
.voice:hover { transform: translateY(-0.375rem); border-color: #3A3A38; }

.voice:nth-child(2) { margin-block-start: clamp(1.25rem, 2.5vw, 2.5rem); }

.voice__q {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.48;
  letter-spacing: -0.018em;
  color: var(--fg);
}

.voice__by {
  display: grid;
  gap: 0.125rem;
  padding-block-start: var(--s-5);
  border-top: var(--hair) solid var(--line);
}
.voice__brand { font-size: var(--t-small); font-weight: var(--w-medium); }
.voice__svc {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ==========================================================================
   AUDIT — the free growth audit
   ========================================================================== */

.audit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: start;
}

.audit__left { grid-column: 1 / span 5; display: grid; gap: var(--s-7); justify-items: start; }

.audit__form {
  grid-column: 7 / span 6;
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--hair) solid var(--glass-line);
  box-shadow: var(--lift-dark);
  display: grid;
  gap: var(--s-5);
}

.audit__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.audit__fields > .field--wide { grid-column: 1 / -1; }

.audit__note {
  font-size: 0.75rem;
  color: var(--fg-mute);
  line-height: 1.5;
  max-width: 56ch;   /* was running to 90ch across the full form width */
}

/* ==========================================================================
   CTA — the closing statement
   ========================================================================== */

.cta { position: relative; text-align: center; overflow: clip; }

.cta__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(60rem, 90vw);
  aspect-ratio: 1.6;
  translate: -50% -50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--ember-glow), transparent 68%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

.cta__t {
  font-size: var(--t-giant);
  font-weight: var(--w-medium);
  letter-spacing: -0.042em;
  line-height: 0.94;
  max-width: 15ch;
  margin-inline: auto;
}

.cta__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot { position: relative; padding-block-start: clamp(4rem, 8vw, 8rem); }

.foot__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  padding-block-end: clamp(3rem, 6vw, 6rem);
}

.foot__lead { grid-column: 1 / span 5; display: grid; gap: var(--s-5); justify-items: start; }

.foot__t {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 14ch;
}

.foot__cols {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
}

.foot__col { display: grid; gap: var(--s-4); align-content: start; }

.foot__ch {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.foot__list { display: grid; gap: 0.75rem; }

.foot__link {
  font-size: var(--t-small);
  color: var(--fg);
  width: fit-content;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 26px;     /* was 23px — under the 24px WCAG target minimum */
  transition: color 0.35s var(--e-out);
}
.foot__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--e-out);
}
.foot__link:hover { color: var(--ember-fg); }
.foot__link:hover::after { transform: scaleX(1); transform-origin: left center; }

/* the oversized footer wordmark, cropped by the page edge */
.foot__mark {
  display: block;
  width: 100%;
  font-size: clamp(4rem, 21vw, 19rem);
  line-height: 0.72;
  letter-spacing: -0.05em;
  font-weight: var(--w-medium);
  color: var(--ink-card);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  margin-block-end: clamp(-0.75rem, -1.6vw, -2rem);
  pointer-events: none;
}

.foot__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-block: var(--s-5);
  border-top: var(--hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.foot__disc { max-width: 46ch; line-height: 1.6; }