/* site.css - the hand-written pages: /, /about, /team.
   The rest of public/ is Framer SSR output with its own bundled styles; nothing
   here touches those pages. See AGENTS.md. */

:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#1a1a1a;
  --muted:#6b6b6b;
  --line:#e8e8e8;
  --accent:#facc15;        /* primary yellow */
  --accent-soft:#fef9c3;   /* soft yellow */
  --c-blue:#facc15;
  --c-pink:#facc15;
  --c-purple:#facc15;
  --c-green:#facc15;
  --c-amber:#facc15;
  --pad:clamp(20px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Geist','Inter',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* Every section that holds a .container already applies `var(--pad)` of its own
   horizontal padding. .container must therefore NOT subtract it a second time:
   at 390px that double inset left body copy in a ~240px column, and at the
   original 12vw hero size it pushed the headline off the right edge. Capping at
   min(1280px,100%) is identical on desktop - at >=1440px the 1280px cap wins
   either way - and gives a phone back 40px. */
.container{width:min(1280px,100%);margin-inline:auto}

h1,h2,h3,h4{
  font-family:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:0.95;
  margin:0;
}
h1{font-size:clamp(34px,6.4vw,104px)}
h2{font-size:clamp(32px,5vw,72px)}
h3{font-size:clamp(22px,2.4vw,34px)}
h4{font-size:clamp(18px,1.6vw,24px)}
p{margin:0 0 1em}

.inline-link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.inline-link:hover{color:var(--accent)}

/* ========== HEADER ========== */
.header{
  position:fixed;left:0;right:0;top:0;z-index:50;
  display:flex;justify-content:center;
  padding:24px var(--pad);
  pointer-events:none;
  transition:transform .4s ease;
}
.header.is-hidden{transform:translateY(-130%)}
.header__bar{
  pointer-events:auto;
  display:flex;align-items:center;gap:32px;
  background:var(--ink);
  color:#fff;
  padding:10px 12px 10px 24px;
  border-radius:14px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.25);
  animation:fadeDown .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
.header__logo{display:flex;align-items:center;gap:10px;font-weight:700;font-family:'Bricolage Grotesque';min-height:44px}
.header__logo .dot{display:none}
.header__nav{display:flex;gap:4px}
.header__nav a{
  display:inline-block;padding:8px 14px;border-radius:8px;
  font-size:14px;
  transition:background .25s ease, color .25s ease;
}
.header__nav a:hover{background:rgba(255,255,255,.08)}
.header__cta{
  display:inline-flex;align-items:center;
  background:var(--accent);color:#0a0a0a;font-weight:600;
  padding:10px 16px;min-height:44px;border-radius:10px;font-size:14px;
  transition:box-shadow .3s ease, transform .3s ease;
}
.header__cta:hover{box-shadow:0 0 0 4px rgba(250,204,21,.25),0 8px 30px -8px var(--accent);transform:translateY(-1px)}
.header__burger{display:none;width:44px;height:44px;border-radius:8px;background:#fff;color:#000;align-items:center;justify-content:center}
.header__burger span,.header__burger span::before,.header__burger span::after{
  content:'';display:block;width:18px;height:2px;background:#000;position:relative;transition:transform .3s ease, opacity .2s ease;
}
.header__burger span::before{position:absolute;top:-6px}
.header__burger span::after{position:absolute;top:6px}

/* ── Mobile navigation ──────────────────────────────────────────────────────
   The burger existed on the old site but was wired to nothing: below 900px the
   nav and the CTA were simply display:none and there was no way to reach any
   other page. It is a real disclosure now, driven by site.js. */
@media(max-width:1024px){
  .header{padding:16px var(--pad)}
  .header__bar{
    width:100%;flex-wrap:wrap;gap:0;
    justify-content:space-between;
    padding:8px 8px 8px 18px;
  }
  .header__nav,.header__cta{display:none}
  .header__burger{display:flex}
  /* The bar wraps when the menu opens, so the burger has to be pinned to the
     first line with the logo or it lands underneath the panel it controls. */
  .header__bar > .header__logo{order:1}
  .header__bar > .header__burger{order:2}
  .header__bar > .header__nav{order:3}
  .header__bar > .header__cta{order:4}
  .header.is-open .header__nav{
    display:flex;flex-direction:column;width:100%;gap:2px;
    margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
  }
  .header.is-open .header__nav a{
    display:flex;align-items:center;min-height:48px;padding:12px 14px;font-size:16px;
  }
  .header.is-open .header__cta{
    display:flex;width:100%;justify-content:center;min-height:48px;
    margin:8px 0 4px;font-size:15px;
  }
  .header.is-open .header__burger span{background:transparent}
  .header.is-open .header__burger span::before{transform:translateY(6px) rotate(45deg)}
  .header.is-open .header__burger span::after{transform:translateY(-6px) rotate(-45deg)}
}

/* ========== HERO ========== */
.hero{
  position:relative;
  padding:160px var(--pad) 80px;
  overflow:hidden;
  min-height:100vh;
  color:#fff;
  isolation:isolate;
  display:flex;align-items:center;
}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg video{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.85) 100%);
  z-index:1;
}
.hero__title{
  font-size:clamp(34px,6.4vw,104px);
  line-height:1.02;
  max-width:16ch;
}
.hero__title .word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero__title .word > span{
  display:inline-block;
  transform:translateY(110%);
  animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__title .word:nth-child(1) span{animation-delay:.08s}
.hero__title .word:nth-child(2) span{animation-delay:.18s}
.hero__title .word:nth-child(3) span{animation-delay:.28s}
.hero__title .word:nth-child(4) span{animation-delay:.38s}
.hero__title .word:nth-child(5) span{animation-delay:.48s}
.hero__title em{
  font-style:normal;
  background:linear-gradient(110deg,var(--c-blue) 0%,var(--c-purple) 50%,var(--c-pink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
  position:relative;
}
.hero__title em::after{
  content:'';position:absolute;left:0;right:0;bottom:-.05em;height:.06em;
  background:var(--accent);
  transform-origin:left;
  transform:scaleX(0);
  animation:underline 1s 1.4s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes underline{to{transform:scaleX(1)}}
@keyframes rise{to{transform:translateY(0)}}

.hero__meta{
  margin-top:44px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;
  opacity:0;transform:translateY(30px);
  animation:fadeUp 1s 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hero__sub{max-width:560px;color:rgba(255,255,255,.86);font-size:19px;line-height:1.5;margin-bottom:.6em}
.hero__thesis{
  max-width:560px;margin:0;
  font-family:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  font-weight:600;font-size:17px;color:var(--accent);
}
.hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero__cta{display:inline-flex;align-items:center;gap:10px}
.btn-primary{
  background:#fff;color:#0a0a0a;
  padding:16px 22px;border-radius:12px;font-weight:600;font-size:14px;
  border:2px solid #fff;
  transition:transform .3s ease, background .3s ease;
}
.btn-ghost{
  padding:16px 22px;border-radius:12px;font-weight:600;font-size:14px;
  border:2px solid rgba(255,255,255,.5);color:#fff;
  transition:border-color .3s ease, background .3s ease;
}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-icon{
  width:50px;height:50px;border:2px solid #fff;background:transparent;color:#fff;
  border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s ease, transform .3s ease, color .3s ease;
}
.hero__cta:hover .btn-primary{background:#f0f0f0}
.hero__cta:hover .btn-icon{background:#fff;color:#0a0a0a;transform:rotate(-45deg)}
.btn-icon svg{width:22px;height:22px}

.hero__scroll{
  margin-top:56px;display:flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);
  animation:fadeUp 1s 2s both;
}
.hero__scroll .line{position:relative;width:80px;height:1px;background:rgba(255,255,255,.25);overflow:hidden}
.hero__scroll .line::after{
  content:'';position:absolute;top:0;left:-50%;width:50%;height:100%;background:#fff;
  animation:slide 1.8s ease-in-out infinite;
}
@keyframes slide{0%{left:-50%}100%{left:100%}}
@media(max-width:900px){
  .hero__meta{grid-template-columns:1fr;align-items:start;gap:28px}
  .hero__title{max-width:none}
}

/* ========== LABELS ========== */
.intro__label{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.intro__label::before{content:'';width:24px;height:1px;background:var(--ink)}

/* ========== PROOF BLOCK (position 2) ========== */
.proof{
  padding:120px var(--pad);
  background:var(--accent-soft);
  border-block:1px solid var(--line);
}
.proof__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start}
.proof__heading{font-size:clamp(28px,3.6vw,54px);margin-top:24px;max-width:16ch}
.proof__body{font-size:18px;color:var(--ink-soft);max-width:62ch}
.proof__body strong{font-weight:600}
.proof__pull{
  margin:0;padding-top:20px;border-top:1px solid rgba(10,10,10,.15);
  font-family:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  font-weight:600;font-size:clamp(18px,1.8vw,24px);line-height:1.35;
}
@media(max-width:900px){.proof{padding:80px var(--pad)}.proof__grid{grid-template-columns:1fr;gap:28px}}

/* ========== SERVICES / CAPABILITIES ========== */
.services{
  background:var(--ink);color:#fff;
  padding:140px var(--pad);
  position:relative;
  overflow:hidden;
}
.services::before{
  content:'';position:absolute;top:-50%;right:-20%;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(250,204,21,.25),transparent 70%);
  pointer-events:none;
  animation:float 18s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
.services__head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:64px;align-items:end}
.services__head h2{max-width:20ch}
.services__head .lead{max-width:400px;color:#aaa;margin:0}
.services__list{display:flex;flex-direction:column}
.service{
  display:grid;grid-template-columns:80px 56px 1fr;align-items:start;gap:24px 32px;
  padding:32px 0;
  border-top:1px solid rgba(255,255,255,.12);
  position:relative;
}
.service:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.service__num{font-family:'Bricolage Grotesque';font-size:22px;color:var(--accent);font-weight:700;line-height:1.3}
.service__icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.service__icon img{width:100%;height:100%;object-fit:contain}
.service__title{font-size:clamp(24px,3vw,40px);font-family:'Bricolage Grotesque';font-weight:700;line-height:1.05}
.service__desc{max-width:62ch;color:#aaa;font-size:16px;line-height:1.55;grid-column:3/-1;margin:12px 0 0}
@media(max-width:780px){
  .service{grid-template-columns:48px 40px 1fr;gap:12px 14px}
  .service__num{font-size:18px}
  .service__icon{width:36px;height:36px}
  .service__desc{grid-column:1/-1}
  .services{padding:80px 24px}
}

/* ========== SECTION HEAD (selected work) ========== */
.achievements__head{
  padding:140px var(--pad) 32px;
  display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px;
  opacity:0;transform:translateY(30px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.achievements__head.is-visible{opacity:1;transform:translateY(0)}
.achievements__head .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.achievements__head .label::before{content:'';width:24px;height:1px;background:var(--ink)}
.achievements__head h2{max-width:18ch;margin-top:16px}
.achievements__head .lead{max-width:420px;color:var(--muted);margin:0}

/* ========== CASE STUDIES ========== */
.cases{padding:24px var(--pad) 120px}
.cases__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.case{
  background:var(--ink);color:#fff;
  border-radius:24px;padding:36px;
  display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
}
.case::before{
  content:'';position:absolute;bottom:-30%;right:-20%;width:80%;height:80%;
  background:radial-gradient(closest-side,rgba(250,204,21,.22),transparent 70%);
  pointer-events:none;animation:float 14s ease-in-out infinite;
}
.case > *{position:relative}
.case__domain{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.case h3{font-size:clamp(21px,1.8vw,27px);line-height:1.12}
.case p{color:#bbb;font-size:15px;line-height:1.6;margin:0}
.case__figures{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.case__figures span{
  font-size:12px;padding:6px 11px;border-radius:99px;
  background:rgba(255,255,255,.07);color:#ddd;white-space:nowrap;
}
@media(max-width:1100px){.cases__grid{grid-template-columns:1fr}}

.commitment{
  margin-top:32px;padding:36px;
  border:1px solid var(--line);border-radius:24px;background:#fafafa;
  display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:start;
}
.commitment h3{max-width:12ch}
.commitment p{margin:0;color:var(--muted);font-size:17px;max-width:62ch}
@media(max-width:900px){.commitment{grid-template-columns:1fr;gap:16px;padding:28px}}

/* ========== PROCESS / HOW WE WORK ========== */
.process{
  padding:140px var(--pad);
  background:var(--ink);color:#fff;
}
.process .intro__label{color:#888}
.process .intro__label::before{background:#fff}
.process h2{color:#fff}
.process__lead{max-width:62ch;color:#aaa;margin-top:20px}
.process__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid rgba(255,255,255,.12);
  margin-top:32px;
  width:100%;
}
.process__grid--5{grid-template-columns:repeat(5,1fr)}
.process__item{
  padding:32px 24px;border-right:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:14px;
  background:transparent;color:#fff;
  opacity:0;transform:translateY(40px) scale(.96);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), background .35s, color .35s;
}
.process.is-visible .process__item{opacity:1;transform:translateY(0) scale(1)}
.process.is-visible .process__item:nth-child(1){transition-delay:.1s}
.process.is-visible .process__item:nth-child(2){transition-delay:.2s}
.process.is-visible .process__item:nth-child(3){transition-delay:.3s}
.process.is-visible .process__item:nth-child(4){transition-delay:.4s}
.process__item:last-child{border-right:0}
.process__item:hover{background:rgba(255,255,255,.06)}
.process__num{font-family:'Bricolage Grotesque';font-size:36px;font-weight:700;letter-spacing:-.04em;color:var(--accent)}
.process__title{font-family:'Bricolage Grotesque';font-size:20px;font-weight:700;line-height:1.1}
.process__copy{font-size:14px;color:#aaa;margin:0}
@media(max-width:1200px){.process__grid--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.process__grid,.process__grid--5{grid-template-columns:repeat(2,1fr)}.process__item{border-bottom:1px solid rgba(255,255,255,.12)}}
@media(max-width:560px){.process__grid,.process__grid--5{grid-template-columns:1fr}.process__item{border-right:0}}

/* ========== LOGO STRIP ========== */
.clients{
  border-block:1px solid var(--line);
  padding:48px 0 56px;
  background:#0a0a0a;
  color:#fff;
  overflow:hidden;
  position:relative;
}
.clients::before,.clients::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.clients::before{left:0;background:linear-gradient(to right,#0a0a0a,transparent)}
.clients::after{right:0;background:linear-gradient(to left,#0a0a0a,transparent)}
.clients__head{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-inline:var(--pad);margin-bottom:36px;
}
.clients__label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#888}
.clients__label::before{content:'';display:inline-block;width:24px;height:1px;background:var(--c-amber);vertical-align:middle;margin-right:10px}
.marquee{display:flex;align-items:center;width:max-content;animation:scroll 36s linear infinite}
.marquee__track{display:flex;gap:64px;align-items:center;padding-right:64px;flex-shrink:0}
.marquee:hover{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__logo{
  height:64px;width:auto;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:14px 28px;
  background:#fff;border-radius:14px;
  transition:transform .35s ease, box-shadow .35s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.marquee__logo img{height:36px;width:auto;max-width:200px;object-fit:contain;transition:transform .4s ease}
.marquee__logo:hover{transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 12px 30px -10px var(--accent)}
.marquee__logo:hover img{transform:scale(1.06)}

/* ========== TEAM ========== */
.team{padding:120px var(--pad);background:#fafafa}
.team__head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px;margin-bottom:48px}
.team__head h2{max-width:18ch}
.team__head .lead{max-width:420px;color:var(--muted);margin:0}
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.team__card{
  position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:3/4;background:#000;
  opacity:0;transform:translateY(40px) scale(.98);
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.team__card.is-visible{opacity:1;transform:translateY(0) scale(1)}
.team__card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:grayscale(20%);
}
.team__card:hover img{transform:scale(1.06);filter:grayscale(0)}
.team__card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.15) 45%,transparent 65%);
  pointer-events:none;
}
.team__caption{position:absolute;left:18px;right:18px;bottom:18px;color:#fff;z-index:1}
.team__name{font-family:'Bricolage Grotesque';font-size:18px;font-weight:700}
.team__role{font-size:13px;opacity:.85}
@media(max-width:900px){.team__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team__grid{grid-template-columns:1fr}}

/* ========== CTA ========== */
.cta{padding:140px var(--pad);text-align:center}
.cta h2{font-size:clamp(34px,6vw,92px);max-width:20ch;margin:0 auto}
.cta h2 em{
  font-style:normal;background:linear-gradient(110deg,var(--c-blue),var(--c-purple),var(--c-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.cta__lead{margin-top:32px;color:var(--muted);max-width:560px;margin-inline:auto}
.cta__buttons{margin-top:48px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta .btn-icon{border-color:var(--ink);color:var(--ink)}
.cta .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta .hero__cta:hover .btn-icon{background:var(--ink);color:#fff}
.cta__shape{
  display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--accent);
  vertical-align:middle;margin:0 .15em;
  animation:wobble 4s ease-in-out infinite;
}
@keyframes wobble{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(180deg)}}

/* ========== PAGE HERO (about / team) ========== */
.pagehero{padding:200px var(--pad) 80px;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.pagehero::before{
  content:'';position:absolute;top:-40%;right:-10%;width:55%;height:140%;
  background:radial-gradient(closest-side,rgba(250,204,21,.22),transparent 70%);
  pointer-events:none;animation:float 18s ease-in-out infinite;
}
.pagehero .container{position:relative}
.pagehero .intro__label{color:#888}
.pagehero .intro__label::before{background:var(--accent)}
.pagehero h1{margin-top:24px;max-width:18ch}
.pagehero__lead{margin-top:28px;max-width:62ch;color:#bbb;font-size:19px}

.prose{padding:100px var(--pad)}
.prose__grid{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:start}
.prose__grid + .prose__grid{margin-top:72px;padding-top:72px;border-top:1px solid var(--line)}
.prose h2{font-size:clamp(28px,3.2vw,44px);max-width:16ch}
.prose p{color:var(--ink-soft);font-size:18px;max-width:66ch}
.prose p.muted{color:var(--muted)}
.principles{display:flex;flex-direction:column;gap:28px;margin:0}
.principle h3{font-size:clamp(19px,1.7vw,24px)}
.principle p{margin:8px 0 0;color:var(--muted);font-size:17px}
@media(max-width:900px){.prose{padding:64px var(--pad)}.prose__grid{grid-template-columns:1fr;gap:24px}}

/* ========== PEOPLE (team page) ========== */
.people{display:flex;flex-direction:column;gap:0}
.person{
  display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;
  padding:48px 0;border-top:1px solid var(--line);
}
.person:last-child{border-bottom:1px solid var(--line)}
.person__photo{border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:#000}
.person__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(20%)}
.person__name{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.05}
.person__role{margin-top:8px;color:var(--muted);font-size:16px}
@media(max-width:780px){.person{grid-template-columns:1fr;gap:24px}.person__photo{max-width:260px}}

/* ========== FOOTER ========== */
.footer{
  background:var(--ink);color:#fff;
  padding:80px var(--pad) 32px;
  border-radius:32px 32px 0 0;
  margin-top:32px;
}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
.footer__brand h3{font-family:'Bricolage Grotesque';font-size:48px;line-height:1}
.footer__brand p{margin-top:16px;color:#999;max-width:320px}
.footer__col h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#888;font-family:'Geist';font-weight:500;margin-bottom:18px}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer__col a{color:#ddd;font-size:15px;transition:color .25s ease;position:relative;display:inline-block}
.footer__col a:hover{color:var(--accent)}
.footer__col a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.footer__col a:hover::after{transform:scaleX(1)}
.footer__bottom{
  margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  color:#888;font-size:13px;
}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ========== reveal helper ========== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.services__head,.clients__head,.cta,.footer__brand,.footer__col{
  opacity:0;transform:translateY(36px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.services__head.is-visible,.clients__head.is-visible,.cta.is-visible,.footer__brand.is-visible,.footer__col.is-visible{
  opacity:1;transform:translateY(0);
}
.service{
  opacity:0;transform:translateX(-30px);filter:blur(2px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}
.service.is-visible{opacity:1;transform:translateX(0);filter:blur(0)}
.service.is-visible:nth-child(1){transition-delay:.05s}
.service.is-visible:nth-child(2){transition-delay:.12s}
.service.is-visible:nth-child(3){transition-delay:.19s}
.service.is-visible:nth-child(4){transition-delay:.26s}
.service.is-visible:nth-child(5){transition-delay:.33s}
.cta.is-visible h2{animation:fadeUpCTA .9s .1s cubic-bezier(.2,.7,.2,1) both}
.cta.is-visible .cta__lead{animation:fadeUpCTA .9s .25s cubic-bezier(.2,.7,.2,1) both}
.cta.is-visible .cta__buttons{animation:fadeUpCTA .9s .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUpCTA{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.process .services__head,.process h2{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.process.is-visible .services__head,.process.is-visible h2{opacity:1;transform:translateY(0)}
.process.is-visible h2{transition-delay:.15s}

/* honor reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ========== custom cursor ========== */
.cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:9999;
  transition:transform .12s ease, opacity .25s ease;
  mix-blend-mode:difference;
  opacity:0;
}
.cursor.is-active{opacity:.85}
/* Touch devices have no mouse to follow. (hover:none) alone missed the case
   that reached review: a desktop browser resized to a phone width still reports
   hover:hover, so the dot sat on top of the body copy in mobile layout.
   site.js removes the node outright under the same conditions. */
@media(hover:none),(pointer:coarse){.cursor{display:none}}
@media(max-width:780px){.cursor{display:none}}

/* ==========================================================================
   MOBILE
   Everything below is the device-width pass. The rules are grouped here rather
   than scattered so the next person can read the phone layout in one place.
   Verified with screenshots at 390x844 and 360x800 on every page; guarded by
   tests/mobile.spec.mjs.
   ========================================================================== */
@media(max-width:780px){
  /* Vertical rhythm: desktop section padding is 120-140px, which on a phone is
     most of a screen of nothing. */
  .hero{padding:120px var(--pad) 64px;min-height:auto}
  .hero__meta{margin-top:32px;gap:24px}
  .hero__sub{font-size:17px}
  .hero__scroll{margin-top:40px}
  .hero__actions{width:100%}
  .hero__actions .hero__cta,.btn-ghost{flex:1 1 auto;justify-content:center}
  .btn-primary,.btn-ghost{padding:14px 18px;min-height:48px;display:inline-flex;align-items:center}
  .btn-icon{width:48px;height:48px;flex:0 0 auto}

  .proof{padding:64px var(--pad)}
  .proof__heading{margin-top:16px}
  .proof__body{font-size:17px}
  .services{padding:72px var(--pad)}
  .services__head{margin-bottom:36px;gap:16px}
  .service{padding:24px 0}
  .achievements__head{padding:72px var(--pad) 24px;gap:12px}
  .cases{padding:16px var(--pad) 72px}
  .case{padding:24px;border-radius:18px}
  .case__figures span{white-space:normal}
  .commitment{padding:24px;border-radius:18px}
  .process{padding:72px var(--pad)}
  .process__grid{margin-top:32px}
  .team{padding:72px var(--pad)}
  .team__head{margin-bottom:28px}
  .cta{padding:72px var(--pad)}
  .cta__lead{margin-top:20px}
  .cta__buttons{margin-top:28px}
  .pagehero{padding:140px var(--pad) 56px}
  .pagehero__lead{font-size:17px;margin-top:20px}
  .prose{padding:56px var(--pad)}
  .prose__grid + .prose__grid{margin-top:44px;padding-top:44px}
  .prose p{font-size:17px;line-height:2.1}
  .footer{padding:56px var(--pad) 24px;border-radius:24px 24px 0 0}
  .footer__bottom{margin-top:40px}

  /* The logo strip was the second defect the captain named: a mark clipped at
     the left viewport edge and the marquee bleeding off-screen. A scrolling
     marquee cannot avoid that - marks enter and leave through the edges by
     design, and the 120px edge fades meant to disguise it covered 240px of a
     390px viewport, so something was always half-hidden. So on a phone it stops
     being a marquee: the same marks, laid out static, all five legible at once.
     The duplicate track exists only to make the scroll seamless and is not
     needed here (it is aria-hidden, so nothing is lost). */
  .clients{padding:36px var(--pad) 40px;overflow:visible}
  .clients::before,.clients::after{display:none}
  .clients__head{padding-inline:0;margin-bottom:20px}
  .marquee{width:100%;display:block;animation:none}
  .marquee__track[aria-hidden="true"]{display:none}
  .marquee__track{
    display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
    padding-right:0;
  }
  .marquee__logo{width:100%;height:58px;padding:10px 14px}
  .marquee__logo:hover{transform:none}
  .marquee__logo:last-child{grid-column:1/-1}
  .marquee__logo img{height:30px;max-width:100%}

  /* Tap targets. The founder's name is a link inside a photo caption and the
     footer links sit in tight lists; both were ~22-26px tall. */
  .team__name a,.person__name a{display:inline-flex;align-items:center;min-height:44px}
  .footer__col ul{gap:2px}
  .footer__col a{min-height:44px;display:inline-flex;align-items:center}
  /* Links inside a running sentence. WCAG 2.5.5 (AAA, 44px) explicitly exempts
     inline targets whose size is constrained by the line-height of the
     surrounding text, and padding them to 44px would make adjacent lines'
     hit boxes overlap so the wrong link answers the tap. So they are sized to
     clear the 2.5.8 (AA) 24px minimum instead, and the line-height is opened up
     to match so no two hit boxes ever overlap - that is what `.prose p`'s
     17px/2.1 above is for. 15px/2px gave 23px, just under. */
  .prose a{padding-block:7px}

  .person{padding:32px 0}
  .person__photo{max-width:200px}
}

/* Very small phones: 360px and down. At 360px the page has 320px of usable
   width, so any card inset above ~18px pushes body copy under the 280px
   minimum column. */
@media(max-width:400px){
  .case,.commitment{padding:18px}
  .process__item{padding:24px 18px}
  .prose__grid,.people{min-width:0}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .hero__cta{width:100%}
  .hero__cta .btn-primary{flex:1;justify-content:center}
  .btn-ghost{text-align:center;justify-content:center}
}

/* ========== noise texture overlay ========== */
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}