/* Tori Contracting / global stylesheet. Linked from /includes/head-global.html. */
/* Montserrat (self-hosted, latin subset) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/montserrat-300.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-800.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/montserrat-900.woff2') format('woff2')}
/* Phosphor icons: subset of the glyphs this site uses */
@font-face{font-family:'Phosphor';font-weight:normal;font-style:normal;font-display:block;src:url('/fonts/phosphor-subset.woff2') format('woff2')}
.ph{font-family:'Phosphor'!important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;letter-spacing:0;-webkit-font-smoothing:antialiased;display:inline-block}
.ph-arrow-right:before{content:"\e06c"}
.ph-arrow-up-right:before{content:"\e092"}
.ph-caret-left:before{content:"\e138"}
.ph-caret-right:before{content:"\e13a"}
.ph-caret-down:before{content:"\e136"}
.ph-list:before{content:"\e2f0"}
.ph-x:before{content:"\e4f6"}
.ph-phone:before{content:"\e3b8"}
.ph-envelope-simple:before{content:"\e218"}
.ph-map-pin:before{content:"\e316"}
.ph-instagram-logo:before{content:"\e2d0"}
.ph-linkedin-logo:before{content:"\e2ee"}
.ph-facebook-logo:before{content:"\e226"}
.ph-warning-circle:before{content:"\e4e2"}
.ph-check-circle:before{content:"\e184"}
.ph-image:before{content:"\e2ca"}
.ph-timer:before{content:"\e492"}
.ph-currency-circle-dollar:before{content:"\e54c"}
.ph-seal-check:before{content:"\e606"}
.ph-ruler:before{content:"\e6b8"}
.ph-hard-hat:before{content:"\ed46"}
.ph-buildings:before{content:"\e102"}
.ph-wall:before{content:"\e688"}
.ph-pause:before{content:"\e39e"}
.ph-play:before{content:"\e3d0"}

/* ==========================================================
   TORI CONTRACTING / Homepage draft v3 "Dark gallery"
   Canvas: black-navy. Surfaces: Tori navy. Ink: white. Accent: Tori gold.
   Shape rule: media + cards 28px, controls full pill, textarea 20px.
   Motion: GSAP ScrollTrigger, scrubbed so every set piece reverses on scroll up.
   Without JS or with reduced motion, every section renders as a static layout.
   ========================================================== */
:root{
  --bg:#050E18;
  --navy:#0C223A;
  --gold:#FCB813;
  --white:#FFFFFF;
  --ink-2:rgba(255,255,255,.66);
  --ink-3:rgba(255,255,255,.44);
  --dim:rgba(255,255,255,.16);
  --hair:rgba(255,255,255,.1);
  --hair-2:rgba(255,255,255,.22);
  --lift:rgba(255,255,255,.04);

  --font:'Montserrat', Arial, sans-serif;
  --r-card:28px; --r-pill:999px; --r-field:20px;
  --wrap:1280px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --edge:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  --section:clamp(6rem,11vw,10rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:56px;
  --z-nav:40; --z-menu:50;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 12px);background:var(--bg)}
body{background:var(--bg);color:var(--white);font-family:var(--font);font-weight:400;font-size:17px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--gold);color:var(--navy);padding:.7rem 1rem;border-radius:var(--r-pill);z-index:100;font-weight:800}
.skip:focus{top:.75rem}

/* type */
.display{font-weight:800;font-size:clamp(2.6rem,min(5.8vw,9.5vh),5.2rem);line-height:1.04;letter-spacing:-.045em}
.h2{font-weight:800;font-size:clamp(2.1rem,4.4vw,3.8rem);line-height:1.05;letter-spacing:-.04em}
.h3{font-weight:800;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.08;letter-spacing:-.035em}
.kicker{font-weight:800;font-size:clamp(1rem,1.35vw,1.25rem);letter-spacing:-.01em;color:var(--gold)}
.intro{font-weight:300;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.4;letter-spacing:-.015em;color:var(--ink-2)}
.muted{color:var(--ink-2)}

/* controls */
.pill{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;border-radius:var(--r-pill);padding:.8rem 1.45rem;font-size:.9375rem;cursor:pointer;border:1px solid transparent;transition:background .3s var(--ease),color .3s,border-color .3s,transform .15s}
.pill:active{transform:scale(.97)}
.pill--gold{background:var(--gold);color:var(--navy)}
.pill--gold:hover{background:var(--white);color:var(--navy)}
.pill--sm{padding:.45rem .95rem;font-size:.8125rem}
.tlink{display:inline-flex;align-items:center;gap:.3rem;color:var(--white);background-image:linear-gradient(var(--gold),var(--gold));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
.tlink i{color:var(--gold);font-size:.95em;transition:transform .3s var(--ease)}
.tlink:hover{background-size:100% 2px}
.tlink:hover i{transform:translateX(3px)}

/* media + visible placeholders (real <img> sits on top when it loads) */
.media{position:relative;overflow:hidden;border-radius:var(--r-card);aspect-ratio:var(--ar,16/9);isolation:isolate;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.045) calc(10% - 1px) 10%),linear-gradient(155deg,#1B3A5A 0%,#0C223A 55%,#071521 100%)}
.media .fill{position:absolute;inset:0}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;color:transparent;font-size:0}
.ph-label{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.35rem;text-align:center;padding:1.5rem;color:var(--ink-2);font-size:.875rem}
.ph-label i{font-size:1.75rem;color:var(--gold)}
.ph-label b{font-weight:800;color:var(--white);font-size:.9375rem;letter-spacing:-.01em}

/* ========== NAV ========== */
.nav{position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:var(--z-nav);background:rgba(5,14,24,.7);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);border-bottom:1px solid var(--hair)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav__logo img{height:34px;width:auto}
.nav__links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav__links > li{position:relative}
.nav__links > li > a{font-size:.8125rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 0;transition:color .2s}
.nav__links > li > a:hover{color:var(--white)}
.nav__links i{font-size:.7rem}
.flyout{position:absolute;top:calc(100% + .6rem);left:50%;translate:-50% 0;width:300px;list-style:none;background:rgba(12,34,58,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--hair);border-radius:20px;padding:.75rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav__links > li:hover .flyout,.nav__links > li:focus-within .flyout{opacity:1;visibility:visible;transform:none}
.flyout a{display:block;padding:.6rem .85rem;border-radius:12px;font-size:.9375rem;font-weight:800;letter-spacing:-.015em;transition:background .2s,color .2s}
.flyout a:hover{background:var(--lift);color:var(--gold)}
.nav__toggle{display:none;background:none;border:0;font-size:1.5rem;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:900px){.nav__links,.nav__cta{display:none}.nav__toggle{display:inline-flex}}
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;z-index:var(--z-menu);background:var(--bg);color:var(--white);padding:calc(var(--nav-h) + 1rem) var(--gutter) 2rem;overflow-y:auto}
.menu:popover-open{display:block}
.menu::backdrop{background:var(--bg)}
.menu__close{position:absolute;top:6px;right:var(--gutter);width:44px;height:44px;background:none;border:0;font-size:1.5rem;cursor:pointer}
.menu a.big{display:block;font-weight:800;font-size:1.9rem;letter-spacing:-.04em;padding:.5rem 0}
.menu .sub a{display:block;color:var(--ink-2);padding:.3rem 0}
.menu .pill{margin-top:1.5rem;display:inline-flex}

/* ========== 1. HERO: looping video, then photo rises over it ========== */
.hero__video{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.hero__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero__video .vid-ph{position:absolute;inset:-6%;background:
    radial-gradient(60% 50% at 30% 40%,rgba(252,184,19,.14),transparent 60%),
    radial-gradient(50% 60% at 75% 65%,rgba(27,58,90,.9),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 calc(8% - 1px),rgba(255,255,255,.04) calc(8% - 1px) 8%),
    linear-gradient(160deg,#10263F,#050E18);animation:drift 18s ease-in-out infinite alternate}
.hero__video .vid-ph span{position:absolute;left:50%;bottom:7%;translate:-50% 0;display:flex;align-items:center;gap:.6rem;font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.hero__video .vid-ph i{color:var(--gold);font-size:1.1rem}
.hero__video::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(60% 55% at 50% 50%,rgba(5,14,24,.45),transparent 75%),linear-gradient(to bottom,rgba(5,14,24,.6),rgba(5,14,24,.4) 45%,rgba(5,14,24,.8))}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-2%,1.5%)}}
.vid-toggle{position:absolute;right:var(--edge);bottom:1.5rem;z-index:4;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair-2);background:rgba(5,14,24,.5);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;font-size:1rem;transition:background .2s,color .2s}
.vid-toggle:hover{background:var(--gold);color:var(--navy)}
.hero{text-align:center;position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h);overflow:hidden}
.hero__text{position:relative;z-index:3;padding-inline:var(--gutter)}
.hero__text .kicker{color:rgba(255,255,255,.8);margin-bottom:1rem}
.hero__text .intro{color:rgba(255,255,255,.82)}
.hero__text .display span{color:var(--gold)}
.hero__text .intro{margin:1.4rem auto 1.9rem;max-width:34ch}
.hero__ctas{display:flex;gap:1.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
.hero__frame{position:relative;z-index:3;margin:clamp(3rem,6vw,4.5rem) var(--edge) var(--section)}
.hero__frame .media{--ar:21/9}
.hero__caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(1.5rem,4vw,3.5rem) var(--edge);text-align:left;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  background:linear-gradient(to top,rgba(5,14,24,.85),rgba(5,14,24,0));border-radius:0 0 var(--r-card) var(--r-card)}
.hero__caption .h2{max-width:14ch}
.hero__caption p{color:var(--ink-2);max-width:34ch}
@media (max-width:700px){.hero__frame .media{--ar:4/5}.hero__frame{margin-inline:var(--gutter)}}

/* motion layout (class added by JS only when animation runs) */

/* ========== 2. STATEMENT: words light up ========== */
.statement{padding-block:var(--section)}
.statement .kicker{margin-bottom:1.5rem}
.statement__text{font-weight:800;font-size:clamp(1.9rem,4.3vw,3.9rem);line-height:1.12;letter-spacing:-.04em;max-width:22ch}
.statement__text .w{opacity:1}
.statement__text .hl{color:var(--gold)}
.statement__body{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;margin-top:clamp(3rem,6vw,5rem)}
.statement__body p{grid-column:6 / 12;color:var(--ink-2);font-size:1.0625rem}
.sectors{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
.sector{padding:1.75rem;border-radius:var(--r-card);background:var(--navy)}
.sector i{font-size:1.6rem;color:var(--gold);display:block;margin-bottom:2.5rem}
.sector b{display:block;font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.sector span{font-size:.9375rem;color:var(--ink-2)}
@media (max-width:900px){.statement__body{grid-template-columns:1fr}.statement__body p{grid-column:1 / -1}.sectors{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.sectors{grid-template-columns:1fr}}

/* ========== 3. SERVICES: horizontal pan ========== */
.pan{padding-block:var(--section) calc(var(--section) - 2rem);overflow:hidden}
.pan__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2rem,4vw,3rem)}
.pan__head .intro{margin-top:.75rem;max-width:36ch}
.pan__progress{height:2px;background:var(--hair);margin:0 var(--edge) 2rem;position:relative;display:none}
.pan__progress span{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.pan__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(290px,80vw,460px);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--edge);scroll-padding-inline:var(--edge)}
.pan__track::-webkit-scrollbar{display:none}
.svc{scroll-snap-align:start;background:var(--navy);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.svc .media{--ar:4/3;border-radius:0}
.svc .media .fill{inset:0 -10%}
.svc__copy{padding:clamp(1.5rem,2.5vw,2.25rem);display:flex;flex-direction:column;gap:.75rem;flex:1}
.svc__copy p{color:var(--ink-2);font-size:1rem}
.svc__copy .tlink{margin-top:auto;padding-top:.75rem;align-self:flex-start}

/* ========== 4. PREFAB: pieces assemble ========== */
.asm{padding-block:var(--section);background:linear-gradient(var(--bg),var(--navy) 18%,var(--navy) 82%,var(--bg))}
.asm__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.asm__copy .h2{margin:1rem 0 1.25rem}
.steps{margin-top:2.5rem;position:relative}
.step{padding:1.25rem 0;border-top:1px solid var(--hair-2)}
.step i{font-size:1.75rem;color:var(--gold);display:block;margin-bottom:.75rem}
.step b{display:block;font-weight:800;font-size:1.5rem;letter-spacing:-.035em;margin-bottom:.35rem}
.step p{color:var(--ink-2)}
.ticks{display:none;gap:.5rem;margin-top:2rem}
.ticks span{flex:1;height:3px;border-radius:3px;background:var(--hair-2);overflow:hidden;position:relative}
.ticks span::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left}
.asm__stage{position:relative;aspect-ratio:1/1;max-height:74vh;width:100%;margin-inline:auto}
.piece{position:absolute}
.piece .media{height:100%;aspect-ratio:auto}
.p1{left:0;top:0;width:57%;height:100%}
.p2{right:0;top:0;width:40%;height:48.5%}
.p3{right:0;bottom:0;width:40%;height:48.5%}
.asm__seal{position:absolute;inset:-10px;border:2px solid var(--gold);border-radius:36px;opacity:0;pointer-events:none}
@media (max-width:899px){.asm__grid{grid-template-columns:1fr}.asm__stage{max-height:none}}

/* ========== 5. PROJECTS: parallax columns ========== */
.work{padding-block:var(--section);overflow:hidden}
.work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.work__head .intro{margin-top:.75rem;max-width:40ch}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.col{display:grid;gap:1.25rem}
.col:nth-child(2){margin-top:6rem}
.tile{display:block}
.tile .media{transition:transform .6s var(--ease)}
.tile .media img{transition:transform 1.2s var(--ease)}
.tile:hover .media img{transform:scale(1.05)}
.tile figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem .25rem 0}
.tile figcaption b{font-weight:800;font-size:1.125rem;letter-spacing:-.025em}
.tile figcaption span{font-size:.875rem;color:var(--ink-2)}
@media (max-width:900px){.cols{grid-template-columns:1fr 1fr}.col:nth-child(2){margin-top:0}.col:nth-child(3){grid-column:1 / -1;grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cols,.col:nth-child(3){grid-template-columns:1fr}}

/* ========== 6. CONTACT ========== */
.contact{padding-block:var(--section)}
.contact__head{text-align:center;margin-bottom:3rem}
.contact__head .intro{margin-top:1rem}
.contact__grid{display:grid;grid-template-columns:5fr 7fr;gap:1.25rem}
.panel{background:var(--navy);border-radius:var(--r-card);padding:clamp(1.75rem,3.5vw,3rem)}
.panel--info{display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;background:linear-gradient(160deg,#12304F,var(--navy) 60%);border:1px solid var(--hair)}
.panel--info .h3{max-width:12ch}
.panel--info .h3 span{color:var(--gold)}
.dl{display:grid;gap:1.5rem}
.dl > div{display:grid;grid-template-columns:2.25rem 1fr}
.dl i{font-size:1.35rem;margin-top:.1rem;color:var(--gold)}
.dl dt{font-size:.8125rem;color:var(--ink-2)}
.dl dd{font-weight:800;letter-spacing:-.02em;font-size:1.0625rem}
.dl dd a:hover{color:var(--gold)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1 / -1}
.field label{font-size:.875rem;font-weight:800;letter-spacing:-.01em}
.field label em{font-style:normal;color:var(--ink-3);font-weight:400}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--hair-2);border-radius:var(--r-pill);padding:.85rem 1.2rem;font-size:1rem;color:var(--white);transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.field textarea{border-radius:var(--r-field);min-height:140px;resize:vertical}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.75rem}
.field select option{background:var(--navy)}
.field ::placeholder{color:rgba(255,255,255,.6)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(252,184,19,.3)}
.field .help{font-size:.8125rem;color:var(--ink-2)}
.field .err{display:none;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:800;color:var(--gold)}
.field:has(:user-invalid) input,.field:has(:user-invalid) textarea{border-color:var(--gold);border-width:2px}
.field:has(:user-invalid) .err{display:flex}
.form__actions{grid-column:1 / -1;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:.25rem}
.form__actions .pill{padding:.95rem 1.8rem;font-size:1rem}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* ========== FOOTER ========== */
.footer{border-top:1px solid var(--hair);padding:3.5rem 0 2rem;font-size:.8125rem;color:var(--ink-2)}
.footer__top{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid var(--hair)}
.footer__brand img{height:40px;width:auto;margin-bottom:1rem}
.footer__brand p{max-width:40ch;line-height:1.55}
.footer h4{font-size:.8125rem;font-weight:800;color:var(--white);margin-bottom:.9rem;letter-spacing:-.01em}
.footer ul{list-style:none;display:grid;gap:.55rem}
.footer a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.footer address{font-style:normal;display:grid;gap:.55rem}
.social{display:flex;gap:.5rem;margin-top:1.25rem}
.social a{width:36px;height:36px;border-radius:50%;background:var(--lift);border:1px solid var(--hair);display:grid;place-items:center;font-size:1.05rem;color:var(--white);transition:background .2s,color .2s}
.social a:hover{background:var(--gold);color:var(--navy);text-decoration:none}
.legal{padding-top:1.5rem;display:grid;gap:.6rem;font-size:.75rem;line-height:1.6;color:var(--ink-3)}
.legal b{font-weight:800;color:var(--ink-2)}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1 / -1}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ========== INNER PAGE SHELL (temporary until each template is built) ========== */
.page-hero{padding:calc(var(--nav-h) + clamp(4rem,9vw,7rem)) 0 var(--section);min-height:60vh}
.page-hero .kicker{margin-bottom:1rem}
.page-hero .intro{margin-top:1.25rem;max-width:44ch}

/* ========== UTILITIES (replace inline style attributes) ========== */
.ar-1x1{--ar:1/1}.ar-4x3{--ar:4/3}.ar-4x5{--ar:4/5}.ar-16x9{--ar:16/9}
.d1{--i:1}.d2{--i:2}.d3{--i:3}

/* ==========================================================
   SCROLL CHOREOGRAPHY (pure CSS scroll-driven animations)
   Every effect is tied to scroll position, so it plays forward on the way
   down and reverses on the way up. Browsers without support, and anyone with
   reduced motion turned on, get the static layout defined above.
   ========================================================== */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* entrance reveals */
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .reveal.d1{animation-range:entry 8% entry 78%}
  .reveal.d2{animation-range:entry 16% entry 86%}
  .reveal.d3{animation-range:entry 24% entry 94%}

  /* 1. hero: text lifts away, photo rises over the video and opens to full bleed */
  :root{--clip-start:inset(18% 5% 18% 5% round 24px)}
  .scene--hero{height:290vh;view-timeline-name:--hero;view-timeline-inset:0}
  .scene--hero > .hero{position:sticky;top:0;height:100dvh;padding:0;overflow:hidden;display:block}
  .hero__text{position:absolute;left:0;right:0;top:50%;translate:0 -46%;z-index:3}
  .hero__frame{position:absolute;inset:0;margin:0;z-index:4}
  .hero__frame .media{aspect-ratio:auto;height:100%;border-radius:0}
  .hero__caption{border-radius:0}
  .hero__text,.hero__frame,.hero__frame .fill,.hero__video,.hero__caption,.vid-toggle{animation-timeline:--hero;animation-range:contain 0% contain 100%;animation-fill-mode:both;animation-duration:1ms}
  .hero__text{animation-name:hero-text;animation-timing-function:linear}
  .hero__frame{animation-name:hero-frame;animation-timing-function:linear}
  .hero__frame .fill{animation-name:hero-fill;animation-timing-function:linear}
  .hero__video{animation-name:hero-video;animation-timing-function:linear}
  .hero__caption{animation-name:hero-caption;animation-timing-function:linear}
  .vid-toggle{animation-name:fade-early;animation-timing-function:linear}

  /* 2. statement: words light up in reading order */
  .statement__text{view-timeline-name:--stmt;view-timeline-inset:0}
  .statement__text .w{opacity:.16;animation:word-on linear both;animation-timeline:--stmt}
  .statement__text .w:nth-child(1){animation-range:cover 8.0% cover 13.9%}
  .statement__text .w:nth-child(2){animation-range:cover 10.7% cover 16.5%}
  .statement__text .w:nth-child(3){animation-range:cover 13.3% cover 19.2%}
  .statement__text .w:nth-child(4){animation-range:cover 16.0% cover 21.9%}
  .statement__text .w:nth-child(5){animation-range:cover 18.7% cover 24.5%}
  .statement__text .w:nth-child(6){animation-range:cover 21.3% cover 27.2%}
  .statement__text .w:nth-child(7){animation-range:cover 24.0% cover 29.9%}
  .statement__text .w:nth-child(8){animation-range:cover 26.7% cover 32.5%}
  .statement__text .w:nth-child(9){animation-range:cover 29.3% cover 35.2%}
  .statement__text .w:nth-child(10){animation-range:cover 32.0% cover 37.9%}
  .statement__text .w:nth-child(11){animation-range:cover 34.7% cover 40.5%}
  .statement__text .w:nth-child(12){animation-range:cover 37.3% cover 43.2%}
  .statement__text .w:nth-child(13){animation-range:cover 40.0% cover 45.9%}
  .statement__text .w:nth-child(14){animation-range:cover 42.7% cover 48.5%}
  .statement__text .w:nth-child(15){animation-range:cover 45.3% cover 51.2%}
  .statement__text .w:nth-child(16){animation-range:cover 48.0% cover 53.9%}
  .statement__text .w:nth-child(17){animation-range:cover 50.7% cover 56.5%}
  .statement__text .w:nth-child(18){animation-range:cover 53.3% cover 59.2%}

  /* 5. projects: columns drift at different speeds */
  .cols{view-timeline-name:--cols;view-timeline-inset:0}
}
}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  :root{--clip-start:inset(14% 18% 14% 18% round 28px)}

  /* 3. services: vertical scroll drives a horizontal pan.
        Scroll length is calculated from card width, gap and page edge, so the
        last card lands exactly at the right edge. */
  :root{
    --card-w:clamp(340px,30vw,470px);
    --pan-gap:1.25rem;
    --pan-dist:calc(6 * var(--card-w) + 5 * var(--pan-gap) + 2 * var(--edge) - 100vw + 1rem);
  }
  .scene--pan{height:calc(100vh + var(--pan-dist));view-timeline-name:--pan;view-timeline-inset:0}
  .scene--pan > .pan{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 1.5rem) 1.5rem}
  .pan__progress{display:block}
  .pan__progress span{animation:grow-x linear both;animation-timeline:--pan;animation-range:contain 0% contain 100%}
  .pan__track{display:flex;gap:var(--pan-gap);overflow:visible;scroll-snap-type:none;width:max-content;
    animation:pan-x linear both;animation-timeline:--pan;animation-range:contain 0% contain 100%}
  .svc{width:var(--card-w);flex:none}
  /* photo height follows screen height so the whole card always fits while pinned */
  .scene--pan .svc .media{aspect-ratio:auto;height:clamp(120px,calc(100dvh - 40rem),380px)}
  .scene--pan .pan__head{margin-bottom:1.5rem;width:100%}
  .scene--pan .pan__progress{margin-bottom:1.5rem}
  .svc .fill{animation:drift-x linear both;animation-timeline:--pan;animation-range:contain 0% contain 100%}

  @media (max-height:760px){
    .scene--pan .pan__head .intro{display:none}
    .scene--pan .svc__copy{padding:1.25rem 1.5rem}
    .scene--pan .svc__copy p:not(.kicker){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  }

  /* 4. prefab: panels fly in and lock together while the benefits step through */
  .scene--asm{height:320vh;view-timeline-name:--asm;view-timeline-inset:0}
  .scene--asm > .asm{position:sticky;top:0;height:100dvh;padding-block:calc(var(--nav-h) + 1rem) 1rem;display:flex;align-items:center}
  .asm .wrap{width:100%}
  .steps{height:9.5rem}
  .step{position:absolute;inset:0}
  .ticks{display:flex}
  .p1,.p2,.p3,.asm__seal,.asm__stage,.step,.ticks span::after{animation-timeline:--asm;animation-fill-mode:both;animation-duration:1ms}
  .p1{animation-name:piece-1;animation-range:contain 0% contain 56%;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  .p2{animation-name:piece-2;animation-range:contain 14% contain 69%;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  .p3{animation-name:piece-3;animation-range:contain 28% contain 83%;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  .asm__seal{animation-name:seal;animation-range:contain 83% contain 100%;animation-timing-function:linear}
  .asm__stage{animation-name:stage;animation-range:contain 0% contain 100%;animation-timing-function:linear}
  .step:nth-child(1){animation-name:step-1;animation-range:contain 0% contain 100%;animation-timing-function:linear}
  .step:nth-child(2){animation-name:step-2;animation-range:contain 0% contain 100%;animation-timing-function:linear}
  .step:nth-child(3){animation-name:step-3;animation-range:contain 0% contain 100%;animation-timing-function:linear}
  .ticks span::after{animation-name:grow-x;animation-timing-function:linear}
  .ticks span:nth-child(1)::after{animation-range:contain 0% contain 33%}
  .ticks span:nth-child(2)::after{animation-range:contain 33% contain 67%}
  .ticks span:nth-child(3)::after{animation-range:contain 67% contain 100%}

  /* 5. projects parallax */
  .col{animation:col-drift linear both;animation-timeline:--cols;animation-range:cover 0% cover 100%}
  .col:nth-child(1){--sp:-1}
  .col:nth-child(2){--sp:1}
  .col:nth-child(3){--sp:-.6}
}
}

@keyframes reveal{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes hero-text{0%{opacity:1;transform:none}32%,100%{opacity:0;transform:translateY(-40%) scale(.92)}}
@keyframes hero-frame{
  0%,9%{transform:translateY(100%);clip-path:var(--clip-start);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  50%{transform:translateY(0);clip-path:var(--clip-start);animation-timing-function:ease-in-out}
  92%,100%{transform:translateY(0);clip-path:inset(0% 0% 0% 0% round 0px)}}
@keyframes hero-fill{0%,9%{transform:scale(1.3)}92%,100%{transform:scale(1)}}
@keyframes hero-video{0%,9%{transform:none;opacity:1}60%,100%{transform:scale(.94);opacity:.35}}
@keyframes hero-caption{0%,80%{opacity:0;transform:translateY(60px)}100%{opacity:1;transform:none}}
@keyframes fade-early{0%{opacity:1}9%,100%{opacity:0;visibility:hidden}}
@keyframes word-on{to{opacity:1}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pan-x{to{transform:translateX(calc(-1 * var(--pan-dist)))}}
@keyframes drift-x{from{transform:translateX(6%)}to{transform:translateX(-6%)}}
@keyframes piece-1{from{transform:translate(-70%,12%) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes piece-2{from{transform:translate(30%,-120%) rotate(10deg);opacity:0}to{transform:none;opacity:1}}
@keyframes piece-3{from{transform:translate(40%,120%) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes seal{from{opacity:0}to{opacity:1}}
@keyframes stage{from{transform:scale(.96)}to{transform:scale(1)}}
@keyframes step-1{0%,33%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(-20px)}}
@keyframes step-2{0%,39%{opacity:0;transform:translateY(20px)}47%,67%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-20px)}}
@keyframes step-3{0%,72%{opacity:0;transform:translateY(20px)}81%,100%{opacity:1;transform:none}}
@keyframes col-drift{from{transform:translateY(calc(110px * var(--sp,0)))}to{transform:translateY(calc(-110px * var(--sp,0)))}}