/* Waveshift — styles transcribed from the approved Claude Design export
   (design-reference/Waveshift Minimal v2.dc.html). Values are kept verbatim. */

/* ---------- Self-hosted fonts (SIL Open Font License, see fonts/OFL-*.txt) ---------- */
@font-face{font-family:'Climate Crisis';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/climate-crisis-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Climate Crisis';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/climate-crisis-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:#0F0D0B;color:#F0E9DC;font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#F0E9DC;text-decoration:none}
a:hover{color:#FF5A1F}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #FF5A1F;outline-offset:3px}
[hidden]{display:none!important}

.page{min-height:100vh;display:flex;flex-direction:column}

/* ---------- Nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px clamp(20px,4vw,56px)}
.wordmark{font-family:'Climate Crisis',sans-serif;font-size:18px;color:#F0E9DC;padding:8px 0;display:inline-block}
.nav-cta{font:500 15px 'Archivo',sans-serif;color:#F0E9DC;border-bottom:1px solid rgba(240,233,220,0.3);padding:8px 0 3px;display:inline-block;transition:color .2s,border-color .2s}
.nav-cta:hover{color:#FF5A1F;border-bottom-color:#FF5A1F}

/* ---------- 01 Hero ---------- */
.hero{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:calc(clamp(48px,9vh,112px) + clamp(16px,4vw,50px)) clamp(20px,4vw,56px) 0;position:relative;overflow:hidden;min-height:calc(100vh - 86px);box-sizing:border-box}
.hero-copy{display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);position:relative;z-index:1;padding-bottom:clamp(40px,6vh,72px)}
.hero-title{margin:0;font-family:'Climate Crisis',sans-serif;font-weight:400;font-size:clamp(34px,5.6vw,88px);line-height:1.02;color:#F0E9DC;max-width:1180px;text-wrap:balance}
.accent{color:#FF5A1F}
.hero-sub{margin:0;font:400 clamp(16px,1.3vw,19px)/1.55 'Archivo',sans-serif;color:#B5AC9D;max-width:520px;text-wrap:pretty}
.wave-wrap{position:relative;height:clamp(140px,26vh,300px);margin:0 calc(-1 * clamp(20px,4vw,56px));flex-shrink:0}
.wave{position:absolute;inset:0;display:block}

/* ---------- 02 Sizzle reel ---------- */
.reel{padding:clamp(64px,9vh,128px) 3vw clamp(80px,10vw,144px);display:flex;justify-content:center}
.reel-frame{position:relative;width:min(100%,72vw,1100px);aspect-ratio:16/9;background:#17110B;overflow:hidden}
.reel-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#17110B 0 14px,#1C1613 14px 28px)}
.reel-placeholder span{font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#8a8072;text-transform:uppercase}
.reel-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#17110B}
.reel-poster{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#17110B;pointer-events:none}
.reel-play{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.reel-play:focus-visible{outline-offset:-3px}
.reel-play span{font:500 13px 'Archivo',sans-serif;letter-spacing:.08em;color:#F0E9DC;border:1px solid rgba(240,233,220,0.4);padding:12px 20px;text-transform:uppercase}
.reel-controls{position:absolute;right:16px;bottom:16px;display:flex;gap:8px}
.reel-mute{background:rgba(15,13,11,0.6);border:1px solid rgba(240,233,220,0.25);color:#F0E9DC;cursor:pointer;font:500 11px 'Archivo',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;backdrop-filter:blur(6px);transition:border-color .2s}
.reel-mute:hover{border-color:#FF5A1F;color:#FF5A1F}

/* ---------- 03 The approach ---------- */
.approach{padding:0 clamp(20px,4vw,56px) clamp(64px,8vw,112px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.eyebrow{margin:0;padding-top:6px;font:500 11px 'Archivo',sans-serif;letter-spacing:.18em;color:#FF5A1F}
.approach-copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.approach-title{margin:0;font-family:'Climate Crisis',sans-serif;font-weight:400;font-size:clamp(24px,3.2vw,48px);line-height:1.08;color:#F0E9DC;max-width:720px;text-wrap:balance}
.approach-sub{margin:0;font:400 clamp(16px,1.3vw,19px)/1.55 'Archivo',sans-serif;color:#B5AC9D;max-width:520px;text-wrap:pretty}

.process{padding:0 clamp(20px,4vw,56px) clamp(72px,10vw,140px)}
.stages{max-width:1450px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.ws-stage{margin:0;display:flex;flex-direction:column;gap:12px}
.ws-stage-media{aspect-ratio:16/9;position:relative;background:#17110B;overflow:hidden}
.ws-stage-img{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ws-stage-img img,.ws-stage-img video{position:absolute;inset:0;width:100%;height:100%;display:block}
.ws-stage-img img{object-fit:cover}
.ws-stage-img video{object-fit:contain;background:#17110B}
.ws-stage-veil{position:absolute;inset:0;background:rgba(15,13,11,0.55);opacity:0;transition:opacity .45s ease;pointer-events:none}
.ws-stage-desc{position:absolute;left:20px;right:20px;bottom:20px;margin:0;font:400 15px/1.45 'Archivo',sans-serif;color:#F0E9DC;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.ws-stage-cap{display:flex;gap:10px;align-items:baseline;font:500 11px 'Archivo',sans-serif;letter-spacing:.16em;color:#F0E9DC}
.ws-stage-cap .num{color:#FF5A1F}

/* ---------- 04 Contact + footer ---------- */
.contact{scroll-margin-top:24px;padding:clamp(64px,9vw,120px) clamp(20px,4vw,56px) clamp(56px,7vw,96px);border-top:1px solid rgba(240,233,220,0.12);display:flex;flex-direction:column;gap:20px;overflow:hidden}
.contact-label{margin:0;font:400 14px 'Archivo',sans-serif;color:#a89e8e}
.contact-email{font-family:'Climate Crisis',sans-serif;font-size:clamp(14px,min(4.6vw,(100vw - 2 * clamp(20px,4vw,56px)) / 13.8),72px);line-height:1.05;color:#F0E9DC;white-space:nowrap;transition:color .2s;align-self:flex-start}
.contact-email:hover{color:#FF5A1F}

.footer{padding:22px clamp(20px,4vw,56px) 28px;border-top:1px solid rgba(240,233,220,0.12);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font:400 13px 'Archivo',sans-serif;color:#8a8072}

/* ---------- Responsive + interaction + accessibility (verbatim from the design) ---------- */
@media(max-width:640px){.approach{grid-template-columns:minmax(0,1fr)}.reel-frame{width:100%}}
/* Hover: the approved export renders only the image zoom. Its veil and caption overlay rules are
   overridden by inline styles in the export, so they never show on hover or on touch devices.
   This matches that rendered behaviour exactly. */
@media(hover:hover){.ws-stage:hover .ws-stage-img{transform:scale(1.04)}}
/* Authored overlay rules from the export, kept for reference. Uncomment both lines to enable the
   dark veil + caption on hover (desktop) and always-on gradient + caption on touch / narrow screens.
@media(hover:hover){.ws-stage:hover .ws-stage-veil{opacity:1}.ws-stage:hover .ws-stage-desc{opacity:1;transform:none}}
@media(hover:none),(max-width:640px){.ws-stage .ws-stage-veil{opacity:1;background:linear-gradient(to top,rgba(15,13,11,.8),rgba(15,13,11,0) 55%)}.ws-stage .ws-stage-desc{opacity:1;transform:none}}
*/
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}