/* ============================================================
   KING KHOE CO.: DESIGN SYSTEM
   Cinematic / premium / restrained. Dark ground, deliberate orange.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600&family=Montserrat:wght@500;600;800;900&display=swap');

:root{
  --bg-0:#090909;
  --bg-1:#111111;
  --bg-2:#161616;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);
  --text-0:#ffffff;
  --text-1:#A3A3A3;
  --text-2:#6b6b6b;
  --orange:#F97316;
  --orange-dim: rgba(249,115,22,0.14);
  --orange-line: rgba(249,115,22,0.45);

  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --container: 1280px;
  --gutter: clamp(24px, 5vw, 96px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg-0); scroll-behavior:smooth; }
html.no-smooth{ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

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

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.05;
  margin:0;
  letter-spacing:-0.01em;
}

p{ margin:0; }

::selection{ background:var(--orange); color:#090909; }

/* Focus visibility: accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

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

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:999;
  background:var(--orange); color:#0a0a0a; padding:10px 18px;
  font-weight:600; border-radius:4px; transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:16px; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:15px;
  padding:16px 26px; border-radius:2px;
  border:1px solid transparent; cursor:pointer;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft), transform .2s var(--ease-soft), color .25s var(--ease-soft);
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; flex:none; transition:transform .3s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }

.btn-primary{ background:var(--orange); color:#0a0a0a; }
.btn-primary:hover{ background:#ff8a3d; }

.btn-ghost{ background:transparent; color:var(--text-0); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }

.btn-line{ background:transparent; color:var(--text-0); border-bottom:1px solid var(--line-strong); border-radius:0; padding:8px 0; }
.btn-line:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------------- Nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px var(--gutter);
  transition: padding .4s var(--ease-soft), background .4s var(--ease-soft), border-color .4s var(--ease-soft), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding-top:14px; padding-bottom:14px;
  background:rgba(9,9,9,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-brand img{ height:26px; width:auto; }
.nav-brand span{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:0.01em; }

.nav-links{ display:flex; align-items:center; gap:40px; }
/* Four links + CTA: keep every label on one line, and tighten the gap a little
   on mid-width desktops; the existing mobile menu takes over from 1020px down. */
.nav-links a{ white-space:nowrap; }
@media (min-width:1021px) and (max-width:1100px){ .nav-links{ gap:24px; } }
.nav-links a:not(.btn){
  font-size:14px; color:var(--text-1); position:relative; padding:4px 0;
  transition:color .25s var(--ease-soft);
}
.nav-links a:not(.btn):hover{ color:var(--text-0); }
.nav-links a:not(.btn)::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--orange); transition:right .3s var(--ease-out);
}
.nav-links a:not(.btn):hover::after{ right:0; }

.nav-toggle{ display:none; }

/* Mobile nav */
@media (max-width: 1020px){
  /* Scrolled header: its tint + blur live on a pseudo-element here, not on .nav
     itself. A backdrop-filter on .nav makes the header the containing block of the
     position:fixed menu, which traps the menu inside the header strip (and keeps it
     trapped for as long as the filter takes to transition away). Same look, no trap,
     and nothing to switch off when the menu opens. */
  .nav.is-scrolled{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; }
  .nav::before{
    content:''; position:absolute; top:0; left:0; right:0; bottom:-1px; z-index:-1; pointer-events:none; box-sizing:border-box;
    border-bottom:1px solid var(--line); /* the header's own border, drawn here so it paints over the tint as before */
    background:rgba(9,9,9,0.82);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    opacity:0; transition:opacity .4s var(--ease-soft);
  }
  .nav.is-scrolled::before{ opacity:1; }

  /* The overlay never animates itself: opening switches it on, fully opaque and
     fully covering, on the very first frame. Only its items animate in (below).
     Closed = not rendered (visibility), so it can't be tabbed into or hit-tested. */
  .nav-links{
    position:fixed; inset:0; z-index:190;
    background:var(--bg-0); /* #090909 */
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 100px var(--gutter) 60px;
    gap:26px;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    visibility:hidden; opacity:0; pointer-events:none;
    transition: opacity .22s ease, visibility 0s linear .22s; /* closing only: a quick fade */
  }
  .nav-links.is-open{ visibility:visible; opacity:1; pointer-events:auto; transition:none; }
  .nav-links.is-open > *{ animation: kk-menu-in .5s var(--ease-out) backwards; }
  .nav-links.is-open > *:nth-child(2){ animation-delay:.04s; }
  .nav-links.is-open > *:nth-child(3){ animation-delay:.08s; }
  .nav-links.is-open > *:nth-child(4){ animation-delay:.12s; }
  .nav-links.is-open > *:nth-child(5){ animation-delay:.16s; }
  @keyframes kk-menu-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  /* iOS-safe page scroll lock while the menu is open (JS adds .menu-open) */
  html.menu-open, html.menu-open body{ overflow:hidden; overscroll-behavior:none; }
  .nav-links a:not(.btn){ font-size:28px; font-family:var(--display); color:var(--text-0); }
  .nav-links .btn{ margin-top:10px; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; justify-content:center; align-items:center;
    width:40px; height:40px; z-index:220; background:none; border:none; cursor:pointer;
  }
  .nav-toggle span{ width:22px; height:1.5px; background:var(--text-0); transition:transform .3s var(--ease-soft), opacity .3s; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

/* ---------------- Section scaffolding ---------------- */
section{ position:relative; }

.section-pad{ padding: clamp(80px,12vw,160px) 0; }
.section-pad-sm{ padding: clamp(56px,8vw,100px) 0; }

.chapter{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom: clamp(28px,4vw,52px);
}
.chapter-index{
  font-family:var(--display); font-size:14px; color:var(--orange);
  font-variant-numeric: tabular-nums; letter-spacing:0.04em;
}
.chapter-label{ font-size:14px; color:var(--text-1); letter-spacing:0.02em; }
.chapter-line{ flex:1; height:1px; background:var(--line); }

.eyebrow{ font-size:14px; color:var(--orange); font-weight:600; }

h2.display{
  font-size: clamp(34px, 4.6vw, 60px);
  max-width: 16ch;
}
/* Engine headline is a two-sentence statement, deliberately wider than the
   default 16ch so each sentence can read as its own line rather than
   wrapping again inside itself. Scoped to this section only. */
.services h2.display{ max-width: 34ch; }
/* Our Work: wide enough that the longer headline breaks once, cleanly
   ("Ads built to get / attention and results.") instead of wrapping to 3 lines.
   FAQ: lifts the 16ch cap so "Questions? We've got you." sits on one line
   on desktop; on narrow screens the container width still wraps it naturally. */
.work h2.display{ max-width: 24ch; text-wrap: balance; }
/* Nav anchor landing. These sections open with a large top padding
   (section-pad); offsetting by the fixed header (87px scrolled / 69px on
   mobile) plus a little air, minus that padding, lands each section's label
   just beneath the header instead of buried under it or 100px+ below it. */
#proof, #ultimate-proof, #our-work, #testimonials{ scroll-margin-top: calc(107px - clamp(80px,12vw,160px)); }
@media (max-width:1020px){
  #proof, #ultimate-proof, #our-work, #testimonials{ scroll-margin-top: calc(89px - clamp(80px,12vw,160px)); }
}
.faq h2.display{ max-width: none; text-wrap: balance; }
.lede{
  font-size: clamp(17px, 1.6vw, 20px);
  color:var(--text-1);
  max-width: 46ch;
  margin-top:18px;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; height:100svh; min-height:640px; width:100%;
  overflow:hidden; background:#000;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-media{ position:absolute; inset:0; width:100%; height:100%; }
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: 62% center;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.05) 24%, rgba(6,6,6,0.15) 55%, rgba(6,6,6,0.92) 100%),
    linear-gradient(90deg, rgba(6,6,6,0.6) 0%, rgba(6,6,6,0.05) 42%, rgba(6,6,6,0) 60%);
}
.hero-inner{
  position:relative; z-index:2;
  padding: 0 var(--gutter) clamp(64px,9vw,108px);
  width:100%;
}
.hero-kicker{
  display:flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:0.04em; color:var(--text-1);
  margin-bottom:22px;
  opacity:0; transform:translateY(10px);
}
.hero-kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); }

.hero-headline{
  font-size: clamp(38px, 6.6vw, 92px);
  max-width: 15ch;
  color:var(--text-0);
  opacity:0; transform:translateY(22px);
}
.hero-sub{
  margin-top:22px;
  font-size: clamp(16px, 1.5vw, 19px);
  color:var(--text-1);
  max-width:46ch;
  opacity:0; transform:translateY(16px);
}
.hero-cta{
  margin-top:36px; display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; transform:translateY(16px);
}

.hero.is-ready .hero-kicker{ transition:opacity .9s var(--ease-out) .5s, transform .9s var(--ease-out) .5s; opacity:1; transform:translateY(0); }
.hero.is-ready .hero-headline{ transition:opacity 1.1s var(--ease-out) .68s, transform 1.1s var(--ease-out) .68s; opacity:1; transform:translateY(0); }
.hero.is-ready .hero-sub{ transition:opacity 1s var(--ease-out) 1s, transform 1s var(--ease-out) 1s; opacity:1; transform:translateY(0); }
.hero.is-ready .hero-cta{ transition:opacity 1s var(--ease-out) 1.18s, transform 1s var(--ease-out) 1.18s; opacity:1; transform:translateY(0); }

.hero-scrollcue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:2; opacity:0; transition:opacity 1s var(--ease-out) 1.6s;
}
.hero.is-ready .hero-scrollcue{ opacity:0.65; }
.hero-scrollcue span{ font-size:11px; letter-spacing:0.12em; color:var(--text-1); }
.hero-scrollcue .stem{ width:1px; height:34px; background:linear-gradient(var(--text-1), transparent); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(1); opacity:.6;} 50%{ transform:scaleY(.5); opacity:1;} }

@media (max-width: 640px){
  .hero-media video, .hero-media img{ object-position: 34% center; }
  .hero-headline{ max-width:13ch; }
}

/* ============================================================
   SIGNAL (what we do statement)
   ============================================================ */
.signal{ background:var(--bg-0); border-top:1px solid var(--line); }
.signal-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:start;
}
.signal-statement{
  font-family:var(--display); font-weight:500;
  font-size: clamp(24px, 3vw, 38px);
  line-height:1.28;
  color:var(--text-0);
}
.signal-statement em{
  font-style:normal;
  color:var(--text-1);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(16px, 1.5vw, 19px);
  line-height:1.45;
  display:inline-block;
}
.signal-aside{ display:flex; flex-direction:column; }
.signal-point{ border-top:1px solid var(--line); }
.signal-point:last-child{ border-bottom:1px solid var(--line); }
.signal-point h4{ font-family:var(--body); font-size:15px; font-weight:600; color:var(--text-0); margin:0; }
.signal-point p{ font-size:14.5px; color:var(--text-1); line-height:1.6; }
/* Expandable rows: same interaction language as the FAQ, but deliberately
   its own classes so The Signal and the FAQ can never affect each other. */
.signal-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 0; background:none; border:none; cursor:pointer; text-align:left;
  font:inherit; color:inherit; -webkit-tap-highlight-color:transparent;
}
.signal-point:hover .signal-q{ background:rgba(255,255,255,0.02); }
.signal-icon{ position:relative; flex:0 0 auto; width:16px; height:16px; }
.signal-icon::before, .signal-icon::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--text-1);
  transition:transform .3s var(--ease-soft), background .3s;
}
.signal-icon::before{ width:16px; height:1.5px; transform:translate(-50%,-50%); }
.signal-icon::after{ width:1.5px; height:16px; transform:translate(-50%,-50%); }
.signal-point:hover .signal-icon::before, .signal-point:hover .signal-icon::after{ background:var(--orange); }
.signal-point.is-open .signal-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.signal-a{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s var(--ease-out), opacity .35s; }
.signal-point.is-open .signal-a{ max-height:320px; opacity:1; }
.signal-a-inner{ padding-bottom:22px; }

@media (max-width: 860px){
  .signal-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ============================================================
   TRUSTED BY
   ============================================================ */
.trusted{
  background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  /* Scoped override, not a change to .section-pad-sm (shared with FAQ).
     A slim trust strip: just a centred label over the logo marquee. */
  padding: clamp(16px,1.8vw,20px) 0;
}
.trusted-head{ display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.trusted .chapter-label{ font-size:12.5px; font-weight:700; letter-spacing:0.16em; color:var(--text-0); text-align:center; }

.trusted-track-wrap{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trusted-track{
  display:flex; align-items:center; gap: clamp(48px,6vw,88px);
  width:max-content;
  animation: scroll-left 42s linear infinite;
}
.trusted-track:hover{ animation-play-state: paused; }
.trusted-track img{
  height:32px; width:auto; max-width:120px;
  object-fit:contain;
  opacity:0.5;
  transition:opacity .35s var(--ease-soft);
}
.trusted-track img:hover{ opacity:1; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

@media (prefers-reduced-motion: reduce){
  .trusted-track{ animation:none; flex-wrap:wrap; }
}

/* ============================================================
   PROOF / CASE STUDIES
   ============================================================ */
.proof{ background:var(--bg-0); }
/* Trim the dead space between the last case study (Ken Chong) and The Ultimate
   Proof's divider: this section's bottom padding only (about half of the old gap
   at every width). Top padding is untouched, so nav anchor offsets still hold. */
.proof.section-pad{ padding-bottom:clamp(16px,2.5vw,38px); }
.proof-case{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,70px);
  align-items:center;
  padding: clamp(48px,7vw,84px) 0;
  border-top:1px solid var(--line);
}
.proof-case:first-of-type{ border-top:none; }
.proof-case.is-reversed .proof-text{ order:2; }
.proof-case.is-reversed .proof-shot{ order:1; }

.proof-tag{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--orange); font-weight:600; margin-bottom:16px; }
.proof-headline{ font-size:clamp(24px,2.6vw,32px); margin-bottom:14px; }
.proof-text p{ color:var(--text-1); font-size:15.5px; line-height:1.7; margin-bottom:14px; max-width:48ch; }
/* Boon Chong pull quote: editorial, no card/box, just a hairline orange rule */
.proof-quote{ margin:30px 0 32px; padding:2px 0 2px 20px; border-left:1.5px solid var(--orange); }
.proof-quote-text{ margin:0; font-family:var(--display); font-weight:700; font-size:clamp(22px,2.2vw,28px); line-height:1.25; letter-spacing:-0.005em; color:var(--text-0); text-wrap:balance; }
.proof-quote-by{ margin-top:10px; font-size:13.5px; line-height:1.4; color:var(--text-1); letter-spacing:.01em; }
.proof-stats{ display:flex; gap:34px; margin-top:26px; flex-wrap:wrap; }
.proof-stat b{ display:block; font-family:var(--display); font-size:clamp(26px,2.6vw,34px); color:var(--text-0); }
.proof-stat span{ font-size:12.5px; color:var(--text-2); letter-spacing:0.03em; }

.proof-shot{ display:flex; justify-content:center; }
.proof-shot-frame{
  position:relative; width:min(280px, 78vw);
  padding:0; background:none;  /* reset the <button> UA padding + grey fill that showed as a light border */
  border-radius:20px; overflow:hidden; border:1px solid var(--line-strong);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7);
  cursor:zoom-in;
  transition:transform .4s var(--ease-soft);
}
.proof-shot-frame:hover{ transform:translateY(-4px); }
.proof-shot-frame img{ width:100%; display:block; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:500; background:rgba(6,6,6,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease-soft);
  padding:40px 20px;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-height:88vh; width:auto; border-radius:14px; }
.lightbox-close{
  position:absolute; top:24px; right:28px; background:none; border:1px solid var(--line-strong);
  color:var(--text-0); width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ border-color:var(--orange); color:var(--orange); }

@media (max-width: 860px){
  .proof-case{ grid-template-columns:1fr; }
  .proof-case.is-reversed .proof-text,
  .proof-case.is-reversed .proof-shot{ order:initial; }
}

/* Boon Chong, Darius and Ken, stacked layout only: the WhatsApp screenshot sits directly under the
   headline, as the first piece of evidence, instead of at the bottom. The text wrappers
   become "contents" so headline and paragraph are separate grid items and the one
   (only) screenshot can be ordered between them: no duplicated markup. Desktop is
   untouched (this is inside the stacked-layout media query only). Grid items do not
   collapse margins, so the row gap is zeroed and the old collapsed gaps are restored. */
@media (max-width: 860px){
  .proof-case--shot-first{ row-gap:0; }
  .proof-case--shot-first .proof-text,
  .proof-case--shot-first .proof-text-body{ display:contents; }
  .proof-case--shot-first .proof-tag{ order:1; }
  .proof-case--shot-first .proof-headline{ order:2; }
  .proof-case--shot-first .proof-shot{ order:3; margin:8px 0 28px; }
  .proof-case--shot-first .proof-text-body > p{ order:4; }
  .proof-case--shot-first .proof-quote{ order:5; margin-top:16px; }
  .proof-case--shot-first .proof-text > p{ order:6; margin-top:0 !important; }
  /* the reversed variant (Darius) resets .proof-shot to order:initial at this width, with higher specificity */
  .proof-case--shot-first.is-reversed .proof-shot{ order:3; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--bg-1); border-top:1px solid var(--line); }
.service-list{ border-top:1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns: 90px 1.1fr 1fr; gap:32px;
  padding: clamp(32px,4.4vw,48px) 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.service-num{ font-family:var(--display); font-size:14px; color:var(--text-2); padding-top:6px; }
.service-name{ font-family:var(--display); font-size:clamp(22px,2.4vw,30px); font-weight:500; color:var(--text-0); text-transform:uppercase; letter-spacing:0.01em; }
.service-tagline{ font-family:var(--display); font-size:clamp(17px,1.6vw,20px); font-weight:500; color:var(--text-0); margin-top:10px; }
.service-tags{ font-size:13.5px; font-weight:600; color:var(--orange); letter-spacing:0.01em; margin-top:10px; }
.service-detail p{ color:var(--text-1); font-size:15px; line-height:1.7; max-width:48ch; padding-top:6px; }

@media (max-width:760px){
  .service-row{ grid-template-columns: 1fr; gap:10px; padding: clamp(24px,6vw,32px) 0; }
  .service-num{ padding-top:0; }
  .service-detail p{ padding-top:2px; max-width:none; }
}

/* ---------------- FAQ accordion ----------------
   Deliberately its own classes, not shared with .service-row, so the
   Services section (static, no accordion) and the FAQ (collapsible)
   can never again affect each other's behaviour by accident. */
.faq-list{ border-top:1px solid var(--line); }
.faq-row{ border-bottom:1px solid var(--line); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding: clamp(22px,3vw,28px) 0;
  background:none; border:none; cursor:pointer; text-align:left;
  font:inherit; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.faq-row:hover .faq-question{ background:rgba(255,255,255,0.02); }
.faq-question-text{ font-family:var(--display); font-size:19px; font-weight:500; color:var(--text-0); }
.faq-icon{ position:relative; flex:0 0 auto; width:16px; height:16px; }
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--text-1);
  transition:transform .3s var(--ease-soft), background .3s;
}
.faq-icon::before{ width:16px; height:1.5px; transform:translate(-50%,-50%); }
.faq-icon::after{ width:1.5px; height:16px; transform:translate(-50%,-50%); }
.faq-row:hover .faq-icon::before, .faq-row:hover .faq-icon::after{ background:var(--orange); }
.faq-row.is-open .faq-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-answer{
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease-out), opacity .35s;
  opacity:0;
}
.faq-row.is-open .faq-answer{ max-height:280px; opacity:1; }
.faq-answer-inner{ padding-bottom:24px; }
.faq-answer p{ color:var(--text-1); font-size:15.5px; line-height:1.7; max-width:68ch; }

/* ---------------- Our Work (phone-frame ad carousel) ---------------- */
.work{ background:var(--bg-0); }
/* Our Work -> The Ecosystem: both are section-pad, so their paddings stacked
   (bottom + top = double). Drop Our Work's bottom padding and let The Ecosystem's
   own top padding supply the breathing room (halves the dead space at every width). */
.work.section-pad{ padding-bottom:0; }
.work-carousel-wrap{ position:relative; margin-top:48px; }
.work-carousel{
  display:flex; gap:22px;
  overflow-x:auto;
  padding:10px var(--gutter) 24px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab;
  user-select:none;
}
.work-carousel.is-dragging{ cursor:grabbing; }
.work-carousel::-webkit-scrollbar{ display:none; }
.work-phone{ flex:0 0 auto; width:210px; }
.work-phone-frame{
  position:relative;
  aspect-ratio:9/19.5;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .4s var(--ease-soft), box-shadow .4s, border-color .4s;
}
.work-phone-frame:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,0.22); }
.work-phone.is-active .work-phone-frame{ transform:scale(1.045); box-shadow:0 26px 60px rgba(0,0,0,0.6); border-color:rgba(249,115,22,0.35); }
.work-phone-notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:56px; height:16px; background:#000; border-radius:9px; z-index:3; pointer-events:none;
}
.work-video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.work-play{
  position:absolute; inset:0; margin:auto; width:50px; height:50px; padding:0;
  border-radius:50%; background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.35);
  color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s, background .25s, border-color .25s;
  cursor:pointer;
}
.work-play svg{ width:19px; height:19px; margin-left:2px; }
.work-phone-frame:hover .work-play{ opacity:1; }
.work-play:hover{ background:rgba(249,115,22,0.85); border-color:var(--orange); }
.work-phone.is-playing .work-play{ opacity:0; pointer-events:none; }
.work-controls{ display:flex; justify-content:center; gap:12px; margin-top:4px; }
.work-prev, .work-next{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
  background:none; color:var(--text-0); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, color .3s;
}
.work-prev:hover, .work-next:hover{ border-color:var(--orange); color:var(--orange); }
.work-prev svg, .work-next svg{ width:18px; height:18px; }

@media (max-width:760px){
  .work-phone{ width:168px; }
  .work-carousel{ gap:14px; }
}

@media (max-width: 720px){
  .service-row{ grid-template-columns: 44px 1fr; }
  .service-row > .service-detail{ grid-column:1/-1; }
}

/* Services, phones only: each service collapses to its header (number, name, tagline, tags)
   with a "+" at the right; tapping it opens the paragraph, "+" becomes "−", one open at a
   time. Same pattern as the FAQ accordion, on the existing markup. The row gap moves into
   the paragraph's own padding so a collapsed row carries no dead space, and an open row
   looks exactly as it did before. Desktop and tablet keep every paragraph visible. */
.service-toggle{ display:none; }
@media (max-width: 720px){
  .service-row{ position:relative; row-gap:0; }
  .service-num, .service-main{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .service-name{ padding-right:28px; } /* keeps the title at least ~12px clear of the "+"; only changes wrapping where a title would otherwise reach it */
  .service-toggle{
    display:flex; align-items:center; justify-content:flex-end;
    position:absolute; right:0; top:calc(clamp(24px,6vw,32px) - 9px); width:44px; height:44px; padding:0;
    background:none; border:none; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent;
  }
  .service-icon{ position:relative; flex:0 0 auto; width:16px; height:16px; }
  .service-icon::before, .service-icon::after{
    content:''; position:absolute; left:50%; top:50%; background:var(--text-1);
    transition:transform .3s var(--ease-soft), background .3s;
  }
  .service-icon::before{ width:16px; height:1.5px; transform:translate(-50%,-50%); }
  .service-icon::after{ width:1.5px; height:16px; transform:translate(-50%,-50%); }
  .service-row.is-open .service-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
  .service-detail{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s var(--ease-out), opacity .35s; }
  .service-row.is-open .service-detail{ max-height:280px; opacity:1; }
  .service-detail p{ padding-top:12px; }
}

/* ============================================================
   ECOSYSTEM
   ============================================================ */
.ecosystem{ background:var(--bg-0); }
.ecosystem-tree{ display:flex; flex-direction:column; align-items:center; margin-bottom:56px; }
.ecosystem-root{ font-family:var(--display); font-size:15px; letter-spacing:0.04em; color:var(--text-1); display:flex; align-items:center; gap:10px; }
.ecosystem-root img{ height:20px; }
.ecosystem-stem{ width:1px; height:40px; background:var(--line-strong); margin:14px 0; }

.ecosystem-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.eco-card{
  background:var(--bg-1); padding: 34px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transition:background .3s var(--ease-soft);
}
.eco-card:hover{ background:var(--bg-2); }
.eco-card img{ height:34px; width:auto; object-fit:contain; }
.eco-card .eco-placeholder{
  height:34px; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:15px; color:var(--text-1);
}
.eco-card span{ font-size:12.5px; color:var(--text-2); letter-spacing:0.02em; }

@media (max-width:860px){
  .ecosystem-grid{ grid-template-columns:repeat(2,1fr); }
  .eco-card:last-child{ grid-column: span 2; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{ background:var(--bg-1); border-top:1px solid var(--line); }
.testi-featured{
  display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px,5vw,70px);
  align-items:center; margin-bottom:0; touch-action:pan-y;
}
.testi-video-frame{
  position:relative; border-radius:18px; overflow:hidden; background:#000;
  border:1px solid var(--line-strong);
  aspect-ratio:16/10;
}
.testi-video-frame video{ width:100%; height:100%; object-fit:cover; }
.testi-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,6,0.28); cursor:pointer; border:none; padding:0;
  transition:background .3s var(--ease-soft);
}
.testi-play.is-playing{ opacity:0; pointer-events:none; }
.testi-play-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center; color:#0a0a0a;
  transition:transform .3s var(--ease-soft), background .3s;
}
.testi-play:hover .testi-play-icon{ transform:scale(1.08); background:var(--orange); }
.testi-play-icon svg{ width:20px; height:20px; margin-left:3px; }

.testi-quote{ font-family:var(--display); font-size:clamp(20px,2.1vw,26px); line-height:1.45; color:var(--text-0); font-weight:500; }
.testi-person{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.testi-person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
/* Logo-type attribution (e.g. a client/brand mark rather than a headshot):
   shows the full mark uncropped instead of the circular photo treatment,
   toggled per-testimonial via main.js (loadTesti) when the data entry has
   a photoFit value. Only applies to that entry's img: other testimonials'
   headshots are unaffected. */
.testi-person img.is-logo{ border-radius:50%; object-fit:contain; background:#000; padding:7px; }
.testi-person-name{ font-size:15px; font-weight:600; }
.testi-person-role{ font-size:13.5px; color:var(--text-2); }
.testi-switch{ display:flex; gap:10px; margin-top:28px; }

.quote-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.quote-card{ background:var(--bg-0); padding:30px 26px; display:flex; flex-direction:column; gap:16px; }
.quote-stars{ color:var(--orange); font-size:13px; letter-spacing:2px; }
.quote-card p{ font-size:14.5px; color:var(--text-1); line-height:1.65; flex:1; }
.quote-who{ display:flex; align-items:center; gap:10px; }
.quote-who img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.quote-who-name{ font-size:13.5px; font-weight:600; color:var(--text-0); }
.quote-who-co{ font-size:12px; color:var(--text-2); }

@media (max-width:900px){
  .testi-featured{ grid-template-columns:1fr; }
  .quote-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .quote-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:var(--bg-0); }
/* The Company: compact editorial profile. Wide paragraph, one row of three proof
   numbers, then the closing statement with the gorilla as a small signature. */
.about.section-pad{ padding-top:clamp(48px,5vw,72px); padding-bottom:clamp(48px,5vw,72px); }
.about .chapter{ margin-bottom:clamp(20px,2.4vw,32px); }
.about-lead{
  max-width:64ch; margin:0;
  font-family:var(--display); font-weight:500; line-height:1.4;
  font-size:clamp(19px,2vw,28px); color:var(--text-0);
}
.about-stats{
  list-style:none; margin:clamp(28px,3.4vw,44px) 0 0; padding:clamp(20px,2.4vw,30px) 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3.4vw,48px);
}
.about-stat b{
  display:block; font-family:var(--display); font-weight:600; line-height:1;
  font-size:clamp(34px,3.6vw,52px); letter-spacing:-0.02em; color:var(--text-0);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.about-stat span{ display:block; margin-top:10px; font-size:14px; line-height:1.4; color:var(--text-1); }
.about-close{
  margin-top:clamp(28px,3.4vw,44px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.about-close .same{ font-family:var(--display); font-weight:600; color:var(--text-0); font-size:clamp(26px,3vw,40px); line-height:1.15; }
.about-close .same em{ font-style:normal; color:var(--orange); }
.about-mark{ flex:none; width:auto; height:clamp(40px,4.4vw,60px); opacity:0.94; }

@media (max-width:860px){
  .about-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px; }
}
@media (max-width:640px){
  .about-stats{ grid-template-columns:1fr; gap:0; padding-top:0; }
  .about-stat{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
  .about-stat b{ flex:0 0 160px; font-size:32px; }
  .about-stat span{ margin-top:0; }
  /* gorilla beside the short first line, so it neither adds height nor narrows line two */
  .about-close{ display:block; position:relative; }
  .about-mark{ position:absolute; top:0; right:0; height:30px; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  background:var(--bg-1); border-top:1px solid var(--line);
  padding: clamp(90px,14vw,180px) 0;
  text-align:center;
  position:relative; overflow:hidden;
}
.final-cta::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(560px 320px at 50% 0%, var(--orange-dim), transparent 70%);
  pointer-events:none;
}
.final-cta h2{ font-size:clamp(36px,6vw,74px); max-width:18ch; margin:0 auto; position:relative; }
.final-cta .lede{ margin-left:auto; margin-right:auto; text-align:center; position:relative; }
.final-cta-actions{ margin-top:40px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; position:relative; }
.final-cta-meta{ margin-top:34px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; color:var(--text-2); font-size:13.5px; position:relative; }
.final-cta-meta a{ color:var(--text-1); transition:color .25s; }
.final-cta-meta a:hover{ color:var(--orange); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--bg-0); border-top:1px solid var(--line); padding: 40px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-left{ display:flex; flex-direction:column; gap:4px; }
.footer-left .co{ font-size:13.5px; color:var(--text-1); }
.footer-left .uen{ font-size:12px; color:var(--text-2); }
.footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a{ font-size:13.5px; color:var(--text-1); transition:color .25s; }
.footer-links a:hover{ color:var(--orange); }

/* ============================================================
   INNER PAGES (strategy-call, legal)
   ============================================================ */
.page-hero{
  padding: clamp(150px,20vw,220px) 0 clamp(40px,6vw,60px);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{ display:block; margin-bottom:14px; }
.page-hero h1{ font-size:clamp(32px,5vw,56px); max-width:18ch; }
.page-hero .lede{ margin-top:16px; }
.page-updated{ color:var(--text-2); font-size:13px; margin-top:18px; }

.legal-body{ padding: clamp(48px,6vw,80px) 0 clamp(90px,10vw,140px); }
.legal-body .container{ max-width:820px; }
.legal-body h2{ font-size:clamp(20px,2vw,24px); margin-top:48px; margin-bottom:16px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color:var(--text-1); font-size:15.5px; line-height:1.8; margin-bottom:14px; }
.legal-body ul{ color:var(--text-1); font-size:15.5px; line-height:1.8; margin:0 0 14px; padding-left:22px; }
.legal-body li{ margin-bottom:6px; }
.legal-body strong{ color:var(--text-0); }
.legal-toc{
  border:1px solid var(--line); border-radius:10px; padding:22px 26px; margin-bottom:44px;
  background:var(--bg-1);
}
.legal-toc p{ font-size:12.5px; letter-spacing:0.04em; color:var(--text-2); margin-bottom:12px; text-transform:uppercase; }
.legal-toc ol{ margin:0; padding-left:18px; columns:2; column-gap:26px; }
.legal-toc li{ font-size:14px; color:var(--text-1); margin-bottom:8px; break-inside:avoid; }
.legal-toc a:hover{ color:var(--orange); }

@media (max-width:640px){
  .legal-toc ol{ columns:1; }
}

/* ============================================================
   STRATEGY CALL FORM
   ============================================================ */
.strategy-wrap{
  display:grid; grid-template-columns: 1fr 1.15fr; min-height:100vh;
}
.strategy-visual{
  position:relative; background:#000; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:320px;
}
.strategy-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55; }
.strategy-visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,9,9,0.2), rgba(9,9,9,0.96));
}
.strategy-visual-content{ position:relative; z-index:1; padding: clamp(40px,5vw,72px); }
.strategy-visual-content .same{ font-family:var(--display); font-size:clamp(22px,2.4vw,30px); font-weight:600; }
.strategy-visual-content .same em{ font-style:normal; color:var(--orange); }
.strategy-visual-content p{ color:var(--text-1); margin-top:14px; max-width:36ch; font-size:14.5px; }

.strategy-form-side{ padding: clamp(120px,10vw,140px) var(--gutter) 80px; display:flex; flex-direction:column; justify-content:center; }
.strategy-form-side .back-link{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-1); margin-bottom:30px; }
.strategy-form-side .back-link:hover{ color:var(--orange); }
.strategy-form-side h1{ font-size:clamp(28px,3.2vw,40px); margin-bottom:10px; }
.strategy-form-side .lede{ margin-bottom:40px; }

.form-group{ margin-bottom:24px; }
.form-group label{ display:block; font-size:13.5px; color:var(--text-1); margin-bottom:9px; }
.form-group input[type="text"],
.form-group input[type="tel"]{
  width:100%; background:var(--bg-1); border:1px solid var(--line-strong); color:var(--text-0);
  padding:15px 16px; border-radius:6px; font-size:15px; font-family:var(--body);
  transition:border-color .25s var(--ease-soft), background .25s;
}
.form-group input:focus{ border-color:var(--orange); background:var(--bg-2); outline:none; }
.form-group input::placeholder{ color:var(--text-2); }

.choice-group{ display:flex; gap:12px; flex-wrap:wrap; }
.choice-pill{
  flex:1; min-width:140px;
  border:1px solid var(--line-strong); border-radius:6px; padding:14px 16px;
  cursor:pointer; text-align:center; font-size:14.5px; color:var(--text-1);
  transition:border-color .25s, color .25s, background .25s;
  position:relative;
}
.choice-pill input{ position:absolute; opacity:0; pointer-events:none; }
.choice-pill.is-selected{ border-color:var(--orange); color:var(--text-0); background:var(--orange-dim); }

.consent-row{ display:flex; align-items:flex-start; gap:12px; margin: 30px 0 10px; }
.consent-row input{ margin-top:4px; accent-color:var(--orange); width:16px; height:16px; flex:none; }
.consent-row label{ font-size:13px; color:var(--text-2); line-height:1.6; }
.consent-row a{ color:var(--text-1); text-decoration:underline; text-underline-offset:2px; }
.consent-row a:hover{ color:var(--orange); }

.form-error{ font-size:12.5px; color:#ff8a6a; margin-top:6px; display:none; }
.form-group.has-error input{ border-color:#ff8a6a; }
.form-group.has-error .form-error{ display:block; }

.form-submit{ width:100%; justify-content:center; margin-top:8px; }

.form-success{ display:none; text-align:center; padding:40px 0; }
.form-success.is-visible{ display:block; }
.form-success-icon{
  width:64px; height:64px; border-radius:50%; background:var(--orange-dim); border:1px solid var(--orange-line);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px; color:var(--orange);
}
.form-success h2{ font-size:24px; margin-bottom:10px; }
.form-success p{ color:var(--text-1); font-size:14.5px; max-width:38ch; margin:0 auto; }

@media (max-width:900px){
  .strategy-wrap{ grid-template-columns:1fr; }
  .strategy-visual{ min-height:220px; }
}


/* ============================================================
   RETURNING CLIENTS - horizontal case-study carousel
   One slide = screenshot + copy, moving together as a single panel.
   ============================================================ */
.recon{ border-top:1px solid var(--line); padding: clamp(48px,7vw,84px) 0; }
.recon-viewport{
  box-sizing:border-box; overflow:hidden; touch-action:pan-y;
  padding:8px 0 56px; margin:-8px 0 -56px;
  transition:height .5s var(--ease-out);
}
.recon-track{ display:flex; align-items:flex-start; transition:transform .55s var(--ease-out); will-change:transform; }
.recon-track.is-dragging{ transition:none; }
.recon-slide{
  flex:0 0 100%; min-width:0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:center;
  opacity:0; transition:opacity .5s var(--ease-soft);
}
.recon-slide.is-active{ opacity:1; }
.recon .proof-shot-frame{ width:min(var(--shot-w,280px), 100%); padding:0; background:none; }
.recon .proof-shot-frame img{ height:auto; }

.recon-controls{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:clamp(24px,3.5vw,40px);
}
.recon-arrow{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-strong); color:var(--text-0);
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft), opacity .25s var(--ease-soft);
}
.recon-arrow:hover:not(:disabled){ border-color:var(--orange); color:var(--orange); }
.recon-arrow:disabled{ opacity:.28; cursor:default; }
.recon-dots{ display:flex; gap:6px; }
.recon-dots button{
  width:40px; height:23px; padding:10px 0; border:0; cursor:pointer;
  background:var(--line-strong); background-clip:content-box;
  transition:background-color .3s var(--ease-soft);
}
.recon-dots button.is-active{ background-color:var(--orange); }
.recon-live{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.recon-hint{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 18px;
  font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-2);
}
.recon-hint-arrow{ color:var(--orange); font-size:13px; line-height:1; }
.recon-hint-mobile{ display:none; }

/* Per-slide control group: lives inside each slide, as a third grid item in the text
   column. Rows are 1fr / auto / 1fr: the phone spans all three, the copy sits in the
   middle row (so it stays centred against the phone exactly as before) and the
   controls start just beneath the copy. Slides with more copy simply get a taller
   row; the controls can never overlap the copy. No per-slide coordinates. */
.recon-slide{ grid-template-rows:1fr auto 1fr; row-gap:0; }
.recon-slide > .proof-shot{ grid-column:1; grid-row:1 / span 3; }
.recon-slide > .proof-text{ grid-column:2; grid-row:2; }
.recon-slide > .recon-slide-controls{
  grid-column:2; grid-row:3; align-self:start;
  margin-top:clamp(28px,3.4vw,48px);
}

.recon-support-line{ font-size:14px !important; font-weight:600; color:var(--text-0) !important; letter-spacing:0.01em; }
.recon-proof{ margin-top:18px; }
.recon-proof b{ display:block; font-family:var(--display); font-size:clamp(19px,1.9vw,24px); color:var(--orange); letter-spacing:0.01em; }
.recon-proof span{ display:block; font-size:12.5px; color:var(--text-2); letter-spacing:0.03em; margin-top:3px; }

/* Testimonials: reuses the Repeat Clients carousel's arrow/dot/hint styling
   (.recon-arrow / .recon-dots / .recon-hint) so both sections share one
   interaction language. Only this block's own spacing is scoped here. */
.testi-featured + .recon-hint{ margin-top:clamp(24px,3.5vw,40px); }
.testi-controls{ margin-bottom:64px; }
.testi-switch.recon-dots{ margin-top:0; }

@media (max-width: 760px){
  .recon-slide{ grid-template-columns:1fr; grid-template-rows:none; gap:28px; }
  .recon-slide > .proof-shot, .recon-slide > .proof-text, .recon-slide > .recon-slide-controls{ grid-column:1; grid-row:auto; }
  .recon-slide > .recon-slide-controls{ align-self:center; margin-top:0; }
  /* Mobile reading order for every slide: label, headline, screenshot, then the slide's own
     "swipe to explore" + progress bars, then the supporting copy and the closing statement.
     The text wrappers become "contents" so the headline and the copy are separate flow items
     and the screenshot and controls can be ordered between them (normal document flow, no
     absolute positioning). Grid items do not collapse margins, so the row gap is zeroed and
     the old collapsed gaps are restored. */
  .recon-slide{ row-gap:0; }
  .recon-slide > .proof-text, .recon-slide .proof-text-body{ display:contents; }
  .recon-slide .proof-tag{ order:1; }
  .recon-slide .proof-headline{ order:2; }
  .recon-slide > .proof-shot{ order:3; margin:8px 0 12px; }
  .recon-slide > .recon-slide-controls{ order:4; margin-bottom:26px; display:flex; flex-direction:column; align-items:center; }
  .recon-slide .proof-text-body > p{ order:5; }
  .recon-slide .proof-text-body > .recon-support-line{ order:6; }
  .recon-slide .proof-text-body > .recon-proof{ order:6; margin-top:4px; }
  .recon-controls{ gap:16px; }
  .recon-arrow{ width:40px; height:40px; }
  .recon-dots button{ width:30px; }
  .recon-hint-desktop{ display:none; }
  .recon-hint-mobile{ display:inline; }
  /* Pagination on mobile: small Instagram-style dots instead of the horizontal bars. The
     same six buttons keep doing the work (the script already moves the active state on
     swipe, arrows and taps); only their look changes, and the dots sit directly under the
     screenshot with "swipe to explore" directly under them. Scoped to the slides: the
     Testimonials block reuses the bar classes and is unaffected, and so is desktop. */
  .recon-slide .recon-slide-controls .recon-controls{ order:1; margin-top:0; }
  .recon-slide .recon-slide-controls .recon-hint{ order:2; margin:12px 0 0; }
  .recon-slide .recon-dots{ gap:0; }
  .recon-slide .recon-dots button,
  .recon-slide .recon-dots button.is-active{ position:relative; width:14px; height:28px; padding:0; background:none; }
  .recon-slide .recon-dots button::before{
    content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
    border-radius:50%; background:rgba(255,255,255,0.28);
  }
  .recon-slide .recon-dots button.is-active::before{ background:var(--orange); }
  /* Mobile navigation is swipe + dots + the swipe hint: the circular prev/next buttons are
     removed here (Ultimate Proof slides and the Testimonials carousel only). They stay on
     desktop, and the swipe handling is untouched. */
  .recon-slide .recon-arrow, .testi-controls .recon-arrow{ display:none; }

  /* Testimonials, mobile only: video, then the pagination dots directly under it, then the
     headline and client, then "swipe to explore". The dots live outside the video/copy
     wrapper, so the wrapper becomes "contents" and the container a column to order the
     pieces (normal flow, no absolute positioning). Margins no longer collapse between flex
     items, so the old collapsed gaps are restored explicitly. touch-action moves onto the
     two blocks that carry the swipe. The old bars and arrows are gone (dots replace the
     bars; the arrows are hidden above). Desktop is untouched. */
  .testimonials .container{ display:flex; flex-direction:column; }
  .testimonials .testi-featured{ display:contents; }
  .testimonials .testi-video-frame{ order:1; touch-action:pan-y; }
  .testimonials .testi-controls{ order:2; margin:12px 0 12px; }
  .testimonials .testi-copy{ order:3; touch-action:pan-y; }
  .testimonials .testi-featured + .recon-hint{ order:4; margin-bottom:56px; }
  .testimonials .testi-live{ order:5; }
  .testimonials .quote-grid{ order:6; }
  .testimonials .testi-controls .testi-switch{ gap:0; }
  .testimonials .testi-controls .testi-switch button,
  .testimonials .testi-controls .testi-switch button.is-active{ position:relative; width:14px; height:28px; padding:0; background:none; }
  .testimonials .testi-controls .testi-switch button::before{
    content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
    border-radius:50%; background:rgba(255,255,255,0.28);
  }
  .testimonials .testi-controls .testi-switch button.is-active::before{ background:var(--orange); }
}
@media (prefers-reduced-motion: reduce){
  .recon-viewport, .recon-track, .recon-slide{ transition:none !important; }
}
@media (max-width: 1020px) and (prefers-reduced-motion: reduce){
  .nav-links.is-open > *{ animation:none; }
  .nav-links{ transition:none; }
}


/* Legal pages: align the page header with the 820px document column below it */
.page-hero--legal .container{ max-width:820px; }
.page-hero--legal h1{ max-width:none; font-size:clamp(32px,4.4vw,48px); text-wrap:balance; }

/* Inline text redaction (name censoring within case-study copy, not an image) */
.redact{ background:#050505; color:transparent; border-radius:3px; padding:0 2px; -webkit-user-select:none; user-select:none; }

/* ============================================================
   ULTIMATE PROOF - standalone editorial statement section
   Sits between the case-study proof section and the returning-
   clients carousel. Left-aligned, cinematic, generous whitespace.
   ============================================================ */
.ultimate-proof{
  border-top:1px solid var(--line);
  /* The gap into the next section (returning-client carousel) previously
     used the full section-pad bottom (up to 160px), reading as a large
     empty void. Scaled down to match the same transition-gap used
     elsewhere on the site (e.g. .proof-case's padding into Boon Chong),
     so the carousel now follows on much sooner: top padding (the gap
     before this section) is untouched. */
  padding-bottom: clamp(48px, 7vw, 84px);
}
.ultimate-proof .chapter-label{ color:var(--orange); font-weight:600; }
.ultimate-proof-headline{
  font-size:clamp(34px,4.8vw,64px);
  line-height:1.08;
  max-width:22ch;
  color:var(--text-0);
}
.ultimate-proof-subtitle{
  margin-top:18px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(18px,1.7vw,22px);
  line-height:1.4;
  max-width:42ch;
  color:var(--text-0);
}
.ultimate-proof-support{
  margin-top:12px;
  font-size:clamp(14px,1.2vw,15px);
  color:var(--text-2);
  max-width:46ch;
}
.recon-section{ padding-top:0; }
/* Trim the dead space between the Ultimate Proof carousel and the Services divider:
   this wrapper's bottom padding only (about half of the old gap at every width).
   The carousel's own internal padding is untouched. */
.recon-section.section-pad{ padding-bottom:clamp(16px,2.5vw,38px); }

@media (max-width:640px){
  .ultimate-proof-headline{ max-width:none; font-size:clamp(28px,7.4vw,36px); }
  .ultimate-proof-subtitle{ max-width:none; }
}