/* Procuro motion prototype
   Layout idea: film-led chapters on near-black, broken by paper "reading" sections. */
:root{
  --black:#0e0e0e; --black-2:#171615; --paper:#f3efe8; --ink:#141414; --muted:#6b6760; --line:#ddd6ca;
  --on-black:#f2efea; --on-black-muted:#a29d95;
  --source:#2f3e9e; --build:#8a6410; --minerals:#1f6f6b; --stone:#a4553f;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --label:Montserrat, "Helvetica Neue", Arial, sans-serif;
  --gut:clamp(16px, 4vw, 56px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{background:var(--black)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--black);color:var(--on-black);font-family:var(--serif);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{padding-inline:var(--gut);max-width:1600px;margin:0 auto}
.label{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.idx{display:flex;align-items:center;gap:12px;margin:0 0 28px;color:var(--muted)}
.idx b{display:inline-grid;place-items:center;min-width:30px;height:20px;border:1px solid currentColor;border-radius:2px;font-size:10px;letter-spacing:.1em;font-weight:600}
.idx.light{color:var(--on-black-muted)}
.paper{background:var(--paper);color:var(--ink)}
.h2{font-weight:400;font-size:clamp(34px,4.6vw,68px);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
.body{font-size:18px;max-width:52ch;color:#3a3833}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block;will-change:transform}

/* Loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--black);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:var(--gut)}
.loader-mark{width:min(360px,62vw);height:auto;opacity:0}
.loader-row{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--gut) + 18px);display:flex;justify-content:space-between;font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.22em;color:var(--on-black-muted)}
.loader-count{font-variant-numeric:tabular-nums;color:var(--on-black)}
.loader-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);height:1px;background:#2b2a28}
.loader-bar i{display:block;height:100%;width:100%;background:var(--on-black);transform:scaleX(0);transform-origin:left}
body.is-loading{overflow:hidden}

/* Header */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gut);mix-blend-mode:difference;color:#fff;pointer-events:none}
.hd>*{pointer-events:auto}
.hd-mark img{width:150px;height:auto}
.hd-nav{display:flex;gap:30px;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.22em}
.hd-nav a{position:relative;padding:4px 0}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hd-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.pill{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 22px;border:1px solid currentColor;border-radius:999px;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.2em;overflow:hidden;isolation:isolate}
.pill::before{content:"";position:absolute;inset:0;background:currentColor;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.pill span{transition:color .3s}
.pill:hover::before{transform:none}
.pill:hover span{color:var(--black)}
.hd .pill:hover span{color:#000}
.pill.solid{background:var(--on-black);color:var(--black);border-color:var(--on-black)}
.pill.solid::before{background:var(--stone)}
.pill.solid:hover span{color:#fff}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--black)}
.hero-media{position:absolute;inset:0;will-change:clip-path}
.hero-video{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.28) 35%,rgba(10,10,10,.4) 60%,rgba(10,10,10,.85) 100%)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) calc(var(--gut) + 8px)}
.hero-eyebrow{color:rgba(255,255,255,.75);margin:0 0 18px}
.hero-title{font-weight:300;font-size:clamp(52px,10.4vw,176px);line-height:.92;letter-spacing:-.035em;margin:0;color:#fff}
.hero-title em{font-style:italic;font-weight:300}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:34px;border-top:1px solid rgba(255,255,255,.28);padding-top:18px}
.hero-lede{max-width:46ch;margin:0;font-size:17px;color:rgba(255,255,255,.86)}
.hero-scroll{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.8);white-space:nowrap}
.tick{width:1px;height:34px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.tick::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:#fff;animation:tick 1.8s var(--ease) infinite}
@keyframes tick{to{top:100%}}

/* Thesis */
.thesis{padding:clamp(96px,14vw,200px) 0 clamp(72px,9vw,130px)}
.thesis-text{font-weight:300;font-size:clamp(30px,4.4vw,66px);line-height:1.14;letter-spacing:-.02em;margin:0;max-width:1300px}
.thesis-text .w{color:#c9c1b4;transition:color .25s}
.thesis-text .w.on{color:var(--ink)}
.chip{display:inline-block;vertical-align:-.12em;width:1.9em;height:.82em;border-radius:999px;overflow:hidden;margin:0 .08em;position:relative;background:#d8d0c3}
.chip img{width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(72px,9vw,128px);border-top:1px solid var(--line)}
.proof>div{padding:22px 20px 0 0;display:flex;flex-direction:column;gap:10px}
.proof>div+div{padding-left:20px;border-left:1px solid var(--line)}
.proof-n{font-weight:300;font-size:clamp(38px,4.6vw,72px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof .label{color:var(--muted);font-size:10px}

/* Reel */
.reel{position:relative;background:var(--black)}
.reel-pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.reel-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gut);will-change:transform;align-items:stretch}
.reel-intro{flex:0 0 min(560px,80vw);display:flex;flex-direction:column;justify-content:center;padding-right:4vw}
.reel-h{font-weight:300;font-size:clamp(36px,4.2vw,64px);line-height:1.04;letter-spacing:-.025em;margin:0}
.reel-hint{margin-top:40px;color:var(--on-black-muted);display:flex;gap:10px;align-items:center}
.reel-hint span{display:inline-block;animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.panel{flex:0 0 min(1080px,78vw);height:min(76vh,720px);display:grid;grid-template-columns:1.25fr 1fr;background:var(--c);border-radius:6px;overflow:hidden;position:relative}
.panel-media{position:relative;overflow:hidden;background:#000}
.panel-media img,.panel-media video{position:absolute;top:-3%;left:-6%;width:112%;height:106%;object-fit:cover;max-width:none;will-change:transform}
.panel-body{display:flex;flex-direction:column;padding:clamp(24px,3vw,44px);color:#fff}
.panel-body .label{color:rgba(255,255,255,.72);font-size:10px}
.panel-name{font-weight:300;font-size:clamp(56px,7.4vw,124px);line-height:.9;letter-spacing:-.04em;margin:auto 0 18px}
.panel-name i{font-style:normal;opacity:.55}
.panel-line{font-size:22px;line-height:1.25;margin:0 0 10px;font-weight:600}
.panel-text{margin:0 0 26px;color:rgba(255,255,255,.82);max-width:36ch}
.panel-cta{align-self:flex-start;font-size:10.5px;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:6px;transition:gap .4s,padding .4s}
.panel-cta::after{content:"  →"}
.panel-cta:hover{padding-right:10px}
.reel-progress{position:absolute;left:var(--gut);right:var(--gut);bottom:28px;display:flex;align-items:center;gap:20px;color:var(--on-black-muted)}
.reel-bar{flex:1;height:1px;background:#2b2a28}
.reel-bar i{display:block;height:100%;background:var(--on-black);transform:scaleX(0);transform-origin:left}

/* Index */
.index{position:relative;padding:clamp(96px,12vw,170px) 0}
.index-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;align-items:end;margin-bottom:56px}
.index-head .idx{margin:0;align-self:start}
.index-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.index-list li{position:relative;display:grid;grid-template-columns:60px minmax(0,1.4fr) minmax(0,1fr) 120px;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);cursor:default;transition:padding .5s var(--ease),color .3s}
.index-list li::before{content:"";position:absolute;inset:0;background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.index-list li>*{position:relative;z-index:1}
.ix-n{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);transition:color .3s}
.ix-name{font-weight:300;font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-.025em}
.ix-use{color:var(--muted);font-size:16px;transition:color .3s}
.ix-v{justify-self:end;color:var(--c);font-size:10px;transition:color .3s}
.ix-thumb{display:none}
@media (hover:hover) and (min-width:961px){
  .index-list li:hover{padding-left:20px;padding-right:20px;color:#fff}
  .index-list li:hover::before{transform:scaleY(1);transform-origin:top}
  .index-list li:hover .ix-n,.index-list li:hover .ix-use,.index-list li:hover .ix-v{color:rgba(255,255,255,.85)}
}
.index-float{position:fixed;left:0;top:0;width:300px;height:220px;border-radius:4px;overflow:hidden;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.6);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.index-float img{width:100%;height:100%;object-fit:cover}

/* Slabs */
.slabs{position:relative;background:var(--black)}
.slabs-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.slabs-stack{position:absolute;inset:0}
.slab{position:absolute;inset:0;margin:0;overflow:hidden;clip-path:inset(100% 0 0 0)}
.slab:first-child{clip-path:inset(0 0 0 0)}
.slab img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.slabs-copy{position:absolute;z-index:6;left:var(--gut);bottom:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.slabs-pin::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.62));pointer-events:none;z-index:5}
.slabs-copy>p.label{position:absolute;bottom:calc(100% + 18px);left:0}
.slabs-h{font-weight:300;font-size:clamp(48px,8vw,132px);line-height:.92;letter-spacing:-.035em;margin:0}
.slabs-names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:right;font-size:10.5px}
.slabs-names li{opacity:.55;transition:opacity .4s}
.slabs-names li.on{opacity:1}

/* Verify */
.verify{padding:clamp(96px,12vw,170px) 0}
.verify-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(40px,8vw,140px);align-items:center}
.verify .body{margin-top:24px}
.tag{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(20,20,20,.35)}
.tag-hd{display:flex;justify-content:space-between;background:var(--minerals);color:#fff;font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.18em;padding:12px 18px}
.tag-row{display:flex;justify-content:space-between;gap:20px;padding:14px 18px;border-top:1px solid var(--line);font-family:var(--label);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.tag-row span:first-child{color:var(--muted)}
.stamp{display:inline-block;border:1.5px solid var(--minerals);color:var(--minerals);font-weight:600;letter-spacing:.2em;font-size:11px;padding:4px 10px;border-radius:2px}

/* Map */
.map{position:relative;background:var(--black)}
.map-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.map-canvas{position:absolute;inset:0;width:100%;height:100%}
.map-copy{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.map-copy .idx{grid-column:1/-1;margin:0}
.map-h{font-weight:300;font-size:clamp(44px,6.6vw,110px);line-height:.95;letter-spacing:-.035em;margin:0}
.map-words{display:flex;flex-direction:column;gap:14px}
.map-words p{margin:0;font-size:18px;color:var(--on-black-muted);border-top:1px solid #2b2a28;padding-top:14px}
.map-words b{color:var(--on-black);font-weight:600}

/* Road */
.road{position:relative;height:88vh;min-height:480px;overflow:hidden;background:#000}
.road-media{position:absolute;inset:-10% 0}
.road-media img,.road-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05)}
.marquee{position:absolute;left:0;right:0;bottom:8%;overflow:hidden;color:#fff;mix-blend-mode:difference;white-space:nowrap}
.marquee-in{display:inline-flex;will-change:transform}
.marquee span{font-weight:300;font-size:clamp(56px,9vw,160px);letter-spacing:-.035em;padding-right:.3em}

/* Close */
.close{background:var(--black);padding:clamp(110px,14vw,220px) 0 0}
.close-h{font-weight:300;font-size:clamp(56px,11vw,190px);line-height:.9;letter-spacing:-.045em;margin:0}
.close-lede{max-width:46ch;font-size:19px;color:var(--on-black-muted);margin:36px 0 34px}
.close-btns{display:flex;flex-wrap:wrap;gap:12px}
.ft{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(90px,10vw,160px);padding:22px var(--gut) 90px;border-top:1px solid #2b2a28;font-family:var(--label);font-size:11px;font-weight:500;color:var(--on-black-muted)}

/* Brief tags (prototype only) */
:where([data-brief]){position:relative}
[data-brief]::after{content:attr(data-brief);position:absolute;z-index:5;right:12px;top:12px;font-family:var(--label);font-weight:600;font-size:9.5px;letter-spacing:.14em;color:#141414;background:#f2e46b;padding:5px 8px;border-radius:2px;white-space:nowrap;pointer-events:none;transition:opacity .3s}
.chip[data-brief]::after{display:none;top:50%;right:auto;left:50%;transform:translate(-50%,-50%);font-size:8px;padding:2px 4px}
.slab[data-brief]::after{top:96px}
.hero-media[data-brief]::after{top:auto;bottom:calc(var(--gut) + 170px)}
[data-status="keep"]::after{background:#bfe3c6}
[data-status="reshoot"]::after{background:#f2c27b}
body.no-brief [data-brief]::after{opacity:0}
.brief-tag{position:absolute;right:8px;top:8px;font-family:var(--label);font-weight:600;font-size:9px;letter-spacing:.14em;color:#141414;background:#f2e46b;padding:4px 7px;border-radius:2px}
body.no-brief .brief-tag{display:none}
.proto{position:fixed;z-index:60;left:12px;bottom:12px;display:flex;gap:8px;align-items:center;background:rgba(14,14,14,.86);backdrop-filter:blur(8px);color:#f2efea;padding:6px 6px 6px 12px;border-radius:999px;border:1px solid #333}
.proto .label{font-size:9px;letter-spacing:.16em}
.proto-btn{font:inherit;cursor:pointer;background:#f2e46b;color:#141414;border:0;border-radius:999px;padding:7px 10px}
.proto-btn.label{font-family:var(--label);font-weight:600;font-size:9px;letter-spacing:.16em}

/* Tablet and phone */
@media (max-width:960px){
  .hd .pill{height:38px;padding:0 16px;font-size:10px}
  .hd-mark img{width:120px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-scroll{display:none}
  .hero-media[data-brief]::after{bottom:auto;top:84px;right:var(--gut)}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof>div:nth-child(3){border-left:0;padding-left:0}
  .proof>div:nth-child(n+3){margin-top:24px}
  .reel-pin{height:auto;padding:90px 0 40px}
  .reel-track{flex-direction:column;gap:18px}
  .reel-intro{flex:none;padding:0 0 20px}
  .reel-hint,.reel-progress{display:none}
  .panel{flex:none;height:auto;grid-template-columns:1fr}
  .panel-media{aspect-ratio:4/3}
  .panel-name{margin-top:16px}
  .index-head{grid-template-columns:1fr;gap:16px}
  .index-list li{grid-template-columns:44px minmax(0,1fr) 84px;grid-template-areas:"n name thumb" "n use thumb";row-gap:6px;padding:18px 0}
  .ix-n{grid-area:n;align-self:start;padding-top:8px}
  .ix-name{grid-area:name}
  .ix-use{grid-area:use;font-size:14px}
  .ix-v{display:none}
  .ix-thumb{display:block;grid-area:thumb;width:84px;height:64px;border-radius:3px;overflow:hidden}
  .ix-thumb img{width:100%;height:100%;object-fit:cover}
  .index-float{display:none}
  .slabs-pin{height:auto}
  .slabs-stack{position:static;display:grid;gap:2px}
  .slab{position:relative;inset:auto;clip-path:none!important;aspect-ratio:4/3}
  .slab img{transform:none!important}
  .slabs-copy{position:relative;left:auto;bottom:auto;right:auto;padding:56px var(--gut);mix-blend-mode:normal;flex-direction:column;align-items:flex-start}
  .slabs-copy>p.label{position:static}
  .slabs-names{text-align:left;display:none}
  .slab[data-brief]::after{top:12px}
  .slabs-pin::after{display:none}
  .verify-grid{grid-template-columns:1fr}
  .map-copy{grid-template-columns:1fr;gap:24px}
  .road{height:62vh}
  .proto .label:first-child{display:none}
}
@media (max-width:520px){
  .hero-title{font-size:clamp(46px,14vw,70px)}
  .thesis-text{font-size:28px}
  .proof-n{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .tick::after,.reel-hint span{animation:none}
  .hero-video{transform:none}
}

/* Hamburger + full-screen menu */
.hd-right{display:flex;align-items:center;gap:14px}
.burger{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px 0 18px;border:1px solid currentColor;border-radius:999px;background:none;color:inherit;cursor:pointer;font:inherit}
.burger-label{font-size:11px;min-width:44px;text-align:left}
.burger-lines{position:relative;width:32px;height:32px;border-radius:50%;background:currentColor;display:block}
.burger-lines i{position:absolute;left:9px;right:9px;height:1.5px;background:#000;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger-lines i:first-child{top:12px}.burger-lines i:last-child{top:18px}
body.menu-open .burger-lines i:first-child{top:15px;transform:rotate(45deg)}
body.menu-open .burger-lines i:last-child{top:15px;transform:rotate(-45deg)}
body.menu-open .hd{mix-blend-mode:normal;color:#f2efea}
body.menu-open .hd-quote{opacity:0;pointer-events:none}
.hd-quote{transition:opacity .3s}
.menu{position:fixed;inset:0;z-index:45;background:#0e0e0e;color:#f2efea;clip-path:inset(0 0 100% 0);overflow:auto;overscroll-behavior:contain}
.menu-grid{min-height:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding:100px var(--gut) 40px;align-items:center}
.menu-links{display:flex;flex-direction:column;border-top:1px solid #2b2a28}
.menu-links a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid #2b2a28;transition:color .35s}
.mn{color:#6f6a63;font-size:10px}
.ml{display:block;overflow:hidden}
.ml span{display:block;font-weight:300;font-size:clamp(38px,min(6vw,9vh),88px);line-height:1;letter-spacing:-.035em;transition:transform .5s var(--ease)}
.md{color:#a29d95;font-size:15px;text-align:right}
.menu-links a:hover .ml span,.menu-links a:focus-visible .ml span{transform:translateX(18px);color:var(--c)}
.menu-side{display:flex;flex-direction:column;gap:32px}
.menu-preview{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:#1a1a1a}
.menu-preview img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.menu-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;font-size:14px;color:#a29d95}
.menu-meta p{margin:0}.menu-meta .label{color:#f2efea;font-size:10px;margin-bottom:8px}
@media (max-width:960px){
  .menu-grid{grid-template-columns:1fr;align-items:start;padding-top:96px}
  .menu-preview{display:none}
  .md{display:none}
  .menu-links a{grid-template-columns:40px minmax(0,1fr)}
  .menu-meta{grid-template-columns:1fr;gap:14px}
}
@media (max-width:520px){ .hd-quote{display:none} }
/* Index row notes are shown in the hover image instead */
.index-list li[data-brief]::after{display:none}