/* ==========================================================================
   SPI PRODUCTS — design system v4 (CMS build)
   Archivo (variable width) with an Instrument Serif italic accent.
   Colours from the SPI Products Brand Guide (May 2022):
     SPI Products #1 (primary)  #0C7D7C   SPI Products #2 (secondary)  #057270
     Ashe Green (accent)        #A5C8C8   White (base)                 #FFFFFF
   Hidden-until-revealed states live behind .js; without JS the page is complete.

   contrast-pairs [
     ["t1","paper",7],["t2","paper",4.5],["t3","paper",4.5],["teal","paper",4.5],
     ["t1","paper-2",7],["t2","paper-2",4.5],["t3","paper-2",4.5],
     ["t1","ashe",7],["t2","ashe",4.5],["teal-deep","white",4.5],
     ["d1","teal",4.5],["d2","teal",4.5],["d3","teal",4.5],
     ["d1","teal-deep",4.5],["d2","teal-deep",4.5],["d3","teal-deep",4.5],["mint","teal-deep",3],
     ["d1","ink",7],["d2","ink",4.5],["d3","ink",4.5],["mint","ink",4.5]
   ] */

/* ---------- 1. TOKENS ---------- */
:root{
  --primary:#0C7D7C; --secondary:#057270; --ashe:#A5C8C8; --white:#FFFFFF;
  --paper:#FFFFFF; --paper-2:#EEF5F5;                  /* white base; a light Ashe Green tint for alternate sections */
  --ink:#0B1214; --ink-2:#121B1E;
  --teal:var(--primary); --teal-deep:var(--secondary); --teal-ink:#04292A; --mint:var(--ashe);

  --t1:#0B1214; --t2:#3F4A50; --t3:#4F5B61;             /* on white / tint / Ashe Green */
  --d1:#FFFFFF; --d2:#F4FAFA; --d3:#EEF6F6;             /* on primary / secondary teal */
  --rule:rgba(11,18,20,.12); --rule-2:rgba(11,18,20,.24);
  --rule-d:rgba(255,255,255,.2); --rule-d2:rgba(255,255,255,.42);

  --f-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;

  --maxw:1440px; --pad:clamp(20px,3.6vw,60px); --gut:clamp(16px,1.8vw,28px);
  --sec:clamp(96px,12vw,200px); --hdr:100px;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--t1);
  font:400 17px/1.65 var(--f-sans); font-stretch:100%; letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overflow-x:clip}            /* clip keeps position:sticky working */
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3,p,figure,dl,dd{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--teal); color:var(--white)}
:focus-visible{outline:2px solid var(--teal); outline-offset:4px; border-radius:2px}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--mint)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:absolute; left:var(--pad); top:-80px; z-index:3000; background:var(--ink); color:var(--d1);
  padding:12px 18px; font:600 .875rem/1 var(--f-sans); transition:top .2s}
.skip:focus{top:16px}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut)}
.sec{padding-block:var(--sec)}
.dark{color:var(--d1)}
.bg-primary,.bg-teal{background:var(--primary)} .bg-secondary,.bg-teal-deep{background:var(--secondary)}
.bg-ashe{background:var(--ashe)} .bg-ink{background:var(--ink)} .bg-paper-2{background:var(--paper-2)}

/* ---------- 4. TYPE ---------- */
.t-hero,.t-display,.t-statement,.t-h1,.t-h2,.t-h3{font-family:var(--f-sans); text-wrap:balance}
.t-hero{font-size:clamp(2.9rem,8.4vw,9.2rem); line-height:.9; letter-spacing:-.042em; font-weight:620; font-stretch:112%}
.t-statement{font-size:clamp(2.7rem,7.8vw,8.4rem); line-height:.9; letter-spacing:-.042em; font-weight:620; font-stretch:112%}
.t-display{font-size:clamp(2.4rem,5.6vw,6rem); line-height:.94; letter-spacing:-.036em; font-weight:610; font-stretch:112%}
.t-h1{font-size:clamp(2.1rem,4.2vw,4.3rem); line-height:.98; letter-spacing:-.032em; font-weight:610; font-stretch:110%}
.t-h2{font-size:clamp(1.6rem,2.7vw,2.7rem); line-height:1.06; letter-spacing:-.026em; font-weight:600; font-stretch:108%}
.t-h3{font-size:clamp(1.12rem,1.35vw,1.36rem); line-height:1.2; letter-spacing:-.014em; font-weight:620; font-stretch:106%}
.em{font-family:var(--f-serif); font-style:italic; font-weight:400; font-stretch:normal;
  letter-spacing:-.012em; font-size:1.07em}
.dark .em{color:var(--mint)}
.t-lede{font-size:clamp(1.08rem,1.32vw,1.3rem); line-height:1.52; letter-spacing:-.01em; color:var(--t2); text-wrap:pretty}
.t-body{color:var(--t2); text-wrap:pretty}
.t-small{font-size:.9375rem; line-height:1.6; color:var(--t2)}
.t-label{font:640 .72rem/1.25 var(--f-sans); font-stretch:116%; letter-spacing:.15em; text-transform:uppercase; color:var(--t3)}
.dark .t-lede,.dark .t-body,.dark .t-small{color:var(--d2)}
.dark .t-label{color:var(--d3)}
.bg-ashe .t-label,.bg-ashe .t-lede,.bg-ashe .t-body{color:var(--t2)}

/* ---------- 5. BUTTONS & LINKS ---------- */
.btn{display:inline-flex; align-items:center; gap:14px; min-height:54px; padding:0 26px; border-radius:999px;
  font:620 .9375rem/1 var(--f-sans); font-stretch:108%; letter-spacing:-.004em; white-space:nowrap;
  border:1px solid transparent; transition:background-color .3s var(--e-io), color .3s var(--e-io), border-color .3s var(--e-io)}
.btn .arw{display:inline-grid; place-items:center; width:26px; height:26px; margin-right:-12px; border-radius:50%;
  font-size:.95rem; transition:transform .55s var(--e-out), background-color .3s}
.btn:hover .arw{transform:translateX(4px)}
.btn--solid{background:var(--primary); color:var(--white)}
.btn--solid .arw{background:var(--white); color:var(--primary)}
.btn--solid:hover{background:var(--secondary)}
.btn--line{border-color:var(--rule-2); color:var(--t1)}
.btn--line:hover{border-color:var(--t1)}
.dark .btn--solid,.hero .btn--solid{background:var(--white); color:var(--secondary)}
.dark .btn--solid:hover,.hero .btn--solid:hover{background:var(--d2)}
.dark .btn--solid .arw,.hero .btn--solid .arw{background:var(--primary); color:var(--white)}
.dark .btn--line,.hero .btn--line{border-color:var(--rule-d2); color:var(--d1)}
.dark .btn--line:hover,.hero .btn--line:hover{border-color:var(--d1)}
.bg-ashe .btn--solid{background:var(--secondary)} .bg-ashe .btn--solid:hover{background:var(--ink)}

.link{display:inline-flex; align-items:center; gap:10px; position:relative; padding-block:8px;
  font:620 .9375rem/1 var(--f-sans); font-stretch:106%}
.link::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform-origin:left; transform:scaleX(.3); opacity:.55; transition:transform .6s var(--e-out), opacity .3s}
.link:hover::after{transform:scaleX(1); opacity:1}
.link .arw{display:inline-block; transition:transform .5s var(--e-out)}
.link:hover .arw{transform:translate(3px,-3px)}

/* ---------- 6. LOGO PLATE ---------- */
.plate{display:inline-flex; align-items:center; justify-content:center; background:var(--white);
  height:76px; padding:0 20px; border-radius:6px}
.plate img{height:var(--lh,34px); width:auto; max-width:190px; object-fit:contain}

/* ---------- 7. HEADER + MENU ---------- */
.hdr{position:fixed; inset:0 0 auto; z-index:1000; height:var(--hdr); border-bottom:1px solid transparent;
  transition:background-color .5s var(--e-io), border-color .5s var(--e-io), transform .6s var(--e-out), opacity .8s var(--e-io)}
.hdr-in{height:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between}
.logo{position:relative; display:block; height:68px}
.logo img{height:100%; width:auto; transition:opacity .5s var(--e-io)}
.logo .lg-w{position:absolute; inset:0 auto auto 0; opacity:0}
.hdr.over .logo .lg-c{opacity:0}
.hdr.over .logo .lg-w{opacity:1}
.hdr.solid{background:var(--white); border-bottom-color:var(--rule); box-shadow:0 10px 30px -24px rgba(11,18,20,.5)}
.nav{display:flex; align-items:center; gap:clamp(22px,2.6vw,40px)}
.nav a{position:relative; font:600 .9375rem/1 var(--f-sans); font-stretch:106%; padding-block:8px; color:var(--primary); transition:color .4s}
.hdr.over .nav a{color:rgba(255,255,255,.92)}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav .btn{min-height:42px; padding:0 18px; font-size:.875rem}
.nav .btn::after{display:none}
/* .nav a sets link colour; the pill must out-rank it or its label disappears */
.nav .btn.btn--solid{background:var(--primary); color:var(--white)}
.nav .btn.btn--solid:hover{background:var(--secondary); color:var(--white)}
.hdr.over .nav .btn.btn--solid{background:var(--white); color:var(--secondary)}
.hdr.over .nav .btn.btn--solid:hover{background:var(--white)}

.burger{display:none; width:44px; height:44px; margin-right:-11px; position:relative}
.burger i{position:absolute; left:11px; width:22px; height:1.5px; background:var(--primary); transition:transform .45s var(--e-out), background-color .4s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:25px}
.hdr.over .burger i{background:#fff}
body.menu-open .hdr .burger i{background:var(--d1)}
body.menu-open .burger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
body.menu-open .hdr .logo .lg-c{opacity:0}
body.menu-open .hdr .logo .lg-w{opacity:1}
.menu{position:fixed; inset:0; z-index:900; background:var(--secondary); color:var(--d1); display:flex; flex-direction:column;
  justify-content:space-between; padding:calc(var(--hdr) + 40px) var(--pad) 40px; visibility:hidden; opacity:0;
  transition:opacity .5s var(--e-io), visibility .5s}
body.menu-open .menu{visibility:visible; opacity:1}
.menu nav a{display:block; overflow:hidden; font:610 clamp(2.4rem,11vw,3.6rem)/1.1 var(--f-sans); font-stretch:112%;
  letter-spacing:-.036em; padding-block:4px}
.menu nav a span{display:block; transform:translateY(105%); transition:transform .8s var(--e-out)}
body.menu-open .menu nav a span{transform:none}
body.menu-open .menu nav a:nth-child(2) span{transition-delay:.05s}
body.menu-open .menu nav a:nth-child(3) span{transition-delay:.1s}
body.menu-open .menu nav a:nth-child(4) span{transition-delay:.15s}
.menu-foot{display:grid; gap:6px; padding-top:24px; border-top:1px solid var(--rule-d)}
.menu-foot a,.menu-foot span{font-size:.9375rem; color:var(--d2)}

/* ---------- 8. HERO ---------- */
.hero{position:relative; min-height:clamp(680px,100svh,1180px); color:var(--d1); background:var(--teal-ink);
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-1; transform:translate3d(0,calc(var(--hs,0) * 20vh),0) scale(calc(1 + var(--hs,0) * .05))}
.plate-img{position:absolute; inset:0; opacity:0; transition:opacity 1.6s var(--e-io)}
.plate-img.on{opacity:1}
.plate-img img{width:100%; height:100%; object-fit:cover; transform:scale(1.07); transition:transform 9s linear}
.plate-img.on img{transform:scale(1)}
.hero.paused .plate-img img{transition:none}
.hero-scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,41,42,.7) 0%,rgba(4,41,42,.46) 10%,rgba(4,41,42,.14) 19%,rgba(4,41,42,0) 27%,rgba(4,41,42,0) 40%,rgba(4,41,42,.4) 64%,rgba(4,30,31,.8) 100%)}
.hero-body{padding-bottom:clamp(36px,5vw,72px); opacity:calc(1 - var(--hs,0) * 1.7); position:relative}
/* backing sized to the copy itself, so every slide and screen shape keeps the text legible */
.hero-body::before{content:""; position:absolute; inset:-16vh 0 0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,30,31,0) 0%,rgba(4,30,31,.36) 24%,rgba(4,30,31,.55) 55%,rgba(4,30,31,.62) 100%)}
.hero-title{grid-column:1 / span 8; color:#fff; position:relative; z-index:0}
.hero-title::before{content:""; position:absolute; inset:-28% -12% -18% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,30,31,.6),rgba(4,30,31,.36) 62%,rgba(4,30,31,0))}
.hero-aside{grid-column:9 / span 4; align-self:end; display:grid; gap:28px; padding-bottom:.55em;
  position:relative; z-index:0}
/* a local scrim that travels with the copy, so any hero photo keeps it legible */
.hero-aside::before{content:""; position:absolute; inset:-56px -64px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,30,31,.8),rgba(4,30,31,.5) 60%,rgba(4,30,31,0))}
.hero-aside p{color:rgba(255,255,255,.92); text-shadow:0 1px 18px rgba(0,0,0,.35); font-size:clamp(1rem,1.15vw,1.13rem); line-height:1.55; max-width:36ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px}
.line{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.line > span{display:block}
.hero-rail{border-top:1px solid rgba(255,255,255,.18)}
.rail{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:64px}
.rail-l{display:flex; align-items:center; gap:18px}
.ticks{display:flex; gap:6px}
.tick{position:relative; width:36px; height:2px; background:rgba(255,255,255,.26); overflow:hidden; border-radius:1px}
.tick i{position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left}
.tick.on i{animation:tick 7s linear forwards}
.hero.paused .tick.on i{animation-play-state:paused}
@keyframes tick{to{transform:scaleX(1)}}
.pause{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.34); color:#fff; transition:border-color .3s}
.pause:hover{border-color:#fff}
.pause svg{width:10px; height:10px; fill:currentColor}
.pause .i-play{display:none}
.hero.paused .pause .i-pause{display:none}
.hero.paused .pause .i-play{display:block}
.rail-cap{display:flex; gap:14px; align-items:baseline; transition:opacity .5s var(--e-io)}
.rail-cap.out{opacity:0}
.rail-name{font:620 .9375rem/1 var(--f-sans); font-stretch:106%; color:#fff}
.rail-cat{font:640 .6875rem/1 var(--f-sans); font-stretch:116%; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.cue{font:640 .6875rem/1 var(--f-sans); font-stretch:116%; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.72); display:flex; gap:12px; align-items:center}
.cue i{display:block; width:1px; height:26px; background:rgba(255,255,255,.3); position:relative; overflow:hidden}
.cue i::after{content:""; position:absolute; inset:0; background:#fff; animation:cue 2.4s var(--e-io) 4}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.js .hero .plate-img.on{clip-path:inset(50% 0 50% 0)}
.js .hero .line > span{transform:translateY(108%)}
.js .hero .hero-aside,.js .hero .hero-rail{opacity:0; transform:translateY(14px)}
.js .hdr{opacity:0}
.is-loaded .hero .plate-img.on{clip-path:inset(0); transition:clip-path 1.5s var(--e-out), opacity 1.6s var(--e-io)}
.is-loaded .hero .line > span{transform:none; transition:transform 1.15s var(--e-out) .45s}
.is-loaded .hero .line:nth-child(2) > span{transition-delay:.55s}
.is-loaded .hero .hero-aside{opacity:1; transform:none; transition:opacity .9s var(--e-io) .95s, transform 1s var(--e-out) .95s}
.is-loaded .hero .hero-rail{opacity:1; transform:none; transition:opacity .9s var(--e-io) 1.15s, transform 1s var(--e-out) 1.15s}
.is-loaded .hdr{opacity:1}

/* ---------- 9. MARKETS TICKER (moves with scroll, never on its own) ---------- */
.ticker{background:var(--teal); color:var(--d1); overflow:hidden; border-block:1px solid rgba(255,255,255,.08)}
.ticker-track{display:flex; width:max-content; transform:translate3d(calc(var(--mq,0) * -1px),0,0); will-change:transform}
.ticker ul{display:flex; align-items:center; padding-block:clamp(22px,2.4vw,34px)}
.ticker li{display:flex; align-items:center; font:600 clamp(1.25rem,2vw,1.9rem)/1 var(--f-sans); font-stretch:112%;
  letter-spacing:-.024em; white-space:nowrap}
.ticker li::after{content:""; width:9px; height:9px; margin-inline:clamp(22px,2.6vw,40px); border-radius:50%;
  background:var(--ashe)}

/* ---------- 10. INTRO ---------- */
.intro .t-label{grid-column:1 / span 3; padding-top:.7em}
.intro-statement{grid-column:4 / span 9; font:560 clamp(1.8rem,3.4vw,3.45rem)/1.1 var(--f-sans); font-stretch:106%;
  letter-spacing:-.03em; text-wrap:balance}
.js .illum .w{opacity:clamp(.16, calc((var(--p,1) * var(--n,1) * 1.25) - var(--i,0)), 1); transition:opacity .25s linear}

/* ---------- 11. FEATURED COMPANY PANELS (stack as you scroll) ---------- */
.panels{position:relative}
.panel{position:sticky; top:0; height:100svh; min-height:640px; max-height:980px;
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden}
.panel:nth-child(1){z-index:1}.panel:nth-child(2){z-index:2}.panel:nth-child(3){z-index:3}
.panel:nth-child(4){z-index:4}.panel:nth-child(5){z-index:5}.panel:nth-child(6){z-index:6}
.panel.flip .panel-media{order:2}
.panel-media{position:relative; overflow:hidden; background:var(--ink)}
.panel-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.12 - .12 * var(--p,1)))}
.panel-body{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:26px;
  padding:clamp(40px,6vw,104px) clamp(28px,5vw,96px)}
.panel-body .cat{display:flex; align-items:center; gap:12px}
.panel-body .cat::before{content:""; width:22px; height:2px; background:var(--accent,var(--mint))}
.panel-body .t-lede{max-width:34ch}
.panel-body .actions{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:6px}
.panel.bg-ashe{--accent:var(--secondary)}

/* ---------- 12. ALSO PART OF SPI ---------- */
.head-rule{display:flex; align-items:center; gap:20px; margin-bottom:clamp(28px,3vw,44px)}
.head-rule::after{content:""; flex:1; height:1px; background:var(--rule)}
.dark .head-rule::after{background:var(--rule-d)}
.family{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gut)}
.fam{display:grid; grid-template-rows:auto 1fr; gap:18px; min-width:0; padding:18px 18px 22px; background:var(--white); border-radius:8px;
  box-shadow:0 0 0 1px var(--rule); transition:box-shadow .4s var(--e-io), transform .6s var(--e-out)}
a.fam:hover{box-shadow:0 0 0 1px var(--rule-2), 0 18px 40px -24px rgba(11,18,20,.35); transform:translateY(-3px)}
.fam .logo-area{height:108px; display:grid; place-items:center; border-bottom:1px solid var(--rule)}
.fam .logo-area img{max-height:var(--lh,48px); max-width:78%; width:auto; object-fit:contain}
.fam-meta{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; min-width:0; overflow-wrap:break-word}
.fam-meta .arw{font-size:1rem; color:var(--teal); transition:transform .5s var(--e-out)}
a.fam:hover .fam-meta .arw{transform:translate(3px,-3px)}

/* ---------- 13. STATEMENT + EMERGE ---------- */
.statement .st-title{grid-column:1 / span 11}
.statement .st-aside{grid-column:8 / span 4; margin-top:clamp(28px,3vw,48px)}
.emerge{position:relative; overflow:hidden; background:var(--secondary); isolation:isolate}
.emerge img{width:100%; aspect-ratio:21/9; object-fit:cover; transform:scale(calc(1.12 - .12 * var(--p,1)))}
.emerge::before{content:""; position:absolute; inset:0; z-index:1; background:var(--teal-deep);
  opacity:calc(.94 * (1 - var(--p,1))); pointer-events:none}
.emerge::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,114,112,.35) 0%,rgba(5,114,112,0) 22%,rgba(5,114,112,0) 46%,var(--secondary) 100%)}

/* ---------- 14. FOOTER (minimal) ---------- */
.ftr-wrap{background:var(--secondary)}
.ftr{border-top:1px solid var(--rule-d); padding-block:clamp(48px,5vw,72px) 32px}
body:has(.emerge.to-footer) .ftr{border-top-color:transparent}
.ftr-top{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:40px clamp(32px,5vw,80px)}
.ftr-brand img{height:56px; width:auto}
.ftr-nav{display:flex; flex-wrap:wrap; gap:14px clamp(20px,2.4vw,36px)}
.ftr-nav a,.ftr-nap a,.ftr-nap span{font-size:.9375rem; color:var(--d2); transition:color .3s}
.ftr-nav a{font-weight:600}
.ftr-nav a:hover,.ftr-nap a:hover{color:var(--white)}
.ftr-nap{display:grid; gap:6px; font-style:normal}
.ftr-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px;
  margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--rule-d)}
.ftr-bot p,.ftr-bot a{font-size:.8125rem; color:var(--d3)}
.ftr-bot a:hover{color:var(--white)}

/* ---------- 15. INNER PAGES ---------- */
.phero{padding-top:calc(var(--hdr) + clamp(72px,11vw,176px)); padding-bottom:clamp(56px,7vw,112px)}
.phero .t-label{grid-column:1 / span 3; padding-top:1.2em}
.phero h1{grid-column:4 / span 9}
.phero .t-lede{grid-column:4 / span 6; margin-top:clamp(24px,2.6vw,40px); max-width:46ch}
.bleed{position:relative; overflow:hidden}
.bleed img{width:100%; aspect-ratio:21/9; object-fit:cover}
.ap{position:relative; overflow:hidden;
  clip-path:inset(calc(8% * (1 - var(--p,1))) calc(6% * (1 - var(--p,1))) round calc(10px * (1 - var(--p,1))))}
.ap img{width:100%; object-fit:cover; transform:scale(calc(1.14 - .14 * var(--p,1)))}

.cp{padding-block:clamp(72px,9vw,144px)}
.cp-in{align-items:start}
.cp-text{grid-column:1 / span 4; position:sticky; top:calc(var(--hdr) + 40px); display:grid; gap:22px; justify-items:start}
.cp-text .cat{display:flex; align-items:center; gap:12px}
.cp-text .cat::before{content:""; width:22px; height:2px; background:var(--accent,var(--mint))}
.cp.bg-ashe{--accent:var(--secondary)}
.cp-media{grid-column:6 / span 7; display:grid; gap:var(--gut)}
.cp-media .ap img{aspect-ratio:4/5}
.cp-media .ap.wide img{aspect-ratio:3/2}

.rows{border-top:1px solid var(--rule)}
.row{display:grid; grid-template-columns:200px minmax(0,1fr) minmax(0,1.2fr) auto; align-items:center;
  gap:var(--gut); padding-block:clamp(20px,2.2vw,30px); border-bottom:1px solid var(--rule); position:relative}
.row::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--teal);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--e-out)}
.row:hover::before{transform:scaleX(1)}
.row .plate{justify-self:start; height:68px; background:var(--white); box-shadow:0 0 0 1px var(--rule)}

.about-body .t-label{grid-column:1 / span 3; padding-top:.5em}
.about-body .t-h2{grid-column:4 / span 8}
.about-body .cols{grid-column:4 / span 9; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gut); margin-top:clamp(40px,4.4vw,72px)}
.family.eight{grid-template-columns:repeat(4,minmax(0,1fr))}

.contact-in{align-items:start; row-gap:56px}
.contact-details{grid-column:1 / span 4; display:grid; gap:28px}
.contact-details dt{font:640 .6875rem/1 var(--f-sans); font-stretch:116%; letter-spacing:.15em; text-transform:uppercase; color:var(--t3); margin-bottom:8px}
.contact-details dd{font-size:1.0625rem; line-height:1.55}
.contact-details dd a{border-bottom:1px solid var(--rule-2); transition:border-color .3s}
.contact-details dd a:hover{border-color:var(--t1)}
.form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px var(--gut)}
.contact-in > .form,.contact-in > .notice{grid-column:6 / span 7}
.field{display:grid; gap:10px}
.field.full{grid-column:1 / -1}
.field label{font:640 .6875rem/1 var(--f-sans); font-stretch:116%; letter-spacing:.15em; text-transform:uppercase; color:var(--t3)}
.field input,.field textarea{font:400 1.0625rem/1.5 var(--f-sans); color:var(--t1); background:transparent;
  border:0; border-bottom:1px solid var(--rule-2); border-radius:0; padding:10px 0; transition:border-color .3s}
.field textarea{resize:vertical; min-height:140px}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--teal)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--teal); outline-offset:6px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#9B2C2C}
/* PDF uploads (job applications): the native file picker, restyled to sit with the other fields. */
.field.file input{padding:12px 0; font-size:.9375rem; color:var(--t2); cursor:pointer}
.field.file input::file-selector-button{font:600 .875rem/1 var(--f-sans); color:var(--white); background:var(--primary);
  border:0; border-radius:999px; padding:11px 18px; margin-right:14px; cursor:pointer; transition:background .2s}
.field.file input::file-selector-button:hover{background:var(--secondary)}
.field .hint{margin:0; font-size:.8125rem; color:var(--t3)}
.form-note{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px}
.form-status{font-size:.9375rem; color:var(--t2)}
.form[aria-busy="true"] .btn{opacity:.6; cursor:progress}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* ---------- 15b. CMS PAGES: cards, company detail, careers ---------- */
.grid-cta{margin-top:clamp(28px,3vw,44px)}
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gut)}
.card{display:grid; grid-template-rows:auto auto 1fr auto; gap:14px; min-width:0; padding:20px 20px 24px; background:var(--white);
  border-radius:8px; box-shadow:0 0 0 1px var(--rule); transition:box-shadow .4s var(--e-io), transform .6s var(--e-out)}
a.card:hover{box-shadow:0 0 0 1px var(--primary), 0 18px 40px -24px rgba(11,18,20,.35); transform:translateY(-3px)}
.card .logo-area{height:104px; display:grid; place-items:center; border-bottom:1px solid var(--rule); margin-bottom:6px}
.card .logo-area img{max-height:var(--lh,48px); max-width:78%; width:auto; object-fit:contain}
.card .tag{justify-self:start; font:640 .6875rem/1 var(--f-sans); font-stretch:116%; letter-spacing:.14em; text-transform:uppercase;
  color:var(--secondary); background:var(--paper-2); padding:7px 10px; border-radius:999px}
.card p{font-size:.9688rem; line-height:1.55; color:var(--t2)}
.card .more{display:flex; align-items:center; gap:10px; font:620 .9375rem/1 var(--f-sans); font-stretch:106%; color:var(--primary)}
.card .more .arw{transition:transform .5s var(--e-out)}
a.card:hover .more .arw{transform:translateX(4px)}

.co-hero{padding-top:calc(var(--hdr) + clamp(48px,6vw,96px)); padding-bottom:clamp(56px,6vw,96px)}
.co-hero .grid{align-items:center; row-gap:40px}
.co-text{grid-column:1 / span 6; display:grid; gap:22px; justify-items:start}
.co-text .cat{display:flex; align-items:center; gap:12px}
.co-text .cat::before{content:""; width:22px; height:2px; background:var(--primary)}
.co-text .t-lede{max-width:44ch}
.co-text .plate{box-shadow:0 0 0 1px var(--rule)}
.co-media{grid-column:8 / span 5}
.co-text.wide{grid-column:1 / span 9}
.bleed.to-footer::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,114,112,0) 55%,var(--secondary) 100%)}
.co-media img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px}
.co-media.whole img{object-fit:contain; background:var(--white); box-shadow:0 0 0 1px var(--rule); padding:5%}
.back{display:inline-flex; gap:10px; align-items:center; font:620 .875rem/1 var(--f-sans); color:var(--primary)}
.facts{background:var(--paper-2)}
.facts ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); border-left:1px solid var(--rule)}
.facts li{padding:clamp(24px,2.6vw,40px) clamp(18px,2vw,32px); border-right:1px solid var(--rule);
  font:600 clamp(1.05rem,1.4vw,1.35rem)/1.25 var(--f-sans); font-stretch:106%; letter-spacing:-.016em; color:var(--t1)}
.facts li::before{content:""; display:block; width:22px; height:2px; background:var(--primary); margin-bottom:16px}
.sec-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); margin-bottom:clamp(28px,3vw,48px)}
.sec-head .t-label{grid-column:1 / span 3; padding-top:.5em}
.sec-head h2{grid-column:4 / span 9}
.products{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,48px) var(--gut)}
.product{display:grid; gap:14px; align-content:start}
.product .pimg{background:var(--white); box-shadow:0 0 0 1px var(--rule); border-radius:6px; overflow:hidden; aspect-ratio:4/3; display:grid; place-items:center}
.product .pimg{position:relative}
.product .pimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%}
.product .pimg.photo img{object-fit:cover; padding:0}
.product p{color:var(--t2); font-size:.9688rem; line-height:1.6}
.why-body{grid-column:4 / span 8}
.rich{color:var(--t2); display:grid; gap:14px; max-width:68ch}
.rich h3,.rich h4{font:620 clamp(1.1rem,1.4vw,1.3rem)/1.25 var(--f-sans); font-stretch:106%; color:var(--t1); letter-spacing:-.014em; margin:10px 0 -4px}
.rich ul,.rich ol{padding-left:1.2em; display:grid; gap:8px}
.rich ul{list-style:disc} .rich ol{list-style:decimal}
.rich li::marker{color:var(--primary)}
.rich a{color:var(--primary); border-bottom:1px solid currentColor}
.rich p,.rich h3,.rich h4,.rich ul,.rich ol{margin:0}
.gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut)}
.gallery figure{margin:0; overflow:hidden; border-radius:6px; background:var(--paper-2)}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gallery figure:first-child{grid-column:span 2; grid-row:span 2}
.gallery figure:first-child img{height:100%; aspect-ratio:auto}
.gallery figcaption{font-size:.875rem; color:var(--t2); padding:10px 12px}
.cta-band{padding-block:clamp(64px,8vw,128px)}
.cta-band .grid{align-items:end; row-gap:28px}
.cta-band h2{grid-column:1 / span 8}
.cta-band .side{grid-column:9 / span 4; justify-self:end}
.pager{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule)}
.pager a{display:grid; gap:8px; padding:clamp(28px,3vw,44px) var(--pad); transition:background-color .3s}
.pager a:hover{background:var(--paper-2)}
.pager a + a{border-left:1px solid var(--rule); text-align:right}
.pager .t-h2{color:var(--t1)}

.filters{display:flex; flex-wrap:wrap; gap:16px var(--gut); margin-bottom:clamp(24px,2.6vw,40px)}
.filters label{display:grid; gap:8px; font:640 .6875rem/1 var(--f-sans); font-stretch:116%; letter-spacing:.15em; text-transform:uppercase; color:var(--t3)}
.filters select{font:500 1rem/1.2 var(--f-sans); color:var(--t1); background:var(--white); border:1px solid var(--rule-2); border-radius:8px; padding:12px 40px 12px 14px;
  min-width:200px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat}
.jobs{border-top:1px solid var(--rule)}
.job{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px var(--gut); padding-block:clamp(20px,2.2vw,30px);
  border-bottom:1px solid var(--rule); position:relative}
.job[hidden]{display:none}
.job .meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; font-size:.9375rem; color:var(--t2)}
.job .arw{color:var(--primary); font-size:1.2rem; transition:transform .5s var(--e-out)}
.job:hover .arw{transform:translateX(4px)}
.job:hover h3{color:var(--primary)}
.empty{display:grid; gap:14px; max-width:60ch; padding-block:8px 32px}
.job-hero .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.chip{font:600 .8125rem/1 var(--f-sans); color:var(--secondary); background:var(--paper-2); padding:9px 12px; border-radius:999px}
.job-in{align-items:start; row-gap:56px}
.job-body{grid-column:1 / span 7; display:grid; gap:clamp(32px,3.4vw,52px)}
.job-body section{display:grid; gap:14px}
.apply{grid-column:9 / span 4; position:sticky; top:calc(var(--hdr) + 32px); background:var(--paper-2); border-radius:10px; padding:clamp(24px,2.6vw,36px); display:grid; gap:16px}
.apply .form{grid-column:auto; grid-template-columns:1fr; gap:22px}
.notice{padding:18px 20px; border-radius:8px; background:var(--paper-2); color:var(--t1)}
.form .field.check{grid-column:1 / -1; display:flex; gap:12px; align-items:flex-start}
.field.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--primary); flex:none}
.field.check label{font:400 .9375rem/1.5 var(--f-sans); letter-spacing:0; text-transform:none; color:var(--t2)}

/* ---------- 16. REVEALS ---------- */
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .9s var(--e-io), transform 1.1s var(--e-out)}
.js [data-reveal].in{opacity:1; transform:none}
.js [data-reveal][data-d="1"]{transition-delay:.08s}
.js [data-reveal][data-d="2"]{transition-delay:.16s}
.js [data-reveal][data-d="3"]{transition-delay:.24s}
.js [data-reveal][data-d="4"]{transition-delay:.32s}
.js [data-reveal].instant{transition:none}
.qa-static .hero{min-height:900px !important}
.qa-static .panel{height:900px; position:relative}

/* ---------- 17. PAGE TRANSITIONS (progressive) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .3s var(--e-io) both}
::view-transition-new(root){animation:vt-in .55s var(--e-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0; transform:translateY(10px)}}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:1180px){
  .hero-title{grid-column:1 / span 12}
  .hero-aside{grid-column:1 / span 7; margin-top:28px; padding-bottom:0}
  .family{grid-template-columns:repeat(3,minmax(0,1fr))}
  .family.eight{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .products,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apply{grid-column:8 / span 5}
  .job-body{grid-column:1 / span 7}
}
@media (max-width:860px), (max-height:700px){
  .panel{position:relative; height:auto; min-height:0; max-height:none}
}
@media (max-width:860px){
  :root{--hdr:80px}
  .logo{height:54px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid > *{grid-column:1 / -1 !important}
  .nav{display:none}
  .burger{display:block}
  .hero-aside{margin-top:24px}
  .intro .t-label,.phero .t-label,.about-body .t-label{padding-top:0; margin-bottom:20px}
  .panel{grid-template-columns:1fr}
  .panel.flip .panel-media{order:0}
  .panel-media{aspect-ratio:4/5}
  .panel-body{padding:44px var(--pad) 56px}
  .family,.family.eight{grid-template-columns:repeat(2,minmax(0,1fr))}
  .family .fam:last-child:nth-child(odd){grid-column:1 / -1}
  .statement .st-aside{margin-top:24px}
  .cp-text{position:static; margin-bottom:36px}
  .cp-media .ap img,.cp-media .ap.wide img{aspect-ratio:4/5}
  .row{grid-template-columns:minmax(0,1fr) auto; row-gap:12px}
  .row .plate{grid-column:1 / -1}
  .about-body .cols{grid-template-columns:1fr}
  .bleed img,.emerge img{aspect-ratio:4/5}
  .form{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head{grid-template-columns:1fr}
  .sec-head .t-label,.sec-head h2{grid-column:1 / -1; padding-top:0; margin-bottom:12px}
  .apply{position:static}
  .cta-band .side{justify-self:start}
  .pager{grid-template-columns:1fr}
  .pager a + a{border-left:0; border-top:1px solid var(--rule); text-align:left}
  .ftr-top{flex-direction:column}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{min-height:clamp(600px,100svh,980px)}
  .t-hero{font-size:clamp(2.55rem,11.6vw,4.2rem); line-height:.94}
  .rail-cap{flex-direction:column; gap:4px}
  .cue{display:none}
  .hero-cta .btn{flex:1 1 auto; justify-content:center}
  .row{grid-template-columns:minmax(0,1fr)}
  .row .link{justify-self:start}
  .fam .logo-area{height:96px}
  .cards,.products,.gallery{grid-template-columns:minmax(0,1fr)}
  .gallery figure:first-child{grid-column:auto; grid-row:auto}
  .filters select{min-width:0; width:100%}
  .filters label{flex:1 1 100%}
}

@media (max-width:380px){
  /* the longest unbreakable label plus its arrow no longer fits two columns */
  .family,.family.eight{grid-template-columns:minmax(0,1fr)}
  .family .fam:last-child:nth-child(odd){grid-column:auto}
}

/* ---------- 19. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important}
  .hero-media,.hero-body{transform:none !important; opacity:1 !important}
  .js .hero .plate-img.on{clip-path:none}
  .js .hero .line > span,.js .hero .hero-aside,.js .hero .hero-rail{transform:none; opacity:1}
  .js .hdr{opacity:1}
  .plate-img img,.panel-media img,.ap img,.emerge img{transform:none !important}
  .js [data-reveal]{opacity:1; transform:none}
  .js .illum .w{opacity:1}
  .ap{clip-path:none !important}
  .emerge::before{opacity:0 !important}
  .ticker-track{transform:none !important}
  .pause{display:none}
}

/* ---------- 20. PRINT ---------- */
@media print{
  .hdr,.menu,.hero-rail,.ticker,.emerge,.filters,.form{display:none}
  .panel{position:relative; height:auto}
  .js [data-reveal],.js .illum .w{opacity:1 !important; transform:none !important}
}