/* ============================================================
   THE LAB: experimental wing of daneerikforst.com
   Loaded AFTER style.css. Inherits every token from :root there
   (--soot, --bone, --sun, --rose, --mono, --serif, --sans).
   Nothing in here touches the main site's classes; every
   selector is namespaced .lab-* / .spec-* / .mo-* / .svc-* so
   the two systems can never collide.
   ============================================================ */

body.labbody{
  background:var(--soot);
  color:var(--bone);
  /* the whole wing is dark: the work is dark cinematic video and
     it should sit on black, not on the bone paper of the main site */
}
body.labbody .cta{color:var(--bone);border-color:var(--bone)}

/* ---------- nav marker ----------
   Same nav as the rest of the site, plus a chip so you know which
   room you walked into. Sits inside the logo link's row. */
.lab-mark{
  display:inline-flex;align-items:center;gap:.45rem;margin-left:.8rem;
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;
  border:1px solid currentColor;border-radius:999px;padding:.28rem .6rem;
  opacity:.85;white-space:nowrap;
}
.lab-mark .bl{width:5px;height:5px;border-radius:50%;background:var(--sun);animation:pulse 2.6s infinite}
nav .logo{display:flex;align-items:center}
/* Eight nav items leave no room beside the wing chip below this,
   and the chip is the first thing that can go. */
@media(max-width:1020px){.lab-mark{display:none}}

/* ---------- film grain ----------
   One fixed overlay for the whole wing. Cheap: a tiled SVG noise
   tile nudged 8 times a second, not a canvas loop. */
.lab-grain{
  position:fixed;inset:-120px;z-index:90;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(1) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}      20%{transform:translate(-14px,7px)}
  40%{transform:translate(9px,-11px)} 60%{transform:translate(-6px,-8px)}
  80%{transform:translate(12px,6px)}  100%{transform:translate(0,0)}
}
html.reduced .lab-grain{animation:none}

/* ============================================================
   1. HERO
   A specimen viewer: one clip on the stage at a time, crossfading,
   with the thesis set over it. Only ever two <video> elements
   exist, so the hero costs one clip's bandwidth, not twelve.
   ============================================================ */
.lab-hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--soot);
}
.lh-stage{position:absolute;inset:0;z-index:0}
.lh-stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
  filter:saturate(.9) contrast(1.05);
}
.lh-stage video.on{opacity:.42}
/* the deliberate stumble: every few cycles the stage flinches. */
.lh-stage.jolt video.on{opacity:.62;filter:saturate(1.3) contrast(1.35)}
.lh-stage.jolt{transform:scale(1.012)}
.lh-stage{transition:transform .18s steps(2)}
html.reduced .lh-stage video{transition:none}
html.reduced .lh-stage.jolt{transform:none}
.lab-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,19,16,.86),rgba(20,19,16,.35) 42%,rgba(20,19,16,.95)),
    radial-gradient(120% 80% at 50% 45%,transparent 30%,rgba(20,19,16,.7) 100%);
}
.lh-in{position:relative;z-index:2;padding:0 clamp(1.2rem,3vw,2.5rem) clamp(1.6rem,5vh,3rem);width:100%}

.lh-eyebrow{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:.6rem;
  font-family:var(--mono);font-size:clamp(.6rem,1.05vw,.74rem);
  text-transform:uppercase;letter-spacing:.18em;color:rgba(228,224,212,.72);
  border-bottom:1px solid var(--line-light);padding-bottom:1rem;margin-bottom:clamp(1.2rem,3vh,2rem);
}
.lh-eyebrow .cat{color:var(--sun)}

.lh-type{
  font-weight:900;text-transform:uppercase;line-height:.85;letter-spacing:-.02em;
  font-size:clamp(2.05rem,8.2vw,7.4rem);
  display:flex;flex-direction:column;gap:.06em;max-width:16em;
}
.lh-type .ln{display:block}
/* second line drops to the serif so the two halves of the thesis
   read as claim + counter-claim rather than one long shout */
.lh-type .ln.soft{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-.005em;line-height:.95;
  font-size:clamp(2.1rem,8.6vw,7.8rem);
  background:linear-gradient(100deg,var(--sun),var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* main.js splits [data-k] into one inline-block span per character so the
   letters can be animated individually. On the home page it only ever runs
   on single words; this headline has spaces, and whitespace inside an
   inline-block collapses to nothing. white-space:pre gives the space spans
   their width back. */
.lh-type .ltr{display:inline-block;white-space:pre;font-variation-settings:'wdth' 100;will-change:font-variation-settings}

.lh-foot{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.2rem;
  margin-top:clamp(1.4rem,4vh,2.4rem);padding-top:1.1rem;border-top:1px solid var(--line-light);
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(228,224,212,.62);
}
.lh-foot .sub{
  font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:clamp(.92rem,1.4vw,1.1rem);
  line-height:1.55;max-width:34em;color:rgba(228,224,212,.86);
}
.lh-scroll{display:flex;align-items:center;gap:.5rem}
.lh-scroll i{display:block;width:1px;height:28px;background:linear-gradient(var(--sun),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============================================================
   2. STATEMENT
   ============================================================ */
.lab-sec{padding:clamp(4rem,11vh,8.5rem) clamp(1.2rem,3vw,2.5rem)}
.lab-sec.tight{padding-top:clamp(2rem,5vh,3.5rem)}
.lab-lede{
  font-size:clamp(1.25rem,2.9vw,2.15rem);line-height:1.34;max-width:20em;
  font-weight:500;letter-spacing:-.01em;
}
.lab-lede em{font-family:var(--serif);font-style:italic;font-weight:400}
.lab-body{
  font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.68;max-width:40em;
  color:rgba(228,224,212,.8);margin-top:clamp(1.4rem,3.5vh,2.2rem);
}
.lab-body p+p{margin-top:1.1em}
.lab-kicker{
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--rose);margin-bottom:clamp(1.2rem,3vh,2rem);display:flex;align-items:center;gap:.8rem;
}
.lab-kicker::after{content:'';flex:1;height:1px;background:var(--line-light)}

/* pull quote, his own line from the About page, given room */
.lab-quote{
  margin:clamp(2.5rem,7vh,4.5rem) 0 0;padding:clamp(1.8rem,4vh,2.6rem) 0;
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
}
.lab-quote blockquote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2.6rem);line-height:1.24;max-width:17em;letter-spacing:-.01em;
}
.lab-quote cite{
  display:block;margin-top:1.2rem;font-family:var(--mono);font-style:normal;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(228,224,212,.5);
}

/* ============================================================
   3. FEATURED FILMS
   Full-bleed silent loops. The play control opens the real film in
   a lightbox. YouTube is only fetched on click, never on load.
   ============================================================ */
/* Every dossier gets a card, laid out full / pair / full / pair so each one
   is actually represented rather than hidden behind a text row. */
.feat-band{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
}
.feat-card{
  position:relative;display:block;width:100%;overflow:hidden;isolation:isolate;
  background:var(--soot);
  border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  aspect-ratio:4/3;
}
.feat-card:nth-child(2n){border-right:0}
/* the full-width beats in the rhythm */
.feat-card.full{grid-column:1/-1;border-right:0;aspect-ratio:21/9;min-height:340px}
/* Only the full-width beats change shape for a vertical clip. A paired card
   must keep its row-mate's height or the row ends up with a hole in it. */
.feat-card.full.portrait{aspect-ratio:16/9}
.feat-card video,.feat-card>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.6,0,.2,1),filter .6s;
  filter:saturate(.92) brightness(.78);
}
.feat-card.portrait video,.feat-card.portrait>img{object-position:center 32%}
.feat-card:hover video,.feat-card:hover>img{transform:scale(1.035);filter:saturate(1.06) brightness(.92)}
.feat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,19,16,.9) 0%,rgba(20,19,16,.45) 45%,rgba(20,19,16,.15) 100%);
}
.fc-in{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.4rem,4vw,3.4rem);gap:.7rem;pointer-events:none;
}
.fc-idx{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.2em;color:var(--sun)}
.fc-title{
  font-weight:900;font-variation-settings:'wdth' 72;text-transform:uppercase;
  font-size:clamp(1.4rem,2.9vw,2.4rem);line-height:.9;letter-spacing:-.02em;
}
/* the full-width beats get to shout; the paired cards stay in scale */
.feat-card.full .fc-title{font-size:clamp(1.7rem,5.2vw,4.4rem)}
.fc-note{
  font-family:var(--serif);font-style:italic;font-size:clamp(.92rem,1.35vw,1.15rem);
  color:rgba(228,224,212,.82);max-width:26em;
}
.feat-card.full .fc-note{font-size:clamp(.98rem,1.7vw,1.4rem)}
.fc-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.5rem;pointer-events:auto}
.fc-meta{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(228,224,212,.6)}

.fc-play{
  display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--bone);background:transparent;border:1px solid var(--bone);
  padding:.7rem 1.2rem;border-radius:999px;transition:background .3s,color .3s,border-color .3s;
}
.fc-play svg{flex:none}
.fc-play:hover{background:var(--bone);color:var(--soot)}
/* Until a film has somewhere to play, the button is simply absent
   and the card states what it is. No dead controls. */
.fc-pending{
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(228,224,212,.45);border:1px dashed var(--line-light);
  padding:.62rem 1rem;border-radius:999px;
}
@media(max-width:820px){
  .feat-band{grid-template-columns:1fr}
  .feat-card,.feat-card.full{grid-column:1/-1;border-right:0;aspect-ratio:4/5;min-height:0}
  .feat-card::after{background:linear-gradient(180deg,rgba(20,19,16,.5),rgba(20,19,16,.9))}
  .feat-card.full .fc-title{font-size:clamp(1.7rem,7vw,3rem)}
}

/* ============================================================
   4. SPECIMEN INDEX
   The navigational heart. Ten dossiers as rows; the cursor drags a
   live preview around with it. Preview is one <video>, reused.
   ============================================================ */
.spec-index{border-top:1px solid var(--line-light);position:relative}
.spec-row{
  position:relative;display:grid;align-items:center;gap:1rem;
  grid-template-columns:4.5rem minmax(0,1fr) auto;
  padding:clamp(1.1rem,3.1vh,1.9rem) clamp(1.2rem,3vw,2.5rem);
  border-bottom:1px solid var(--line-light);
  transition:background .4s ease,padding-left .45s cubic-bezier(.6,0,.2,1);
}
.spec-row:hover{background:var(--soot-2);padding-left:clamp(1.8rem,4.4vw,4rem)}
.spec-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:rgba(228,224,212,.4);transition:color .3s}
.spec-row:hover .spec-n{color:var(--sun)}
.spec-t{
  font-weight:850;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(1.3rem,4vw,3rem);line-height:1;
  font-variation-settings:'wdth' 92;
  transition:font-variation-settings .5s cubic-bezier(.6,0,.2,1);
  min-width:0;
}
.spec-row:hover .spec-t{font-variation-settings:'wdth' 118}
.spec-c{
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.15em;
  color:rgba(228,224,212,.5);text-align:right;transition:color .3s;
}
.spec-row:hover .spec-c{color:rgba(228,224,212,.9)}
@media(max-width:820px){
  .spec-row{grid-template-columns:3rem minmax(0,1fr);row-gap:.35rem}
  .spec-c{grid-column:2;text-align:left}
}

/* the cursor-borne preview */
.spec-peek{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:clamp(210px,19vw,320px);aspect-ratio:16/10;overflow:hidden;
  border-radius:2px;background:var(--soot-2);
  opacity:0;transform:translate3d(-100vw,0,0) scale(.9);
  /* transform is driven per frame from lab.js, so it must NOT be
     transitioned here or the two smoothings fight each other */
  transition:opacity .3s ease;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.spec-peek.on{opacity:1}
.spec-peek video{width:100%;height:100%;object-fit:cover;display:block}
.spec-peek .pk-tag{
  position:absolute;left:0;bottom:0;right:0;padding:.45rem .6rem;
  font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.16em;
  background:linear-gradient(transparent,rgba(20,19,16,.9));color:var(--bone);
}
/* touch devices never get a hover cursor, so never build the peek */
@media(hover:none),(max-width:820px){.spec-peek{display:none}}

/* ============================================================
   5. MOSAIC: the clip galleries on each dossier page
   A 12-column bed. Size classes set the span, so the rhythm is
   authored per page rather than uniform. Add clips freely.
   ============================================================ */
.mosaic{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(.5rem,1.4vw,1.1rem);
  padding:clamp(1.5rem,4vh,2.6rem) 0 0;
}
.mo-item{position:relative;margin:0;overflow:hidden;background:var(--soot-2);border-radius:2px;grid-column:span 6}
.mo-item.m-full{grid-column:1/-1}
.mo-item.m-two{grid-column:span 8}
.mo-item.m-half{grid-column:span 6}
.mo-item.m-third{grid-column:span 4}
.mo-item.m-quarter{grid-column:span 3}
/* A breakout: cancels the section's own side padding rather than using
   100vw, because 100vw includes the scrollbar and would push the page
   into horizontal overflow. Must stay in step with .pad's padding. */
.mo-item.m-bleed{
  grid-column:1/-1;border-radius:0;width:auto;
  margin-left:calc(-1 * clamp(1.2rem,3vw,2.5rem));
  margin-right:calc(-1 * clamp(1.2rem,3vw,2.5rem));
}
.mo-item video,.mo-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.6,0,.2,1),filter .5s ease;
}
/* portraits keep their shape; landscape tiles get a consistent crop
   so the grid stays a grid instead of a ragged stack */
.mo-item.ar-wide video,.mo-item.ar-wide img{aspect-ratio:16/9}
.mo-item.ar-tall video,.mo-item.ar-tall img{aspect-ratio:9/16}
.mo-item.ar-square video,.mo-item.ar-square img{aspect-ratio:1/1}
.mo-item.ar-native video,.mo-item.ar-native img{height:auto;object-fit:contain;background:var(--soot)}

/* hover: the one you're on leans in, the rest step back a little.
   This is the "playground" behavior, kept to opacity + scale so it
   stays on the compositor. */
.mosaic:hover .mo-item video,.mosaic:hover .mo-item img{filter:brightness(.6) saturate(.7)}
.mosaic .mo-item:hover video,.mosaic .mo-item:hover img{filter:none;transform:scale(1.045)}
html.reduced .mosaic:hover .mo-item video,html.reduced .mosaic:hover .mo-item img{filter:none}

.mo-cap{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem .9rem .7rem;
  display:flex;justify-content:space-between;align-items:flex-end;gap:.8rem;
  font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(228,224,212,.85);
  background:linear-gradient(transparent,rgba(20,19,16,.82));
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.mo-item:hover .mo-cap{opacity:1}
.mo-cap .n{color:var(--sun)}

@media(max-width:900px){
  .mo-item,.mo-item.m-third,.mo-item.m-two{grid-column:span 6}
  .mo-item.m-quarter{grid-column:span 4}
}
@media(max-width:600px){
  .mo-item,.mo-item.m-third,.mo-item.m-two,.mo-item.m-quarter,.mo-item.m-half{grid-column:1/-1}
  .mo-cap{opacity:1}
}

/* a single piece given the full width, with sound available */
.mo-piece{margin:clamp(2rem,6vh,3.6rem) 0 0;position:relative}
.mo-piece video{width:100%;height:auto;display:block;background:var(--soot);border-radius:2px}
.mo-piece.portrait{max-width:min(100%,460px);margin-left:auto;margin-right:auto}
.mo-piece figcaption{
  margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:baseline;
}
.mo-piece .pc-label{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--rose)}
.mo-piece .pc-note{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.22rem);color:rgba(228,224,212,.72)}
.sound-btn{
  position:absolute;top:.8rem;right:.8rem;z-index:3;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--bone);background:rgba(20,19,16,.62);border:1px solid var(--line-light);
  border-radius:999px;padding:.45rem .75rem;backdrop-filter:blur(6px);
  transition:background .3s,color .3s;
}
.sound-btn:hover{background:var(--bone);color:var(--soot)}

/* ============================================================
   6. TOOLKIT
   Deliberately plain text. No logo wall. The list quietly churns
   on a timer, which is the whole point of the section.
   ============================================================ */
.tk-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:860px){.tk-wrap{grid-template-columns:1fr}}
.tk-line{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.2;letter-spacing:-.01em;max-width:14em;
}
.tk-line b{
  font-family:var(--sans);font-style:normal;font-weight:900;text-transform:uppercase;
  font-variation-settings:'wdth' 78;letter-spacing:-.01em;
}
.tk-list{
  display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:.4rem;
}
.tk-item{
  font-family:var(--mono);font-size:clamp(.72rem,1.15vw,.86rem);letter-spacing:.04em;
  border:1px solid var(--line-light);border-radius:999px;padding:.5rem .9rem;
  color:rgba(228,224,212,.82);
  transition:opacity .6s ease,color .6s ease,border-color .6s ease,text-decoration-color .6s ease;
  text-decoration:line-through 1px transparent;
}
/* "retired" state: a tool the list has moved on from */
.tk-item.gone{
  opacity:.34;color:rgba(228,224,212,.6);
  text-decoration:line-through 1px var(--rose);
}
.tk-item.fresh{border-color:var(--sun);color:var(--bone)}
.tk-note{
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(228,224,212,.42);margin-top:1.6rem;
}

/* ============================================================
   7. SERVICES: three ways to work together
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-light)}
.svc-card{
  padding:clamp(1.8rem,4vw,3rem) clamp(1.3rem,2.6vw,2.4rem) clamp(2.2rem,5vw,3.4rem);
  border-bottom:1px solid var(--line-light);border-right:1px solid var(--line-light);
  display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;
  transition:background .45s ease;
}
.svc-card:last-child{border-right:0}
.svc-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--sun),var(--rose));
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.2,1);
}
.svc-card:hover{background:var(--soot-2)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--sun)}
.svc-card h3{
  font-weight:900;font-variation-settings:'wdth' 74;text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:.95;letter-spacing:-.015em;
}
.svc-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(228,224,212,.8);line-height:1.35}
.svc-card p{font-size:.98rem;line-height:1.62;color:rgba(228,224,212,.72)}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:.42rem;margin-top:.2rem}
.svc-list li{
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(228,224,212,.62);padding-left:1.1rem;position:relative;line-height:1.5;
}
.svc-list li::before{content:'';position:absolute;left:0;top:.52em;width:6px;height:1px;background:var(--rose)}
.svc-foot{margin-top:auto;padding-top:1.2rem}
.svc-foot a{
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  border-bottom:1px solid var(--line-light);padding-bottom:.25rem;transition:border-color .3s,color .3s;
}
.svc-card:hover .svc-foot a{border-bottom-color:var(--sun);color:var(--sun)}
@media(max-width:940px){
  .svc-grid{grid-template-columns:1fr}
  .svc-card{border-right:0}
}

/* ============================================================
   8. CLOSING CTA
   ============================================================ */
.lab-close{
  padding:clamp(4.5rem,13vh,9rem) clamp(1.2rem,3vw,2.5rem);
  border-top:1px solid var(--line-light);
}
.lab-close h2{
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(2rem,7.4vw,6.4rem);max-width:11em;
}
.lab-close h2 em{
  font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.005em;
  background:linear-gradient(100deg,var(--sun),var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lab-close .sub{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.9vw,1.5rem);
  color:rgba(228,224,212,.75);margin-top:1.4rem;max-width:30em;
}
.close-paths{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.4rem);
  margin-top:clamp(2.2rem,6vh,3.6rem);
}
@media(max-width:820px){.close-paths{grid-template-columns:1fr}}
.close-path{
  border:1px solid var(--line-light);border-radius:2px;padding:clamp(1.2rem,2.6vw,1.8rem);
  display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .35s,background .35s,transform .35s cubic-bezier(.6,0,.2,1);
}
.close-path:hover{border-color:var(--sun);background:var(--soot-2);transform:translateY(-3px)}
.close-path .cp-k{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--sun)}
.close-path .cp-t{font-weight:800;font-variation-settings:'wdth' 84;text-transform:uppercase;font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.05}
.close-path .cp-d{font-size:.92rem;line-height:1.55;color:rgba(228,224,212,.68)}

/* ============================================================
   9. LIGHTBOX: plays the full film on demand
   YouTube's iframe is written into the DOM on click and torn out
   on close, so the page never carries an embed it isn't using.
   ============================================================ */
.lab-lb{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(10,9,8,.94);backdrop-filter:blur(10px);
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
}
.lab-lb.open{display:flex}
.lb-stage{position:relative;width:min(100%,1400px);aspect-ratio:16/9;background:#000}
.lb-stage.portrait{aspect-ratio:9/16;width:auto;height:min(86vh,1000px)}
.lb-stage iframe,.lb-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lb-close{
  position:absolute;top:-2.6rem;right:0;cursor:pointer;background:none;border:0;color:var(--bone);
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
  display:inline-flex;align-items:center;gap:.5rem;padding:.4rem;
}
.lb-close:hover{color:var(--sun)}
@media(max-width:600px){.lb-close{top:-2.2rem}}

/* ============================================================
   10. DOSSIER PAGES: hero + intro + process, on the dark base
   Reuses .phero / .psec / .project-intro from style.css; these
   are the dark-mode corrections plus the dossier meta strip.
   ============================================================ */
body.labbody .project-intro,body.labbody .psec{border-bottom-color:var(--line-light)}
body.labbody .pmeta{border-bottom-color:var(--line-light)}
body.labbody .pmeta div span{color:rgba(228,224,212,.5)}
body.labbody .page-cta{background:var(--soot);border-top-color:var(--line-light)}
body.labbody .page-cta .cta{color:var(--bone);border-color:var(--bone)}
body.labbody .psec h2{color:var(--rose)}
/* The orange eyebrow disappears on a bright warm hero (Baron Costume's
   sunset, Space Cats' white jacket). Scoped to the Lab so the main site's
   case-study heroes are untouched. */
body.labbody .phero .idx{text-shadow:0 1px 12px rgba(20,19,16,.9),0 0 4px rgba(20,19,16,.75)}
body.labbody .phero .tag{text-shadow:0 1px 14px rgba(20,19,16,.7)}

.dossier-tag{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(228,224,212,.6);border:1px solid var(--line-light);border-radius:999px;
  padding:.35rem .8rem;
}
.dossier-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.back-lab{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(228,224,212,.6);transition:color .3s;
}
.back-lab:hover{color:var(--sun)}