@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600&family=Saira+Condensed:wght@500;600;700&display=swap");
:root{--paper:#F4F1E9;--ink:#141414;--red:#E5202A;--cyan:#23BFE6;--gut:clamp(20px,5vw,72px);--max:1280px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}a{color:inherit;text-decoration:none}
.diag{height:13px;background:repeating-linear-gradient(115deg,#50b4ff 0 16px,var(--ink) 16px 22px,#005487 22px 46px,#50b4ff 46px 58px,var(--ink) 58px 63px,#005487 63px 77px,#50b4ff 77px 109px,var(--ink) 109px 121px,#005487 121px 135px)}/* blue motif, varied bar widths + varied dark (ink) blank gaps */
/* menu pops up from the BOTTOM (slides up on scroll); paper backdrop fades up so links read over any content */
.head{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:flex-end;justify-content:space-between;padding:13px var(--gut);opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .35s ease,transform .35s ease,background .3s,border-color .3s;border-top:1px solid transparent;background:var(--paper)}
.head.show{opacity:1;transform:none;pointer-events:auto}
.head.solid{border-top:1px solid rgba(20,20,20,.12)}
.head .logo{height:28px;width:auto;position:relative;z-index:1}
.nav{position:relative;z-index:1;display:flex;gap:22px;padding-bottom:12px}
.nav a{font-family:"Bebas Neue",sans-serif;font-size:21px;letter-spacing:.05em;text-transform:uppercase;color:#444;cursor:pointer}
.nav a:hover{color:var(--ink)}.nav a.on{color:var(--red)}
/* bars motif under the nav: a faint full-width rail of diagonal bars, plus a bright accent (.nav-ink) that slides to the hovered/active link. Same 115deg + wordmark blues as the logo. */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;opacity:.30;pointer-events:none;background:repeating-linear-gradient(115deg,#50b4ff 0 8px,transparent 8px 12px,#005487 12px 20px,transparent 20px 24px)}
.nav-ink{position:absolute;left:0;bottom:0;z-index:1;height:6px;width:0;transform:translateX(0);pointer-events:none;background:repeating-linear-gradient(115deg,#50b4ff 0 8px,#005487 8px 16px);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
@media(max-width:640px){.nav{gap:14px}.nav a{font-size:17px}}
/* hero photo cropped to its middle 80% (10% off top + bottom) -> shorter hero, quicker scroll. aspect-ratio = photoW / (photoH*0.8); hero-photo.jpg is 1300x1300 -> 1300/1040. */
.hero{position:relative}
.bg{position:relative;z-index:0;overflow:hidden;aspect-ratio:1300/1040}
.bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:brightness(1.1)}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(8,8,11,.40),rgba(8,8,11,.02) 48%,rgba(8,8,11,.24))}
/* second bar band: full-screen container; JS fills it with individual wordmark bars (one <svg>) that
   rise from the bottom with random per-bar stagger and converge onto the wordmark's band, in the gaps
   beside it (the wordmark's own slot is skipped, so no overlap). */
.toprail{position:fixed;inset:0;z-index:40;pointer-events:none}
.center{position:fixed;left:0;right:0;top:2vh;z-index:45}
.center .inner{max-width:var(--max);margin:0 auto;padding:0 var(--gut);color:#fff}
.eyebrow{font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:#7fc6ff;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";display:inline-block;width:46px;height:9px;background:repeating-linear-gradient(115deg,#50b4ff 0 8px,transparent 8px 12px,#005487 12px 20px,transparent 20px 24px)}
.wordmark{display:block;width:min(720px,86%);height:auto;margin-top:20px;margin-left:auto;overflow:visible}/* inline SVG knockout wordmark. margin-left:auto right-aligns it in the centered .inner (same distance from the right as it had from the left). overflow:visible lets the .bar polygons travel up past the box into the rule during dispersal. The 9 bars are animated individually on scroll in js/index.js */
.wordmark .bar{will-change:transform,opacity}
/* non-literal scroll cue: JS spawns real bars (random x in a central band, random size + blue) that slowly rise from the bottom of the first screen and off the top — solid (no fade) — foreshadowing the rising-bars effect. No word/arrow. */
.cue{position:absolute;top:0;left:0;right:0;height:100svh;z-index:3;pointer-events:none;overflow:hidden}
.cuebar{position:absolute;top:0;will-change:transform}
.cuebar svg{display:block;width:100%;height:auto}
@keyframes cueup{from{transform:translateY(calc(100svh + 40px))}to{transform:translateY(-280px)}}
.film{position:relative;width:100%;height:100svh;overflow:hidden;background:#0c0c0c}
.film video{width:100%;height:100%;object-fit:cover;display:block}
.film .fscrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(8,8,11,.55),rgba(8,8,11,0) 32%)}
/* "see photos" graphic -> gallery, bottom-right of the video; dark-blue shadow; hover nudges it down-right and darkens */
.seephotos{position:absolute;right:var(--gut);bottom:64px;z-index:3;display:none;width:clamp(204px,26vw,336px)}
.seephotos .sp-svg{display:block;width:100%;height:auto;overflow:visible}
.seephotos polygon,.seephotos polyline{transition:transform .4s cubic-bezier(.2,.85,.25,1)}
/* slide each bar along its own 115deg axis (unit ~0.49,-0.872), alternating up-slant / down-slant, so they pass each other without overlapping */
.seephotos:hover .b1{transform:translate(9.6px,-16.8px)}
.seephotos:hover .b2{transform:translate(-9.6px,16.8px)}
.seephotos:hover .b3{transform:translate(9.6px,-16.8px)}
.seephotos:hover .b4{transform:translate(-9.6px,16.8px)}
.seephotos:hover .b5{transform:translate(9.6px,-16.8px)}
.seephotos:hover .b6{transform:translate(-9.6px,16.8px)}
.sec{padding:clamp(56px,9vh,104px) 0}
.intro{display:flex;align-items:baseline;gap:16px;margin-bottom:30px;flex-wrap:wrap}
.intro h2{font-family:"Saira Condensed",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(42px,6vw,80px);line-height:1}
.intro .lead{font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.ph-copy{max-width:56ch;color:#34322d}
.foot{padding:46px var(--gut);background:var(--ink);color:#bdbab2;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;font-family:"Bebas Neue",sans-serif;font-size:12px}
.foot .logo{height:30px}
@media(prefers-reduced-motion:reduce){.cuebar{animation:none}.nav-ink{transition:none}}