/* ==========================================================================
   REACHERS brand stylesheet
   Built to the rebrand moodboard: Electric Green, Deep Black, Sora + Inter,
   black & white photography with neon marker annotation.
   ========================================================================== */

*{box-sizing:border-box}

:root{
  /* core palette */
  --green:#C6FF00;
  --black:#0A0A0A;
  --charcoal:#1A1A1A;
  --graphite:#2E2E2E;
  --off:#F5F5F5;

  /* accents */
  --yellow:#FFF500;
  --pink:#FF2095;
  --blue:#00E5FF;

  /* type */
  --sora:'Sora',system-ui,sans-serif;
  --inter:'Inter',system-ui,sans-serif;
  --hand:'Caveat','Comic Sans MS',cursive;

  --gut:clamp(18px,4.6vw,72px);
  --maxw:1440px;
  --e:cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--off);
  font-family:var(--inter);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:var(--black)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   TYPE
   ========================================================================== */
.h1{font-family:var(--sora);font-weight:800;text-transform:uppercase;
  font-size:clamp(40px,8.4vw,124px);line-height:.92;letter-spacing:-.035em;margin:0}
.h2{font-family:var(--sora);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,5.2vw,74px);line-height:.96;letter-spacing:-.03em;margin:0}
.h3{font-family:var(--sora);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.8vw,40px);line-height:1;letter-spacing:-.025em;margin:0}
.h4{font-family:var(--sora);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.5vw,22px);line-height:1.12;letter-spacing:-.01em;margin:0}
.lede{font-size:clamp(15.5px,1.15vw,18px);line-height:1.6;margin:0;max-width:46ch;
  color:rgba(245,245,245,.74)}
.on-light .lede{color:rgba(10,10,10,.72)}

/* stacked micro label, e.g. CREATOR / MARKETING / FOR A / HUMAN / WORLD. */
.stack{font-family:var(--sora);font-weight:600;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.85;color:rgba(245,245,245,.6);margin:0}
.on-light .stack{color:rgba(10,10,10,.55)}

.eyebrow{font-family:var(--sora);font-weight:700;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(245,245,245,.55);margin:0}
.on-light .eyebrow{color:rgba(10,10,10,.5)}

.grn{color:var(--green)}

/* highlighter, as used on OPPORTUNITY in the moodboard */
.mark{position:relative;color:var(--black);padding:0 .1em;
  background:var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* handwritten marker annotation */
.hand{font-family:var(--hand);font-weight:700;color:var(--green);
  font-size:clamp(22px,2.6vw,38px);line-height:1.02;transform:rotate(-7deg);
  display:inline-block;letter-spacing:.01em}
.hand.sm{font-size:clamp(17px,1.7vw,24px)}
.hand.dark{color:var(--black)}

/* ==========================================================================
   SCRIBBLES: hand-drawn marks laid over photography
   ========================================================================== */
.scrib{position:absolute;pointer-events:none;color:var(--green);z-index:3}
/* the marks are <use> references, and <use> builds a shadow tree that outside
   descendant selectors cannot reach. so the paint has to be set here on <svg>
   and inherited inwards: fill/stroke/stroke-width/dash are all inherited. */
.scrib svg{
  width:100%;height:100%;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
}
[data-r].on .scrib svg,.scrib.draw svg{animation:draw .9s var(--e) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--sora);font-weight:700;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  padding:16px 28px;border-radius:100px;border:1.5px solid transparent;
  background:var(--green);color:var(--black);
  transition:transform .2s var(--e),background .2s,color .2s,border-color .2s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:2.2;fill:none}
/* A label made of two text runs becomes two flex items, so the gap meant for
   the arrow opened up mid-label as well and "Join our platform" read as two
   separate words. Wrapping the words in one span leaves a single gap, before
   the arrow. The negative margin takes back the sliver of letter-spacing
   trailing the last capital, so the label sits optically centred. */
.btnl{display:inline-block;margin-right:-.09em}
.btn.ghost{background:transparent;color:var(--off);border-color:rgba(245,245,245,.3)}
.btn.ghost:hover{border-color:var(--green);color:var(--green)}
.on-light .btn.ghost{color:var(--black);border-color:rgba(10,10,10,.3)}
.on-light .btn.ghost:hover{border-color:var(--black)}
.btn.dark{background:var(--black);color:var(--green)}
.btn.sm{padding:11px 20px;font-size:11.5px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   HEADER
   ========================================================================== */
.nav{position:sticky;top:0;z-index:80;background:rgba(10,10,10,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(245,245,245,.08)}
.navin{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:78px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.logo{height:21px;width:auto}
.navlinks{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.navlinks a:not(.btn){font-family:var(--sora);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,245,.72);
  transition:color .2s}
.navlinks a:not(.btn):hover{color:var(--green)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--off);
  position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;
  width:22px;height:2px;background:var(--off);transition:transform .25s var(--e)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
/* Below the burger breakpoint, hide the text links but keep the primary action
   on screen. Hiding the whole bar took the only header CTA away from every
   phone visitor and buried it one tap deep inside the menu. */
@media(max-width:920px){
  .navlinks a:not(.btn){display:none}
  .navlinks{gap:0}
  .burger{display:grid}
}
/* The wordmark is a wide lockup: at its 21px desktop height it measures about
   231px, which is most of a phone screen and leaves no room for the CTA beside
   it. Scale it by width on small screens so logo + CTA + burger fit one line
   down to 320px. */
@media(max-width:560px){
  .navin .logo,.menutop .logo{height:auto;width:clamp(128px,38vw,170px)}
}
/* narrow phones: shorten the label and drop the arrow */
@media(max-width:430px){
  .navlinks .btn.sm{padding:10px 15px;font-size:11px;gap:0}
  .navlinks .btn.sm svg{display:none}
  .ctamore{display:none}
  /* with no arrow to sit against, the tracking trim would pull the label a
     pixel off centre, so give it back */
  .navlinks .btn.sm .btnl{margin-right:0}
}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:90;background:var(--charcoal);
  display:grid;grid-template-rows:auto 1fr auto;padding:0;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.menu.open{opacity:1;visibility:visible}
.menutop{display:flex;align-items:center;justify-content:space-between;
  height:78px;padding:0 var(--gut);border-bottom:1px solid rgba(245,245,245,.1)}
.menux{width:44px;height:44px;border:0;background:transparent;color:var(--off);
  cursor:pointer;font-size:26px;line-height:1;display:grid;place-items:center}
.menulinks{display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 var(--gut)}
.menulinks a{font-family:var(--sora);font-weight:700;font-size:clamp(26px,7vw,42px);
  text-transform:uppercase;letter-spacing:-.02em;padding:9px 0;
  border-bottom:1px solid rgba(245,245,245,.08);transition:color .2s,padding-left .2s}
.menulinks a:hover{color:var(--green);padding-left:10px}
.menufoot{padding:24px var(--gut) 34px;display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;border-top:1px solid rgba(245,245,245,.1)}
.social{display:flex;gap:14px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(245,245,245,.2);
  display:grid;place-items:center;transition:border-color .2s,background .2s}
.social a:hover{border-color:var(--green);background:var(--green);color:var(--black)}
.social svg{width:17px;height:17px;fill:currentColor}

/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */
.sect{padding:clamp(56px,7.4vw,130px) 0;position:relative}
.sect-tight{padding:clamp(40px,5vw,84px) 0}
.on-light{background:var(--off);color:var(--black)}
.on-green{background:var(--green);color:var(--black)}
.on-char{background:var(--charcoal)}

/* ==========================================================================
   MEDIA: black & white treatment with neon on top
   ========================================================================== */
.bw{position:relative;overflow:hidden;background:var(--graphite)}
.bw video,.bw img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.95);
  transition:filter .6s var(--e),transform .8s var(--e)}
 /* stills are already monochrome, so hover lifts contrast and scale rather
    than revealing colour that isn't there */
.bw:hover video,.bw:hover img{filter:grayscale(1) contrast(1.16) brightness(1);transform:scale(1.03)}
.bw.keep video,.bw.keep img{filter:grayscale(1) contrast(1.08)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;padding:clamp(34px,4.4vw,64px) 0 0}
.herogrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.6vw,64px);
  align-items:center}
@media(max-width:980px){.herogrid{grid-template-columns:1fr;gap:30px}}
.herostack{display:flex;gap:26px;align-items:flex-start}
.heroh{margin-top:clamp(20px,2.2vw,30px)}
.herolede{margin-top:clamp(18px,2vw,26px)}
.herobtns{margin-top:clamp(24px,2.8vw,36px)}

.heromedia{position:relative}
.heromedia .bw{aspect-ratio:4/5;border-radius:3px}
@media(max-width:980px){.heromedia .bw{aspect-ratio:1/1}}
/* crown scribble above the subject's head */
.heromedia .crown{top:-26px;left:14%;width:clamp(74px,8vw,124px);height:auto}
.heromedia .annot{position:absolute;right:-4px;bottom:34px;z-index:4;text-align:left}

/* trusted-by strip under the hero */
.trust{margin-top:clamp(34px,4vw,58px);padding:22px 0 0;
  border-top:1px solid rgba(245,245,245,.1);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap}
.trust em{font-style:normal;font-family:var(--sora);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,245,.5);flex:0 0 auto}
.trustnames{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);flex-wrap:wrap}
.trustnames span{font-family:var(--sora);font-weight:600;font-size:clamp(13px,1.15vw,16px);
  color:rgba(245,245,245,.62)}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.mq{overflow:hidden;background:var(--green);color:var(--black);
  padding:clamp(12px,1.5vw,20px) 0}
.mqrow{display:flex;width:max-content;animation:mqm 30s linear infinite}
.mq:hover .mqrow{animation-play-state:paused}
.mqset{display:flex;align-items:center;flex:0 0 auto}
.mqset b{font-family:var(--sora);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,3.2vw,44px);letter-spacing:-.025em;
  padding:0 clamp(12px,1.6vw,26px);white-space:nowrap}
.mqset i{width:clamp(16px,1.8vw,26px);height:clamp(16px,1.8vw,26px);flex:0 0 auto}
.mqset i svg{width:100%;height:100%;fill:none;stroke:var(--black);stroke-width:8;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes mqm{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   SPLIT: for brands and for creators
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:920px){.split{grid-template-columns:1fr}}
.splitcell{padding:clamp(30px,3.6vw,60px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,2.4vw,34px);align-items:center}
@media(max-width:1180px){.splitcell{grid-template-columns:1fr;gap:26px}}
.splitcell .h2{font-size:clamp(26px,3.3vw,46px)}
.splitcell .lede{margin-top:16px;max-width:38ch}
.splitcell .btnrow{margin-top:26px}
.splitcell .annot{margin-top:18px}

/* phone frame */
.phone{width:clamp(150px,15vw,208px);aspect-ratio:9/19;border-radius:26px;
  border:5px solid var(--black);overflow:hidden;position:relative;
  box-shadow:0 26px 60px rgba(0,0,0,.4);background:var(--graphite);flex:0 0 auto}
.on-light .phone{border-color:var(--black)}
.phone video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.phone .scrib{z-index:4}
.phonewrap{position:relative;justify-self:center}
.phonewrap .annot{position:absolute;left:-18px;bottom:26px;z-index:5}
@media(max-width:1180px){.phonewrap{justify-self:start}}

/* ==========================================================================
   STATS
   ========================================================================== */
.statsgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:0}
@media(max-width:920px){.statsgrid{grid-template-columns:1fr}}
.statsblock{background:var(--green);color:var(--black);
  padding:clamp(28px,3.4vw,54px);display:grid;align-content:center;gap:clamp(16px,2vw,28px)}
.stat b{display:block;font-family:var(--sora);font-weight:800;
  font-size:clamp(34px,4.4vw,66px);line-height:.88;letter-spacing:-.04em}
.stat span{display:block;font-family:var(--sora);font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;margin-top:7px;color:rgba(10,10,10,.68)}
.statsphoto{position:relative;min-height:320px}
.statsphoto .bw{position:absolute;inset:0}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svcgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start}
@media(max-width:920px){.svcgrid{grid-template-columns:1fr;gap:30px}}
.svclist{margin:clamp(26px,3vw,40px) 0 0;padding:0;list-style:none;
  border-top:1px solid rgba(245,245,245,.14)}
.svclist li{display:flex;align-items:baseline;gap:18px;padding:clamp(15px,1.7vw,22px) 0;
  border-bottom:1px solid rgba(245,245,245,.14);
  font-family:var(--sora);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.6vw,22px);letter-spacing:-.005em;
  transition:padding-left .3s var(--e),color .2s}
.svclist li:hover{padding-left:12px;color:var(--green)}
.svclist li s{text-decoration:none;font-size:11px;letter-spacing:.14em;
  color:var(--green);font-weight:700;flex:0 0 auto;width:26px}
.svcmedia{position:relative}
.svcmedia .bw{aspect-ratio:3/4;border-radius:3px}

/* ==========================================================================
   WORK WALL
   ========================================================================== */
.wallhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(26px,3.2vw,46px)}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
@media(max-width:900px){.wall{grid-template-columns:repeat(2,1fr)}}
.wcell{position:relative}
.wcell .bw{aspect-ratio:9/16;border-radius:3px}
.wcell:nth-child(even){margin-top:clamp(14px,2.4vw,40px)}
.wmeta{margin-top:12px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.wmeta b{font-family:var(--sora);font-weight:700;font-size:13.5px;text-transform:uppercase;
  letter-spacing:-.005em}
.wmeta span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,245,245,.5)}

/* ==========================================================================
   ABOUT / CULTURE
   ========================================================================== */
.cultgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px);align-items:center}
@media(max-width:920px){.cultgrid{grid-template-columns:1fr;gap:30px}}
.cultmedia{position:relative}
.cultmedia .bw{aspect-ratio:4/3;border-radius:3px}
.pillars{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.8vw,34px)}
.pillars span{font-family:var(--sora);font-weight:700;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 15px;border-radius:100px;
  border:1px solid rgba(245,245,245,.22);color:rgba(245,245,245,.75)}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{background:var(--green);color:var(--black);text-align:center;
  padding:clamp(56px,7.4vw,130px) 0;position:relative;overflow:hidden}
.ctahand{font-family:var(--hand);font-weight:700;color:var(--black);
  font-size:clamp(44px,9.4vw,140px);line-height:.94;transform:rotate(-3deg);
  display:block;margin:0 auto}
.cta .lede{margin:clamp(22px,2.4vw,32px) auto 0;color:rgba(10,10,10,.72);text-align:center}
.cta .btnrow{justify-content:center;margin-top:clamp(26px,3vw,38px)}
.ctafine{margin-top:20px;font-family:var(--sora);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.55)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--black);padding:clamp(40px,4.6vw,70px) 0 34px;
  border-top:1px solid rgba(245,245,245,.1)}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(22px,3vw,44px)}
@media(max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr}}
.footcol h5{font-family:var(--sora);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,245,245,.45);margin:0 0 16px}
.footcol a,.footcol p{display:block;font-size:14px;color:rgba(245,245,245,.72);
  margin:0 0 10px;transition:color .2s}
.footcol a:hover{color:var(--green)}
.footbot{margin-top:clamp(30px,3.4vw,48px);padding-top:20px;
  border-top:1px solid rgba(245,245,245,.1);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(245,245,245,.45)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
[data-r]{opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--e),transform .75s var(--e)}
[data-r].on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  [data-r]{opacity:1;transform:none;transition:none}
  .mqrow{animation:none}
  .scrib svg{stroke-dashoffset:0;animation:none}
  .bw video,.bw img{transition:none}
  .btn:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   UX LAYER
   Accessibility, jump-link behaviour, and the interactive components that
   the first build stubbed out.
   ========================================================================== */

/* ---------- jump links must clear the sticky header ---------- */
:root{--navh:78px}
[id]{scroll-margin-top:calc(var(--navh) + 18px)}

/* ---------- visible keyboard focus, everywhere ---------- */
:where(a,button,[tabindex],summary,input,textarea):focus-visible{
  outline:3px solid var(--green);outline-offset:3px;border-radius:4px;
}
.on-green :where(a,button):focus-visible,
.on-light :where(a,button):focus-visible{outline-color:var(--black)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--green);color:var(--black);
  font-family:var(--sora);font-weight:700;font-size:13px;
  padding:12px 20px;border-radius:0 0 10px 10px;
  transition:top .2s var(--e);
}
.skip:focus{top:0}

/* ---------- scroll progress ---------- */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;
  background:transparent;pointer-events:none}
/* scaleX rather than width: this updates on every scroll frame, and width
   forces a layout pass each time where a transform stays on the compositor */
.prog i{display:block;height:100%;width:100%;background:var(--green);
  transform:scaleX(0);transform-origin:left}

/* ---------- hero scroll cue ---------- */
.cue{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,3vw,40px);
  font-family:var(--sora);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,245,245,.45)}
.cue s{text-decoration:none;display:block;width:1px;height:34px;
  background:linear-gradient(var(--green),transparent);animation:cuedrop 2s var(--e) infinite}
@keyframes cuedrop{0%{opacity:0;transform:scaleY(.3)}40%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ---------- case study cards: real hover detail ---------- */
.wcell{cursor:default}
.wcell .bw{position:relative}
.wdetail{
  position:absolute;inset:auto 0 0 0;z-index:4;
  padding:18px 16px 16px;
  background:linear-gradient(transparent,rgba(10,10,10,.92) 42%);
  transform:translateY(12px);opacity:0;
  transition:opacity .35s var(--e),transform .35s var(--e);
}
.wcell:hover .wdetail,.wcell:focus-within .wdetail{opacity:1;transform:none}
.wdetail ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.wdetail li{font-size:11.5px;line-height:1.35;color:rgba(245,245,245,.82);
  padding-left:14px;position:relative}
.wdetail li::before{content:'';position:absolute;left:0;top:7px;
  width:6px;height:1.5px;background:var(--green)}
@media(hover:none){
  .wdetail{opacity:1;transform:none;
    background:linear-gradient(transparent,rgba(10,10,10,.94) 48%)}
}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:clamp(30px,4vw,54px) auto 0;
  border-top:1px solid rgba(245,245,245,.14)}
.faqi{border-bottom:1px solid rgba(245,245,245,.14)}
.faqq{
  width:100%;background:none;border:0;cursor:pointer;color:var(--off);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2vw,26px) 0;text-align:left;
  font-family:var(--sora);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,19px);letter-spacing:-.005em;
  transition:color .2s;
}
.faqq:hover{color:var(--green)}
.faqq s{text-decoration:none;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(245,245,245,.28);display:grid;place-items:center;
  transition:transform .3s var(--e),border-color .2s,background .2s}
.faqq s svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
.faqq[aria-expanded="true"] s{transform:rotate(45deg);background:var(--green);
  border-color:var(--green);color:var(--black)}
.faqa{overflow:hidden;height:0;transition:height .34s var(--e)}
.faqa p{margin:0 0 clamp(18px,2vw,26px);max-width:68ch;font-size:15px;
  line-height:1.62;color:rgba(245,245,245,.72)}

/* ---------- trusted-by ---------- */
/* these are plain names, not links, so they get no hover state: a colour or
   underline change here reads as clickable and leads nowhere */
.trustnames span{padding:7px 0}

@media(prefers-reduced-motion:reduce){
  .cue s{animation:none}
  .faqa{transition:none}
  .wdetail{transition:none}
}

/* ==========================================================================
   PARTNERS
   Mixed grid: brands we hold logo art for sit as marks, the rest as
   wordmarks. Uniform tiles keep the two kinds reading as one set.
   ========================================================================== */
/* The tiles are separated by gridlines showing through a 1px gap, so a part
   filled last row reads as empty boxes rather than as the end of the set.
   With 15 brands, 5 and 3 columns are the counts that always divide evenly:
   5 gives 3 rows, 3 gives 5 rows. 6, 4 and 2 all leave orphans, so they are
   deliberately not used. Revisit these numbers if the brand count changes. */
.plogos{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:rgba(245,245,245,.1);
  border:1px solid rgba(245,245,245,.1);
  margin-top:clamp(28px,3.4vw,46px);
}
@media(max-width:860px){.plogos{grid-template-columns:repeat(3,1fr)}}

.plogo{
  background:var(--black);aspect-ratio:16/9;
  display:grid;place-items:center;padding:clamp(12px,1.6vw,22px);
  position:relative;transition:background .25s var(--e);
}
.plogo:hover{background:var(--charcoal)}
.plogo img{
  max-width:86%;max-height:64%;width:auto;height:auto;object-fit:contain;
  opacity:.68;transition:opacity .25s var(--e),transform .3s var(--e);
}
.plogo:hover img{opacity:1;transform:scale(1.04)}
.plogo b{
  font-family:var(--sora);font-weight:700;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:-.01em;
  color:rgba(245,245,245,.68);text-align:center;line-height:1.2;
  transition:color .25s var(--e),transform .3s var(--e);
}
.plogo:hover b{color:var(--off);transform:scale(1.04)}
/* a hairline of brand green on hover, so the grid feels alive */
.plogo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e);
}
.plogo:hover::after{transform:scaleX(1)}

.pfoot{
  margin-top:clamp(20px,2.4vw,30px);
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;
}
.pfoot span{font-size:13.5px;color:rgba(245,245,245,.5)}

/* nav platform link, marked as leaving the site */
.plat{display:inline-flex;align-items:center;gap:6px}
.plat svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.plat:hover svg{opacity:1}

@media(prefers-reduced-motion:reduce){
  .plogo img,.plogo b,.plogo::after{transition:none}
  .plogo:hover img,.plogo:hover b{transform:none}
}

/* ==========================================================================
   HERO FILM  (Cut & Signal)
   Seven clips sequenced in the browser. The CDN blocks server-side download,
   so there is no single stitched mp4: each clip is its own <video>, parked on
   its in-point and revealed on cue. Only the current and next clip are ever
   allowed to buffer, so the hero does not drag the whole reel down on first
   paint, and playback stops entirely once the hero scrolls away.
   ========================================================================== */
.herofilm video,.herofilm img.hfposter{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.96);
}
.herofilm video{opacity:0;transition:none}
.herofilm video.live{opacity:1}
.herofilm img.hfposter{z-index:1;transition:opacity .45s var(--e)}
.herofilm.rolling img.hfposter{opacity:0}
.herofilm:hover video{transform:none}   /* the .bw zoom would fight the cuts */

/* one tick per shot, doubling as a quiet progress read */
.hfticks{position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;gap:3px;padding:10px}
.hfticks i{flex:1;height:2px;background:rgba(245,245,245,.22);overflow:hidden}
.hfticks i b{display:block;height:100%;width:0;background:var(--green)}
.hfticks i.done b{width:100%}

/* --- acid green interventions --- */
/* a light leak at the frame edge, never a wash over the subject: the people
   stay black and white, the colour only ever touches the border */
.hfflash{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,
    transparent 52%, rgba(198,255,0,.30) 88%, rgba(198,255,0,.62) 100%)}
.hfflash.hit{animation:hfflash .14s ease-out 1}
@keyframes hfflash{0%{opacity:1}100%{opacity:0}}

.hfbar{position:absolute;left:0;right:0;height:3px;z-index:4;top:0;
  background:var(--green);opacity:.85;pointer-events:none;
  animation:hfbar 2.4s linear infinite}
@keyframes hfbar{0%{top:-2%}100%{top:102%}}

.hfcorner{position:absolute;z-index:4;width:26px;height:26px;
  border:2px solid var(--green);pointer-events:none;opacity:.8}
.hfcorner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.hfcorner.br{bottom:34px;right:12px;border-left:0;border-top:0}

@media(prefers-reduced-motion:reduce){
  .herofilm video{display:none}
  .herofilm img.hfposter{opacity:1!important}
  .hfbar,.hfflash,.hfticks{display:none}
}

/* ==========================================================================
   INNER PAGES
   Components shared by For Brands and For Creators. Kept here rather than in
   per-page <style> blocks so the two pages cannot drift apart visually.
   ========================================================================== */

/* breadcrumb under the sticky header */
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--sora);font-weight:600;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,245,245,.42);padding-top:clamp(20px,2.4vw,34px)}
.crumb a:hover{color:var(--green)}
.crumb s{text-decoration:none;color:rgba(245,245,245,.28)}

/* inner hero: shorter than the homepage, media on the right */
.phero{padding:clamp(18px,2.4vw,34px) 0 clamp(46px,5.6vw,92px)}
.pherogrid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(26px,4vw,72px);
  align-items:center}
@media(max-width:980px){.pherogrid{grid-template-columns:1fr;gap:30px}}
.pheromedia{position:relative}
.pheromedia .bw{aspect-ratio:4/5;border-radius:3px}
@media(max-width:980px){.pheromedia .bw{aspect-ratio:4/3}}

/* comparison table: the honest three-way column read */
.cmp{margin-top:clamp(30px,3.6vw,52px);border-top:1px solid rgba(245,245,245,.16)}
.cmprow{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.05fr;gap:clamp(12px,1.8vw,28px);
  padding:clamp(15px,1.8vw,22px) 0;border-bottom:1px solid rgba(245,245,245,.12);
  align-items:start}
.cmprow.head{border-bottom-color:rgba(245,245,245,.26)}
.cmprow.head b{font-family:var(--sora);font-weight:700;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(245,245,245,.5)}
.cmprow.head b.us{color:var(--green)}
.cmpq{font-family:var(--sora);font-weight:700;font-size:clamp(13px,1.3vw,16px);
  text-transform:uppercase;letter-spacing:-.005em;color:var(--off)}
.cmprow p{margin:0;font-size:14px;line-height:1.5;color:rgba(245,245,245,.6)}
.cmprow p.us{color:var(--off)}
@media(max-width:860px){
  /* the four-column read collapses to stacked labelled rows on phones */
  .cmprow,.cmprow.head{grid-template-columns:1fr;gap:6px}
  .cmprow.head{display:none}
  .cmprow p::before{content:attr(data-l);display:block;font-family:var(--sora);
    font-weight:700;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(245,245,245,.38);margin-bottom:2px}
  .cmprow p{padding-top:8px}
  .cmpq{margin-bottom:4px}
}
.cmpnote{margin-top:18px;font-size:13px;line-height:1.55;color:rgba(245,245,245,.45);
  max-width:72ch}

/* numbered pipeline steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:rgba(245,245,245,.12);border:1px solid rgba(245,245,245,.12);
  margin-top:clamp(30px,3.6vw,52px)}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--black);padding:clamp(20px,2.2vw,30px)}
.on-char .step{background:var(--charcoal)}
.step s{text-decoration:none;display:block;font-family:var(--sora);font-weight:800;
  font-size:clamp(26px,3vw,42px);line-height:1;color:var(--green);letter-spacing:-.04em}
.step b{display:block;margin-top:14px;font-family:var(--sora);font-weight:700;
  font-size:clamp(14px,1.4vw,17px);text-transform:uppercase;letter-spacing:-.005em}
.step p{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:rgba(245,245,245,.6)}

/* channel / capability tiles */
.chan{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(245,245,245,.12);border:1px solid rgba(245,245,245,.12);
  margin-top:clamp(28px,3.4vw,46px)}
@media(max-width:860px){.chan{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.chan{grid-template-columns:1fr}}
.chanx{background:var(--black);padding:clamp(20px,2.2vw,28px)}
.on-char .chanx{background:var(--charcoal)}
.chanx b{display:block;font-family:var(--sora);font-weight:700;
  font-size:clamp(15px,1.5vw,19px);text-transform:uppercase;letter-spacing:-.01em}
.chanx p{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:rgba(245,245,245,.6)}

/* engagement model cards */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(30px,3.6vw,52px)}
@media(max-width:980px){.models{grid-template-columns:1fr}}
.model{border:1px solid rgba(245,245,245,.16);padding:clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column;gap:16px;transition:border-color .25s}
.model:hover{border-color:rgba(198,255,0,.5)}
.model .eyebrow{color:var(--green)}
.model h3{font-family:var(--sora);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,1.9vw,25px);line-height:1.05;letter-spacing:-.025em;margin:0}
.model>p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(245,245,245,.68)}
.model dl{margin:0;display:grid;gap:11px;padding-top:4px;
  border-top:1px solid rgba(245,245,245,.12)}
.model dt{font-family:var(--sora);font-weight:700;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,245,245,.42);margin-top:7px}
.model dd{margin:3px 0 0;font-size:14px;line-height:1.5;color:rgba(245,245,245,.78)}
.model .btn{margin-top:auto;align-self:flex-start}

/* two-column promise list, used on the creator agreement section */
.pact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,54px);
  margin-top:clamp(30px,3.6vw,52px)}
@media(max-width:860px){.pact{grid-template-columns:1fr;gap:34px}}
.pact h4{font-family:var(--sora);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,245,245,.5);margin:0 0 18px}
.pact ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.pact li{font-size:14.5px;line-height:1.55;color:rgba(245,245,245,.72);
  padding-left:22px;position:relative}
.pact li::before{content:'';position:absolute;left:0;top:9px;width:11px;height:1.5px;
  background:var(--green)}
.pact .no li::before{background:rgba(245,245,245,.3)}
.pact strong{color:var(--off);font-weight:600}

/* ==========================================================================
   ART DIRECTION LAYER
   Treatment only: contact sheet, frame tags, a little scroll parallax. No
   layout, type or colour changes. Everything here sits on top of components
   that already exist, so removing this block leaves the site intact.
   ========================================================================== */

/* ---------- contact sheet ----------
   One frame at rest. Hovering runs the other frames like someone thumbing
   through a proof sheet. The frames stack in the same box, so nothing moves. */
.sheet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .2s linear}
.sheet img.on{opacity:1}
/* the green only ever touches the frame edge, never the photograph */
.sheet::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  border:2px solid transparent;transition:border-color .25s var(--e)}
.sheet:hover::after{border-color:var(--green)}
.sheetn{position:absolute;left:14px;bottom:13px;z-index:5;pointer-events:none;
  display:flex;align-items:center;gap:7px;
  font-family:var(--sora);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  color:var(--green);text-shadow:0 1px 8px rgba(10,10,10,.9)}
.sheetn::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ---------- frame index tag, as pencilled on a contact sheet ---------- */
.mtag{position:absolute;top:10px;left:10px;z-index:5;pointer-events:none;
  font-family:var(--sora);font-weight:700;font-size:10px;letter-spacing:.18em;
  color:var(--green);background:rgba(10,10,10,.5);padding:4px 8px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---------- a few millimetres of parallax ----------
   Carried by a handful of stills only. The image is cut oversize so it can
   move inside its frame without ever showing an edge, and the transform is
   driven by a custom property so the existing hover scale still works. */
.bw.par img{position:absolute;top:-6%;left:0;width:100%;height:112%;
  transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));
  transition:filter .6s var(--e),transform .45s var(--e)}
.bw.par:hover img{--ps:1.03}

@media(prefers-reduced-motion:reduce){
  .bw.par img{transform:none;transition:none}
  .sheet img{transition:none}
  .sheet::after{transition:none}
}

/* plain capability list with a green rule, used for "what you get" */
.gets{margin:clamp(26px,3vw,40px) 0 0;padding:0;list-style:none;
  border-top:1px solid rgba(245,245,245,.14)}
.gets li{padding:clamp(13px,1.5vw,18px) 0;border-bottom:1px solid rgba(245,245,245,.14);
  font-size:15px;line-height:1.55;color:rgba(245,245,245,.72)}
.gets li strong{color:var(--off);font-family:var(--sora);font-weight:700;
  text-transform:uppercase;font-size:13.5px;letter-spacing:-.005em;
  display:block;margin-bottom:4px}