/* ==========================================================================
   Holloway x Graff — case study landing page
   One fixed stage; every section is a layer driven by scroll position (js/main.js)
   ========================================================================== */

@font-face{font-family:"Chronicle Display";src:url(../fonts/ChronicleDisp-Light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Chronicle Display";src:url(../fonts/ChronicleDisp-LightItal.woff) format("woff");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Chronicle Display";src:url(../fonts/ChronicleDisp-Roman.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Optima Web";src:url(../fonts/Optima-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
  --green:#08291f;          /* Graff deep green, sampled from the pitch decks */
  --teal:#134a44;
  --ink:#050706;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;   /* swap for Aktiv Grotesk when the web fonts arrive */
  --head:"Optima Web",Optima,Candara,"Segoe UI",sans-serif;   /* headlines: Optima, all caps */
  --serif:"Chronicle Display","Times New Roman",Georgia,serif;
  --eyetop:calc(15vh + env(safe-area-inset-top,0px));   /* every eyebrow sits here */
  --pad:max(clamp(22px,7vw,140px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
}

*{box-sizing:border-box}
html{background:#000;-webkit-text-size-adjust:100%;overscroll-behavior-y:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;background:#000;color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{display:block}
a{color:inherit}

#spacer{width:1px;pointer-events:none}
#stage{position:fixed;inset:0;overflow:hidden;background:#000}

/* ---------- layers ---------- */
.layer{position:absolute;inset:0;overflow:hidden;background:#000;visibility:hidden;opacity:0}
.layer.green{background:var(--green)}
.layer.teal{background:var(--teal)}

/* ---------- media ---------- */
.m{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity,transform}
.m img,.m video{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform-origin:var(--origin,50% 50%);will-change:transform}
.m.contain img,.m.contain video{object-fit:contain}
.m.scrim{background:#000}
.m.fade-t{background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.4) 24%,rgba(0,0,0,0) 46%)}
.m.fade-b{background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.34) 26%,rgba(0,0,0,0) 48%)}
.m.slide{background:#000}
.m .blurimg{position:absolute;inset:0;opacity:0;pointer-events:none}
.m .ghost{position:absolute;inset:0;opacity:0;pointer-events:none}

/* ---------- text slots ---------- */
.slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad);text-align:center;pointer-events:none}
.slot.top{justify-content:flex-start;padding-top:calc(clamp(96px,17vh,230px) + env(safe-area-inset-top,0px))}
.slot.top.ey{padding-top:calc(15vh + clamp(34px,5.2vh,60px) + env(safe-area-inset-top,0px))}
.slot.third{justify-content:flex-end;padding-bottom:calc(25vh + env(safe-area-inset-bottom,0px))}
.slot.bottom{justify-content:flex-end;padding-bottom:calc(clamp(70px,12vh,150px) + env(safe-area-inset-bottom,0px))}
.slot.gap{gap:clamp(18px,3.6vh,44px)}
.t{opacity:0;visibility:hidden;will-change:opacity,transform;max-width:min(100%,1180px);margin:0}

.h1{font:400 clamp(18px,2.96vw,51px)/1.12 var(--head);letter-spacing:.07em;text-transform:uppercase;text-wrap:balance}
@media (min-width:700px){.h1.one{white-space:nowrap;max-width:none}}
.quote{font:300 clamp(24px,3.9vw,66px)/1.14 var(--serif);letter-spacing:.01em;text-wrap:balance}
.quote.sz{font-size:clamp(21px,2.5vw,42px);line-height:1.2;max-width:min(100%,24em)}
.sub{font:700 clamp(21px,2.5vw,42px)/1.16 var(--sans);letter-spacing:-.016em;text-wrap:balance;max-width:min(100%,24em)}
.body{font:400 clamp(14px,.86vw + 7px,18px)/1.66 var(--sans);max-width:64ch;color:rgba(255,255,255,.94);text-wrap:pretty}
.body.big{font-size:clamp(16px,1.45vw,26px);line-height:1.58;max-width:48ch}
.body.big.wide{max-width:72ch}
.body.up{font-size:clamp(15.5px,calc(.86vw + 7.7px),19.8px)}
#s7 .sub,#s8 .sub,#s9 .sub,#s10 .sub,#s11 .sub,#s12 .sub{font-size:clamp(17px,2vw,34px)}
.credit{font:italic 300 clamp(16px,1.55vw,27px)/1.3 var(--serif);letter-spacing:.025em}
.credit.sm{font-size:clamp(14px,1.15vw,19px);opacity:.85}
.label{font:300 clamp(22px,2.4vw,42px)/1.1 var(--serif);letter-spacing:.045em}
.low{font:400 clamp(13px,1.25vw,24px)/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#fff;max-width:min(100%,60em)}
.name{font:400 clamp(14px,1.4vw,24px)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.role{font:400 clamp(11px,1.085vw,19px)/1.3 var(--serif);letter-spacing:.03em}
.rep{font:italic 300 clamp(10px,.8vw,13px)/1.3 var(--serif);letter-spacing:.03em;opacity:.85}
.s{text-shadow:0 1px 3px rgba(0,0,0,.22),0 2px 44px rgba(0,0,0,.45)}

.eyebrow{position:absolute;left:0;right:0;top:var(--eyetop);text-align:center;max-width:none;padding:0 var(--pad);
  font:700 clamp(10px,.8vw,13px)/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.eyebrow.s{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 26px rgba(0,0,0,.7)}
.cue{position:absolute;left:0;right:0;bottom:calc(clamp(14px,3vh,32px) + clamp(38px,6.4vh,58px) + env(safe-area-inset-bottom,0px) + 12px);text-align:center;max-width:none;
  font:400 clamp(10px,.8vw,12px)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.cue span{display:inline-block;animation:pulse 2.6s ease-in-out infinite}
.cue.first{opacity:0;animation:cuein .9s 3s ease forwards,pulse2 2.6s 3.9s ease-in-out infinite}
.cue.first span{animation:none}
@keyframes cuein{to{opacity:1}}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.caps.cr{height:1.4em;margin-top:clamp(8px,1.4vh,16px);font:inherit}
.caps.cr p{font:italic 300 clamp(14px,1.2vw,20px)/1.3 var(--serif);letter-spacing:.03em;opacity:.9}
.results{padding-top:4vh}
/* results: each fact sits under a keyline, in the type style of the funnel tracker (section 8) */
.stats{display:flex;justify-content:center;gap:clamp(14px,3.2vw,60px);max-width:96vw;text-align:left;font:700 clamp(10px,.82vw,13px)/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.stats span{display:block;padding-top:11px;border-top:1px solid rgba(255,255,255,.6)}
.stats b{display:block;margin-bottom:5px;font:italic 300 clamp(22px,2.2vw,38px)/1.1 var(--serif);letter-spacing:.02em;text-transform:none}
.credit.foot{margin-top:clamp(12px,3vh,34px);max-width:min(100%,46em)}
.logo-big{width:clamp(230px,30vw,470px);height:auto}

/* ---------- sticky logo (glass header) ---------- */
#logo{position:fixed;top:0;left:0;right:0;height:calc(clamp(100px,15vh,150px) + env(safe-area-inset-top,0px));z-index:30;pointer-events:none;opacity:0}
#logo::before{content:"";position:absolute;inset:0;
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  background:linear-gradient(to bottom,rgba(0,0,0,.46),rgba(0,0,0,.2) 55%,rgba(0,0,0,0));
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 38%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 38%,transparent 100%)}
#logo img{position:absolute;top:calc(clamp(20px,3.4vh,34px) + env(safe-area-inset-top,0px));left:50%;width:clamp(104px,9.5vw,160px);height:auto;transform:translateX(-50%);filter:drop-shadow(0 1px 14px rgba(0,0,0,.3))}

/* ---------- scroll prompt (hairline) ---------- */
#prompt{position:fixed;left:50%;bottom:calc(clamp(14px,3vh,32px) + env(safe-area-inset-bottom,0px));width:1px;height:clamp(38px,6.4vh,58px);z-index:30;pointer-events:none;transform:translateX(-50%);opacity:1}
#prompt i{position:absolute;inset:0;overflow:hidden;background:rgba(255,255,255,.26);opacity:0;animation:pin 1.2s 1.6s ease forwards}
#prompt i::after{content:"";position:absolute;left:0;top:-45%;width:1px;height:45%;background:#fff;animation:drip 2.3s cubic-bezier(.65,0,.3,1) infinite}
#prompt{transition:width .55s cubic-bezier(.5,0,.2,1),height .55s cubic-bezier(.5,0,.2,1)}
#prompt i{transition:border-radius .55s ease,background .4s ease,box-shadow .4s ease}
#prompt .rg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);opacity:0;transition:opacity .45s ease;overflow:visible}
#prompt .rg circle{fill:none;stroke-width:1.5}
#prompt .rg-t{stroke:rgba(255,255,255,.26)}
#prompt .rg-f{stroke:#fff;stroke-dasharray:128.8;stroke-dashoffset:128.8;transition:stroke-dashoffset .16s linear}
#prompt.ring{width:44px;height:44px}
#prompt.ring i{border-radius:50%;background:transparent;animation:none;opacity:1}
#prompt.ring i::after{opacity:0}
#prompt.ring .rg{opacity:1}
@keyframes pin{to{opacity:1}}
@keyframes drip{0%{transform:translateY(0)}100%{transform:translateY(340%)}}

/* ---------- section 4: the bezel facets of a brilliant cut (five kites round a table, turning slowly) ---------- */
.kites.m{--S:min(52vh,92vw);inset:auto;left:50%;top:53%;width:var(--S);height:var(--S);margin:calc(var(--S) / -2) 0 0 calc(var(--S) / -2);will-change:transform,opacity}
.kites .m{inset:0;filter:drop-shadow(0 0 1px rgba(255,255,255,.55))}
.kites .k{position:absolute;left:calc(50% - var(--S) * .24);top:0;width:calc(var(--S) * .48);height:50%;transform-origin:50% 100%;transform:rotate(calc(var(--i) * 72deg));
  clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);background:var(--col);opacity:.5}
.kites .k::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 50%)}
.kites .k::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 46%)}
.kites .lb{position:absolute;left:50%;top:50%;transform-origin:0 0;white-space:nowrap;
  transform:rotate(calc(var(--i) * 72deg)) translateY(calc(var(--S) * -.31)) rotate(calc(var(--i) * -72deg - var(--spin,0) * 1deg)) translate(-50%,-50%);
  font:400 clamp(15px,3.1vh,34px)/1 var(--serif);letter-spacing:.05em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.kites .tbl{position:absolute;left:calc(50% - var(--S) * .07);top:calc(50% - var(--S) * .07);width:calc(var(--S) * .14);height:calc(var(--S) * .14);
  clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%);background:rgba(255,255,255,.18)}
.caps{position:relative;width:100%;height:2.6em;font:700 clamp(18px,2.1vw,34px)/1.2 var(--sans)}
.caps p{position:absolute;left:0;right:0;top:0;margin:0;letter-spacing:-.012em}
.caps p.t{max-width:none}
.caps p.label{letter-spacing:.045em}

/* ---------- section 8: one horizontal module (screenshots, films, billboards, POS) ---------- */
.m.press{--h:min(46vh,78vw);background:#080908;display:flex;align-items:center;padding-top:7vh}
.track{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);padding:0 11vw 0 calc(50vw - var(--h) * .4);will-change:transform}
.track>*{flex:none;height:var(--h);width:auto;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.track>img{width:auto;height:var(--h);object-fit:contain}
.track .v{overflow:hidden;aspect-ratio:var(--ar);background:#0b0e0d}
.track .v video{width:100%;height:100%;object-fit:cover}
.track>:nth-child(even){margin-top:9vh}
.track>:nth-child(odd){margin-bottom:9vh}
.track>:first-child{margin:0}
.funnel{display:flex;gap:clamp(14px,3.2vw,60px);max-width:96vw;text-align:left}
.funnel span{display:block;padding-top:11px;border-top:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.44);transition:color .6s ease,border-color .6s ease;font:700 clamp(10px,.82vw,13px)/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.funnel span em{display:block;margin-top:5px;font:italic 300 clamp(14px,1.2vw,20px)/1.2 var(--serif);letter-spacing:.03em;text-transform:none}
.funnel span.on{color:#fff;border-top-color:#fff}

/* ---------- text and washes timed to a film's own clock (data-vat) ---------- */
.vt{opacity:0;visibility:hidden;transform:translate3d(0,26px,0);transition:opacity .9s ease,transform .9s ease,visibility 0s linear .9s}
.vt.vis{opacity:1;visibility:visible;transform:none;transition-delay:var(--vd,0s),var(--vd,0s),0s}
.m.vt{transform:none}
.m.vt.vis{opacity:var(--max,1)}

/* ---------- section 9: market sites film (scrubbed by scroll) ---------- */
.m.market{background:radial-gradient(120% 90% at 50% 40%,#10211b 0%,#050807 70%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:clamp(60px,11vh,130px)}
@media (max-width:700px) and (max-aspect-ratio:2/3){.m.market{justify-content:center;padding-bottom:0}}
.frame{position:relative;width:min(88vw,96vh);aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0b0e0d;box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12)}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- debug HUD (press D) ---------- */
#hud{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));top:calc(10px + env(safe-area-inset-top,0px));z-index:99;padding:8px 10px;background:rgba(0,0,0,.72);color:#9fe6c8;font:11px/1.5 ui-monospace,Menlo,monospace;border-radius:6px;pointer-events:auto;max-width:300px}
#hud-o{white-space:pre-line;margin:4px 0 6px;color:#fff;min-height:1.5em}
#hud[hidden]{display:none}
#hud a{color:#fff;margin-right:6px;text-decoration:none}
#hud a:hover{text-decoration:underline}

/* ---------- small screens ---------- */
@media (max-width:820px){
  .stats{flex-direction:column;gap:10px;align-items:flex-start;width:min(88vw,330px)}
  .stats span{display:flex;align-items:baseline;gap:12px;padding-top:7px;width:100%}
  .stats b{display:inline;margin:0;min-width:3.2em;font-size:clamp(22px,6vw,30px)}
  .slot.top{padding-top:calc(clamp(92px,15vh,160px) + env(safe-area-inset-top,0px))}
  .body{font-size:15px}
  .body.big{font-size:17px}
  .funnel{flex-direction:column;gap:10px;align-items:flex-start;text-align:left}
  .funnel span{padding-top:7px;display:flex;align-items:baseline;gap:10px}
  .funnel span em{display:inline;margin:0}
  .m.press{--h:min(40vh,70vw)}
}
@media (prefers-reduced-motion:reduce){
  #prompt i::after{animation:none}
  .cue.first{animation:cuein .9s 3s ease forwards}
}

/* picture shown whole and smaller, centred between the title and the label (S7 still life); edges feather into the black */
.m.slide.fit{display:flex;align-items:center;justify-content:center;top:9vh;bottom:-9vh}
.m.slide.fit img{flex:none;width:min(160vw,114vh);height:auto;aspect-ratio:2200/1927;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
.m picture{display:contents}
/* phones, portrait */
@media (max-width:700px) and (max-aspect-ratio:2/3){
  #s6 .h1{font-size:21.6px}
  .m.slide.fit{top:11vh;bottom:-11vh}
  #s13 .h1{font-size:18px!important}
}