/* Waveshift — Commercial page. Extends css/styles.css (base, nav, footer); same palette,
   type and spacing scale as the homepage. Layout rhythm: hero copy, the film at full
   content width, then an editorial project note, the offering, and the invitation. */

/* ---------- Scaffold ---------- */
.c-main{flex:1}

/* ---------- Hero ---------- */
.c-hero{padding:clamp(28px,5vh,72px) clamp(20px,4vw,56px) clamp(32px,4.5vw,64px);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.c-title{margin:0;font-family:'Climate Crisis',sans-serif;font-weight:400;font-size:clamp(32px,4.8vw,76px);line-height:1.02;color:#F0E9DC;max-width:1040px;text-wrap:balance}
.c-sub{margin:0;font:400 clamp(16px,1.3vw,19px)/1.55 'Archivo',sans-serif;color:#B5AC9D;max-width:540px;text-wrap:pretty}

/* ---------- Film ---------- */
.film{padding:0 clamp(20px,4vw,56px) clamp(72px,9vw,128px)}
.film-frame{position:relative;width:min(100%,1450px);margin:0 auto;aspect-ratio:16/9;background:#17110B;overflow:hidden;outline:1px solid rgba(240,233,220,0.07);outline-offset:-1px;box-shadow:0 48px 120px -48px rgba(0,0,0,.85)}
.film-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#17110B}
.film-poster{position:absolute;inset:0;display:block;pointer-events:none;transition:opacity .4s ease,visibility 0s linear 0s}
.film-poster img{width:100%;height:100%;display:block;object-fit:contain;background:#17110B}
.film-poster.is-hidden{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
/* Custom chrome exists only when scripting runs; without it the native controls stay usable. */
.film-poster,.film-surface,.film-bar,.film-seek{display:none}
.js .film-poster{display:block}
.js .film-surface{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.film-surface:focus-visible{outline-offset:-3px}
.film-surface span{font:500 13px 'Archivo',sans-serif;letter-spacing:.1em;color:#F0E9DC;border:1px solid rgba(240,233,220,0.3);padding:13px 22px;text-transform:uppercase;background:rgba(15,13,11,0.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,color .2s}
.film-surface:hover span{border-color:#FF5A1F;color:#FF5A1F}
.js .film-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:40px 16px 22px;background:linear-gradient(to top,rgba(15,13,11,.78),rgba(15,13,11,0));opacity:0;transition:opacity .3s ease;pointer-events:none}
.film-frame.show-bar .film-bar,.film-frame:has(:focus-visible) .film-bar{opacity:1}
.film-group{display:flex;align-items:center;gap:8px;min-width:0}
.film-btn{pointer-events:auto;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);-webkit-backdrop-filter:blur(6px);transition:border-color .2s,color .2s;white-space:nowrap}
.film-btn:hover{border-color:#FF5A1F;color:#FF5A1F}
.film-time{font:500 11px/1 'Archivo',sans-serif;letter-spacing:.1em;color:#B5AC9D;font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}
.js .film-seek{position:absolute;left:0;right:0;bottom:0;height:18px;display:block;cursor:pointer;touch-action:none;pointer-events:auto}
.film-seek::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(240,233,220,.16)}
.film-seek-fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:#FF5A1F}
.film-seek::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;transform:scaleY(1);transition:transform .2s ease}
.film-seek:hover .film-seek-fill,.film-seek:focus-visible .film-seek-fill{height:3px}
.film-seek:focus-visible{outline-offset:-2px}
.film-frame:fullscreen{width:100%;height:100%;aspect-ratio:auto;outline:0;box-shadow:none;background:#000}
.film-frame:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto;outline:0;box-shadow:none;background:#000}
.film-frame:fullscreen .film-video,.film-frame:-webkit-full-screen .film-video{background:#000}
@media(hover:none){.js .film-bar{opacity:1}}
@media(max-width:640px){.film{padding-left:0;padding-right:0}.film-frame{outline:0;box-shadow:none}.js .film-bar{padding:28px 10px 16px;gap:8px}.film-group{gap:6px}.film-btn{font-size:10px;letter-spacing:.08em;padding:8px 10px}.film-time{display:none}.film-surface span{font-size:12px;padding:11px 18px}}

/* ---------- Project (editorial note beneath the film) ---------- */
.project{padding:0 clamp(20px,4vw,56px) clamp(72px,9vw,128px)}
.project-rule{width:64px;height:2px;background:#FF5A1F;margin:0 auto clamp(56px,7vw,96px)}
.project-grid{max-width:1450px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.project-name{margin:0;font-family:'Climate Crisis',sans-serif;font-weight:400;font-size:clamp(40px,5vw,84px);line-height:1;color:#F0E9DC}
.project-meta{margin:16px 0 0;font:500 11px 'Archivo',sans-serif;letter-spacing:.18em;color:#FF5A1F;text-transform:uppercase}
.project-copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);max-width:680px}
.project-lede{margin:0;font:400 clamp(20px,1.9vw,28px)/1.35 'Archivo',sans-serif;color:#F0E9DC;text-wrap:pretty}
.project-body{margin:0;font:400 clamp(16px,1.3vw,19px)/1.55 'Archivo',sans-serif;color:#B5AC9D;text-wrap:pretty}
.project-facts{margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 24px;padding-top:24px;border-top:1px solid rgba(240,233,220,0.12)}
.project-facts div{display:flex;flex-direction:column;gap:6px}
.project-facts dt{font:500 11px 'Archivo',sans-serif;letter-spacing:.16em;color:#8a8072;text-transform:uppercase}
.project-facts dd{margin:0;font:400 15px/1.45 'Archivo',sans-serif;color:#F0E9DC}
.project-note{margin:0;font:400 13px/1.5 'Archivo',sans-serif;color:#8a8072}

/* ---------- Offering ---------- */
.services{padding:0 clamp(20px,4vw,56px) clamp(72px,9vw,128px)}
.services-inner{max-width:1450px;margin:0 auto}
.services-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.services-copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.services-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:760px;text-wrap:balance}
.services-sub{margin:0;font:400 clamp(16px,1.3vw,19px)/1.55 'Archivo',sans-serif;color:#B5AC9D;max-width:540px;text-wrap:pretty}
.service-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(240,233,220,0.12)}
.service{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.35fr);gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid rgba(240,233,220,0.12)}
.service .num{font:500 11px 'Archivo',sans-serif;letter-spacing:.16em;color:#FF5A1F}
.service h3{margin:0;font-family:'Climate Crisis',sans-serif;font-weight:400;font-size:clamp(18px,1.7vw,26px);line-height:1.15;color:#F0E9DC}
.service p{margin:0;font:400 clamp(15px,1.2vw,18px)/1.55 'Archivo',sans-serif;color:#B5AC9D;max-width:560px;text-wrap:pretty;transition:color .35s ease}
@media(hover:hover){.service:hover p{color:#F0E9DC}}

/* ---------- Invitation ---------- */
.c-contact{scroll-margin-top:24px;padding:clamp(64px,9vw,120px) clamp(20px,4vw,56px) clamp(64px,8vw,112px);border-top:1px solid rgba(240,233,220,0.12);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.c-contact-title{margin:0;font-family:'Climate Crisis',sans-serif;font-weight:400;font-size:clamp(28px,4.4vw,68px);line-height:1.04;color:#F0E9DC;max-width:1000px;text-wrap:balance}
.c-contact-sub{margin:0;font:400 clamp(16px,1.3vw,19px)/1.55 'Archivo',sans-serif;color:#B5AC9D;max-width:540px;text-wrap:pretty}
.c-contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:14px;font:500 13px 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#F0E9DC;border:1px solid rgba(240,233,220,0.4);padding:16px 24px;transition:border-color .2s,color .2s}
.btn:hover{border-color:#FF5A1F;color:#FF5A1F}
.btn .arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arrow{transform:translateX(4px)}
.c-contact-email{font:400 15px 'Archivo',sans-serif;color:#B5AC9D;border-bottom:1px solid rgba(240,233,220,0.3);padding-bottom:3px;transition:color .2s,border-color .2s}
.c-contact-email:hover{color:#FF5A1F;border-color:#FF5A1F}

/* ---------- Motion: scroll reveals and the film's entrance (none under reduced motion) ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .film-frame{opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .film-frame.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal,.js .film-frame{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .project-grid,.services-head{grid-template-columns:minmax(0,1fr)}
  .service{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"num title" "num desc";row-gap:10px}
  .service .num{grid-area:num}.service h3{grid-area:title}.service p{grid-area:desc}
}