/* ═══════════════════════════════════════════════════════════
   FIELDCUT — LANDING
   Mobile first. Tokens and the two typefaces live in /design.css.

   MOTION
   1. .rv — reveal once on entry (IntersectionObserver adds .in)
   2. [data-enter] / [data-exit] — scroll-linked. One rAF loop writes
      --p (0 → 1) as the element arrives or leaves.
   3. The reel — a screen that holds still while its steps scroll past;
      whichever step is nearest the middle sets the scene.
   All three fall back to "visible and still" without JS.
   ═══════════════════════════════════════════════════════════ */

body{overflow-x:hidden}

/* ── SCROLL PROGRESS ────────────────────────────────────── */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--ac);
  transform:scaleX(var(--sp,0));transform-origin:left;z-index:120;will-change:transform}

/* ── NAV ────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:14px var(--gut);
  background:rgba(10,10,10,.66);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),transform .4s var(--ease);
}
.nav.stuck{border-bottom-color:var(--br)}
.nav.hide{transform:translateY(-101%)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-mark{width:20px;height:20px;fill:var(--ac);flex-shrink:0;
  transition:transform var(--dur-slow) var(--ease)}
.nav-brand:hover .nav-mark{transform:rotate(72deg)}
.nav-word{font-size:16px;font-weight:500;letter-spacing:.01em;color:var(--tx)}
.nav-links{display:flex;align-items:center;gap:var(--s5)}
.nav-links a{position:relative;font-size:14px;color:var(--di);text-decoration:none;
  transition:color var(--dur) var(--ease)}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-4px;
  height:1px;background:var(--ac);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease)}
.nav-links a:hover{color:var(--tx)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.nav-cta{color:var(--tx);border:1px solid var(--br);padding:9px 18px}
.nav-links a.nav-cta:hover{border-color:var(--ac);background:var(--ad)}
@media (max-width:600px){
  /* Only the in-page anchor and the Mac link drop. Manual stays reachable
     from the bar, so it never depends on scrolling to the footer. */
  .nav-links a.nav-hide{display:none}
  .nav-links{gap:var(--s4)}
  .nav-links a{font-size:13px}
  .nav-links a.nav-cta{padding:9px 14px}
}

/* ── REVEAL ─────────────────────────────────────────────── */
/* Visible by default. The hidden state only exists once the inline head
   script has confirmed JS runs, so a failed script cannot blank the page. */
.rv{transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(24px)}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* Line rise. The padding/margin pair keeps descenders out of the clip. */
.mask{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.mask>.ln{display:block;transition:transform .9s var(--ease)}
.js .mask:not(.in)>.ln{transform:translateY(105%)}

/* ── HERO ───────────────────────────────────────────────── */
.hero{position:relative;padding:calc(var(--s10) + 40px) 0 var(--s8);overflow:hidden}
@media (min-width:900px){.hero{padding:calc(var(--s10) + 72px) 0 var(--s9)}}
.hero-inner{transform:translateY(calc(var(--p,0) * -60px));
  opacity:calc(1 - var(--p,0) * .85);will-change:transform,opacity}

.hero-eyebrow{display:block;margin-bottom:var(--s5);opacity:0;
  animation:fadeIn .6s .1s var(--ease) forwards}
@keyframes fadeIn{to{opacity:1}}

.hero-title{font-weight:500;font-size:var(--t-display);line-height:.86;
  letter-spacing:-.045em;margin-bottom:var(--s6)}
.hero-title .ln{display:block}
.hero-title .cut{color:var(--ac)}

.hero-lead{font-size:var(--t-lead);color:var(--di);max-width:46ch;
  line-height:1.45;margin-bottom:var(--s6)}
.hero-lead b{color:var(--tx);font-weight:500}

.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s7)}
.hero-actions .btn{flex:1 1 auto;min-width:190px}
@media (min-width:600px){.hero-actions .btn{flex:0 0 auto}}

/* ── MARQUEE ────────────────────────────────────────────── */
.band{border-block:1px solid var(--br);overflow:hidden;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.band-track{display:flex;width:max-content;animation:slide 36s linear infinite}
.band:hover .band-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.band-item{display:flex;align-items:center;gap:var(--s5);padding-inline:var(--s5);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--di);white-space:nowrap}
.band-item::after{content:'';width:5px;height:5px;background:var(--ac);flex-shrink:0}

/* ── SECTION SHELL ──────────────────────────────────────── */
.sec{padding:var(--s9) 0;border-top:1px solid var(--br);position:relative}
@media (min-width:900px){.sec{padding:var(--s10) 0}}
.sec--flush{border-top:0}
.sec-head{margin-bottom:var(--s8)}
/* headlines read as sentences, so they get a wide measure, not a narrow one */
.sec-head.wide .sec-title{max-width:22ch}
@media (min-width:900px){.sec-head.wide .sec-title{max-width:26ch}}
.sec-head .eyebrow{display:block;margin-bottom:var(--s5)}
.sec-title{font-weight:500;font-size:var(--t-h2);line-height:1.02;
  letter-spacing:-.03em;margin-bottom:var(--s5)}
.sec-title em{font-style:normal;color:var(--ac)}

/* ── WHAT IT IS ─────────────────────────────────────────── */
.what{display:grid;gap:var(--s7)}
@media (min-width:900px){.what{grid-template-columns:1.1fr .9fr;gap:var(--s10)}}
.what p{color:var(--di);margin-bottom:var(--s5);max-width:var(--read);font-size:17px;line-height:1.55}
.what p:last-child{margin-bottom:0}
.what strong{color:var(--tx);font-weight:500}

.who{border:1px solid var(--br);padding:var(--s6);align-self:start}
.who h4{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mu);margin-bottom:var(--s5)}
.who ul{list-style:none;display:grid;gap:var(--s4)}
.who li{font-size:15px;color:var(--di);padding-left:var(--s5);position:relative;line-height:1.45}
.who li::before{content:'';position:absolute;left:0;top:.62em;width:10px;height:1px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.in .who li::before{transform:scaleX(1)}
.who li:nth-child(2)::before{transition-delay:.08s}
.who li:nth-child(3)::before{transition-delay:.16s}
.who li:nth-child(4)::before{transition-delay:.24s}

/* ── SOURCES: DISK OR DRIVE ─────────────────────────────── */
.src{display:grid;gap:var(--s5)}
@media (min-width:860px){.src{grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--br)}}
.src-cell{border:1px solid var(--br);padding:var(--s6);position:relative;overflow:hidden}
@media (min-width:860px){
  .src-cell{border:0;padding:var(--s8) var(--s7)}
  .src-cell+.src-cell{border-left:1px solid var(--br)}
}
.src-cell::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease)}
.src-cell:hover::after{transform:scaleX(1)}
.src-n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;
  color:var(--ac);display:block;margin-bottom:var(--s5)}
.src-h{font-size:var(--t-h3);font-weight:500;letter-spacing:-.02em;
  line-height:1.1;margin-bottom:var(--s4)}
.src-p{color:var(--di);font-size:15px;line-height:1.6;max-width:40ch}
.src-note{margin-top:var(--s5);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}

/* ═══ THE REEL ═══════════════════════════════════════════ */
.reel-sec{padding-bottom:0}
.reel-grid{display:grid;gap:var(--s6)}
@media (min-width:960px){
  .reel-grid{grid-template-columns:1fr .8fr;gap:var(--s9);align-items:start}
}

/* the screen holds at the top of the window while the steps go past */
.reel-stage{position:sticky;top:88px;z-index:2}
@media (max-width:959px){
  /* On one column the steps pass directly underneath the pinned screen, so
     the band it sits in has to be opaque and full width. Without this the
     step text slides visibly through the gap above the panel. */
  .reel-stage{
    top:0;z-index:3;margin-bottom:var(--s6);
    padding:76px var(--gut) var(--s4);
    margin-inline:calc(var(--gut) * -1);
    background:var(--bg);
  }
}

.screen{border:1px solid var(--br);background:#0d0d0d;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);user-select:none}
.screen-bar{display:flex;align-items:center;gap:var(--s4);
  padding:11px 14px;border-bottom:1px solid var(--br);background:rgba(255,255,255,.02)}
.screen-dots{display:flex;gap:5px}
.screen-dots i{width:7px;height:7px;background:var(--br);display:block}
.screen-name{font-family:var(--mono);font-size:10px;color:var(--mu);letter-spacing:.12em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen-step{font-family:var(--mono);font-size:10px;color:var(--ac);letter-spacing:.16em;
  margin-left:auto;flex-shrink:0}

/* every scene is stacked in the same box; the active one fades up */
.screen-body{position:relative;height:min(58vh,420px);min-height:300px}
/* The outgoing scene clears out before the incoming one arrives, so the two
   are never on screen together. visibility keeps the faded ones out of the
   paint entirely rather than sitting invisible on top. */
.scene{position:absolute;inset:0;padding:16px;opacity:0;visibility:hidden;
  transform:translateY(10px);pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s}
.screen[data-scene="open"] .sc-open,
.screen[data-scene="grid"] .sc-grid,
.screen[data-scene="flag"] .sc-flag,
.screen[data-scene="sort"] .sc-sort,
.screen[data-scene="clip"] .sc-clip{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .34s .16s var(--ease),transform .34s .16s var(--ease),visibility 0s .16s}
/* without JS the first scene is simply the one on show */
html:not(.js) .sc-open{opacity:1;transform:none}

/* drawn stand-ins for photos */
.plate{position:relative;aspect-ratio:4/3;background:#1f1f1f;overflow:hidden}
.plate::before{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.13) 0 46%,rgba(255,255,255,.04) 46% 100%)}
.plate.b::before{background:linear-gradient(200deg,rgba(255,255,255,.16) 0 38%,rgba(255,255,255,.05) 38% 100%)}
.plate.c::before{background:linear-gradient(75deg,rgba(255,255,255,.06) 0 60%,rgba(255,255,255,.17) 60% 100%)}
.plate.d::before{background:linear-gradient(160deg,rgba(255,255,255,.05) 0 52%,rgba(255,255,255,.14) 52% 100%)}

/* 01 open */
.sc-open{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding:var(--s6)}
.open-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.fake-btn{padding:13px 26px;border:1px solid var(--bh);font-size:15px;color:var(--tx);
  position:relative;overflow:hidden}
.fake-btn::after{content:'';position:absolute;inset:0;background:var(--ac);opacity:0}
.screen[data-scene="open"] .fake-btn::after{animation:press 1.6s .5s var(--ease) infinite}
@keyframes press{0%,60%{opacity:0}12%{opacity:.26}30%{opacity:0}}
.or{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.fake-inp{flex:1 1 220px;min-width:0;padding:13px 14px;border:1px solid var(--br);
  font-family:var(--mono);font-size:11px;color:var(--di);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.open-hint{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mu);line-height:2}

/* 02–04 tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tiles.small{grid-template-columns:repeat(3,1fr)}
@media (max-width:520px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;opacity:0;transform:scale(.92);
  animation:tileIn .4s var(--ease) forwards;animation-delay:calc(var(--i) * .035s)}
@keyframes tileIn{to{opacity:1;transform:none}}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mu);
  padding:6px 11px;border:1px solid var(--br)}
.chip.on{color:var(--ac);border-color:var(--ab);background:var(--ad)}
.flag{position:absolute;top:5px;right:5px;width:18px;height:18px;font-size:10px;
  display:flex;align-items:center;justify-content:center;color:#fff;background:var(--ac);
  opacity:0;animation:tileIn .3s var(--ease) forwards;
  animation-delay:calc(.5s + var(--i) * .045s)}
.flag.no{background:rgba(255,255,255,.16);color:var(--di)}

/* 04 sort */
.sort-split{display:grid;grid-template-columns:1fr 190px;gap:var(--s4);height:100%}
@media (max-width:620px){.sort-split{grid-template-columns:1fr;gap:var(--s4)}}
.folders{display:flex;flex-direction:column;gap:8px}
.folders-h{font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mu)}
.folder{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border:1px solid var(--br);font-size:13px;color:var(--di)}
.folder span:last-child{font-family:var(--mono);font-size:9px;color:var(--mu)}
.folder.hot{border-color:var(--ab);color:var(--tx);background:var(--ad)}
.folder.hot span:last-child{color:var(--ac)}

/* 05 clip */
.sc-clip{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:var(--s5)}
.clip-stage{position:relative;aspect-ratio:24/9;background:#141414;border:1px solid var(--br);
  display:flex;align-items:center;justify-content:center}
.clip-stage::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.05) 0 44%,rgba(255,255,255,.015) 44%)}
.clip-play{position:relative;width:44px;height:44px;border:1px solid var(--bh);
  display:flex;align-items:center;justify-content:center;font-size:12px}
.clip-track{position:relative;height:42px;border:1px solid var(--br);background:rgba(255,255,255,.03)}
.clip-range{position:absolute;top:0;bottom:0;left:22%;width:0;background:var(--ad);
  border-inline:1px solid var(--ac)}
.screen[data-scene="clip"] .clip-range{animation:range .7s .35s var(--ease) forwards}
@keyframes range{to{width:36%}}
.clip-head{position:absolute;top:-5px;bottom:-5px;width:1px;background:var(--tx);left:10%}
.screen[data-scene="clip"] .clip-head{animation:head 4s .2s linear infinite}
@keyframes head{0%{left:10%}100%{left:88%}}
.clip-marks{display:flex;justify-content:space-between;gap:var(--s3);
  font-family:var(--mono);font-size:10px;color:var(--mu);letter-spacing:.1em}
.clip-marks .hot{color:var(--ac)}

/* the steps beside the screen */
.reel-steps{list-style:none;counter-reset:none}
.reel-step{padding:min(24vh,180px) 0;max-width:44ch}
.reel-step:first-child{padding-top:var(--s6)}
.reel-step:last-child{padding-bottom:min(30vh,220px)}
@media (max-width:959px){
  .reel-step{padding:min(16vh,110px) 0}
  .reel-step:first-child{padding-top:var(--s5)}
}
.reel-n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;
  color:var(--mu);display:block;margin-bottom:var(--s4);
  transition:color var(--dur) var(--ease)}
.reel-step.on .reel-n{color:var(--ac)}
.reel-h{font-size:clamp(24px,3.4vw,38px);font-weight:500;letter-spacing:-.03em;
  line-height:1.06;margin-bottom:var(--s4);color:var(--mu);
  transition:color .4s var(--ease)}
.reel-step.on .reel-h{color:var(--tx)}
.reel-p{font-size:16px;line-height:1.6;color:var(--mu);opacity:.6;
  transition:opacity .4s var(--ease)}
.reel-step.on .reel-p{opacity:1}
.reel-p em{font-style:normal;color:var(--tx)}

/* ── PROOF ──────────────────────────────────────────────── */
.proof{display:grid;border:1px solid var(--br)}
@media (min-width:820px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof-cell{padding:var(--s6);border-bottom:1px solid var(--br)}
.proof-cell:last-child{border-bottom:0}
@media (min-width:820px){
  .proof-cell{border-bottom:0;border-right:1px solid var(--br);padding:var(--s7) var(--s6)}
  .proof-cell:last-child{border-right:0}
}
.proof-h{font-size:19px;color:var(--tx);margin-bottom:var(--s3);font-weight:500;letter-spacing:-.01em}
.proof-p{font-size:14px;color:var(--mu);line-height:1.6}

/* ── SMALLER THINGS ─────────────────────────────────────── */
.extras{display:grid;border-top:1px solid var(--br);border-left:1px solid var(--br)}
@media (min-width:660px){.extras{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.extras{grid-template-columns:repeat(3,1fr)}}
.extra{padding:var(--s5) var(--s6);border-bottom:1px solid var(--br);
  border-right:1px solid var(--br);display:flex;flex-direction:column;gap:10px;
  transition:background var(--dur) var(--ease)}
.extra:hover{background:var(--sf)}
.extra-k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ac)}
.extra p{font-size:14px;color:var(--di);line-height:1.55}

/* ── CUTS, THE QUIET LINE ───────────────────────────────── */
.aside{border-top:1px solid var(--br);padding:var(--s8) 0}
.aside-in{display:grid;gap:var(--s4)}
@media (min-width:820px){.aside-in{grid-template-columns:auto 1fr;gap:var(--s7);align-items:baseline}}
.aside-l{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mu);white-space:nowrap}
.aside-t{font-size:17px;color:var(--di);line-height:1.55;max-width:64ch}
.aside-t b{color:var(--tx);font-weight:500}

/* ── CLOSING CTA ────────────────────────────────────────── */
.close{padding:var(--s10) 0;border-top:1px solid var(--br)}
.close-t{font-weight:500;font-size:var(--t-h1);line-height:1;
  letter-spacing:-.04em;margin-bottom:var(--s5);max-width:16ch}
.close-p{color:var(--di);max-width:44ch;margin-bottom:var(--s7);font-size:var(--t-lead)}
.close-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.close-actions .btn{flex:1 1 auto;min-width:190px}
@media (min-width:600px){.close-actions .btn{flex:0 0 auto}}

/* ── FOOTER ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--br);padding:var(--s6) 0 var(--s7)}
.foot-top{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-mark{width:18px;height:18px;fill:var(--ac)}
.foot-word{font-size:15px;font-weight:500;color:var(--tx)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.foot-links a{font-size:14px;color:var(--mu);text-decoration:none;
  transition:color var(--dur) var(--ease)}
.foot-links a:hover{color:var(--tx)}
.foot-bot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--br);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}

/* ── NO MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .scene{visibility:visible}
  .rv{opacity:1;transform:none}
  .mask>.ln{transform:none}
  .band-track{animation:none}
  .hero-inner{transform:none;opacity:1}
  .tile,.flag{opacity:1;transform:none;animation:none}
  .clip-range{width:36%;animation:none}
  .clip-head{animation:none}
  .reel-stage{position:static}
  .scene{position:relative;opacity:1;transform:none}
  .screen-body{height:auto}
}