/* ==========================================================================
   CHALK — homepage-specific styles (loaded only on index.html)
   Depends on styles.css (tokens + components).
   ========================================================================== */

/* ---------- Film grain overlay ------------------------------------------ */
#grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.5;mix-blend-mode:overlay}

/* ---------- HERO (video-in-text) ---------------------------------------- */
/* Full-bleed autoplaying video behind a black multiply "knockout" layer:
   the video shows ONLY through the white "that Converts" glyphs, pure black
   everywhere else. The video parallax-scrolls, so the black "reveals" it. */
.hero{position:relative;background:var(--black);min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:9rem clamp(1.25rem,1.7vw,3.5rem) 5rem;isolation:isolate;overflow:hidden}
.hero__video{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;
  object-position:center 60%;z-index:0;will-change:transform}
.display-hero{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(3.1rem,11vw,10.5rem);line-height:.9;color:var(--ink);margin:0;letter-spacing:-.005em}
.display-hero em{font-family:var(--font-accent);font-style:italic;font-weight:400;text-transform:none;padding-right:.12em}
.hero__label{position:absolute;top:.4em;left:clamp(17rem,42vw,42rem);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:1.15;
  font-size:clamp(.8rem,1.05vw,1.05rem);letter-spacing:.01em;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* knockout layer — fills the whole hero, self-centred the same way so "that Converts" aligns */
.hero__knock{position:absolute;inset:0;z-index:1;background:var(--black);
  mix-blend-mode:multiply;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
  padding:9rem clamp(1.25rem,1.7vw,3.5rem) 5rem}
.hero__knock .display-hero{color:#000;-webkit-text-fill-color:#000}   /* ghost lines: invisible on black */
.hero__knock .hero__label{color:#000;-webkit-text-fill-color:#000}
.hero__knock .videotext,.hero__knock .videotext em{color:#fff;-webkit-text-fill-color:#fff}
/* visible lines on top; the video-fill line is transparent so the knockout shows through */
.hero__lines{position:relative;z-index:2}
.hero__lines .videotext,.hero__lines .videotext em{color:transparent;-webkit-text-fill-color:transparent}
.videotext{display:inline-block;line-height:.9;vertical-align:top;padding-right:.06em}
@media (max-width:767px){
  .hero__label{position:static;display:block;margin-bottom:1rem;left:auto;font-size:.9rem}
}
/* Hero reveal runs on load via CSS (never depends on JS/IO visibility) */
@keyframes heroRise{from{transform:translateY(110%)}to{transform:translateY(0)}}
.js .hero__lines .reveal-up>*{animation:heroRise .9s var(--ease-out) both}
.js .hero__lines .reveal-up:nth-of-type(2)>*{animation-delay:.09s}
.js .hero__lines .reveal-up:nth-of-type(3)>*{animation-delay:.18s}
@media (prefers-reduced-motion:reduce){.js .hero__lines .reveal-up>*{animation:none;transform:none}}

/* ---------- HERO PITCH (full-bleed video + CTA) ------------------------- */
.hero-pitch{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding:6rem clamp(1.25rem,4vw,3rem)}
.hero-pitch__video{position:absolute;inset:0;width:100%;height:110%;top:-5%;object-fit:cover;z-index:0;will-change:transform}
.hero-pitch::after{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,#0006 0%,#000a 100%)}
.hero-pitch__inner{position:relative;z-index:2;max-width:1000px;margin:0 auto}
.hero-pitch__title{color:#fff;font-size:clamp(2rem,5.2vw,4rem);line-height:1;margin-bottom:1.5rem}
.hero-pitch__title em{color:#fff}
.hero-pitch__sub{font-family:var(--font-ui);font-weight:500;color:var(--ink-90);
  font-size:clamp(.95rem,1.4vw,1.25rem);line-height:1.55;max-width:760px;margin:0 auto 2.5rem}

/* ---------- TRUSTED logo cloud ------------------------------------------ */
.trusted{background:var(--light-1);text-align:center;padding-block:clamp(3rem,6vw,5rem)}
.trusted__title{color:#000;font-size:clamp(2rem,3.5vw,3.25rem);margin-bottom:2.5rem}
.trusted__title em{color:#000}
.trusted__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.5rem,3vw,3em);
  align-items:center;justify-items:center;max-width:1100px;margin-inline:auto}
.trusted__grid img{max-width:min(14vw,150px);height:auto;filter:saturate(0);opacity:.8;transition:opacity .3s,filter .3s}
.trusted__grid img:hover{filter:saturate(1);opacity:1}
@media (max-width:767px){.trusted__grid{grid-template-columns:repeat(3,1fr)}.trusted__grid img{max-width:28vw}}
@media (max-width:420px){.trusted__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- WHAT WE DO --------------------------------------------------- */
.whatwedo{background:var(--black-raised);padding-block:clamp(4rem,8vw,8rem)}
.whatwedo__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:3rem}
.whatwedo__heading{font-size:clamp(2.2rem,5vw,3.4rem);line-height:.95;margin:0}
.whatwedo__lead{font-size:clamp(1rem,1.4vw,1.375rem);line-height:1.5;color:#d9d7d4;margin:0}
@media (max-width:767px){.whatwedo__intro{grid-template-columns:1fr;align-items:start}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.5rem 0;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(.75rem,1.1vw,1rem);text-align:center}
.stats span{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* each stat steps through the brand spectrum, matching the original */
.stats span:nth-child(1){background-image:linear-gradient(89deg,#b16cea,#ff5e69)}
.stats span:nth-child(2){background-image:linear-gradient(89deg,#ff5e69,#ff8a56)}
.stats span:nth-child(3){background-image:linear-gradient(89deg,#ff7256,#ffa84b)}
@media (max-width:640px){.stats{grid-template-columns:1fr;gap:.5rem}}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.75rem)}
@media (max-width:767px){.about-cards{grid-template-columns:1fr}}
.about-card{background:var(--surface-card);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.5rem);
  position:relative;overflow:hidden;transition:transform .4s var(--ease-out)}
.about-card__fill{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s var(--ease-out)}
.about-card:hover{transform:translateY(-4px)}
.about-card:hover .about-card__fill{opacity:.22}
.about-card > *{position:relative;z-index:1}
.about-card__emoji{font-size:2.25rem;margin-bottom:1rem;line-height:1}
.about-card__title{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:1.25rem}
.about-card__title em{color:#fff}
.about-card p{font-size:clamp(.9rem,1vw,1rem);line-height:1.53;color:var(--ink-60);margin-bottom:1rem}
.about-card .checks{margin-top:1.5rem}

/* ---------- BTS photo strip --------------------------------------------- */
.bts{background:var(--black);overflow:hidden;padding:0}
.bts__row{display:flex;gap:0;width:max-content;will-change:transform}
.bts__row img{width:min(33vw,420px);height:min(33vw,420px);object-fit:cover;flex:none}
@media (max-width:767px){.bts__row img{width:60vw;height:60vw}}

/* ---------- OUR RESULTS (case-study cards) — light section, white cards ---- */
.results{background:var(--light-4);padding-block:clamp(4rem,8vw,7rem)}
.results .section-mega{color:var(--ink-on-light)}
.results .section-mega em{color:var(--ink-on-light)}
.section-mega{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(3rem,11vw,11rem);line-height:.85;color:var(--ink);margin-bottom:clamp(2rem,5vw,4rem)}
.section-mega em{font-family:var(--font-accent);font-style:italic;font-weight:400;text-transform:none;color:var(--ink)}
.case{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,3rem);align-items:center;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);background:#fff;color:var(--ink-on-light);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.5vw,2rem);overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),color .45s var(--ease-out)}
.case::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink-on-light);
  opacity:0;transition:opacity .45s var(--ease-out)}
.case:hover{transform:translateY(-6px);box-shadow:0 24px 60px #00000026;color:#fff}
.case:hover::before{opacity:1}
.case:nth-child(even) .case__media{order:-1}
.case__title{font-size:clamp(2rem,4vw,3.25rem);margin-bottom:1.25rem;line-height:.95;color:inherit;transition:color .45s var(--ease-out)}
.case__facts{margin-bottom:1.25rem;font-size:clamp(.85rem,1vw,1rem);line-height:1.7;color:inherit;opacity:.85}
.case__facts b{color:inherit;opacity:1;font-weight:700}
.case__rule{height:1px;background:currentColor;opacity:.2;margin:1.25rem 0;max-width:220px}
.case .check{color:inherit}
.case__media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;background:var(--card-dark)}
.case__media video{width:100%;height:100%;object-fit:cover}
.case__media::after{content:'';position:absolute;inset:0;background:#0000;transition:background .3s;pointer-events:none}
.case:hover .case__media::after{background:#0000000d}
.case__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:2;
  width:64px;height:64px;border-radius:50%;background:#b16cea;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
.case__play::after{content:'';border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.case:hover .case__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.case__more{display:inline-block;margin-top:1.25rem;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;font-size:.9rem;letter-spacing:.02em;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (max-width:767px){.case{grid-template-columns:1fr}.case:nth-child(even) .case__media{order:0}}

/* ---------- MORE WORK grid + awards ------------------------------------ */
.morework{background:#fff;padding-block:clamp(4rem,8vw,7rem)}
.morework__head{display:grid;grid-template-columns:1fr auto;gap:2rem 3rem;align-items:center;margin-bottom:clamp(2rem,4vw,3.5rem)}
.morework__eyebrow{font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;margin-bottom:.5rem;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;display:inline-block}
.morework__title{color:var(--ink-on-light);font-size:clamp(2.5rem,6vw,5.5rem);line-height:.9;margin:0}
/* press + award logo rows */
.press-logos{display:flex;flex-direction:column;gap:1rem;align-items:flex-end}
.press-logos img{height:clamp(20px,2vw,30px);width:auto;filter:grayscale(1);opacity:.55}
.awards-row{margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.awards-row img{max-width:min(760px,92%);height:auto;margin-inline:auto;filter:grayscale(1);opacity:.6}
@media (max-width:767px){
  .morework__head{grid-template-columns:1fr}
  .press-logos{align-items:flex-start}
}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.5vw,1.25rem)}
@media (max-width:991px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.work-grid{grid-template-columns:1fr}}
.work-tile{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;
  background:var(--card-dark);cursor:pointer}
.work-tile video,.work-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.work-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(#0000 40%,#000000cc);pointer-events:none;transition:background .35s}
.work-tile:hover video,.work-tile:hover img{transform:scale(1.05)}
.work-tile:hover::after{background:linear-gradient(#0000 25%,#000000d9)}
.work-tile__label{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(.9rem,1.4vw,1.4rem);
  transform:translateY(0);transition:transform .35s var(--ease-out)}
.work-tile__label h3{color:#fff;font-size:clamp(1rem,1.4vw,1.3rem);margin:0;line-height:1}
.work-tile__label .cat{font-family:var(--font-accent);font-style:italic;text-transform:none;
  color:var(--ink);font-size:.9rem;margin-top:.2rem;display:block;opacity:0;transition:opacity .35s var(--ease-out)}
.work-tile:hover .work-tile__label .cat{opacity:1}
.work-tile__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);z-index:2;
  width:54px;height:54px;border-radius:50%;background:#b16cea;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
.work-tile__play::after{content:'';border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:3px}
.work-tile:hover .work-tile__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.work-see-more{text-align:center;margin-top:3rem;font-family:var(--font-accent);font-style:italic;
  color:var(--ink-on-light);opacity:.7;font-size:clamp(1.5rem,3vw,2.5rem)}
.work-see-more a:hover{color:var(--purple);opacity:1}

/* ---------- PROCESS timeline -------------------------------------------- */
.process{background:var(--black-raised);padding-block:clamp(4rem,8vw,8rem)}
.process__layout{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(2rem,5vw,5rem);margin-top:2rem}
@media (max-width:900px){.process__layout{grid-template-columns:1fr}}
.process__aside .eyebrow{margin-bottom:.75rem}
.process__aside h3{font-size:clamp(1.75rem,3vw,2.4rem);line-height:1;margin-bottom:1rem}
.process__aside .note{font-family:var(--font-accent);font-style:italic;color:var(--ink-60);margin-bottom:2rem}
.timeline{position:relative;padding-left:5.5rem}
/* track + progress bar run down the centre of the icon column; JS sets their exact
   top/height so they span from the FIRST icon centre to the LAST icon centre only */
.timeline__track{position:absolute;left:1.75rem;top:1.75rem;height:0;width:2px;margin-left:-1px;background:var(--hairline);z-index:0}
.timeline__bar{position:absolute;left:1.75rem;top:1.75rem;width:2px;margin-left:-1px;height:0;background:var(--purple-timeline);z-index:1}
.step{position:relative;margin-bottom:clamp(2rem,4vw,3.5rem)}
.step:last-child{margin-bottom:0}
/* icon is OUTSIDE the faded body, so it stays fully opaque and hides the line behind it */
.step__icon{position:absolute;left:-5.5rem;top:0;width:3.5rem;height:3.5rem;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;z-index:2;color:#111;box-shadow:0 0 0 6px var(--black-raised)}
.step__icon svg{width:1.5rem;height:1.5rem}
@media (max-width:479px){
  .timeline{padding-left:4.25rem}
  .step__icon{left:-4.25rem;width:2.75rem;height:2.75rem}
  .timeline__track,.timeline__bar{left:1.375rem}
}
.step__num{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.05em;color:var(--ink);opacity:.65;margin-bottom:.35rem}
.step__title{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;margin-bottom:1rem;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.step p{font-size:clamp(.9rem,1.05vw,1.05rem);line-height:1.55;color:var(--ink-60);margin-bottom:.5rem}

/* ---------- TESTIMONIALS ------------------------------------------------ */
.clients{background:var(--light-2);padding-block:clamp(4rem,8vw,7rem);position:relative}
.clients .section-mega{color:var(--ink-on-light)}
.clients .section-mega em{color:var(--ink-on-light)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem)}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.testi{background:var(--card-dark);border-radius:var(--r-card);padding:clamp(1.5rem,2.5vw,2.5rem);
  box-shadow:0 20px 40px #99999912;display:flex;flex-direction:column}
.testi__stars{display:flex;gap:.2rem;margin-bottom:1.25rem}
.testi__stars svg{width:1.1rem;height:1.1rem;fill:var(--star)}
.testi__quote{font-family:var(--font-ui);font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.6;color:var(--ink);margin-bottom:1.5rem;flex:1}
.testi__quote b{color:var(--purple);font-weight:600}
.testi__who{display:flex;align-items:center;gap:.85rem}
.testi__who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.testi__name{font-family:var(--font-ui);color:var(--ink);font-size:.95rem}
.testi__role{font-family:var(--font-ui);font-weight:700;color:#fff;font-size:.95rem}

/* ---------- SCALE CTA --------------------------------------------------- */
.scale-cta{background:var(--black-raised);text-align:center;padding-block:clamp(4rem,8vw,7rem)}
.scale-cta .tag-pill{margin-bottom:2rem}
.scale-cta h2{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;max-width:900px;margin:0 auto 1.25rem;color:#fff}
.scale-cta p{font-family:var(--font-ui);color:var(--ink-60);max-width:640px;margin:0 auto 2.5rem}

/* ---------- HIRING ------------------------------------------------------ */
.hiring{background:var(--purple-deep);color:#fff;padding-block:clamp(4rem,8vw,7rem)}
.hiring .eyebrow{-webkit-text-fill-color:#fff;color:#fff;background:none;opacity:.8}
.hiring__heading{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.5rem}
.hiring__lead{font-family:var(--font-ui);color:#ffffffcc;max-width:720px;margin-bottom:3rem;line-height:1.6}
.accordion{border-top:1px solid #ffffff33}
.accordion__item{border-bottom:1px solid #ffffff33}
.accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.4rem);color:#fff;text-align:left}
.accordion__icon{position:relative;width:24px;height:24px;flex:none}
.accordion__icon::before,.accordion__icon::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff}
.accordion__icon::before{width:20px;height:2px}
.accordion__icon::after{width:2px;height:20px;transition:transform .25s var(--ease-out)}
.accordion__item.is-open .accordion__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.accordion__panel{overflow:hidden;height:0}
.accordion__panel-inner{padding:0 0 1.75rem;font-family:var(--font-ui);color:#ffffffdd;line-height:1.6;max-width:680px}
.accordion__panel-inner a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- footer NAP layout ------------------------------------------- */
.footer__cta-heading em{color:#fff}