/* ============ Tokens ============ */
:root {
  --bg: #0a0605;
  --fg: #f4ede6;
  --accent: #ff3d00;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'Onest', system-ui, sans-serif;

  --r-pill: 999px;
  --r-card: 40px;
  --pad: clamp(16px, 4vw, 56px);
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* scene geometry */
  --award-w: clamp(220px, 25vw, 420px);
  --award-h: calc(var(--award-w) * .7);
  --ped-w: calc(var(--award-w) * 1.6);
  --ped-y: 67%;                       /* pedestal top, from hero top */
  --gap: calc(var(--award-w) * .07);  /* air gap under the award */
  --fs: min(16.5vw, 31svh);           /* display size */
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {               /* film grain, 6% */
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 50;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { hyphens: none; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============ Entrance (MOT-01/02) ============ */
.rise { opacity: 0; transform: translateY(28px); filter: blur(14px); }
.is-in .rise, .rise.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 900ms var(--ease) var(--d, 0ms),
              transform 900ms var(--ease) var(--d, 0ms),
              filter 900ms var(--ease) var(--d, 0ms);
}
.nav__logo           { --d: 300ms; }
.nav__menu           { --d: 420ms; }
.nav__cta            { --d: 470ms; }
.pedestal            { --d: 600ms; }
.hero__line--1       { --d: 900ms; }
.hero__line--2       { --d: 1000ms; }
.award               { --d: 1040ms; }
.plaque              { --d: 1100ms; }
.hero__cta           { --d: 1200ms; }

/* ============ Nav ============ */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s6);
  padding: var(--s5) var(--pad);
}
.nav__logo { font-size: 18px; letter-spacing: -.01em; margin-right: auto; }
.nav__logo span { opacity: .55; }
.nav__menu { display: flex; gap: var(--s6); font-size: 14px; }
.nav__menu a {
  position: relative; opacity: .72; padding: var(--s3) 0;
  transition: opacity 320ms var(--ease);
}
.nav__menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 500ms var(--ease);
}
@media (hover: hover) {
  .nav__menu a:hover { opacity: 1; }
  .nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ============ Buttons (CTA-01/05/06) ============ */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-pill);
  font-size: 15px; white-space: nowrap;
  transition: transform 620ms var(--ease), box-shadow 620ms var(--ease);
}
.btn__fill {
  position: absolute; inset: 0; z-index: 0;
  background: var(--fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.btn__label { position: relative; z-index: 2; transition: color 320ms var(--ease); }
.btn__arrow {
  position: relative; z-index: 2; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 520ms var(--ease), color 320ms var(--ease);
}
.btn--solid {
  min-height: 60px; padding: 0 var(--s5) 0 var(--s6);
  font-size: 16px;
  color: var(--fg);
  background:
    radial-gradient(90% 120% at 50% 150%, #ffc75a 0%, #ff8a1a 22%, #ff3d00 40%, rgba(150, 18, 0, .9) 62%, rgba(20, 6, 5, 1) 88%),
    #140605;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(255, 200, 120, .6),
    0 16px 50px -14px rgba(255, 61, 0, .85),
    0 2px 24px -6px rgba(255, 140, 40, .45);
}
.btn--ghost {
  min-height: 44px;
  box-shadow: inset 0 0 0 1px rgba(244, 237, 230, .28);   /* hairline, no fill */
  font-size: 14px;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover .btn__fill { transform: scaleX(1); }
  .btn:hover .btn__label, .btn:hover .btn__arrow { color: var(--bg); text-shadow: none; }
  .btn:hover .btn__arrow { transform: translate(3px, -3px); }
  .btn--solid:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      inset 0 -1px 0 rgba(255, 200, 120, .6),
      0 22px 70px -12px rgba(255, 61, 0, 1),
      0 2px 30px -4px rgba(255, 140, 40, .6);
  }
}
.btn:focus-visible, .award:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }

/* ============ Hero ============ */
.hero {
  position: relative;
  height: 100svh; min-height: 600px;
  overflow: hidden; isolation: isolate;
}
/* fire rises from below: black -> deep red -> fire -> amber */
.fire {
  background:
    radial-gradient(42% 30% at 50% 106%, #ffc75a 0%, rgba(255, 150, 40, .9) 22%, rgba(255, 61, 0, 0) 70%),
    radial-gradient(70% 46% at 50% 110%, #ff3d00 0%, rgba(214, 38, 0, .85) 35%, rgba(120, 14, 0, .55) 62%, rgba(40, 4, 0, 0) 100%),
    radial-gradient(55% 40% at 92% 112%, rgba(255, 120, 30, .75), rgba(255, 61, 0, 0) 70%),
    radial-gradient(55% 40% at 8% 112%, rgba(200, 30, 0, .6), rgba(200, 30, 0, 0) 70%);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -2;
  transition: filter 900ms var(--ease), transform 900ms var(--ease);
  transform-origin: 50% 100%;
}
.hero__glow::after {          /* soft halo behind the award */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(24% 24% at 50% 55%, rgba(255, 61, 0, .22), rgba(255, 61, 0, 0) 70%);
}
.hero.is-diamond .hero__glow { filter: brightness(1.2) saturate(1.1); transform: scale(1.04); }

/* Display type, scheme B */
.hero__title {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  font-weight: 300;
  font-size: var(--fs);
  line-height: .8;
  letter-spacing: -.045em;
}
.hero__line {
  position: absolute; display: block; white-space: nowrap;
  padding-bottom: .08em;
  background: linear-gradient(180deg, var(--fg) 35%, #ffb48a 72%, #ff5a1a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__line--1 { left: calc(var(--pad) - .05em); top: calc(var(--ped-y) - var(--gap) - var(--award-h) - .52em); }
.hero__line--2 { right: var(--pad); top: calc(var(--ped-y) - var(--gap) - var(--award-h) * .05 - .73em); }

/* ============ Stage: pedestal + award ============ */
.stage {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - var(--ped-w) / 2);
  width: var(--ped-w);
  pointer-events: none;
}
.pedestal {
  position: absolute; left: 0; right: 0; top: var(--ped-y); bottom: -2px; z-index: 1;
  display: flex; flex-direction: column;
}
.pedestal__top {
  height: calc(var(--ped-w) * .065);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255, 140, 60, .5), rgba(255, 140, 60, 0) 18%, rgba(255, 140, 60, 0) 82%, rgba(255, 140, 60, .5)),
    linear-gradient(180deg, #1e100b, #2c170f);
}
.pedestal::before {                  /* backlight: fire behind the pedestal */
  content: ''; position: absolute; z-index: -1;
  left: -45%; right: -45%; top: -38%; bottom: -6%;
  background:
    radial-gradient(34% 30% at 50% 40%, #ffc75a 0%, rgba(255, 138, 26, .95) 30%, rgba(255, 61, 0, 0) 75%),
    radial-gradient(50% 52% at 50% 46%, #ff3d00 0%, rgba(200, 30, 0, .8) 40%, rgba(110, 12, 0, .35) 70%, rgba(60, 6, 0, 0) 100%);
  filter: blur(26px);
  transition: filter 900ms var(--ease), transform 900ms var(--ease);
}
.hero.is-diamond .pedestal::before { filter: blur(26px) brightness(1.2); transform: scale(1.04); }
.pedestal__front {
  flex: 1;
  background:
    /* backlit contour: edges catch the fire from behind */
    linear-gradient(90deg, rgba(255, 170, 80, .95) 0, rgba(255, 61, 0, .35) 1.5px, rgba(255, 61, 0, 0) 12%, rgba(255, 61, 0, 0) 88%, rgba(255, 61, 0, .35) calc(100% - 1.5px), rgba(255, 170, 80, .95) 100%),
    linear-gradient(180deg, #1c0e0a 0%, #0e0706 40%, #090504 100%);
  box-shadow: inset 0 1px 0 rgba(255, 200, 140, .75);
}
.award__shadow {           /* contact shadow, own layer, air gap above */
  position: absolute; left: 50%;
  top: calc(var(--ped-y) + var(--ped-w) * .035);
  width: calc(var(--award-w) * 1.05); height: calc(var(--award-w) * 1.05);
  translate: -50% -50%;
  z-index: 1;
  background: radial-gradient(rgba(0, 0, 0, .75), transparent 65%);
  filter: blur(18px);
  transform: scaleY(.15);
  transition: transform 620ms var(--ease), opacity 620ms var(--ease);
}
.stage.is-diamond .award__shadow { transform: scaleY(.12) scaleX(.85); opacity: .75; }

.plaque {
  position: absolute; left: 0; right: 0; z-index: 3;
  top: calc(var(--ped-y) + var(--ped-w) * .065 + clamp(18px, 4svh, 44px));
  text-align: center;
  font-weight: 300;
  font-size: clamp(17px, 1.75vw, 28px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: rgba(244, 237, 230, .8);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
}

.award {
  position: absolute; left: 50%;
  bottom: calc(100% - var(--ped-y) + var(--gap));
  width: var(--award-w); aspect-ratio: 300 / 210;
  translate: -50% 0;
  z-index: 3;
  pointer-events: auto;
  border-radius: 20% / 28.6%;
  -webkit-tap-highlight-color: transparent;
}
.award__canvas {
  position: absolute;
  left: -30%; top: -40%; width: 160%; height: 180%;
  pointer-events: none;
}
/* static button is visible until the 3D model has drawn its first frame */
.award__fallback {
  position: absolute; inset: 0;
  transform: perspective(900px) rotateX(6deg) rotateY(-18deg);
  transition: opacity 600ms var(--ease);
}
.award__fallback svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.fb-red { filter: drop-shadow(14px 10px 0 #5a0603) drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.fb-dia {
  filter: drop-shadow(14px 10px 0 #8a8e95) drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
  clip-path: inset(-15% 115% -15% -15%);
  transition: clip-path 1000ms var(--ease);
}
.award.is-diamond .fb-dia { clip-path: inset(-15% -25% -15% -15%); }
.award__canvas { opacity: 0; transition: opacity 600ms var(--ease); }
.award.gl-ready .award__canvas { opacity: 1; }
.award.gl-ready .award__fallback { opacity: 0; }
.award.no-gl .award__canvas { display: none; }

.award__glint {
  position: absolute; width: calc(var(--award-w) * .11); aspect-ratio: 1;
  opacity: 0; transform: scale(.2) rotate(-60deg);
  transition: opacity 520ms var(--ease), transform 800ms var(--ease);
  pointer-events: none;
}
.award__glint svg { display: block; width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 200, 160, .9)); }
.award__glint--1 { left: 2%;  top: 2%; }
.award__glint--2 { right: -4%; top: -12%; width: calc(var(--award-w) * .14); }
.award.is-diamond .award__glint { opacity: 1; transform: scale(1) rotate(0); }
.award.is-diamond .award__glint--1 { transition-delay: 620ms; }
.award.is-diamond .award__glint--2 { transition-delay: 760ms; }

/* ============ Bottom band ============ */
.hero__cta {
  position: absolute; right: var(--pad); bottom: clamp(28px, 6svh, 64px); z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s3);
}
.hero__note { font-size: 13px; opacity: .58; }

/* ============ Tablet & mobile ============ */
@media (max-width: 1100px) {
  :root { --award-w: clamp(200px, 30vw, 340px); --ped-w: calc(var(--award-w) * 1.55); --ped-y: 62%; --fs: min(19vw, 22svh); }
  .nav__menu { display: none; }
  .plaque { top: calc(var(--ped-y) + var(--ped-w) * .065 + 16px); font-size: clamp(17px, 2.6vw, 24px); }
  .hero__cta {
    left: 50%; right: auto; transform: translateX(-50%);
    align-items: center;
    bottom: clamp(24px, 5svh, 48px);
  }
  .is-in .hero__cta.rise { transform: translateX(-50%); }
  .hero__cta.rise { transform: translate(-50%, 28px); }
}
.hero__chart { display: none; }
@media (max-width: 560px) {
  :root {
    --fs: min(24vw, 11svh);
    --award-w: min(64vw, 28svh);
    --ped-w: 92vw;
    --top: calc(var(--fs) * .2 + 84px + max(0px, (100svh - 700px) * .45));
    --ped-y: calc(var(--top) + var(--fs) * 1.86 + var(--award-h) + 26px);
  }
  .nav__cta { display: none; }
  .hero__line--1 { top: var(--top); left: var(--pad); }
  .award { top: calc(var(--top) + var(--fs) * .92); bottom: auto; left: 50%; }
  .award__shadow { display: none; }
  .award__glint--2 { display: none; }
  .hero__line--2 { top: calc(var(--top) + var(--fs) * .92 + var(--award-h) + 14px); right: var(--pad); }
  .plaque { top: calc(var(--ped-y) + var(--ped-w) * .065 + 18px); }
  .hero__cta { top: calc(var(--ped-y) + var(--ped-w) * .065 + 18px + 3.2em + 22px); bottom: auto; }
  .btn--solid { min-height: 56px; }

  .hero__chart {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    left: 0; right: 0;
    top: calc(var(--top) + var(--fs) * .7);
    height: calc(var(--award-h) + var(--fs) * 1.1);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, #000 35%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, #000 35%);
  }
}
.hero__chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hc-grid line { stroke: rgba(244, 237, 230, .14); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; }
.hc-line { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 4; filter: drop-shadow(0 0 10px rgba(255, 61, 0, 1)) drop-shadow(0 0 3px rgba(255, 200, 120, .8)); animation: hc-draw 6s var(--ease) 1.2s infinite; }
.hc-area { opacity: 0; animation: hc-area 6s var(--ease) 1.2s infinite; }
.hc-dot {
  position: absolute; right: 0; top: 8%; width: 12px; height: 12px; margin: -6px -6px 0 0; border-radius: 50%;
  background: #ffc75a; box-shadow: 0 0 0 6px rgba(255, 61, 0, .25), 0 0 24px #ff3d00;
  opacity: 0; animation: hc-dot 6s var(--ease) 1.2s infinite;
}
.hc-chip {
  position: absolute; left: var(--pad); bottom: 2%;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  font-size: 12px; color: var(--fg);
  background: rgba(30, 16, 12, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 24px -8px rgba(255, 61, 0, .6);
  opacity: 0; animation: hc-chip 6s var(--ease) 1.2s infinite;
}
.hc-chip svg { width: 14px; height: 14px; fill: none; stroke: #ffb48a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hc-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 50% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hc-area { 0%, 25% { opacity: 0; } 55%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hc-dot { 0%, 45% { opacity: 0; transform: scale(.4); } 52%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes hc-chip { 0%, 50% { opacity: 0; transform: translateY(8px); filter: blur(6px); } 58%, 88% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hc-line, .hc-area, .hc-dot, .hc-chip { animation: none; opacity: 1; stroke-dashoffset: 0; }
}


/* =====================================================================
   Case page (case.html)
   ===================================================================== */
.slide__more { margin-top: var(--s5); align-self: flex-start; }

.case-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 88svh;
  padding: clamp(160px, 22vh, 220px) var(--pad) clamp(48px, 8vh, 96px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.case-hero__glow { position: absolute; inset: 0; z-index: -1; }
.case-back {
  position: absolute; top: clamp(96px, 13vh, 130px); left: var(--pad);
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 14px; opacity: .75;
  transition: opacity 320ms var(--ease);
}
.case-back svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 520ms var(--ease);
}
@media (hover: hover) { .case-back:hover { opacity: 1; } .case-back:hover svg { transform: translateX(-4px); } }
.case-hero .label { opacity: .55; }
.case-hero__title {
  margin-top: var(--s4);
  font-weight: 300; font-size: clamp(3rem, 10vw, 10rem);
  line-height: .86; letter-spacing: -.045em;
  text-wrap: balance; hyphens: none;
}
.case-hero__niche { margin-top: var(--s5); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; opacity: .72; max-width: 40ch; }
.case-meta { margin: clamp(40px, 7vh, 72px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.case-meta div { padding-top: var(--s4); box-shadow: inset 0 1px 0 rgba(244, 237, 230, .16); }
.case-meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; opacity: .5; }
.case-meta dd { margin: var(--s3) 0 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.35; }

.case-cover { margin: 0; position: relative; z-index: 1; }
.case-cover .shot { aspect-ratio: 16 / 9; }

.case-task { font-weight: 300; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.02em; max-width: 34ch; }

.case-gallery { display: grid; grid-template-columns: 1fr .316fr .316fr; gap: var(--s4); }
.case-gallery .shot--wide { aspect-ratio: 16 / 9; }
.case-gallery .shot--tall { aspect-ratio: 9 / 16; }
.case-gallery .shot--wide:last-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.case-results__head { margin-top: clamp(96px, 14vh, 160px); }
.case-numbers { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.case-numbers div { padding-top: var(--s5); box-shadow: inset 0 1px 0 rgba(244, 237, 230, .16); }
.case-numbers dt {
  font-weight: 300; font-size: clamp(64px, 8vw, 132px); line-height: .85; letter-spacing: -.05em;
  background: linear-gradient(180deg, var(--fg) 20%, #ffb48a 60%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.case-numbers dd { margin: var(--s3) 0 0; font-size: 15px; opacity: .6; }

.case-review .label { opacity: .55; }
.case-review__quote { margin: var(--s6) 0 0; }
.case-review__quote p { margin: 0; font-weight: 300; font-size: clamp(28px, 3.6vw, 58px); line-height: 1.1; letter-spacing: -.03em; max-width: 26ch; text-wrap: balance; }
.case-review__quote footer { margin-top: var(--s6); font-size: 15px; opacity: .6; }

.case-next { min-height: 90svh; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.case-next__glow { position: absolute; inset: 0; z-index: -1; }
.case-next .label { opacity: .55; }
.case-next__link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .18em;
  margin-top: var(--s4); min-height: 44px;
  font-weight: 300; font-size: clamp(3rem, 9vw, 9rem); line-height: .9; letter-spacing: -.045em;
}
.case-next__link svg {
  width: .6em; height: .6em; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 520ms var(--ease);
}
.case-next__link span { transition: transform 620ms var(--ease); }
@media (hover: hover) {
  .case-next__link:hover svg { transform: translateX(.14em); }
  .case-next__link:hover span { transform: translateX(.04em); }
}
.case-next__cta { margin: clamp(40px, 7vh, 72px) 0 clamp(48px, 8vh, 96px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }

@media (max-width: 760px) {
  .case-meta { grid-template-columns: 1fr 1fr; }
  .case-numbers { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: 1fr 1fr; }
  .case-gallery .shot--wide { grid-column: 1 / -1; }
}



/* ============ Reduced motion (MOT-05) ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* =====================================================================
   Sections
   ===================================================================== */
.label {
  font-size: 12px; line-height: 1.8;
  text-transform: uppercase; letter-spacing: .18em;
}
.section {
  position: relative;
  padding: clamp(96px, 14vh, 168px) var(--pad);
  border-radius: var(--r-card) var(--r-card) 0 0;
  overflow: hidden;
}
.section + .section { margin-top: calc(var(--r-card) * -1); }
.section--light { background: var(--fg); color: var(--bg); }
.section--dark  { background: var(--bg); color: var(--fg); }

h2 {
  font-weight: 300;
  font-size: clamp(2.4rem, 5.6vw, 5.6rem);
  line-height: .92;
  letter-spacing: -.035em;
}
h3 { font-weight: 400; margin: 0; hyphens: none; text-wrap: balance; }
.lead {
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.55;
  max-width: 52ch;
  opacity: .78;
}

/* left label column + heading */
.sec-head {
  display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: var(--s5);
  align-items: start;
  margin-bottom: clamp(48px, 8vh, 96px);
}
.sec-head .label { padding-top: .9em; opacity: .55; }

/* ---------- Why YouTube: animated background ---------- */
.why {
  min-height: 100svh;
  isolation: isolate;
  padding-top: clamp(120px, 18vh, 200px);
}
.why__bg {
  position: absolute; inset: 0; z-index: -1; overflow: clip;
  display: grid; justify-items: end;
  background:
    radial-gradient(50% 45% at 85% 105%, rgba(255, 61, 0, .32), rgba(255, 61, 0, 0) 70%),
    radial-gradient(40% 40% at 70% 30%, rgba(255, 120, 40, .08), rgba(255, 120, 40, 0) 70%),
    var(--bg);
}
.why__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* shared layer */
.viz {
  position: sticky; top: 0; grid-area: 1 / 1; align-self: start;
  height: 100svh; width: 52%;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms var(--ease), visibility 0s linear 900ms;
}
.viz.is-active { opacity: 1; visibility: visible; transition: opacity 900ms var(--ease); }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--fill { fill: currentColor; stroke: none; }
.g-avatar {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffc75a, var(--accent) 55%, #6e0b00);
}

.g-toasts { position: absolute; top: 13%; right: 5%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.g-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: var(--r-pill);
  font-size: 13px; color: var(--fg);
  background: rgba(30, 16, 12, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 30px -10px rgba(255, 61, 0, .5);
  animation: toast 4.2s var(--ease) forwards;
}
.g-toast .ico { color: #ffb48a; }
@keyframes toast {
  0% { opacity: 0; transform: translateX(24px); filter: blur(8px); }
  12% { opacity: 1; transform: none; filter: blur(0); }
  82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.why__grid { position: relative; z-index: 2; max-width: min(720px, 46vw); }
.why__main .label { opacity: .55; }
.why__main h2 { margin: var(--s5) 0 0; font-size: clamp(2.4rem, 5vw, 5rem); }
.reasons { list-style: none; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0; max-width: 640px; }
.reasons li {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s4);
  padding: var(--s5) 0;
  box-shadow: inset 0 1px 0 rgba(244, 237, 230, .14);
}
.reasons span { font-size: 13px; opacity: .45; padding-top: .4em; }
.reasons h3 { font-weight: 300; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; letter-spacing: -.02em; }
.reasons p { margin-top: var(--s3); font-size: 15px; line-height: 1.55; opacity: .62; max-width: 46ch; }

/* ---------- Rows (services) ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  position: relative;
  display: grid; grid-template-columns: minmax(160px, 1fr) 1.6fr 1.4fr; gap: var(--s5);
  align-items: baseline;
  padding: clamp(22px, 3vh, 34px) 0;
  box-shadow: inset 0 1px 0 rgba(244, 237, 230, .14);
}
.row::before {                        /* fire hairline grows on hover */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, #ffc75a, var(--accent) 40%, rgba(255, 61, 0, 0));
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease);
}
.row__num { font-size: 13px; opacity: .45; letter-spacing: .04em; }
.row__title {
  font-weight: 300; font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.02; letter-spacing: -.025em;
  transition: transform 620ms var(--ease);
}
.row__text { font-size: 15px; line-height: 1.55; max-width: 42ch; opacity: .6; transition: opacity 320ms var(--ease); }
.section--light .row { box-shadow: inset 0 1px 0 rgba(10, 6, 5, .14); }
.section--light .row__text { opacity: .7; }
@media (hover: hover) {
  .row:hover::before { transform: scaleX(1); }
  .row:hover .row__title { transform: translateX(14px); }
  .row:hover .row__text { opacity: .85; }
}

/* ---------- Slider (projects) ---------- */
.slider { position: relative; }
.slider__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: var(--s5);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slide {
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1.55fr 1fr;
  min-height: clamp(420px, 62vh, 620px);
  border-radius: var(--r-card);
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 80% 120%, rgba(255, 61, 0, .28), rgba(255, 61, 0, 0) 70%),
    #140b09;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: opacity 620ms var(--ease);
}
.slide__media {
  display: grid; grid-template-columns: 1fr .316fr; gap: 2px;
  background: #0a0605;
}
.shot {
  position: relative;
  display: flex; align-items: flex-end;
  padding: var(--s5);
  background:
    radial-gradient(80% 60% at 50% 110%, rgba(255, 61, 0, .22), rgba(255, 61, 0, 0) 70%),
    linear-gradient(160deg, #22130e 0%, #110907 100%);
}
.shot .label { font-size: 11px; opacity: .4; }
.slide__info {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 52px);
}
.slide__num { font-size: 13px; opacity: .45; }
.slide__info h3 {
  margin-top: auto;
  font-weight: 300; font-size: clamp(32px, 3.6vw, 60px);
  line-height: .95; letter-spacing: -.035em;
}
.slide__niche { margin-top: var(--s3); font-size: 15px; opacity: .55; max-width: 32ch; }
.slide__what {
  margin-top: var(--s6); padding-top: var(--s5);
  font-size: 16px; line-height: 1.55; max-width: 40ch; opacity: .8;
  box-shadow: inset 0 1px 0 rgba(244, 237, 230, .14);
}
.slide__tag { margin-top: var(--s5); font-size: 11px; opacity: .55; }

.slider__bar {
  display: flex; align-items: center; gap: var(--s5);
  margin-top: var(--s6);
}
.slider__count { font-size: 14px; opacity: .6; font-variant-numeric: tabular-nums; min-width: 64px; }
.slider__count b { font-weight: 400; opacity: 1; color: var(--fg); }
.slider__progress { position: relative; flex: 1; height: 1px; background: rgba(244, 237, 230, .16); }
.slider__progress i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #ffc75a, var(--accent));
  transform: scaleX(var(--p, .14)); transform-origin: left;
  transition: transform 620ms var(--ease);
}
.slider__arrows { display: flex; gap: var(--s3); }
.arrow {
  position: relative; overflow: hidden; isolation: isolate;
  width: 60px; height: 60px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(244, 237, 230, .28);
}
.arrow svg {
  position: relative; z-index: 2; width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 520ms var(--ease), color 320ms var(--ease);
}
.arrow[data-prev] .btn__fill { transform-origin: right; }
@media (hover: hover) {
  .arrow:hover .btn__fill { transform: scaleX(1); }
  .arrow:hover svg { color: var(--bg); }
  .arrow[data-next]:hover svg { transform: translateX(4px); }
  .arrow[data-prev]:hover svg { transform: translateX(-4px); }
}
.arrow:focus-visible, .slider__track:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ---------- Audit ---------- */
.audit {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.audit__text h2 { margin: var(--s5) 0 var(--s6); }
.audit__text .label { opacity: .55; }
.pro-card {                       /* black plaque lit from below */
  position: relative;
  padding: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(56px, 7vw, 96px);
  border-radius: var(--r-card);
  color: var(--fg);
  background:
    radial-gradient(85% 60% at 50% 118%, #ffc75a 0%, #ff8a1a 16%, #ff3d00 34%, rgba(140, 16, 0, .9) 56%, rgba(20, 6, 5, 0) 82%),
    linear-gradient(180deg, #1a0d0a 0%, #0c0605 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 0 rgba(255, 200, 120, .55),
    0 40px 90px -30px rgba(255, 61, 0, .7),
    0 10px 30px -10px rgba(10, 6, 5, .5);
}
.pro-card .label { opacity: .55; }
.pro-card__list { list-style: none; margin: var(--s5) 0 var(--s7); padding: 0; }
.pro-card__list li {
  padding: var(--s4) 0;
  font-weight: 300; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -.015em;
  box-shadow: inset 0 1px 0 rgba(244, 237, 230, .14);
}
.pro-card__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.pro-card .hero__note { opacity: .7; }

/* ---------- Contact ---------- */
.contact {
  min-height: 84svh;
  display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto;
  gap: var(--s7) var(--s5);
  align-content: space-between; align-items: center;
  isolation: isolate;
}
.contact__glow { position: absolute; inset: 0; z-index: -1; }
.contact__title {
  font-size: clamp(3.2rem, 11vw, 12rem);
  line-height: .84; letter-spacing: -.045em;
}
.contact__side { display: grid; gap: var(--s7); justify-items: start; }
.contact__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.contact__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.contact__links li { display: grid; gap: 2px; }
.contact__links .label { font-size: 11px; opacity: .55; }
.contact__links a {
  position: relative; justify-self: start;
  font-weight: 300; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.02em;
}
.contact__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--ease);
}
@media (hover: hover) { .contact__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.footer {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5);
  padding-top: var(--s5);
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(244, 237, 230, .2);
}
.footer span, .footer a { opacity: .75; }


/* ---------- Plaque emphasis ---------- */
.plaque b { font-weight: 400; color: #ffb48a; }

/* ---------- Why: messenger dialogue ---------- */
.chat-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  perspective: 1400px;
}
.chat {
  position: relative;
  width: min(520px, 86%); height: min(600px, 62svh);
  display: flex; flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  background:
    radial-gradient(90% 40% at 50% 115%, rgba(255, 61, 0, .38), rgba(255, 61, 0, 0) 70%),
    rgba(22, 12, 9, .78);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -2px 0 rgba(255, 200, 120, .35),
    0 50px 120px -40px rgba(255, 61, 0, .6),
    0 30px 60px -30px rgba(0, 0, 0, .8);
  transform: rotateY(-9deg) rotateX(3deg);
  transition: opacity 900ms var(--ease), filter 900ms var(--ease);
}
.chat-stage.is-done .chat, .chat-stage.is-done .lead-chart { opacity: 0; filter: blur(12px); }
.msg.is-past.is-in { opacity: .38; }
.chat__divider.is-past.is-in { opacity: .45; }

/* leads chart: appears under the chat when the story ends */
.lead-chart {
  width: min(520px, 86%);
  padding: 18px 22px 14px;
  border-radius: 28px;
  background:
    radial-gradient(80% 90% at 90% 120%, rgba(255, 61, 0, .35), rgba(255, 61, 0, 0) 70%),
    rgba(22, 12, 9, .78);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 30px 70px -30px rgba(255, 61, 0, .6);
  transform: rotateY(-9deg) rotateX(3deg) translateY(24px);
  opacity: 0; filter: blur(10px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
}
.lead-chart.is-in { opacity: 1; filter: blur(0); transform: rotateY(-9deg) rotateX(3deg); }
.lead-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lead-chart__head .label { font-size: 11px; opacity: .55; }
.lead-chart__head b { font-weight: 300; font-size: 34px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lead-chart__head b::before { content: '+'; color: #ffb48a; }
.lead-chart__head i { font-style: normal; font-size: 12px; opacity: .5; margin-left: 8px; letter-spacing: 0; }
.lead-chart svg { display: block; width: 100%; height: 70px; margin-top: 8px; overflow: visible; }
.lead-chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 61, 0, .7)); }
.lead-chart__area { opacity: 0; transition: opacity 1200ms var(--ease) 900ms; }
.lead-chart.is-in .lead-chart__line { stroke-dashoffset: 0; transition: stroke-dashoffset 2000ms var(--ease) 300ms; }
.lead-chart.is-in .lead-chart__area { opacity: 1; }
.chat__head {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 26px;
  box-shadow: inset 0 -1px 0 rgba(244, 237, 230, .08);
}
.chat__head b { display: block; font-weight: 400; font-size: 16px; }
.chat__head i { display: block; font-style: normal; font-size: 12px; color: #ffb48a; margin-top: 2px; }
.chat__ava {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px;
  background: radial-gradient(circle at 35% 30%, #5a3a30, #24140f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.chat__body {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 20px 22px 26px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%);
}
.msg {
  position: relative; max-width: 80%;
  padding: 12px 16px 8px;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.38;
  opacity: 0; transform: translateY(16px) scale(.96); filter: blur(8px);
  transform-origin: bottom left;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease), filter 620ms var(--ease);
}
.msg.is-in { opacity: 1; transform: none; filter: blur(0); }
.msg p { margin: 0; }
.msg time { display: block; margin-top: 2px; text-align: right; font-size: 11px; opacity: .5; }
.msg--boss {
  align-self: flex-start;
  border-radius: 20px 20px 20px 6px;
  background: rgba(244, 237, 230, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.msg--me {
  align-self: flex-end; transform-origin: bottom right;
  border-radius: 20px 20px 6px 20px;
  color: var(--fg);
  background:
    radial-gradient(120% 160% at 50% 170%, #ffc75a 0%, #ff8a1a 22%, #ff3d00 42%, rgba(150, 18, 0, .95) 66%, #2a0d08 92%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 30px -12px rgba(255, 61, 0, .7);
}
.msg--typing { display: inline-flex; gap: 5px; padding: 15px 16px; }
.msg--typing span {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5;
  animation: typing 1100ms var(--ease) infinite;
}
.msg--typing span:nth-child(2) { animation-delay: 160ms; }
.msg--typing span:nth-child(3) { animation-delay: 320ms; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: .9; } }
.chat__divider {
  align-self: center; margin: 8px 0;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 12px; letter-spacing: .02em; color: #ffb48a;
  background: rgba(255, 61, 0, .1);
  opacity: 0; filter: blur(6px);
  transition: opacity 620ms var(--ease), filter 620ms var(--ease);
}
.chat__divider.is-in { opacity: 1; filter: blur(0); }
.chat-stage .g-toasts { top: 14%; right: 3%; z-index: 2; }
.chat-stage .g-toast { font-size: 14px; padding: 12px 18px 12px 14px; }

/* ---------- About: who we are ---------- */
.team__top {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.team__intro .label { opacity: .55; }
.team__title { margin-top: var(--s5); white-space: nowrap; font-size: clamp(2.4rem, 5.2vw, 5.4rem); }
.team__lead {
  margin-top: var(--s6);
  font-weight: 300; font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15; letter-spacing: -.025em; max-width: 24ch;
}
.team__lead b { font-weight: 400; }

/* black metallic plaque */
.metal {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3vw, 48px);
  border-radius: var(--r-card);
  color: var(--fg);
  background:
    radial-gradient(120% 60% at 50% 125%, rgba(255, 61, 0, .3), rgba(255, 61, 0, 0) 60%),
    linear-gradient(155deg, #2b2b2e 0%, #131315 36%, #0b0b0c 62%, #202023 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 1px 0 0 rgba(255, 255, 255, .06),
    inset -1px 0 0 rgba(255, 255, 255, .04),
    0 40px 80px -30px rgba(10, 6, 5, .55);
}
.metal::before {                       /* one slow metallic sheen across the plaque */
  content: ''; position: absolute; inset: -20%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-70%); pointer-events: none;
}
.metal.is-in::before { transform: translateX(70%); transition: transform 2400ms var(--ease) 200ms; }
.metal__lead {
  position: relative;
  font-weight: 300; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -.02em;
  max-width: 24ch;
  background: linear-gradient(180deg, #ffffff 0%, #d6d8dc 50%, #8f939a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metal__chips { position: relative; list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.metal__chips li {
  position: relative; overflow: hidden;
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: clamp(15px, 1.15vw, 18px); color: #ecebea;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -10px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(14px); filter: blur(8px);
  transition:
    opacity 700ms var(--ease) calc(var(--i) * 160ms + 300ms),
    transform 700ms var(--ease) calc(var(--i) * 160ms + 300ms),
    filter 700ms var(--ease) calc(var(--i) * 160ms + 300ms);
}
.metal__chips li::after {             /* light runs over each chip as it lands */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
}
.metal__chips li:last-child {
  color: var(--fg);
  background: radial-gradient(120% 160% at 50% 170%, #ffc75a 0%, #ff8a1a 22%, #ff3d00 42%, rgba(150, 18, 0, .95) 66%, #2a0d08 92%);
}
.metal.is-in .metal__chips li { opacity: 1; transform: none; filter: blur(0); }
.metal.is-in .metal__chips li::after { transform: translateX(120%); transition: transform 1100ms var(--ease) calc(var(--i) * 160ms + 650ms); }

/* founder: text left, tall photo right, flush to the window edge */
.founder {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(96px, 14vh, 160px);
  align-items: stretch;
}
.founder__text { display: flex; flex-direction: column; padding-top: clamp(24px, 6vh, 72px); }
.founder__text .label { opacity: .55; }
.founder__name {
  margin-top: var(--s4);
  font-weight: 300; font-size: clamp(56px, 7vw, 112px);
  line-height: .88; letter-spacing: -.045em;
}
.founder__role { margin-top: var(--s5); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; max-width: 34ch; opacity: .7; }
.founder__points { list-style: none; margin: var(--s7) 0 0; padding: 0; max-width: 520px; }
.founder__points li {
  display: grid; grid-template-columns: 44px 1fr; align-items: baseline;
  padding: var(--s4) 0;
  box-shadow: inset 0 1px 0 rgba(10, 6, 5, .14);
}
.founder__points span { font-size: 12px; color: var(--accent); }
.founder__points p { margin: 0; font-weight: 300; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.founder__photo {
  position: relative; overflow: hidden;
  margin: 0 calc(var(--pad) * -1) 0 0;
  height: min(94svh, 940px);
}
.founder__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.12);
  transition: clip-path 1400ms var(--ease), transform 2200ms var(--ease);
}
.founder__photo.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
.founder__photo::after, .founder__tag { opacity: 0; transition: opacity 900ms var(--ease) 900ms; }
.founder__photo.is-in::after, .founder__photo.is-in .founder__tag { opacity: 1; }
.founder__photo::after {               /* fire catches the left edge of the frame */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 61, 0, .28), rgba(255, 61, 0, 0) 28%);
  mix-blend-mode: screen;
}
.founder__tag {
  position: absolute; left: clamp(20px, 2.4vw, 36px); bottom: clamp(20px, 2.4vw, 36px); z-index: 2;
  display: flex; gap: 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--fg);
}
.founder__tag span + span::before { content: '/'; margin-right: 10px; opacity: .5; }

.quote { margin: auto 0 0; padding-top: clamp(56px, 8vh, 96px); position: relative; }
.quote p {
  margin: 0;
  font-family: 'Marck Script', cursive; font-weight: 400;
  font-size: clamp(36px, 3.8vw, 64px); line-height: 1.08;
  letter-spacing: 0; color: var(--bg);
}
.quote__line {
  display: inline-block;
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 1800ms var(--ease);
}
.quote__line + .quote__line { color: var(--accent); }
.quote.is-in .quote__line { clip-path: inset(-20% -5% -20% 0); }
.quote.is-in .quote__line + .quote__line { transition-delay: 1300ms; }
.quote__swash {
  display: block; width: min(460px, 80%); height: 30px; margin-top: var(--s3);
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 700; stroke-dashoffset: 700;
  transition: stroke-dashoffset 1400ms var(--ease) 2600ms;
}
.quote.is-in .quote__swash { stroke-dashoffset: 0; }


/* ---------- Process: 8 steps with a sticky counter ---------- */
.steps8__grid { display: grid; grid-template-columns: minmax(260px, 1fr) 1.6fr; gap: clamp(32px, 6vw, 120px); align-items: start; }
.steps8__aside { position: sticky; top: clamp(96px, 14vh, 140px); }
.steps8__aside .label { opacity: .55; }
.steps8__aside h2 { margin-top: var(--s5); }
.steps8__counter { margin-top: clamp(40px, 7vh, 80px); display: flex; align-items: baseline; gap: 12px; }
.steps8__counter span {
  font-weight: 300; font-size: clamp(96px, 12vw, 200px); line-height: .8; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--bg) 25%, #c42a00 70%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.steps8__counter i { font-style: normal; font-size: 18px; opacity: .4; }
.steps8__bar { position: relative; display: block; margin-top: var(--s5); height: 1px; max-width: 320px; background: rgba(10, 6, 5, .14); }
.steps8__bar i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #ffc75a, var(--accent));
  transform: scaleX(var(--p, .125)); transform-origin: left;
  transition: transform 620ms var(--ease);
}
.steps8__list { list-style: none; margin: 0; padding: 0; }
.s8 {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s4);
  padding: clamp(28px, 4.5vh, 48px) 0;
  box-shadow: inset 0 1px 0 rgba(10, 6, 5, .14);
}
.s8::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, #ffc75a, var(--accent) 40%, rgba(255, 61, 0, 0));
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease);
}
.s8__num { font-size: 13px; opacity: .45; padding-top: .7em; transition: color 320ms var(--ease), opacity 320ms var(--ease); }
.s8 h3 { font-weight: 300; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.02; letter-spacing: -.03em; }
.s8 p { margin-top: var(--s4); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; max-width: 52ch; opacity: .7; }
.s8 > div { transition: opacity 620ms var(--ease); }
.steps8__list.is-tracking .s8:not(.is-active) > div { opacity: .32; }
.s8.is-active::before { transform: scaleX(1); }
.s8.is-active .s8__num { color: var(--accent); opacity: 1; }

/* ---------- Formats: online / offline ---------- */
.formats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.fmt {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--r-card);
  background: #140b09;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.fmt--hot { background: radial-gradient(90% 55% at 50% 125%, rgba(255, 61, 0, .38), rgba(255, 61, 0, 0) 70%), #140b09; }
.fmt__visual { position: relative; aspect-ratio: 600 / 320; background: #0c0605; overflow: hidden; }
.fmt__visual svg { display: block; width: 100%; height: 100%; }
.fmt__body { padding: clamp(28px, 3vw, 48px); }
.fmt__body .label { opacity: .5; }
.fmt h3 { margin-top: var(--s4); font-weight: 300; font-size: clamp(32px, 3.4vw, 56px); line-height: .95; letter-spacing: -.035em; }
.fmt__sub { margin-top: var(--s3); font-size: clamp(18px, 1.5vw, 22px); color: #ffb48a; }
.fmt__text { margin-top: var(--s5); font-size: 16px; line-height: 1.55; max-width: 44ch; opacity: .72; }
.formats__note { margin-top: var(--s6); font-weight: 300; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.01em; }
.formats__note a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  color: #ffb48a;
}
.formats__note a::after {
  content: ''; position: absolute; left: 0; right: 24px; bottom: -2px; height: 1px;
  background: currentColor; transform-origin: left; transition: transform 500ms var(--ease);
}
.formats__note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 520ms var(--ease); }
@media (hover: hover) { .formats__note a:hover svg { transform: translateY(-4px); } .formats__note a:hover::after { transform: scaleX(.6); } }

@keyframes draw1 { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
/* online map */
.on-arc { fill: none; stroke: rgba(255, 120, 60, .55); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.formats.is-live .on-arc { animation: draw1 1600ms var(--ease) calc(var(--i) * 180ms) forwards; }
.on-city { opacity: 0; }
.formats.is-live .on-city { animation: fadein 600ms var(--ease) calc(var(--i) * 180ms) forwards; }
.on-city circle { fill: var(--fg); }
.on-city text { fill: rgba(244, 237, 230, .55); font-family: var(--font); font-size: 11px; }
.on-ping { fill: none !important; stroke: var(--accent); transform-box: fill-box; transform-origin: center; opacity: 0; }
.formats.is-live .on-ping { animation: ping 2400ms var(--ease) calc(var(--i) * 300ms + 1200ms) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
.on-hub circle:first-child { fill: rgba(255, 61, 0, .16); stroke: rgba(255, 140, 70, .7); stroke-width: 1; }
.on-hub circle:last-child { fill: #ffc75a; filter: drop-shadow(0 0 8px #ff3d00); }
.on-hub__label { fill: var(--fg); font-family: var(--font); font-size: 13px; letter-spacing: .04em; }
.on-packet {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: #ffc75a; box-shadow: 0 0 12px #ff3d00, 0 0 3px #fff;
  offset-rotate: 0deg; offset-distance: 0%; opacity: 0;
}
.formats.is-live .on-packet { animation: packet 2600ms var(--ease) calc(var(--i) * 370ms + 1600ms) infinite; }
@keyframes packet { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* offline viewfinder */
.off-sun { opacity: 0; }
.formats.is-live .off-sun { animation: fadein 1600ms var(--ease) 300ms forwards; }
.off-sky { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.formats.is-live .off-sky { animation: draw1 3200ms var(--ease) 200ms forwards; }
.off-frame path { fill: none; stroke: rgba(244, 237, 230, .7); stroke-width: 2; stroke-linecap: round; }
.off-frame .off-focus { stroke: #ffb48a; transform-box: fill-box; transform-origin: center; }
.formats.is-live .off-focus { animation: focus 3400ms var(--ease) infinite alternate; }
@keyframes focus { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, -30px) scale(1.2); } 100% { transform: translate(90px, -60px) scale(1); } }
.off-rec circle { fill: #ff3d00; }
.formats.is-live .off-rec circle { animation: blink 1100ms var(--ease) infinite alternate; }
@keyframes blink { to { opacity: .15; } }
.off-rec text, .off-tc, .off-tag { fill: var(--fg); font-family: var(--font); font-size: 13px; letter-spacing: .08em; }
.off-tc { font-variant-numeric: tabular-nums; }
.off-tag { font-size: 12px; opacity: .75; }

/* ---------- Sections: tablet & mobile ---------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--s7); }
  .audit { grid-template-columns: 1fr; align-items: start; }
  .contact { grid-template-columns: 1fr; grid-template-rows: auto; align-content: end; }
}
@media (max-width: 760px) {
  .steps8__grid, .formats__grid { grid-template-columns: 1fr; }
  .steps8__aside { position: static; }
  .steps8__counter, .steps8__bar { display: none; }
  .s8 { grid-template-columns: 44px 1fr; }
  .sec-head { grid-template-columns: 1fr; gap: var(--s4); }
  .why__grid { grid-template-columns: 1fr; }
  .why { display: flex; flex-direction: column; }
  .why__bg { position: relative; inset: auto; order: 2; z-index: 0; margin: var(--s7) calc(var(--pad) * -1) 0; display: block; background: none; }
  .viz { position: relative; width: 100%; height: auto; padding: 8px 0; }
  .chat { width: calc(100% - 2 * var(--pad)); height: 520px; transform: none; }
  .lead-chart { width: calc(100% - 2 * var(--pad)); }
  .chat-stage .g-toasts { top: 84px; right: calc(var(--pad) + 8px); }
  .team__top, .founder { grid-template-columns: 1fr; }
  .founder__photo { margin: 0 calc(var(--pad) * -1); height: 130vw; order: -1; }
  .founder__text { padding-top: 0; }
  .lead-chart, .chat { transform: none; }
  .lead-chart.is-in { transform: none; }
  .why__grid { max-width: none; }
  .sec-head .label { padding-top: 0; }
  .row { grid-template-columns: 48px 1fr; row-gap: var(--s3); }
  .row__text { grid-column: 2; }
  .steps { grid-template-columns: 1fr; }
  :root { --r-card: 28px; }
  .slider__track { grid-auto-columns: 88%; gap: var(--s3); }
  .slide { grid-template-columns: 1fr; min-height: 0; }
  .slide__media { aspect-ratio: 16 / 11; }
  .slide__info h3 { margin-top: var(--s5); }
  .arrow { width: 52px; height: 52px; }
  .section h2 br { display: none; }   /* let text-wrap: balance set the lines on phones */
  h2 { font-size: 2.2rem; }
  .contact__title { font-size: 3.4rem; }
}

/* ---------- Real case material ---------- */
.slide--real { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
.slide__media--real {
  grid-template-columns: 1fr;
  align-items: center; justify-items: center;
  padding: clamp(18px, 2vw, 32px);
  background: radial-gradient(80% 70% at 30% 110%, rgba(255, 61, 0, .22), rgba(255, 61, 0, 0) 70%), #0c0605;
}
.slide__media--real img {
  display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  cursor: zoom-in;
  transition: transform 700ms var(--ease);
}
.slide__media--real img:nth-child(2) { transform: translateY(18px); }
@media (hover: hover) {
  .slide__media--real img:hover { transform: translateY(-6px); }
  .slide__media--real img:nth-child(2):hover { transform: translateY(12px); }
}
.slide__ava {
  margin-top: auto; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 10px 30px -10px rgba(255, 61, 0, .7);
}
.slide__ava + h3 { margin-top: var(--s4); }
.case-hero__ava {
  width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px); margin-top: var(--s5);
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 16px 40px -14px rgba(255, 61, 0, .8);
}
.case-cover--real { padding: 0 var(--pad); background: var(--bg); }
.case-cover--real img { max-width: 1240px; margin: 0 auto; }
.case-cover--real img { display: block; width: 100%; height: auto; border-radius: var(--r-card) var(--r-card) 0 0; }
.case-gallery--real { grid-template-columns: 1fr 1fr; align-items: start; }
.case-gallery--real img { display: block; width: 100%; height: auto; border-radius: var(--r-card); cursor: zoom-in; }
.case-cover--real img { cursor: zoom-in; }
@media (max-width: 760px) {
  .slide--real { grid-template-columns: 1fr; }
  .slide__media--real { grid-template-columns: 1fr; aspect-ratio: auto; padding: 16px; }
  .slide__media--real img:nth-child(2) { transform: none; }
  .case-gallery--real { grid-template-columns: 1fr; }
}

/* ---------- Lightbox: screenshot full screen ---------- */
.lightbox {
  max-width: none; max-height: none; width: 100%; height: 100%;
  margin: 0; padding: var(--pad); border: 0; background: transparent;
  display: grid; place-items: center; cursor: zoom-out;
  opacity: 0; transition: opacity 400ms var(--ease);
}
.lightbox:not([open]) { display: none; }
.lightbox.is-in { opacity: 1; }
.lightbox::backdrop { background: rgba(10, 6, 5, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox img {
  display: block; max-width: min(1400px, 100%); max-height: calc(100svh - 2 * var(--pad));
  width: auto; height: auto; border-radius: 14px;
  box-shadow: 0 40px 100px -30px rgba(255, 61, 0, .5);
  transform: scale(.96); transition: transform 600ms var(--ease);
}
.lightbox.is-in img { transform: none; }
.case-results > .case-results__head:first-child { margin-top: 0; }

/* =====================================================================
   Case page v2: banner, before / after, staggered lists
   ===================================================================== */
.cs-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(150px, 20vh, 200px) var(--pad) clamp(56px, 9vh, 110px);
}
.cs-banner {
  margin: 0 0 clamp(32px, 5vh, 56px); max-width: 1100px;
  border-radius: var(--r-card); overflow: hidden; cursor: zoom-in;
  box-shadow: 0 40px 90px -40px rgba(255, 61, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.cs-banner img { display: block; width: 100%; height: auto; }
.cs-id { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.cs-id .label { opacity: .55; }
.cs-ava {
  flex: none; width: clamp(72px, 7vw, 112px); height: clamp(72px, 7vw, 112px);
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 16px 40px -14px rgba(255, 61, 0, .8);
}
.cs-title {
  margin-top: 8px;
  font-weight: 300; font-size: clamp(2.4rem, 6vw, 6rem);
  line-height: .9; letter-spacing: -.04em; text-wrap: balance; hyphens: none;
}
.cs-niche { margin-top: 10px; font-size: clamp(16px, 1.3vw, 20px); opacity: .7; }
.cs-headline {
  margin-top: clamp(32px, 5vh, 56px); max-width: 32ch;
  font-weight: 300; font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.15; letter-spacing: -.025em; text-wrap: balance;
}

.cs-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.cs-grid--rev { grid-template-columns: .85fr 1.4fr; }
.cs-grid--solo { grid-template-columns: 1fr; }
.cs-grid--solo .cs-text { max-width: 760px; }
.cs-text .label { opacity: .55; }
.cs-text h2 { margin-top: var(--s4); }

.cs-shot {
  position: relative; margin: 0; overflow: hidden; cursor: zoom-in;
  border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(10, 6, 5, .45), 0 0 0 1px rgba(10, 6, 5, .06);
}
.cs-after .cs-shot { box-shadow: 0 30px 80px -30px rgba(255, 61, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.cs-shot img { display: block; width: 100%; height: auto; transition: transform 800ms var(--ease); }
@media (hover: hover) { .cs-shot:hover img { transform: scale(1.02); } }
.cs-chip {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--fg);
  background: rgba(10, 6, 5, .85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cs-chip--hot { background: radial-gradient(120% 160% at 50% 170%, #ffc75a 0%, #ff8a1a 22%, #ff3d00 42%, rgba(150, 18, 0, .95) 66%, #2a0d08 92%); }

/* problems / work: lines land one by one, a fire hairline draws above each */
.cs-list { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; }
.cs-list li {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline;
  padding: 16px 0;
  box-shadow: inset 0 1px 0 rgba(10, 6, 5, .12);
  opacity: 0; transform: translateX(-16px); filter: blur(8px);
  transition:
    opacity 700ms var(--ease) calc(var(--i) * 140ms + 150ms),
    transform 700ms var(--ease) calc(var(--i) * 140ms + 150ms),
    filter 700ms var(--ease) calc(var(--i) * 140ms + 150ms);
}
.cs-after .cs-list li { box-shadow: inset 0 1px 0 rgba(244, 237, 230, .12); }
.cs-list li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, #ffc75a, var(--accent) 40%, rgba(255, 61, 0, 0));
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease) calc(var(--i) * 140ms + 300ms);
}
.cs-list.is-in li { opacity: 1; transform: none; filter: blur(0); }
.cs-list.is-in li::before { transform: scaleX(1); }
.cs-list span { font-size: 12px; color: var(--accent); }
.cs-list p { margin: 0; font-weight: 300; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -.015em; }

.cs-after-shots { display: grid; gap: 14px; align-items: start; }
.cs-after-shots--2 { grid-template-columns: 1fr 1fr; }
.cs-after-shots--3 { grid-template-columns: 1fr 1.73fr 1.13fr; }

.cs-cta {
  margin-top: clamp(72px, 10vh, 120px);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s6);
}
.cs-cta__title { font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.025em; }
.cs-cta__text { margin-top: 8px; font-size: 16px; line-height: 1.5; max-width: 44ch; opacity: .72; }
.cs-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 760px) {
  .cs-grid, .cs-grid--rev { grid-template-columns: 1fr; }
  .cs-id { align-items: flex-start; }
  .cs-after-shots--3 { grid-template-columns: 1fr 1fr; }
  .cs-after-shots--3 .cs-shot:first-child { grid-column: 1 / -1; }
  .cs-cta__btns .btn { width: 100%; justify-content: center; }
}

/* formats heading on one line */
.formats .sec-head h2 { white-space: nowrap; }

/* phone: no dialogue, the leads chart shows right away */
@media (max-width: 760px) {
  .chat-stage .chat, .chat-stage .g-toasts { display: none; }
  .chat-stage .lead-chart { width: calc(100% - 2 * var(--pad)); }
}

/* new case: badge + first results */
.cs-new, .slide__new {
  display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: var(--r-pill);
  font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg);
  background: radial-gradient(120% 160% at 50% 170%, #ffc75a 0%, #ff8a1a 22%, #ff3d00 42%, rgba(150, 18, 0, .95) 66%, #2a0d08 92%);
  vertical-align: middle;
}
.cs-id .cs-new { margin: 6px 0 0; }
.cs-result {
  margin-top: var(--s7); padding: clamp(24px, 2.6vw, 36px);
  border-radius: 28px;
  background: radial-gradient(90% 90% at 50% 130%, rgba(255, 61, 0, .45), rgba(255, 61, 0, 0) 70%), rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(255, 200, 120, .45);
}
.cs-result .label { opacity: .6; }
.cs-result dl { margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); }
.cs-result dt {
  font-weight: 300; font-size: clamp(44px, 4.6vw, 72px); line-height: .9; letter-spacing: -.045em;
  background: linear-gradient(180deg, var(--fg) 20%, #ffb48a 60%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em;
}
.cs-result dd { margin: 6px 0 0; font-size: 14px; opacity: .7; max-width: 22ch; }
.cs-result__note { margin-top: var(--s5); font-size: 16px; color: #ffb48a; }
@media (max-width: 760px) { .cs-after-shots--3 { grid-template-columns: 1fr 1fr; } .cs-after-shots--3 .cs-shot:nth-child(2) { grid-column: 1 / -1; order: -1; } }

/* headings without pre-labels */
.sec-head { display: block; }
.steps8__aside h2, .team__title, .audit__text h2, .why__main h2 { margin-top: 0; }
.cs-text h2 { margin-top: 0; }
.founder__name { margin-top: 0; }

/* stacked after-shots (two big screenshots one under another) */
.cs-after-shots--stack { grid-template-columns: 1fr; }
.cs-grid:has(.cs-after-shots--stack) { align-items: start; }

/* wide: text + results side by side, screenshots full width below */
.cs-grid--wide { grid-template-columns: 1fr; align-items: start; }
.cs-grid--wide .cs-text { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: clamp(32px, 5vw, 88px); align-items: start; }
.cs-grid--wide .cs-text h2 { grid-column: 1 / -1; }
.cs-grid--wide .cs-result { margin-top: clamp(28px, 4vh, 44px); }
.cs-grid--wide .cs-after-shots { margin-top: var(--s5); }
@media (max-width: 760px) { .cs-grid--wide .cs-text { grid-template-columns: 1fr; } }