/* ============================================================
   NN/WORKS — How We Work (AI content service landing)
   Editorial black-on-white, Anton + Archivo.
   ============================================================ */
:root{
  --ink:#0a0a0a;
  --paper:#f6f5f2;
  --mute:rgba(10,10,10,.6);
  --line:rgba(10,10,10,.14);
  --ghost:rgba(10,10,10,.11);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--paper);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;}
::selection{background:var(--ink);color:var(--paper)}
.lenis.lenis-smooth{scroll-behavior:auto!important}

.wrap{ max-width:1680px; margin:0 auto; padding:0 36px; }

/* section reveal */
.rv{ opacity:0; transform:translateY(34px); }
.rv.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform 1s var(--ease); }

/* eyebrow label */
.eyebrow{
  display:flex; align-items:center; gap:11px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--ink); margin-bottom:34px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); }

.section-title{
  font-family:"Anton",sans-serif; font-weight:400;
  font-size:clamp(34px,4.4vw,74px); line-height:.92;
  letter-spacing:-.005em; text-transform:uppercase;
}

/* ---- primary button ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  padding:16px 26px; text-decoration:none; border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn.inv{ background:transparent; color:var(--ink); }
.btn.inv:hover{ background:var(--ink); color:var(--paper); }

/* ============================================================
   HERO
   ============================================================ */
.hw-hero{ padding:22vh 36px 3vh; max-width:1680px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(308px,33%); gap:clamp(32px,4vw,72px); align-items:center; }
.hw-hero-copy{ min-width:0; }
.hw-hero-media{ align-self:stretch; min-height:clamp(396px,57vh,704px); aspect-ratio:9/16; margin-left:auto; width:100%; background:#e7e6e2; overflow:hidden; }
.hw-hero-media media-slot{ display:block; width:100%; height:100%; }
.hw-hero h1{
  font-family:"Anton",sans-serif; font-weight:400;
  font-size:clamp(42px,6.6vw,78pt); line-height:.9;
  letter-spacing:-.01em; text-transform:uppercase; max-width:20ch;
}
.hw-hero h1 em{ font-style:normal; color:#0A0A0A91; }
/* hero title masked slide-up (same feel as homepage) */
.hw-hero h1 .ln{ display:block; overflow:hidden; padding-top:.03em; }
.hw-hero h1 .ln > span,
.hw-hero h1 .ln > em{ display:block; transform:translateY(110%); }
.hw-hero.in h1 .ln > span,
.hw-hero.in h1 .ln > em{ transform:translateY(0); transition:transform 1.05s var(--ease); }
.hw-hero.in h1 .ln:nth-child(2) > *{ transition-delay:.1s; }
.hw-hero.in h1 .ln:nth-child(3) > *{ transition-delay:.2s; }
.hw-hero.in h1 .ln:nth-child(4) > *{ transition-delay:.3s; }
@media (prefers-reduced-motion: reduce){
  .hw-hero h1 .ln > span,
  .hw-hero h1 .ln > em{ transform:none; }
}
@media (max-width:900px){
  .hw-hero{ grid-template-columns:1fr; padding-top:15vh; }
  .hw-hero-media{ aspect-ratio:9/16; max-width:380px; min-height:0; margin-inline:auto; }
}
.hw-hero .lede{
  margin-top:40px; max-width:60ch;
  font-size:clamp(15px,1.2vw,20px); line-height:1.55; color:var(--mute);
}
.hw-hero .cta{ margin-top:40px; }

/* showreel — single 16:9 slideshow */
.hw-grid{
  padding:0 36px; max-width:1680px; margin:8vh auto 0;
  display:flex; justify-content:center; align-items:center;
  gap:clamp(24px,4vw,80px);
}
.hw-grid slideshow-slot{
  flex:0 0 auto;
  display:block; width:auto; height:min(84vh,880px); aspect-ratio:9 / 16;
  max-width:100%; background:#e7e6e2;
}
.reel-side{
  flex:1 1 0; min-width:0;
  font-family:"Anton",sans-serif; font-weight:400;
  text-transform:uppercase; text-wrap:balance;
  font-size:clamp(22px,2.6vw,46px); line-height:.96; letter-spacing:-.005em;
  color:var(--ink);
}
.reel-left{ text-align:right; }
.reel-right{ text-align:left; }
@media (max-width:900px){
  .hw-grid{ flex-direction:column; }
  .reel-side{ flex:none; text-align:center; }
  .hw-grid slideshow-slot{ width:100%; height:auto; max-width:360px; }
}
.hw-note{
  text-align:center; margin:34px auto 0;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
}

/* ============================================================
   CLIENT LOGO MARQUEE
   ============================================================ */
.logobar{ max-width:1680px; margin:9vh auto 0; padding:0 36px; background:#f6f5f2; }
.logo-eyebrow{
  display:flex; align-items:center; gap:11px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--ink); margin-bottom:30px;
}
.logo-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); }
.logo-viewport{
  overflow:hidden; position:relative;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-track{
  display:flex; align-items:center; gap:10vw; width:max-content;
  padding:34px 5vw;
  animation:logoSlide 34s linear infinite;
}
.logo{
  display:flex; align-items:center; justify-content:center;
  height:64px; flex:0 0 auto; opacity:.62;
  transition:opacity .35s var(--ease);
}
.logo img{
  width:auto; object-fit:contain;
  display:block; filter:grayscale(1);
}
/* optically balanced per-logo heights (tightly-cropped art) */
.logo .l-nike{ height:48px; }
.logo .l-decoded{ height:22px; }
.logo .l-mizuno{ height:48px; }
.logo .l-volvo{ height:34px; }
.logo .l-ecco{ height:26px; }
.logo .l-swifto{ height:27px; }
.logo .l-detailforce{ height:32px; }
.logo .l-ellastiek{ height:46px; }
.logo:hover{ opacity:1; }
@keyframes logoSlide{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .logo-track{ animation:none; } }

/* ============================================================
   OFFER — 6 feature cards
   ============================================================ */
.hw-block{ padding-top:14vh; }
.hw-offer-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:6vh;
}
.hw-feat{ background:var(--paper); padding:44px 34px 52px; min-height:300px; display:flex; flex-direction:column; }
.hw-feat .num{ font-size:11px; letter-spacing:.2em; color:var(--mute); font-weight:600; }
.hw-feat h3{
  font-family:"Anton",sans-serif; font-weight:400;
  font-size:clamp(22px,1.9vw,32px); line-height:1.0; text-transform:uppercase;
  margin-top:auto; letter-spacing:.005em;
}
.hw-feat p{ margin-top:16px; font-size:15px; line-height:1.55; color:var(--mute); }

/* ============================================================
   STEPS — how to get started
   ============================================================ */
.hw-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:34px; }
.st-media-full{ width:100%; height:300px; background:#e7e6e2; margin-top:6vh; }
.st-media-full media-slot{ display:block; width:100%; height:100%; }
.hw-step .st-media{ width:100%; height:300px; background:#e7e6e2; }
.hw-step media-slot{ display:block; width:100%; height:100%; }
.hw-step .st-n{
  font-family:"Anton",sans-serif; font-size:64px; line-height:1; color:var(--ghost); margin:26px 0 14px;
}
.hw-step h3{ font-family:"Anton",sans-serif; font-weight:400; font-size:24px; text-transform:uppercase; letter-spacing:.005em; }
.hw-step p{ margin-top:14px; font-size:15px; line-height:1.55; color:var(--mute); max-width:34ch; }

/* ============================================================
   RECENT WORK — project cards
   ============================================================ */
.hw-work{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:6vh; }
.hw-proj .pj-media{ width:100%; height:56vh; min-height:420px; background:#e7e6e2; overflow:hidden; }
.hw-proj media-slot{ display:block; width:100%; height:100%; }
.hw-proj .pj-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; gap:20px; }
.hw-proj h3{ font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(20px,1.7vw,28px); text-transform:uppercase; letter-spacing:.005em; max-width:24ch; line-height:1.1; }
.hw-proj .pj-tags{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); text-align:right; white-space:nowrap; }

/* ============================================================
   IMPACT NUMBERS
   ============================================================ */
.hw-impact{ background:var(--ink); color:var(--paper); margin-top:14vh; padding:14vh 0; }
.hw-impact .wrap{ }
.hw-impact .eyebrow, .hw-impact .section-title{ color:var(--paper); }
.hw-impact .eyebrow .dot{ background:var(--paper); }
.hw-impact .lede{ max-width:56ch; margin-top:26px; color:rgba(246,245,242,.68); font-size:16px; line-height:1.55; }
.hw-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:9vh; }
.hw-num .fig{ font-family:"Anton",sans-serif; font-size:clamp(70px,10vw,170px); line-height:.86; letter-spacing:-.01em; }
.hw-num p{ margin-top:20px; font-size:15px; line-height:1.55; color:rgba(246,245,242,.62); max-width:32ch; }
.hw-num{ border-top:1px solid rgba(246,245,242,.24); padding-top:26px; }

/* ============================================================
   PACKAGES
   ============================================================ */
.hw-pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:6vh; }
.hw-pkg{ background:var(--paper); padding:40px 32px 44px; display:flex; flex-direction:column; }
.hw-pkg h3{ font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(22px,2vw,30px); text-transform:uppercase; line-height:1.02; letter-spacing:.005em; }
.hw-pkg .desc{ margin-top:16px; font-size:15px; line-height:1.55; color:var(--mute); }
.hw-pkg ul{ list-style:none; margin:30px 0 34px; display:flex; flex-direction:column; gap:14px; }
.hw-pkg li{ display:flex; gap:12px; font-size:13px; letter-spacing:.02em; align-items:flex-start; line-height:1.35; }
.hw-pkg li svg{ flex:0 0 auto; width:15px; height:15px; margin-top:1px; }
.hw-pkg .btn{ margin-top:auto; justify-content:center; }

/* ============================================================
   FAQ — two column: intro left, list right
   ============================================================ */
.hw-faq{ background:#f6f5f2; padding-top:14vh; padding-bottom:14vh; }
.hw-faq-grid{ display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.6fr); gap:8vw; align-items:start; }

/* ============================================================
   ABOUT — studio + founders
   ============================================================ */
.hw-about{ background:#f6f5f2; }
.hw-about .section-title em{ font-style:normal; color:#0A0A0A66; }
.hw-about .about-lede{ margin-top:36px; max-width:62ch; font-size:clamp(16px,1.5vw,24px); line-height:1.45; color:var(--ink); }
.hw-people{ display:grid; grid-template-columns:1fr 1fr; column-gap:6vw; row-gap:0; grid-template-rows:auto auto auto auto auto; margin-top:10vh; border-top:1px solid var(--line); padding-top:48px; padding-bottom:48px; }
.hw-person{ display:grid; grid-template-rows:subgrid; grid-row:1 / -1; row-gap:0; align-content:start; }
.hw-person h3{ font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(30px,3.4vw,56px); line-height:.9; letter-spacing:-.005em; text-transform:uppercase; }
.person-role{ margin-top:14px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--mute); }
.hw-person p{ margin-top:22px; max-width:48ch; font-size:15px; line-height:1.6; color:var(--mute); }
.person-clients{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink); }
@media (max-width:900px){ .hw-people{ grid-template-columns:1fr; grid-template-rows:none; row-gap:56px; } .hw-person{ display:block; grid-row:auto; } }

/* about media band — full-width image between lede and founders */
.about-media{ width:100%; height:300px; background:#e7e6e2; margin-top:6vh; }
.about-media media-slot{ display:block; width:100%; height:100%; }
.faq-head{ position:sticky; top:120px; }
.faq-intro{ margin-top:34px; max-width:38ch; font-size:15px; line-height:1.55; color:var(--mute); }
.hw-faq-list{ border-top:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 2px 14px;
  font-family:"Archivo",sans-serif; font-weight:700;
  font-size:clamp(15px,1.15vw,18px); letter-spacing:.005em; line-height:1.3; color:var(--ink);
}
.faq-q .pm{ position:relative; width:17px; height:17px; flex:0 0 auto; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--ink); }
.faq-q .pm::before{ left:0; right:0; top:7.5px; height:1.6px; }
.faq-q .pm::after{ top:0; bottom:0; left:7.5px; width:1.6px; transition:transform .35s var(--ease); }
.faq.open .faq-q .pm::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease); }
.faq-a p{ padding:0 2px 26px; max-width:70ch; font-size:15px; line-height:1.55; color:var(--mute); font-weight:500; }

/* ============================================================
   CTA
   ============================================================ */
.hw-cta{ padding:16vh 0 14vh; text-align:center; }
.hw-cta h2{ font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(44px,7vw,130px); line-height:.9; text-transform:uppercase; letter-spacing:-.01em; }
.hw-cta p{ margin:30px auto 0; max-width:52ch; font-size:16px; line-height:1.55; color:var(--mute); }
.hw-cta .btn{ margin-top:40px; }

/* footer (shared look with About) */
.footer{ padding:0 0 4vh; overflow:hidden; border-top:1px solid var(--line); margin-top:0; }
.ft-grid{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:6vw; padding:8vh 36px 0; max-width:1680px; margin:0 auto; }
.ft-join h2{ font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(30px,3.4vw,58px); line-height:.92; text-transform:uppercase; }
.ft-wordmark{ display:inline-flex; margin-bottom:clamp(20px,3vh,36px); }
.ft-wordmark img{ display:block; height:26px; width:auto; }
.ft-copy{ margin-top:clamp(40px,7vh,90px); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); font-weight:500; }
.ft-contact,.ft-locations{ display:flex; flex-direction:column; gap:5.5vh; padding-top:.5vh; }
.ft-group{ display:flex; flex-direction:column; gap:.85em; }
.ft-group a,.ft-loc{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.ft-group a{ color:var(--ink); text-decoration:none; width:max-content; position:relative; }
.ft-group a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.ft-group a:hover::after{ transform:scaleX(1); }
.ft-loc h3{ font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.7em; }
.ft-loc p{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }

@media (max-width:980px){
  .hw-offer-grid,.hw-pkgs{ grid-template-columns:1fr 1fr; }
  .hw-steps,.hw-nums{ grid-template-columns:1fr; }
  .hw-work{ grid-template-columns:1fr; }
  .hw-faq-grid{ grid-template-columns:1fr; gap:5vh; }
  .faq-head{ position:static; }
}
@media (max-width:640px){
  .hw-offer-grid,.hw-pkgs{ grid-template-columns:1fr; }
  .ft-grid{ grid-template-columns:1fr; gap:6vh; }
}
@media (max-width:600px){
  .wrap{ padding:0 20px; }
  /* brand bar ~30% smaller on phones */
  .logobar{ margin-top:6vh; padding:0 20px; }
  .logo-track{ padding:22px 6vw; gap:8vw; }
  .logo{ height:44px; }
  .logo .l-nike{ height:34px; }
  .logo .l-decoded{ height:15px; }
  .logo .l-mizuno{ height:34px; }
  .logo .l-volvo{ height:24px; }
  .logo .l-ecco{ height:18px; }
  .logo .l-swifto{ height:19px; }
  .logo .l-detailforce{ height:22px; }
  .logo .l-ellastiek{ height:32px; }
  .logo-eyebrow{ margin-bottom:20px; }
  .hw-grid{ margin-top:7vh; }
  .hw-hero{ padding:14vh 20px 2vh; }
  .hw-hero h1{ font-size:clamp(30px,8.2vw,44px); }
  .hw-hero .lede{ font-size:16px; margin-top:28px; }
  .hw-hero .cta{ margin-top:28px; }
  .section-title{ font-size:clamp(28px,8vw,40px); }
  .eyebrow,.logo-eyebrow{ margin-bottom:24px; }
  .hw-block{ padding-top:9vh; }
  .hw-feat{ padding:32px 24px 36px; min-height:0; }
  .hw-pkg{ padding:32px 24px 36px; }
  .hw-impact{ padding:10vh 0; margin-top:10vh; }
  .hw-nums{ gap:30px; }
  .hw-num .fig{ font-size:clamp(60px,20vw,92px); }
  .st-media-full,.hw-step .st-media{ height:220px; }
  .hw-proj .pj-media{ height:52vh; min-height:300px; }
  .about-media{ height:220px; }
  .ft-grid{ padding:7vh 20px 0; }
  .hw-faq{ padding-top:10vh; padding-bottom:10vh; }
}