/* =========================================================================
   The Reframe — hero intro (v8)  ·  layers live inside .hero
   ========================================================================= */
@font-face{font-family:'Caveat';src:url(../assets/fonts/Caveat-latin.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url(../assets/fonts/Oswald-latin.woff2) format('woff2');font-weight:200 700;font-display:swap}

.rf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rf > *{position:absolute}

/* ART layer — 1440×900 coordinate space, cover-fitted. Photo + blueprint stay registered. */
.rf-art{left:0;top:0;width:1440px;height:900px;transform-origin:0 0}
.rf-photo{inset:0;position:absolute;opacity:0;will-change:transform,opacity}
.rf-photo img{position:absolute;top:0;height:900px;max-width:none}
.rf-bp{position:absolute;inset:0;width:1440px;height:900px;overflow:visible}
.rf-bp line,.rf-bp circle,.rf-bp path{vector-effect:non-scaling-stroke}
/* Paths that draw on via pathLength must scale normally: Chromium ignores pathLength under
   non-scaling-stroke, so the mark and the circle showed half-drawn from frame 0. Widths are set in
   1440-space units by reframe.js, so they still render at about 1px. */
.rf-bp .mk path,.rf-bp .gc{vector-effect:none}

/* Atmosphere — fills the hero */
.rf-scrim{inset:0;opacity:0;background:
  linear-gradient(90deg,rgba(18,17,15,.9) 0%,rgba(18,17,15,.55) 32%,rgba(18,17,15,0) 55%),
  linear-gradient(0deg,rgba(18,17,15,.75),rgba(18,17,15,0) 32%)}
.rf-vignette{inset:0;background:radial-gradient(120% 90% at 60% 45%,transparent 55%,rgba(0,0,0,.55))}
.rf-grain{inset:-50%;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* DESK layer — 1440×900, contain-fitted. The noise. */
.rf-desk{left:0;top:0;width:1440px;height:900px;transform-origin:0 0}
.rf-paper{background-color:#ECE6DA;color:#1B1A18}
.rf-paper{
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%,rgba(0,0,0,.07)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .4 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:100% 100%,220px 220px;
}
.rf-note{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.rf-sticky{padding:16px 18px 18px;font:500 27px/1.02 var(--font-voice, 'Caveat', cursive);color:#2A2622;width:190px;min-height:150px}
.rf-sticky.c{background-color:#EFE7D6}.rf-sticky.t{background-color:#E3AD93}.rf-sticky.y{background-color:#E8DCA4}
.rf-sticky::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(rgba(0,0,0,.06),transparent)}
.rf-tape{padding:9px 14px 8px;font:500 30px/1 'Oswald',sans-serif;text-transform:uppercase;white-space:nowrap}
.rf-ping{width:300px;padding:12px 14px;border-radius:12px;background:#202122;border:1px solid rgba(255,255,255,.07);display:grid;grid-template-columns:30px 1fr;gap:10px;font:400 13px/1.35 var(--sans);color:rgba(240,236,227,.88)}
.rf-ping .av{width:30px;height:30px;border-radius:50%;background:#3A3633;display:grid;place-items:center;font:600 10px var(--sans);color:var(--ivory)}
.rf-ping b{display:flex;justify-content:space-between;font-weight:600;font-size:12px;margin-bottom:2px;color:var(--ivory)}
.rf-ping b i{font-style:normal;font-weight:400;color:#8B8780;font-size:11px}
.rf-big{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;padding:22px 30px 18px;font:600 82px/.95 'Oswald',sans-serif;text-transform:uppercase;white-space:nowrap;color:#1D1B18}
.rf-big .strike{position:absolute;left:14px;top:50%;width:calc(100% - 28px);height:9px;transform-origin:0 50%;transform:scaleX(0);overflow:visible}

/* TEXT layer — real page gutter, responsive type */
.rf .label{font-size:clamp(12px,.9vw,14px)}
.rf-text{inset:0}
.rf-text > *{position:absolute;left:var(--gut);opacity:0}
.rf-text > .rf-big{left:0;top:0}
.rf-tag{top:150px;color:rgba(240,236,227,.7);white-space:nowrap}
.rf-why{top:0;white-space:nowrap}
.rf-why .label{margin-bottom:22px;color:var(--ivory)}
.rf-why h2{font-weight:600;font-size:clamp(96px,11.6vw,168px);line-height:1;letter-spacing:-.045em}
.rf-cap{top:33%}
.rf-cap .label{color:var(--ivory)}
.rf-cap h2{margin-top:22px;font-weight:600;font-size:clamp(48px,5.3vw,76px);line-height:1;letter-spacing:-.035em;max-width:7.5ch}
.rf-rail{bottom:56px;top:auto;line-height:22px;white-space:nowrap}
.rf-rail div{color:rgba(240,236,227,.4);transition:color .4s}
.rf-rail div .num{display:inline-block;width:32px;opacity:.35;transition:opacity .4s}
.rf-rail div.on{color:var(--ivory)}
.rf-rail div.on .num{opacity:1}

.rf-skip{all:unset;position:absolute;right:var(--gut);top:32px;z-index:40;pointer-events:auto;cursor:pointer;white-space:nowrap;color:rgba(240,236,227,.55);border:1px solid rgba(240,236,227,.2);padding:12px 16px;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:color .2s,border-color .2s}
.rf-skip:hover,.rf-skip:focus-visible{color:var(--ivory);border-color:rgba(240,236,227,.45)}

/* Before JS takes over: hide settled UI only when the intro WILL play (set in <head>) */
html.rf-intro .hero .nav,
html.rf-intro .hero .hero-copy,
html.rf-intro .hero .hero-foot{opacity:0}

/* Portrait: the headline spans the full width over the photo, so the scrim lifts from the bottom too */
@media (max-aspect-ratio:1/1){
  .rf-scrim{background:
    linear-gradient(90deg,rgba(18,17,15,.75) 0%,rgba(18,17,15,.35) 60%,rgba(18,17,15,0) 85%),
    linear-gradient(0deg,rgba(18,17,15,.92) 0%,rgba(18,17,15,.72) 40%,rgba(18,17,15,0) 72%)}
}