/* ============================================================
   NN/WORKS — One Pager overrides
   Collage becomes a finite, pinned intro section; the rest of
   the site flows underneath it.
   ============================================================ */

/* ---- pinned collage run ---- */
.collage-run{ position:relative; }
.collage-view{
  position:sticky; top:0; height:100vh; overflow:hidden;
}
/* fixed -> absolute inside the pinned viewport */
.collage-view .strip,
.collage-view .veil,
.collage-view .hero,
.collage-view .hint{ position:absolute; }
.collage-view .hint{ bottom:30px; }

/* veil blends into the shared paper tone */
.collage-view .veil{
  background:linear-gradient(108deg,
     #f6f5f2 0%, #f6f5f2 38%, rgba(246,245,242,.85) 60%, rgba(246,245,242,0) 84%);
}

/* ---- hero lockup: eyebrow / headline / format line / CTA ---- */
.hero{ max-width:82vw; }
.hero-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  margin-bottom:26px;
  opacity:0; transform:translateY(14px);
}
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); }
.reveal .hero-eyebrow{ opacity:1; transform:translateY(0); transition:opacity .8s var(--ease) .05s, transform .8s var(--ease) .05s; }

.hero-line > span{ font-size:clamp(40px,6.6vw,104px); }

.hero-cta{ margin-top:34px; opacity:0; transform:translateY(20px); pointer-events:auto; }
.reveal .hero-cta{ opacity:1; transform:translateY(0); transition:opacity .9s var(--ease) .75s, transform .9s var(--ease) .75s; }
.hero-cta .btn{ pointer-events:auto; }

@media (max-width:720px){
  .hero{ max-width:92vw; }
  .hero-line > span{ font-size:clamp(34px,9.6vw,56px); }
  .hero-eyebrow{ margin-bottom:18px; letter-spacing:.22em; font-size:10px; }
  .hero-cta{ margin-top:26px; }
}

/* first flowing section sits close under the collage */
.hw-hero{ padding-top:14vh; }

@media (max-width:600px){
  .hw-hero{ padding-top:10vh; }
}

/* ---- "What we make" format grid ---- */
.fmt-note{
  max-width:560px; margin-top:26px;
  font-size:15px; line-height:1.65; color:var(--mute);
}
.fmt-grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,24px);
  align-items:start; margin-top:7vh;
}
.fmt-tile{ position:relative; overflow:hidden; background:#e7e6e2; }
.fmt-tile media-slot{ position:absolute; inset:0; width:100%; height:100%; }
.fmt-tile::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.42));
  pointer-events:none;
}
.fmt-label{
  position:absolute; left:18px; bottom:14px; z-index:2;
  font-family:"Anton",sans-serif; font-weight:400;
  font-size:clamp(15px,1.3vw,21px); letter-spacing:.02em; text-transform:uppercase;
  color:#fff; pointer-events:none;
}
.fmt-c{ grid-column:1/8;  aspect-ratio:16/10; }
.fmt-p{ grid-column:8/13; aspect-ratio:4/5; }
.fmt-b{ grid-column:1/5;  aspect-ratio:4/5; margin-top:-14%; }
.fmt-s{ grid-column:5/9;  aspect-ratio:4/5; margin-top:6%; }
.fmt-e{ grid-column:9/13; aspect-ratio:1/1; }
.fmt-v{ grid-column:4/10; aspect-ratio:16/9; margin-top:4%; }
.fmt-cta{ margin-top:8vh; display:flex; justify-content:center; }

@media (max-width:720px){
  .fmt-grid{ grid-template-columns:1fr 1fr; gap:14px; margin-top:5vh; }
  .fmt-c{ grid-column:1/3; aspect-ratio:16/10; }
  .fmt-p{ grid-column:1/2; aspect-ratio:4/5; }
  .fmt-b{ grid-column:2/3; aspect-ratio:4/5; margin-top:0; }
  .fmt-s{ grid-column:1/2; aspect-ratio:4/5; margin-top:0; }
  .fmt-e{ grid-column:2/3; aspect-ratio:1/1; }
  .fmt-v{ grid-column:1/3; aspect-ratio:16/9; margin-top:0; }
  .fmt-label{ left:12px; bottom:10px; font-size:14px; }
  .fmt-cta{ margin-top:5vh; }
}

/* ---- "What we make" rotating box section ---- */
.wwm-cube-sec .wwm-stage{
  position:relative; z-index:2; max-width:1680px; margin:-9vh auto 0; padding:0 36px;
  min-height:74vh; display:grid; place-items:center;
}
.wwm-scene{
  width:min(54vh,45vw); aspect-ratio:1/1;
  perspective:1600px; cursor:grab; touch-action:none;
}
.wwm-scene.grabbing{ cursor:grabbing; }
.wwm-cube{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; will-change:transform;
}
.wwm-cube .face{
  position:absolute; inset:0; overflow:hidden;
  background:#e7e6e2;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.wwm-cube .face media-slot, .wwm-cube .face .tag{
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.wwm-cube .face media-slot{ position:absolute; inset:0; width:100%; height:100%; }
.wwm-cube .face .tag{
  position:absolute; left:16px; bottom:12px; z-index:2;
  font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase;
  font-size:15px; letter-spacing:.03em; color:#fff; pointer-events:none;
  text-shadow:0 1px 14px rgba(10,10,10,.45);
}
.wwm-readout{
  position:absolute; right:48px; top:50%; transform:translateY(-50%);
  text-align:right; pointer-events:none; max-width:24vw;
}
.wwm-readout .face-name{
  font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,2.4vw,40px); line-height:1;
}
.wwm-readout .face-hint{
  margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); font-weight:500;
}
.wwm-reload{
  position:absolute; left:48px; bottom:24px;
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer;
  font-family:"Archivo",sans-serif; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:var(--ink);
}
.wwm-reload:hover{ color:var(--mute); }
.wwm-reload svg{ width:13px; height:13px; }
.wwm-drag-hint{
  position:absolute; right:48px; bottom:24px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--mute);
}

@media (max-width:720px){
  .wwm-cube-sec .wwm-stage{ min-height:0; padding:8vh 20px 10vh; margin-top:0; }
  .wwm-scene{ width:min(58vw,34vh); aspect-ratio:4/5; }
  .wwm-readout{ position:static; transform:none; text-align:center; max-width:none; margin-top:40px; }
  .wwm-cube-sec .wwm-stage{ grid-template-rows:auto auto; }
  .wwm-reload{ left:20px; bottom:8px; }
  .wwm-drag-hint{ right:20px; bottom:8px; }
}