/* about.css — page-specific styles (loaded after main.css) */
/* CURSOR */
#cur{position:fixed;width:6px;height:6px;background:var(--volt);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;transition:width .2s var(--ease-out),height .2s var(--ease-out),background .2s}
#cur-f{position:fixed;width:32px;height:32px;border:1px solid rgba(64,102,255,.38);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);will-change:transform;transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .2s,opacity .2s}
.ldr-fill{height:100%;background:var(--volt);width:0%}
.btn--outline-dark{background:transparent;color:var(--lt-text);border:1px solid var(--lt-line2);padding:13px 24px;font-size:13px}
.btn--outline-dark:hover{border-color:var(--lt-line3);background:rgba(0,0,0,.04)}
.btn--sm{padding:9px 18px;font-size:12px}
.nav.on-light .nav__wordmark{color:var(--lt-text2)}
.nav__link:hover,.nav__link.active{color:var(--chalk)}
.nav.on-light .nav__link{color:var(--lt-text3)}
.nav.on-light .nav__link:hover,.nav.on-light .nav__link.active{color:var(--lt-text)}
.mnav__link:hover,.mnav__link.active{color:var(--chalk)}
.eyebrow--lt{color:var(--lt-volt)}
.eyebrow--lt .eyebrow__mark{background:var(--lt-volt)}
.section-title{font-family:var(--ff-display);font-size:clamp(2.2rem,4.5vw,4rem);letter-spacing:-.045em;line-height:1.06;color:var(--chalk);margin-bottom:18px}
.section-title--lt{color:var(--lt-text)}
.section-sub{font-size:clamp(.92rem,1.1vw,1.05rem);color:var(--chalk3);line-height:1.78;max-width:48ch}
.section-sub--lt{color:var(--lt-text2)}
/* ═══════════════════════════════════════════════════
   ABOUT HERO — split screen. Left: editorial statement.
   Right: real image. This is a human story.
═══════════════════════════════════════════════════ */
.about-hero{
  min-height:100svh;display:grid;align-items:center;
  padding-top:var(--nav-h);position:relative;overflow:hidden;background:var(--ink);
}
.about-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 80% 30%,rgba(64,102,255,.07) 0%,transparent 65%),radial-gradient(ellipse 40% 40% at 10% 80%,rgba(64,102,255,.04) 0%,transparent 60%);pointer-events:none}
.about-hero__rule{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--volt) 40%,var(--volt2) 60%,transparent);opacity:.35}
.about-hero::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");background-size:180px;pointer-events:none;opacity:.6}
.about-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,8rem);align-items:center;padding-block:clamp(5rem,9vw,9rem)}
.about-hero__l{}
.about-hero__breadcrumb{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--chalk4);margin-bottom:clamp(2rem,4vw,3rem);opacity:0}
.about-hero__breadcrumb a{color:var(--chalk4);transition:color .18s}
.about-hero__breadcrumb a:hover{color:var(--chalk3)}
.about-hero__breadcrumb-sep{color:var(--chalk4);opacity:.4}
.about-hero__h1{font-family:var(--ff-display);font-size:clamp(2.8rem,6vw,7rem);font-weight:700;letter-spacing:-.055em;line-height:.95;color:var(--chalk);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.about-hero__h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.about-hero__h1 .word{display:inline-block}
.about-hero__h1 em{font-style:italic;font-weight:400;color:var(--chalk3)}
.about-hero__sub{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--chalk3);line-height:1.78;max-width:44ch;margin-bottom:clamp(2rem,4vw,3rem);opacity:0}
.about-hero__ctas{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;opacity:0}
/* Right — studio image */
.about-hero__r{position:relative;opacity:0}
.about-hero__img-frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line2);
  box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05),0 0 80px rgba(64,102,255,.08);
  aspect-ratio:3/4;
}
.about-hero__img-frame img{width:100%;height:100%;filter:brightness(.7) saturate(.8)}
.about-hero__img-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(6,6,8,.85) 100%)}
.about-hero__img-caption{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:clamp(1.5rem,3vw,2.5rem)}
.ahic-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:6px;font-family:var(--ff-body)}
.ahic-text{font-family:var(--ff-display);font-size:clamp(1rem,1.8vw,1.4rem);font-weight:700;letter-spacing:-.02em;color:#fff}
/* Floating pip on image */
.about-pip{
  position:absolute;top:-18px;left:-24px;
  display:flex;align-items:center;gap:8px;
  padding:10px 15px;
  background:rgba(9,10,13,.95);backdrop-filter:blur(20px);
  border:1px solid var(--line2);border-radius:var(--r-md);
  font-size:11.5px;font-weight:600;color:var(--chalk);
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  animation:float-ab 4s ease-in-out infinite;
  will-change:transform;
}
@keyframes float-ab{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.apip-icon{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--volt-dim);color:var(--volt)}
.apip-icon svg{width:9px;height:9px}
/* ═══════════════════════════════════════════════════
   MANIFESTO — our beliefs, stated plainly
   DARK section
═══════════════════════════════════════════════════ */
.about-manifesto{background:var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(6rem,11vw,10rem);position:relative;overflow:hidden}
.about-manifesto::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 15% 50%,rgba(64,102,255,.05) 0%,transparent 65%);pointer-events:none}
.am-inner{position:relative;z-index:1}
.am-label{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--volt);margin-bottom:clamp(2.5rem,5vw,4rem);display:flex;align-items:center;gap:10px;font-family:var(--ff-body)}
.am-label::before{content:'';display:block;width:22px;height:1px;background:var(--volt);opacity:.7}
/* Big centred statement */
.am-statement{
  font-family:var(--ff-display);
  font-size:clamp(1.5rem,3.5vw,3.2rem);
  font-weight:700;letter-spacing:-.04em;
  line-height:1.2;color:var(--chalk);
  max-width:900px;
  margin-bottom:clamp(4rem,7vw,6rem);
}
.am-statement em{font-style:italic;font-weight:400;color:var(--chalk3)}
.am-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
}
.am-pillar{
  padding:clamp(2rem,3.5vw,3rem);
  border-right:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:background .35s;
}
.am-pillar:last-child{border-right:none}
.am-pillar:hover{background:rgba(64,102,255,.03)}
.am-pillar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--volt),transparent);opacity:0;transition:opacity .35s}
.am-pillar:hover::before{opacity:1}
.am-pillar__num{font-family:var(--ff-mono);font-size:10px;color:var(--chalk4);margin-bottom:clamp(1.5rem,2.5vw,2rem);letter-spacing:.08em}
.am-pillar__title{font-family:var(--ff-display);font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.025em;margin-bottom:12px;color:var(--chalk)}
.am-pillar__p{font-size:13.5px;color:var(--chalk3);line-height:1.72}
/* ═══════════════════════════════════════════════════
   TEAM — LIGHT section
   Real faces. Real names. No stock photos.
═══════════════════════════════════════════════════ */
.about-team{background:var(--lt-bg);border-top:1px solid var(--lt-line)}
.about-team__head{max-width:640px;margin-bottom:clamp(4rem,7vw,6rem)}
.about-team__head .section-title{color:var(--lt-text)}
.about-team__head .section-sub{color:var(--lt-text2)}
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:clamp(4rem,7vw,6rem);
}
.team-card{
  background:var(--lt-bg4);border:1px solid var(--lt-line);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color .35s,transform .45s var(--ease-out),box-shadow .45s;
}
.team-card:hover{border-color:var(--lt-line2);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.1)}
.team-card__img{height:clamp(220px,28vw,320px);overflow:hidden;position:relative}
.team-card__img img{width:100%;height:100%;filter:grayscale(20%) brightness(.9);transition:filter .5s,transform .8s var(--ease-out)}
.team-card:hover .team-card__img img{filter:grayscale(0%) brightness(1);transform:scale(1.04)}
.team-card__meta{padding:clamp(1.2rem,2vw,1.6rem)}
.team-card__name{font-family:var(--ff-display);font-size:clamp(1.1rem,1.6vw,1.3rem);font-weight:700;letter-spacing:-.025em;color:var(--lt-text);margin-bottom:4px}
.team-card__role{font-size:12px;color:var(--lt-volt);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.team-card__bio{font-size:13px;color:var(--lt-text2);line-height:1.65;margin-bottom:14px}
.team-card__links{display:flex;gap:8px}
.team-link{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--lt-bg2);border:1px solid var(--lt-line);
  border-radius:var(--r-sm);color:var(--lt-text3);
  transition:color .2s,border-color .2s,background .2s;
}
.team-link:hover{color:var(--lt-text);border-color:var(--lt-line2);background:var(--lt-bg3)}
/* Studio stat grid on light */
.studio-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border:1px solid var(--lt-line);border-radius:var(--r-xl);overflow:hidden;
}
.ss-col{
  padding:clamp(1.5rem,2.5vw,2.5rem);
  border-right:1px solid var(--lt-line);
  transition:background .3s;position:relative;overflow:hidden;
}
.ss-col:last-child{border-right:none}
.ss-col:hover{background:rgba(51,88,240,.03)}
.ss-col::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--lt-volt),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.ss-col:hover::after{transform:scaleX(1)}
.ss-n{font-family:var(--ff-display);font-size:clamp(2rem,4vw,3.5rem);font-weight:700;letter-spacing:-.05em;color:var(--lt-text);line-height:1;margin-bottom:8px;display:block}
.ss-label{font-size:12.5px;color:var(--lt-text3);line-height:1.5}
/* ═══════════════════════════════════════════════════
   HOW WE THINK — DARK section
   Our process philosophy
═══════════════════════════════════════════════════ */
.how-we-think{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(6rem,11vw,10rem)}
.hwt-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4rem,8vw,11rem);align-items:start}
.hwt-l{position:sticky;top:calc(var(--nav-h) + 3rem)}
.hwt-l .section-sub{margin-bottom:clamp(2rem,3.5vw,3rem)}
/* Large quote */
.hwt-quote{
  padding:clamp(1.5rem,2.5vw,2.5rem);
  background:var(--ink2);border:1px solid var(--line);border-radius:var(--r-xl);
  border-left:3px solid var(--volt);
  position:relative;
}
.hwt-quote__text{font-family:var(--ff-display);font-size:clamp(1rem,1.6vw,1.3rem);font-weight:400;font-style:italic;color:var(--chalk3);line-height:1.6;letter-spacing:-.015em}
.hwt-r{}
.value-list{display:flex;flex-direction:column;gap:0}
.value-row{
  display:flex;align-items:flex-start;gap:1.25rem;
  padding-block:clamp(1.5rem,2.5vw,2.2rem);
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.value-row:first-child{padding-top:0}
.value-row:last-child{border-bottom:none}
.value-row:hover{background:linear-gradient(90deg,rgba(64,102,255,.025),transparent)}
.value-row__n{font-family:var(--ff-mono);font-size:10px;color:var(--chalk4);flex-shrink:0;padding-top:4px;width:18px}
.value-row__title{font-family:var(--ff-display);font-size:clamp(1rem,1.5vw,1.25rem);font-weight:700;letter-spacing:-.02em;color:var(--chalk);margin-bottom:6px}
.value-row__p{font-size:13px;color:var(--chalk3);line-height:1.7}
/* ═══════════════════════════════════════════════════
   CLIENTS — LIGHT section
   Logos / names in a simple, confident grid
═══════════════════════════════════════════════════ */
.clients{background:var(--lt-bg);border-top:1px solid var(--lt-line)}
.clients__head{text-align:center;margin-bottom:clamp(3rem,5vw,4.5rem)}
.clients__head .eyebrow{justify-content:center}
.clients__head .section-title{color:var(--lt-text)}
.clients-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border:1px solid var(--lt-line);border-radius:var(--r-xl);overflow:hidden;
  margin-bottom:clamp(4rem,7vw,5.5rem);
}
.client-cell{
  padding:clamp(1.5rem,3vw,2.5rem);
  border-right:1px solid var(--lt-line);
  border-bottom:1px solid var(--lt-line);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s;
  position:relative;
}
.client-cell:last-child,.client-cell:nth-child(4n){border-right:none}
.client-cell:nth-last-child(-n+4){border-bottom:none}
.client-cell:hover{background:var(--lt-bg2)}
.client-name{
  font-family:var(--ff-display);
  font-size:clamp(.9rem,1.4vw,1.1rem);
  font-weight:700;letter-spacing:-.02em;
  color:var(--lt-text3);text-align:center;
  transition:color .2s;
}
.client-cell:hover .client-name{color:var(--lt-text)}
.client-sector{font-size:10px;color:var(--lt-text4);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;text-align:center}
/* ═══════════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════════ */
.about-cta{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(6rem,11vw,10rem);text-align:center;position:relative;overflow:hidden}
.about-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 50% 50%,rgba(64,102,255,.07) 0%,transparent 65%);pointer-events:none}
.about-cta::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,var(--volt) 50%,transparent 90%);opacity:.3}
.about-cta__inner{position:relative;z-index:1;max-width:760px;margin-inline:auto}
.cta-scarcity{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;background:rgba(184,150,90,.08);border:1px solid rgba(184,150,90,.2);border-radius:var(--r-f);font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.05em;margin-bottom:2rem}
.cta-scarcity__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:ping-gold 2s ease-in-out infinite}
.about-cta__h{font-family:var(--ff-display);font-size:clamp(2.5rem,5.5vw,5rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--chalk);margin-bottom:1.25rem}
.about-cta__p{font-size:clamp(.9rem,1.1vw,1.05rem);color:var(--chalk3);line-height:1.75;max-width:48ch;margin-inline:auto;margin-bottom:2.5rem}
.about-cta__actions{display:flex;align-items:center;justify-content:center;gap:1.25rem;flex-wrap:wrap;margin-bottom:1.25rem}
.about-cta__note{font-size:11.5px;color:var(--chalk4);display:flex;align-items:center;justify-content:center;gap:8px}
@media(max-width:480px){.clients-grid{grid-template-columns:1fr}.client-cell{border-right:none}.footer__nav{grid-template-columns:1fr}}