@font-face{font-family:"Host Grotesk"; src:url(../assets/fonts/HostGrotesk-var.woff2) format("woff2"); font-weight:300 800; font-display:swap}
@font-face{font-family:"Inter"; src:url(../assets/fonts/Inter-var.woff2) format("woff2"); font-weight:100 900; font-display:swap}
/* Layout: a Day-light page inside a hairline frame. Hero: the SIRBAI mark built from the icon library,
   one class per chevron, which breaks into formations over the Overwatch ground as you scroll.
   Tagline: one pinned slide that shifts to dusk. Solution: statement + dial. Platform: a Dusk picture
   with a scroll ring on the left, the three layers on the right. Buttons take the logo's diagonal cut. */
:root{
  color-scheme: light;
  --bone:#F2F1EF; --card:#DFDBD5; --field:#C2BEB7; --sand:#C3AE97; --dust:#B4A99B;
  --silt:#8E7A68; --loam:#6B5B4E; --haze:#56473E; --umber:#2A231F; --ink:#111111; --slate:#3A5A64; --night:#151D1F;
  --deep:#3C74A6; --deep-type:#224B73; --sky:#92C6ED; --clay:#A9665C; --clay-b:#D9957F; --yellow:#F8CE38;
  --page:var(--card); --frame:rgba(42,35,31,.30); --rule:rgba(42,35,31,.22); --grid:rgba(17,17,17,.06);
  --display:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text:"Inter", "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.5,0,.1,1); /* hairline's own easing */
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --pad:clamp(16px, 3.2vw, 48px);
  --fi:clamp(8px, 1vw, 15px);
}
*{box-sizing:border-box}
body{background:var(--page); color:var(--ink); font-family:var(--text); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.locked{overflow:hidden}
::selection{background:var(--umber); color:var(--field)}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
:focus-visible{outline:1.5px solid var(--deep); outline-offset:3px}
.wrap{padding-left:calc(var(--gut) + var(--pad)); padding-right:calc(var(--gut-r) + var(--pad))}
.cap{font-family:var(--display); font-weight:500; font-size:11.5px; letter-spacing:.19em; text-transform:uppercase}
.measure{position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:100px 100px; background-position:calc(var(--fi) - 1px) calc(var(--fi) - 1px);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.25), #000); mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.25), #000)}
.eyebrow{color:var(--deep-type); display:inline-flex; align-items:center; gap:12px; font-family:var(--display); font-weight:500; font-size:13px !important; letter-spacing:.22em; text-transform:uppercase}
.eyebrow::before{content:""; width:8px; height:8px; background:currentColor; flex:none}
.eyebrow.on-dark{color:var(--sky)}
.stitle{margin:0; font-family:var(--display); font-weight:500; text-transform:uppercase; font-size:clamp(44px, 6vw, 112px); line-height:.92; letter-spacing:-.04em}
.htop .h1,.statement,.ab-title,.ct-intro h2,.big-links a,.cc-body h3,.ai h3{font-weight:500 !important}

/* frame + coordinates */
.frame{position:fixed; inset:var(--fi); border:1px solid var(--frame); pointer-events:none; z-index:80; color:var(--umber); transition:border-color .6s var(--ease), color .6s var(--ease)}
.frame i{position:absolute; width:9px; height:9px}
.frame i::before,.frame i::after{content:""; position:absolute; background:currentColor}
.frame i::before{left:4px; top:0; width:1px; height:9px}
.frame i::after{top:4px; left:0; height:1px; width:9px}
.frame .tl{left:-5px; top:-5px}.frame .tr{right:-5px; top:-5px}.frame .bl{left:-5px; bottom:-5px}.frame .br{right:-5px; bottom:-5px}
.coord{position:absolute; bottom:8px; font-family:var(--display); font-size:10px; letter-spacing:.14em; color:var(--silt); font-variant-numeric:tabular-nums}
.coord.x{left:12px}.coord.y{right:12px}

/* back to top: a small utility in the right gutter, clear of the content column */
.totop{position:fixed; right:calc(var(--fi) + 4px); bottom:calc(var(--fi) + 30px); z-index:75; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--umber); font-family:var(--display); font-weight:500; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .5s, color .4s var(--ease)}
.totop.show{opacity:1; visibility:visible; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s, color .4s var(--ease)}
.totop .ic{--k:7px; width:36px; height:36px; display:grid; place-items:center; background:var(--umber); color:var(--bone); clip-path:polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, var(--k) 100%, 0 calc(100% - var(--k))); transition:background-color .4s var(--ease), color .4s var(--ease)}
.totop .lbl{padding-left:.2em; opacity:.8}
.totop.light{color:var(--bone)} .totop.light .ic{background:var(--bone); color:var(--umber)}
.totop .chev{width:17px; height:17px}
.totop:hover .chev path,.totop:focus-visible .chev path{animation:rise 1.1s var(--ease) infinite}
.totop:hover .chev path:nth-child(2),.totop:focus-visible .chev path:nth-child(2){animation-delay:.09s}
.totop:hover .chev path:nth-child(3),.totop:focus-visible .chev path:nth-child(3){animation-delay:.18s}
.totop:hover .lbl{opacity:1}
@keyframes rise{0%{transform:translateY(0); opacity:1} 40%{transform:translateY(-7px); opacity:0} 41%{transform:translateY(7px); opacity:0} 100%{transform:translateY(0); opacity:1}}
@media (max-width: 700px){ .totop{right:calc(var(--fi) + 8px); bottom:calc(var(--fi) + 10px + env(safe-area-inset-bottom, 0px))} .totop .lbl{display:none} }
@media (prefers-reduced-motion: reduce){ .totop .chev path{animation:none !important} }
body.dusk .frame{--frame:rgba(194,190,183,.24); color:var(--field)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:var(--page); z-index:90}

/* ——— 1. INTRO ——— */
.loader{position:fixed; inset:0; z-index:100; background:var(--umber); display:grid; place-items:center; overflow:hidden; cursor:pointer; transition:opacity 1s var(--ease), visibility 0s 1s}
.loader.out{opacity:0; visibility:hidden}
#ldcv{position:absolute; inset:0; width:100%; height:100%; display:block; transition:transform 1.4s var(--ease)}
.loader.out #ldcv{transform:scale(1.18)}
.ld-in{position:relative; display:flex; flex-direction:column; align-items:center; gap:26px; padding:34px 44px; transition:transform 1.1s var(--ease), opacity .7s var(--ease)}
.ld-in::before{display:none;content:""; position:absolute; inset:0; background:radial-gradient(closest-side, rgba(52,26,18,.72), rgba(52,26,18,0)); z-index:-1; transform:scale(1.6)}
.loader.out .ld-in{transform:scale(1.4); opacity:0}
.ld-mark{width:clamp(96px, 9vw, 140px); aspect-ratio:300/240; position:relative; overflow:hidden}
.ld-mark img{position:absolute; left:0; top:0; height:100%; width:auto; max-width:none}
.ld-mark .base{opacity:.2}
.ld-mark .fill{clip-path:inset(100% 0 0 0); animation:chev 2.4s .2s steps(1,end) forwards}
@keyframes chev{0%{clip-path:inset(100% 0 0 0)}33%{clip-path:inset(66.6% 0 0 0)}66%{clip-path:inset(33.3% 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.ld-tag{display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:500; font-size:11px; letter-spacing:.34em; color:var(--bone); white-space:nowrap}
.ld-tag::before,.ld-tag::after{content:""; width:28px; height:1px; background:var(--bone); opacity:.6}
.ld-count{position:absolute; left:calc(var(--fi) + 28px); bottom:calc(var(--fi) + 24px); font-family:var(--display); font-weight:300; font-size:clamp(56px, 8vw, 120px); line-height:.8; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--bone)}
.ld-skip{position:absolute; right:calc(var(--fi) + 28px); bottom:calc(var(--fi) + 30px); color:rgba(242,241,239,.7)}
.ld-bar{position:absolute; left:var(--fi); right:var(--fi); bottom:var(--fi); height:1px; background:var(--bone); transform-origin:left; transform:scaleX(var(--p,0))}
.ld-dot{position:absolute; bottom:calc(var(--fi) - 2px); left:calc(var(--fi) + (100% - 2*var(--fi)) * var(--p,0) - 2px); width:5px; height:5px; border-radius:50%; background:var(--yellow)}
@media (max-width: 700px){ .ld-tag{font-size:9px; letter-spacing:.24em} .ld-skip{display:none} }

/* ——— the cut: every button takes the diagonal of the logo's slit ——— */
.cut{--k:14px; clip-path:polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, var(--k) 100%, 0 calc(100% - var(--k)))}
.dg{display:grid; grid-template-columns:repeat(3,5px); gap:5px}
.dg i{width:5px; height:5px; border-radius:50%; background:currentColor; transition:transform .45s var(--ease), background-color .3s}
@keyframes dgp{0%,100%{transform:scale(1)} 40%{transform:scale(.4)}}
.btn:hover .dg i,.btn:focus-visible .dg i,.ft-back .nl:hover .dg i{animation:dgp .9s var(--ease) infinite}
.btn:hover .dg i:nth-child(2),.btn:hover .dg i:nth-child(4){animation-delay:.08s}
.btn:hover .dg i:nth-child(3),.btn:hover .dg i:nth-child(5),.btn:hover .dg i:nth-child(7){animation-delay:.16s}
.btn:hover .dg i:nth-child(6),.btn:hover .dg i:nth-child(8){animation-delay:.24s}
.btn:hover .dg i:nth-child(9){animation-delay:.32s}
.btn:hover .dg i:nth-child(5){background:var(--yellow)}
.menu-btn:hover .dots i{animation:dgp .9s var(--ease) infinite}
.menu-btn:hover .dots i:nth-child(2),.menu-btn:hover .dots i:nth-child(4){animation-delay:.08s}
.menu-btn:hover .dots i:nth-child(3),.menu-btn:hover .dots i:nth-child(5),.menu-btn:hover .dots i:nth-child(7){animation-delay:.16s}
.menu-btn:hover .dots i:nth-child(6),.menu-btn:hover .dots i:nth-child(8){animation-delay:.24s}
.menu-btn:hover .dots i:nth-child(9){animation-delay:.32s}
.chev{width:22px; height:22px; overflow:visible}
.chev path{fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:miter; vector-effect:non-scaling-stroke; transition:transform .6s var(--ease), stroke .4s}

/* ——— 2. NAV ——— */
.nav{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:70; color:var(--umber); transition:background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease); border-bottom:1px solid transparent}
.nav.glass{background:rgba(223,219,213,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--rule)}
.nav.dark{color:var(--field)}
.nav.dark.glass{background:rgba(42,35,31,.8); border-bottom-color:rgba(194,190,183,.16)}
.nav-in{--nh:clamp(40px, 3.6vw, 56px); height:104px; display:flex; align-items:center; gap:clamp(18px, 3vw, 44px); padding-top:var(--fi)}
.logo{position:relative; height:var(--nh); aspect-ratio:1276/240; flex:none}
.logo img{position:absolute; inset:0; height:100%; width:100%; transition:opacity .5s var(--ease)}
.logo .w{opacity:0}
.nav.dark .logo .w{opacity:1}.nav.dark .logo .k{opacity:0}
.strip{position:relative; flex:1; height:var(--nh); min-width:0}
.strip .ticks,.strip .fill{position:absolute; inset:0; background:repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 6px)}
.strip .ticks{opacity:.22}
.strip .fill{clip-path:inset(0 calc((1 - var(--sp,0)) * 100%) 0 0); opacity:.9}
.strip .mk{position:absolute; top:-6px; bottom:-6px; width:1px; padding:0; border:0; background:currentColor; color:inherit; opacity:.55; cursor:pointer; transition:opacity .3s var(--ease)}
.strip .mk::before{content:""; position:absolute; top:-12px; bottom:0; left:-8px; width:max(56px, 100%)}
.strip .mk span{position:absolute; top:-15px; left:4px; font-family:var(--display); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; opacity:.9}
.strip .mk span b{font-weight:500; margin-left:.7em; opacity:.6; transition:opacity .3s var(--ease), color .3s var(--ease)}
.strip .mk:hover,.strip .mk:focus-visible,.strip .mk.on{opacity:1}
.strip .mk:hover span b,.strip .mk:focus-visible span b,.strip .mk.on span b{opacity:1}
.strip .mk:hover span{color:var(--deep-type)}
.nav.dark .strip .mk:hover span{color:var(--sky)}
.strip .cross{position:absolute; top:50%; left:calc(var(--sp,0) * 100%); width:15px; height:15px; transform:translate(-50%,-50%)}
.strip .cross::before,.strip .cross::after{content:""; position:absolute; background:currentColor}
.strip .cross::before{left:7px; top:0; width:1px; height:15px}
.strip .cross::after{top:7px; left:0; height:1px; width:15px}
.strip .cross i{position:absolute; left:5px; top:5px; width:5px; height:5px; border-radius:50%; background:var(--yellow)}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:clamp(28px, 4.4vw, 76px); list-style:none; padding:0}
.nl{position:relative; display:inline-flex; align-items:center; gap:16px; padding:10px 0; font-family:var(--display); font-weight:400; font-size:clamp(17px, 1.45vw, 24px); letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap; color:inherit; background:none; border:0; cursor:pointer}
.nl::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease)}
.nl:hover::after,.nl:focus-visible::after,.nl[aria-expanded="true"]::after{transform:scaleX(1); transform-origin:left}
.nl .plus{position:relative; width:18px; height:18px; transition:transform .6s var(--ease)}
.nl .plus::before,.nl .plus::after{content:""; position:absolute; background:currentColor}
.nl .plus::before{left:8.5px; top:0; width:1px; height:18px}.nl .plus::after{top:8.5px; left:0; height:1px; width:18px}
.nl:hover .plus{transform:rotate(90deg)}
.nl[aria-expanded="true"] .plus{transform:rotate(45deg)}
.menu-btn{border:0; padding:0; cursor:pointer; background:none; position:relative; z-index:2; flex:none}
.menu-btn .chip{--k:12px; width:var(--nh); height:var(--nh); display:grid; place-items:center; background:var(--umber); color:var(--bone); transition:background-color .4s var(--ease), color .4s var(--ease)}
.dots{display:grid; grid-template-columns:repeat(3,6px); gap:6px; transition:transform .6s var(--ease)}
.dots i{width:6px; height:6px; border-radius:50%; background:currentColor; transition:transform .5s var(--ease), opacity .4s var(--ease)}

.menu-btn:hover .dots i:nth-child(5){background:var(--yellow)}
.nav.dark .menu-btn .chip{background:var(--bone); color:var(--umber)}
.menu-btn[aria-expanded="true"] .chip{background:var(--bone); color:var(--umber)}
.menu-btn .chip{position:relative}

.menu-btn[aria-expanded="true"] .dots{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .dots i:nth-child(2n){opacity:0; transform:scale(0)}

.panel{position:absolute; top:calc(100% + 6px); right:calc(var(--gut-r) + var(--pad)); width:min(680px, calc(100vw - 2 * var(--gut) - 16px)); background:var(--umber); color:var(--field); padding:clamp(24px,3vw,44px); clip-path:polygon(0 0, 100% 0, 100% 0, 0 0); visibility:hidden; transition:clip-path .7s var(--ease), visibility 0s .7s}
.panel.open{--k:22px; clip-path:polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, var(--k) 100%, 0 calc(100% - var(--k))); visibility:visible; transition:clip-path .7s var(--ease)}
.big-links{list-style:none; margin:0; padding:0 0 clamp(24px,3vw,36px)}
.big-links a{display:flex; align-items:baseline; justify-content:space-between; gap:20px; font-family:var(--display); font-weight:400; font-size:clamp(36px, 4.4vw, 60px); line-height:1.1; letter-spacing:-.03em; color:var(--bone); transition:color .35s var(--ease), padding .5s var(--ease)}
.big-links a span{font-size:11px; letter-spacing:.19em; color:var(--silt)}
.big-links:hover a{color:var(--loam)}
.big-links a:hover,.big-links a:focus-visible{color:var(--bone); padding-left:14px}
.panel li{opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .6s var(--ease)}
.panel.open li{opacity:1; transform:none}
.panel.open .big-links li:nth-child(2){transition-delay:.05s}.panel.open .big-links li:nth-child(3){transition-delay:.1s}.panel.open .big-links li:nth-child(4){transition-delay:.15s}.panel.open .big-links li:nth-child(5){transition-delay:.2s}
.cols3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(16px, 3.4vw, 48px)}
.sub-links{border-top:1px solid rgba(194,190,183,.18); padding-top:clamp(20px,2.4vw,28px)}
.sub-links h3{margin:0 0 16px; color:var(--sand); font-size:14px; letter-spacing:.16em}
.sub-links ul{list-style:none; margin:0; padding:0; font-size:19px; line-height:1.85}
.sub-links a{color:var(--field); transition:color .3s}
.sub-links a:hover{color:var(--bone)}
.panel-foot{display:flex !important; justify-content:space-between; margin-top:clamp(20px,2.4vw,28px); padding-top:18px; border-top:1px solid rgba(194,190,183,.18); font-size:17px; align-items:baseline}
.panel-foot .cap{color:var(--silt)}
.panel-foot b{text-align:right; font-weight:400; color:var(--bone); user-select:all}

.panel-about{margin:clamp(20px,2.4vw,28px) 0 0; padding-top:clamp(20px,2.4vw,28px); border-top:1px solid rgba(194,190,183,.18); font-size:17px; line-height:1.6; color:var(--dust)}
/* hero: a staggered headline, the copy set beside its middle line */
.htop{--fs:clamp(48px, 8.2vw, 164px); top:calc(var(--fi) + clamp(118px, 15vh, 160px)) !important; display:block !important; text-align:left !important; padding-left:calc(var(--gut) + var(--pad)) !important; padding-right:calc(var(--gut-r) + var(--pad)) !important}
.htop .eyebrow{margin-left:.06em; margin-bottom:clamp(18px, 2.6vh, 28px)}
.htop .eyebrow{display:flex !important; width:max-content; margin-left:0 !important; margin-right:auto !important}
.htop .h1s{width:100%; margin:0 !important; text-align:left !important; font-size:var(--fs) !important; line-height:.9 !important; letter-spacing:-.045em; font-weight:400 !important; color:var(--ink)}
.htop .h1s .ln{display:block; white-space:nowrap}
.htop .h1s .l3 .clip > span{transition-delay:.42s}
.htop .h1s em{font-style:normal; color:#3D322B}
.htop .copy{position:absolute; right:calc(var(--gut-r) + var(--pad)); top:calc(var(--fs) * .1 + 40px); width:min(360px, 27vw); display:flex !important; flex-direction:column; align-items:flex-start !important; gap:20px !important; text-align:left}
.htop .copy p{font-size:15px !important; line-height:1.55 !important; max-width:none !important; color:var(--ink) !important; font-weight:500}
.htop .copy .btn{align-self:flex-start !important}
@media (max-width: 900px){
  .htop{--fs:clamp(38px, 11.5vw, 64px)}
  .htop .h1s .ln{white-space:normal}
  .htop .copy{position:relative; right:auto; top:auto; width:auto; margin-top:26px}
}
/* menu: two columns of link rows */
.cols2{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(20px, 3vw, 40px)}
.sub-links h3{margin:0 0 12px !important}
.sl{display:flex !important; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px 14px 18px; border:1px solid rgba(194,190,183,.2); color:var(--bone) !important; font-size:18px; transition:background-color .4s var(--ease), border-color .4s var(--ease)}
.sl:hover{background:rgba(242,241,239,.08); border-color:rgba(194,190,183,.45)}
.sl .ar{position:relative; width:14px; height:14px; flex:none; transition:transform .5s var(--ease)}
.sl .ar::before,.sl .ar::after{content:""; position:absolute; background:currentColor}
.sl .ar::before{left:6.5px; top:0; width:1px; height:14px}.sl .ar::after{top:6.5px; left:0; height:1px; width:14px}
.sl:hover .ar{transform:rotate(90deg)}
.sub-links ul{line-height:1.2 !important}
/* the button */
.btn{--h:60px; --c:50px; --k:14px; position:relative; display:inline-flex; align-items:center; gap:22px; height:var(--h); min-width:268px; padding:5px 28px 5px 5px; background:var(--bone); color:var(--ink); flex:none; align-self:flex-start}
.btn .ic{--k:10px; width:var(--c); height:var(--c); display:grid; place-items:center; color:var(--bone); background:var(--umber); flex:none; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, var(--k) 100%, 0 calc(100% - var(--k)))}
.btn .lbl{flex:1; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--display); font-weight:500; font-size:14px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap}
.btn .lbl::after{content:""; width:26px; height:1px; background:currentColor; transform-origin:left; transition:transform .6s var(--ease)}
@keyframes fly{0%{transform:translateY(0); opacity:1} 40%{transform:translateY(-9px); opacity:0} 41%{transform:translateY(9px); opacity:0} 100%{transform:translateY(0); opacity:1}}
.btn:hover .chev path,.btn:focus-visible .chev path{animation:fly 1.1s var(--ease) infinite}
.btn:hover .chev path:nth-child(2),.btn:focus-visible .chev path:nth-child(2){animation-delay:.09s}
.btn:hover .chev path:nth-child(3),.btn:focus-visible .chev path:nth-child(3){animation-delay:.18s}
.btn:hover .chev path:nth-child(1){stroke:var(--yellow)}
.btn:hover .lbl::after,.btn:focus-visible .lbl::after{transform:scaleX(1.6)}
.btn.on-dark{background:var(--bone)}
.btn.cut{--k:16px; clip-path:polygon(0 0, 100% 0, 100% 100%, var(--k) 100%, 0 calc(100% - var(--k)))}
.btn{min-width:0; padding:0 34px 0 0; gap:24px; box-shadow:inset 0 0 0 1px rgba(42,35,31,.12)}
.btn .ic{--k:14px; height:var(--h); width:calc(var(--h) + 4px); clip-path:polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, 0 100%)}
.btn .lbl{flex:none; font-size:15px; letter-spacing:.2em; font-weight:500}
.btn .lbl::after{display:none}
.btn{--h:60px; height:var(--h); padding:6px 34px 6px 6px !important; gap:26px !important; background:var(--bone); box-shadow:none !important; overflow:hidden; isolation:isolate}
.btn.cut{--k:12px}
.btn .ic{--k:12px; height:calc(var(--h) - 12px) !important; width:calc(var(--h) - 12px) !important; clip-path:polygon(0 0, 100% 0, 100% 100%, var(--k) 100%, 0 calc(100% - var(--k))) !important; position:relative; z-index:1}
.btn::before{content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(90deg, transparent, rgba(42,35,31,.08), transparent); transform:translateX(-110%); transition:transform .9s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(110%)}
.btn .lbl{position:relative; z-index:1; line-height:1; font-weight:600 !important; font-size:15px !important; letter-spacing:.2em !important; transition:letter-spacing .6s var(--ease)}
.btn:hover .lbl,.btn:focus-visible .lbl{letter-spacing:.26em !important}
.btn:hover,.btn:focus-visible{background:var(--bone) !important}
.btn:hover .ic,.btn:focus-visible .ic{background:var(--umber) !important}
.btn .ic::after{content:""; position:absolute; right:5px; top:5px; width:5px; height:5px; border-radius:50%; background:var(--yellow); transform:scale(0); transition:transform .5s var(--ease)}
.btn:hover .ic::after{transform:scale(1)}
.btn:hover .ic,.btn:focus-visible .ic{background:var(--ink)}
.btn:hover,.btn:focus-visible{background:#fff}
.btn{transition:background-color .4s var(--ease)}
.btn .ic{transition:background-color .4s var(--ease)}

/* ——— 2. HERO: Day page, the picture in a window that opens ——— */
.hero{position:relative; height:320vh}
.pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate; background:var(--card)}
.pin > .measure{z-index:0}
#hcv{position:absolute; z-index:1; inset:0; width:100%; height:100%; display:block; touch-action:pan-y}
@media (hover:hover){ .pin{cursor:grab} .pin.spinning{cursor:grabbing} .pin .htop a,.pin .htop .copy{cursor:auto} .pin .htop a{cursor:pointer} }
.htop{position:absolute; left:0; right:0; bottom:calc(var(--fi) + 110px); z-index:3; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:end; will-change:transform}
.h1{grid-column:1 / span 8; margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(40px, 5.5vw, 112px); line-height:.9; letter-spacing:-.045em; color:var(--ink)}
.h1 .ln{display:block; white-space:nowrap}
.h1 .l2{color:var(--dust)}
.h1 .clip{display:block; overflow:hidden; padding-bottom:.04em}
.h1 .clip > span{display:inline-block; transform:translateY(110%)}
.ready .h1 .clip > span{transform:none; transition:transform 1.4s var(--ease) .2s}
.ready .h1 .l2 .clip > span{transition-delay:.32s}
.htop .copy{grid-column:9 / span 4; display:flex; flex-direction:column; gap:22px; padding-bottom:.4em}
.htop .copy p{margin:0; font-size:16px; line-height:1.55; color:rgba(242,241,239,.85); max-width:42ch}
.hread{position:absolute; z-index:3; right:calc(var(--gut-r) + var(--pad)); top:calc(var(--fi) + 120px); text-align:right; color:rgba(242,241,239,.75); line-height:1.9; font-variant-numeric:tabular-nums}
.hread b{color:var(--bone); font-weight:500}
.hread .live{display:inline-flex; align-items:center; gap:8px}
.hread .live i{width:6px; height:6px; border-radius:50%; background:var(--yellow); animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.hud{position:absolute; z-index:3; left:calc(var(--gut) + var(--pad)); bottom:calc(var(--fi) + 26px)}
.ring{display:flex; align-items:center; gap:16px}
.ring svg{width:56px; height:56px; overflow:visible}
.ring circle{fill:none; vector-effect:non-scaling-stroke}

.ring .trk{stroke:rgba(242,241,239,.3)}
.ring .arc{stroke:var(--bone); transform:rotate(-90deg); transform-origin:center}
.ring .cnt{font-variant-numeric:tabular-nums; color:rgba(242,241,239,.7); line-height:1.7}
.ring .cnt b{color:var(--bone); font-weight:500}
.htop{top:calc(var(--fi) + clamp(110px, 14vh, 150px)); bottom:auto; display:flex !important; flex-direction:column; align-items:center; text-align:center; gap:clamp(20px, 3vh, 30px)}
.htop .h1{font-size:clamp(46px, 8vw, 156px); line-height:.9; letter-spacing:-.045em; color:var(--ink)}
.htop .h1 .l2{color:var(--ink)}
.htop .h1 em{font-style:normal; color:#3D322B}
.htop .eb{display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid var(--rule); font-family:var(--display); font-weight:500; font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--deep-type)}
.htop .eb i{width:6px; height:6px; border-radius:50%; background:var(--yellow)}
.htop .h1 .ln{white-space:nowrap}
.htop .copy{align-items:center; padding:0; gap:26px}
.htop .copy p{color:var(--haze); max-width:56ch; font-size:clamp(17px, 1.3vw, 20px); line-height:1.55}
.htop .btn{align-self:center}
.hbg{position:absolute; inset:0; z-index:0; background:url(../assets/img/hero-bg.webp) 60% 40%/cover}
.hbg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(223,219,213,.86) 0%, rgba(223,219,213,.72) 45%, rgba(223,219,213,.5) 70%, rgba(223,219,213,.8) 100%), linear-gradient(90deg, rgba(223,219,213,.35), rgba(223,219,213,0) 60%)}
/* the opening film: the brand video under a Day wash so the headline and the globe stay legible;
   js/main.js fades it (--hv) as the camera falls to the globe and pauses it off-screen */
.hvid{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:var(--hv,1); background:var(--card)}
.hvid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; filter:saturate(.78) contrast(1.04)}
.hvid::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(223,219,213,.86) 0%, rgba(223,219,213,.7) 38%, rgba(223,219,213,.46) 58%, rgba(223,219,213,.86) 100%), linear-gradient(90deg, rgba(223,219,213,.4), rgba(223,219,213,0) 50%, rgba(223,219,213,.35) 100%)}
.hpat{position:absolute; inset:0; z-index:0; background:url(../assets/img/topo-2.webp) 50% 50%/cover; mix-blend-mode:multiply; opacity:.34; -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%, rgba(0,0,0,.35), #000 80%); mask-image:radial-gradient(ellipse 85% 75% at 50% 40%, rgba(0,0,0,.35), #000 80%)}
.pills{position:absolute; inset:0; z-index:3; pointer-events:none}
.pill{position:absolute; display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 12px; background:rgba(242,241,239,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(42,35,31,.16); font-family:var(--display); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); opacity:0; transform:translateY(12px)}
.ready .pill{opacity:1; transform:none; transition:opacity 1s 1s var(--ease), transform 1.2s 1s var(--ease)}
.pill i{width:7px; height:7px; border-radius:50%}
.pill i.y{background:var(--yellow)}.pill i.s{background:var(--deep)}.pill i.c{background:var(--clay)}
.ring .trk{stroke:var(--rule) !important}.ring .arc{stroke:var(--ink) !important}.ring .cnt{color:var(--loam) !important}.ring .cnt b{color:var(--ink) !important}
.htop .copy,.hud,.hread{opacity:0}
.ready .htop .copy,.ready .hud,.ready .hread{opacity:1; transition:opacity 1s .6s var(--ease)}

/* ——— 3. TAGLINE: the same pinned stage, at dusk ——— */
.dusk-veil{position:absolute; inset:0; z-index:1; background:var(--umber); opacity:0; pointer-events:none}
.tag-ground{display:none; position:absolute; inset:0; z-index:-1; background-size:cover; background-position:50% 50%; opacity:.16; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 60%, #000, transparent 75%); mask-image:radial-gradient(ellipse 80% 70% at 70% 60%, #000, transparent 75%)}
.tagin{isolation:isolate; position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:center; padding-top:80px; color:var(--ink); opacity:0; pointer-events:none}
.statement{margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(44px, 6vw, 112px); line-height:.98; letter-spacing:-.035em}
.statement .l{display:block}
.statement .l2{padding-left:0}
.tagin{align-items:center; text-align:center}
.tagin .statement{text-wrap:nowrap; font-size:clamp(34px, 4.6vw, 88px) !important; line-height:1 !important; letter-spacing:-.04em}
.tagin .statement .l{white-space:nowrap}
.tagin .statement .w{color:var(--dust)}
.tagin .statement .w.lit{color:var(--haze)}
.tagin .statement .w.c.lit{color:var(--ink)}
.tagin .tag-sub{margin-top:clamp(36px, 5vh, 56px) !important; gap:20px !important}
.tagin .tag-sub .rule{width:120px !important}
.tagin .tag-sub p{font-size:clamp(17px, 1.3vw, 20px) !important; max-width:44ch !important; text-align:center; color:var(--haze) !important}
@media (max-width: 900px){ .tagin .statement .l{white-space:normal} .tagin .statement{font-size:clamp(30px, 9vw, 52px) !important} }
.statement .w{color:var(--dust); transition:color .6s var(--ease)}
.statement .w.lit{color:var(--ink)}
.tag-sub{display:flex !important; flex-direction:column; align-items:center; gap:22px; margin-top:clamp(32px, 4vw, 56px)}
.tag-sub p{grid-column:8 / span 5; margin:0; font-size:19px; line-height:1.5; color:var(--umber); max-width:38ch}
.tag-sub .rule{width:min(320px, 60vw); height:1px; background:var(--rule); position:relative}
.tag-sub .rule i{position:absolute; top:-2px; left:calc(var(--q,0) * 100% - 5px); width:5px; height:5px; border-radius:50%; background:var(--yellow)}
.tag-anchor{position:absolute; left:0; top:62%; width:1px; height:1px}
/* ——— 4. SOLUTION ——— */
.sol{position:relative; padding-top:clamp(110px, 14vw, 190px)}
.sol-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px}
.sol-head .eyebrow{grid-column:1 / span 3; align-self:start; padding-top:.9em}
.sol-lead{grid-column:4 / span 9; margin:0; font-family:var(--display); font-weight:400; font-size:clamp(26px, 2.75vw, 46px); line-height:1.2; letter-spacing:-.022em; color:var(--haze); max-width:24em; text-wrap:pretty}
.sol-lead b{font-weight:500; color:var(--ink)}
.sol-cols{grid-column:4 / span 9; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px, 4vw, 64px); margin-top:clamp(48px, 6vw, 88px)}
.sc{border-top:1px solid var(--rule); padding-top:20px; display:flex; flex-direction:column; gap:14px}
.sc .cap{color:var(--loam); font-variant-numeric:tabular-nums}
.sc p{margin:0; font-size:17px; line-height:1.62; color:var(--umber); max-width:40ch}
.sc.lead-in p{color:var(--ink)}
.dial-wrap{position:relative; height:calc(6 * 72vh + 100vh); margin-top:clamp(60px, 8vw, 110px)}
.dial-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; border-top:1px solid var(--rule)}
.dial-pin .measure{opacity:.9}
.dial{position:absolute; left:50%; top:47%; width:min(64vh, 640px); aspect-ratio:1; transform:translate(-50%,-50%)}
.dial svg{width:100%; height:100%; overflow:visible; display:block}
.dial svg *{vector-effect:non-scaling-stroke}
.dial .tk{stroke:var(--silt); stroke-width:1; opacity:.55}
.dial .tk.M{stroke:var(--ink); opacity:1}
.dial .prog{fill:none; stroke:var(--ink); stroke-width:1.4}
.dial .sn{font-family:var(--display); font-size:11px; letter-spacing:.16em; fill:var(--silt); text-anchor:middle; dominant-baseline:middle}
.dial .sn.on{fill:var(--ink)}
.dial .needle line{stroke:var(--ink); stroke-width:1}
.dial .needle rect{fill:var(--clay)}
.dial .needle circle{fill:var(--yellow)}
.art{opacity:0; transform:scale(.35); transition:opacity .6s var(--ease), transform 1s var(--ease)}
.art.on{opacity:1; transform:none}
.art .t{fill:rgba(17,17,17,.14); stroke:var(--ink); stroke-width:1}
.art .ln{fill:none; stroke:var(--ink); stroke-width:1}
.art .lo{fill:none; stroke:rgba(17,17,17,.16); stroke-width:1}
.art .sky{fill:rgba(146,198,237,.28); stroke:var(--deep); stroke-width:1; stroke-opacity:.6}
.art .lk{fill:none; stroke:var(--deep); stroke-width:1}
.art .dsh{fill:none; stroke:var(--deep); stroke-width:1; stroke-dasharray:4 5}
.art .clay{fill:none; stroke:var(--clay); stroke-width:1.5}
.art .clayd{fill:rgba(169,102,92,.07); stroke:var(--clay); stroke-width:1; stroke-dasharray:3 5}
.art .wp{fill:var(--card); stroke:var(--deep); stroke-width:1}
.art .dt{fill:var(--yellow)}
.art .ld{fill:var(--deep)}
.art .ring{fill:rgba(242,241,239,.8); stroke:var(--ink); stroke-width:1}
.spin{animation:spin 40s linear infinite; transform-origin:0 0}
@keyframes spin{to{transform:rotate(360deg)}}
.d-title{position:absolute; left:calc(var(--gut) + var(--pad)); top:50%; transform:translateY(-50%); width:min(26vw, 380px)}
.d-title h3{position:absolute; left:0; top:50%; margin:0; font-family:var(--display); font-weight:400; font-size:clamp(30px, 3.4vw, 58px); line-height:1.02; letter-spacing:-.03em; opacity:0; transform:translateY(calc(-50% + 30px)); transition:opacity .5s var(--ease), transform .8s var(--ease); width:100%; text-wrap:balance}
.d-title h3.on{opacity:1; transform:translateY(-50%)}
.d-title h3.up{transform:translateY(calc(-50% - 30px))}
.d-index{position:absolute; right:calc(var(--gut-r) + var(--pad)); top:50%; transform:translateY(-50%); text-align:right}
.d-index b{display:block; font-family:var(--display); font-weight:300; font-size:clamp(56px, 7vw, 120px); line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.d-index span{color:var(--loam)}
.d-list{position:absolute; left:0; right:0; bottom:calc(var(--fi) + 18px); display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:0; border-top:1px solid var(--rule)}
.d-list button{all:unset; cursor:pointer; padding:14px 14px 4px 0; display:flex; gap:10px; align-items:baseline; color:var(--silt); font-size:13.5px; line-height:1.35; transition:color .4s var(--ease); position:relative}
.d-list button::before{content:""; position:absolute; left:0; right:14px; top:-1px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.d-list button.on{color:var(--ink)}
.d-list button.on::before{transform:scaleX(1)}
.d-list button:focus-visible{outline:1.5px solid var(--deep); outline-offset:2px}
.d-list .n{font-family:var(--display); font-size:10.5px; letter-spacing:.16em; font-variant-numeric:tabular-nums; flex:none}

/* ——— the pixel shift (darknode): the stage breaks into blocks of the next light ——— */
#pxl{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; display:block}

/* ——— 3. ABOUT US: picture + dial on the left, the three parts on the right (darknode) ——— */
.about{position:relative; height:calc(3 * 85vh + 100vh); background:var(--card)}
.ab-pin{position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-columns:1fr 1fr; overflow:hidden}
.ab-left{position:relative; overflow:hidden; color:var(--bone); background:var(--umber)}
.ab-bg{position:absolute; inset:-3%; background-size:cover; background-position:50% 50%; opacity:0; transform:scale(1.08); transition:opacity 1s var(--ease), transform 1.6s var(--ease)}
.ab-bg.on{opacity:1; transform:scale(1)}
.ab-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,29,31,.35), rgba(21,29,31,.05) 35%, rgba(21,29,31,.15) 60%, rgba(21,29,31,.82))}
.ab-grid-l{position:absolute; inset:0; background-image:linear-gradient(rgba(242,241,239,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(242,241,239,.08) 1px, transparent 1px); background-size:100px 100px}
.ab-dial{position:absolute; left:50%; top:44%; width:min(78%, 62vh); aspect-ratio:1; transform:translate(-50%,-50%)}
.ab-dial svg{width:100%; height:100%; overflow:visible; display:block}
.ab-dial svg *{vector-effect:non-scaling-stroke}
.ab-dial .tk{stroke:rgba(242,241,239,.45); stroke-width:1}
.ab-dial .tk.M{stroke:var(--bone); stroke-width:1.4}
.ab-dial .trk{fill:none; stroke:rgba(242,241,239,.28)}
.ab-dial .prog{fill:none; stroke:var(--bone); stroke-width:2}
.ab-dial .needle line{stroke:var(--bone); stroke-width:1.4}
.ab-dial .needle rect{fill:var(--clay-b)}
.ab-dial .needle circle{fill:var(--yellow)}
.ab-dial .art{display:none !important}
.ab-dial .h3 *{vector-effect:non-scaling-stroke; fill:none; stroke-linejoin:round; stroke-linecap:round}
.ab-dial .h3 .pl{fill:rgba(21,29,31,.28); stroke:rgba(242,241,239,.75); stroke-width:1}
.ab-dial .h3 .gr{stroke:rgba(242,241,239,.14); stroke-width:1}
.ab-dial .h3 .ed{stroke:rgba(242,241,239,.45); stroke-width:1}
.ab-dial .h3 .k{stroke:var(--bone); stroke-width:1.3}
.ab-dial .h3 .k.fill{fill:rgba(21,29,31,.45)}
.ab-dial .h3 .lo{stroke-opacity:.45}
.ab-dial .h3 .rg{stroke:var(--sky); stroke-width:1.2; fill:rgba(146,198,237,.12)}
.ab-dial .h3 .sky{stroke:var(--sky); stroke-width:1.1; fill:rgba(146,198,237,.22)}
.ab-dial .h3 .lk{stroke:var(--sky); stroke-width:1.4}
.ab-dial .h3 .dr{stroke:rgba(242,241,239,.5); stroke-width:1; stroke-dasharray:2 4}
.ab-dial .h3 .cl{stroke:var(--clay-b); stroke-width:1.6}
.ab-dial .h3 .dsh{stroke-dasharray:5 6}
.ab-dial .h3 .yd{fill:var(--yellow); stroke:none}
.ab-dial .art{opacity:0; transform:scale(.4); transition:opacity .6s var(--ease), transform 1s var(--ease)}
.ab-dial .art.on{opacity:1; transform:none}
.ab-dial .t{fill:rgba(242,241,239,.22); stroke:var(--bone); stroke-width:1.3}
.ab-dial .ln{fill:none; stroke:var(--bone); stroke-width:1.3}
.ab-dial .lo{fill:none; stroke:rgba(242,241,239,.3); stroke-width:1}
.ab-dial .sky{fill:rgba(146,198,237,.32); stroke:var(--sky); stroke-width:1.2}
.ab-dial .lk{fill:none; stroke:var(--sky); stroke-width:1.6}
.ab-dial .dsh{fill:none; stroke:var(--sky); stroke-width:1.3; stroke-dasharray:5 6}
.ab-dial .clay{fill:none; stroke:var(--clay-b); stroke-width:2}
.ab-dial .clayd{fill:rgba(217,149,127,.14); stroke:var(--clay-b); stroke-width:1.2; stroke-dasharray:4 5}
.ab-dial .wp{fill:var(--night); stroke:var(--sky)}
.ab-dial .dt{fill:var(--yellow)}
.ab-dial .ld{fill:var(--clay-b)}
.ab-dial .ring{fill:rgba(21,29,31,.55); stroke:var(--bone); stroke-width:1.3}
.spin{animation:spin 40s linear infinite; transform-origin:0 0}
@keyframes spin{to{transform:rotate(360deg)}}
.ab-cnt{position:absolute; left:50%; top:-2%; transform:translateX(-50%); display:flex; gap:8px; color:rgba(242,241,239,.6); font-variant-numeric:tabular-nums}
.ab-cnt b{color:var(--bone); font-weight:500}
.ab-scroll{position:absolute; left:50%; bottom:-1%; transform:translateX(-50%); color:var(--bone)}
/* keep the dial clear of the fixed nav (104px) and the title block on any screen height */
@media (min-width:701px){ .ab-dial{--avail:calc(100vh - 144px - 250px); --avail:calc(100svh - 144px - 250px); top:calc(144px + var(--avail)/2); width:min(78%, 62vh, var(--avail))} }
.ab-title-w{position:absolute; left:calc(var(--gut) + var(--pad)); right:var(--pad); bottom:calc(var(--fi) + clamp(24px, 4vh, 44px))}
.ab-title-w .eyebrow{color:var(--sky); margin-bottom:14px}
.ab-title{margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(32px, 3.4vw, 60px); line-height:.94; letter-spacing:-.04em; color:var(--bone)}
.ab-h::before{display:none !important}
.ab-h{color:var(--bone) !important; font-size:clamp(44px, 6vw, 112px) !important; letter-spacing:-.04em !important; margin-top:14px !important; margin:0 0 clamp(20px, 3vh, 36px); font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(20px, 1.8vw, 30px); letter-spacing:.06em; color:var(--deep-type); display:flex; align-items:center; gap:14px}
.ab-h::before{content:""; width:10px; height:10px; background:currentColor}
.ab-glow{position:absolute; inset:0; z-index:0; background:#141618; overflow:hidden}
.ab-glow i{position:absolute; inset:-25%; background-size:cover; background-position:50% 50%; filter:blur(70px) saturate(1.5) brightness(.75); opacity:0; transform:scale(1.15); transition:opacity 1.2s var(--ease), transform 2s var(--ease)}
.ab-glow i.on{opacity:1; transform:scale(1)}
.ab-glow::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 90% 70% at 30% 50%, rgba(20,22,24,0), rgba(20,22,24,.55)); pointer-events:none}
.ab-right > *:not(.ab-glow){position:relative; z-index:1}
.ab-right{position:relative; overflow:hidden; color:var(--bone); display:flex; flex-direction:column; justify-content:center; padding:120px calc(var(--gut-r) + var(--pad)) 48px clamp(28px, 4vw, 72px)}
.ai{border-top:1px solid rgba(242,241,239,.16); padding-block:20px}
.ai:last-child{border-bottom:1px solid rgba(242,241,239,.16)}
.ai-head{display:grid; grid-template-columns:1fr; align-items:baseline; cursor:pointer}
.ai-head .n{color:rgba(242,241,239,.5); font-variant-numeric:tabular-nums; transition:color .4s}
.ai h3{margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:20px; line-height:1; letter-spacing:-.01em; color:var(--loam); transition:font-size .8s var(--ease), color .5s var(--ease), letter-spacing .8s var(--ease)}
.ai.on h3{font-size:clamp(28px, 2.6vw, 44px); color:var(--bone); letter-spacing:-.04em}
.ai.on .n{color:var(--bone)}
.ai h3{color:rgba(242,241,239,.72) !important}
.ai.on h3{color:var(--bone) !important}
.ai-pic{display:block; margin-top:20px; width:min(100%, 320px); aspect-ratio:16/9; background-size:cover; background-position:50% 50%; opacity:0; transform:translateY(14px); transition:opacity .6s .2s var(--ease), transform .9s .2s var(--ease)}
.ai.on .ai-pic{opacity:1; transform:none}
.ai-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s var(--ease)}
.ai.on .ai-body{grid-template-rows:1fr}
.ai-body > div{overflow:hidden; padding-left:0}
.ai-body p{margin:0; padding-top:24px; font-size:clamp(17px, 1.3vw, 21px); line-height:1.55; color:rgba(242,241,239,.82); max-width:40ch; opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .8s var(--ease)}
.ai.on .ai-body p{opacity:1; transform:none; transition-delay:.15s}
/* the items read as controls: a +/- that turns as the item opens, a lift on hover, keyboard focus;
   lists marked .ai-numbered (homepage About, Vision & Mission, Our Approach) keep their numbers in a column of their own */
.ai-head{grid-template-columns:1fr auto; column-gap:16px}
.ai-head::after{content:""; align-self:center; width:30px; height:30px; flex:none; border:1px solid rgba(242,241,239,.26); color:rgba(242,241,239,.7);
  background:linear-gradient(currentColor, currentColor) 50% 50%/11px 1px no-repeat, linear-gradient(currentColor, currentColor) 50% 50%/1px 11px no-repeat;
  transition:background-size .5s var(--ease), border-color .4s, color .4s, transform .6s var(--ease)}
.ai.on .ai-head::after{background-size:11px 1px, 1px 0; border-color:rgba(242,241,239,.55); color:var(--bone); transform:rotate(180deg)}
.ai h3{transition:font-size .8s var(--ease), color .5s var(--ease), letter-spacing .8s var(--ease), transform .5s var(--ease)}
.ai:not(.on) .ai-head:hover h3{color:var(--bone) !important; transform:translateX(6px)}
.ai-head:hover::after{border-color:var(--bone); color:var(--bone)}
.ai-head:hover .n{color:var(--bone)}
.ai-head:focus-visible{outline:1px solid var(--sky); outline-offset:8px}
.ai-numbered .ai-head{grid-template-columns:76px 1fr auto}
.ai-numbered .ai-body > div{padding-left:92px} /* number column + gap */

/* ——— 4. CONTACT US: a statement, then the picture opens under three cards (zrk) ——— */
.contact{position:relative; height:300vh; background:#C5E4FC}
.ct-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate; background:linear-gradient(180deg, #C5E4FC 0%, #A9D3F3 55%, #92C6ED 100%)}
.ct-pin > .measure{--grid:rgba(34,75,115,.1)}
.ct-side{position:absolute; top:50%; transform:translateY(-50%); color:var(--deep-type); z-index:1}
.ct-side.l{left:calc(var(--gut) + var(--pad))}.ct-side.r{right:calc(var(--gut-r) + var(--pad)); text-transform:none; letter-spacing:.08em}
.ct-intro{position:absolute; left:50%; top:46%; width:min(1000px, calc(100% - 2*var(--gut) - 2*var(--pad))); transform:translate(-50%,-50%); transform-origin:50% 0; text-align:center; z-index:4; will-change:transform, opacity}
.ct-chip{display:inline-flex; margin-bottom:clamp(24px, 3vw, 40px); border-bottom:1px solid var(--ink); font-size:11px}
.ct-chip span{padding:5px 22px 4px 8px; color:var(--ink)}
.ct-chip b{font-weight:500; padding:5px 8px 4px; background:var(--deep-type); color:var(--bone)}
.ct-intro .wv{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em}
.ct-intro .wv > span{display:inline-block; transform:translateY(110%); will-change:transform}
.ct-intro .ct-big{font-size:clamp(44px, 6vw, 112px) !important; margin-bottom:22px; color:var(--ink)}
.ct-intro h2:not(.ct-big){font-size:clamp(20px, 1.7vw, 28px) !important; max-width:34em; margin-inline:auto !important; color:var(--haze) !important; letter-spacing:-.01em !important}
.ct-intro h2{margin:0; font-family:var(--display); font-weight:400; font-size:clamp(34px, 4.6vw, 84px); line-height:1.02; letter-spacing:-.035em; color:var(--ink); text-wrap:balance}
.ct-media{position:absolute; inset:0; z-index:2; overflow:hidden; background:var(--umber); clip-path:polygon(var(--cx,38%) var(--ct,82%), calc(100% - var(--cx,38%) - var(--ck,28px)) var(--ct,82%), calc(100% - var(--cx,38%)) calc(var(--ct,82%) + var(--ck,28px)), calc(100% - var(--cx,38%)) calc(100% - var(--cb,6vh)), var(--cx,38%) calc(100% - var(--cb,6vh)))} /* a window with the house cut corner; js eases it open */
.ct-media .ct-img{position:absolute; left:0; top:0; width:100%; height:118%; object-fit:cover; object-position:50% 30%; transform-origin:50% 0; filter:saturate(.95) contrast(1.02); transform:scale(var(--vs,1.15))}
.ct-pattern{position:absolute; inset:0; background-size:cover; background-position:50% 50%; mix-blend-mode:multiply; opacity:.38; -webkit-mask-image:linear-gradient(180deg, transparent 35%, #000 95%); mask-image:linear-gradient(180deg, transparent 35%, #000 95%)}
.ct-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(17,17,17,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.08) 1px, transparent 1px); background-size:100px 100px}
.ct-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(197,228,252,.85) 0%, rgba(197,228,252,.35) 30%, rgba(197,228,252,0) 45%, rgba(223,219,213,0) 55%, rgba(223,219,213,.6) 80%, rgba(223,219,213,.8)); opacity:var(--cv,0)}
.ct-media::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(223,226,228,.86) 0%, rgba(223,226,228,.55) 20%, rgba(223,226,228,0) 42%)}
.ct-pattern,.ct-grid,.ct-veil,.ct-ret{z-index:2}
.ct-ret{position:absolute; right:12%; top:22%; width:34px; height:34px; overflow:visible}
.ct-ret *{fill:none; stroke:var(--clay); stroke-width:1.4; vector-effect:non-scaling-stroke}
.ct-cards{position:absolute; left:0; right:0; bottom:calc(var(--fi) + clamp(16px, 3vh, 36px)); z-index:3; pointer-events:none}
.ct-panel{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); background:rgba(239,237,233,.95); border:1px solid rgba(42,35,31,.28); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.ct-card{position:relative; display:flex; flex-direction:column; min-width:0; opacity:0; transform:translateY(40px)}
.ct-card + .ct-card{border-left:1px solid rgba(42,35,31,.28)}
.cc-head{display:flex; justify-content:space-between; padding:16px clamp(18px, 2vw, 30px) 14px; color:var(--ink); background-image:linear-gradient(90deg, rgba(42,35,31,.35) 50%, transparent 0); background-size:10px 1px; background-repeat:repeat-x; background-position:bottom}
.cc-head .n{color:var(--silt)}
.cc-fig{position:relative; height:clamp(150px, 22vh, 230px); background-image:linear-gradient(90deg, rgba(42,35,31,.35) 50%, transparent 0); background-size:10px 1px; background-repeat:repeat-x; background-position:bottom; cursor:crosshair}
.cc-fig .hlbox{position:relative; height:100%; aspect-ratio:5/4}
.cc-fig svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.cc-fig svg *{vector-effect:non-scaling-stroke; fill:none; stroke-linejoin:round; stroke-linecap:round}
.cc-fig .e{stroke:#A39684; stroke-width:1}
.cc-fig .h{stroke:#A39684; stroke-width:1; stroke-dasharray:6 3 1 3}
.cc-fig .k{stroke:var(--deep); stroke-width:1.2; fill:rgba(60,116,166,.1) !important}
.cc-fig .k2{stroke:var(--deep-type); stroke-width:1.5; fill:rgba(146,198,237,.28) !important}
.cc-fig .b{stroke:var(--deep); stroke-width:1.2}
.cc-fig .y{fill:var(--yellow); stroke:none}
.cc-read{position:absolute; right:14px; bottom:10px; color:var(--silt); font-size:10px; font-variant-numeric:tabular-nums}
.cc-body{display:flex; flex-direction:column; gap:14px; padding:clamp(18px, 2.4vh, 28px) clamp(18px, 2vw, 30px) clamp(18px, 2.6vh, 30px); flex:1}
.cc-body h3{margin:0; font-family:var(--display); font-weight:500; text-transform:uppercase; font-size:clamp(24px, 2.3vw, 40px); line-height:.98; letter-spacing:-.03em; color:var(--ink)}
.cc-body p{margin:0; font-size:15px; line-height:1.55; color:var(--haze); max-width:46ch}
.cc-body .btn{margin-top:auto; align-self:flex-start; --h:46px; background:var(--umber) !important; color:var(--bone); padding:5px 24px 5px 5px !important; gap:18px !important}
.cc-body .btn .ic{background:var(--bone) !important; color:var(--umber); height:calc(var(--h) - 10px) !important; width:calc(var(--h) - 10px) !important; --k:9px}
.cc-body .btn.cut{--k:10px}
.cc-body .btn .dg{grid-template-columns:repeat(3,4px); gap:3px}.cc-body .btn .dg i{width:4px; height:4px}
.cc-body .btn .lbl{font-size:12.5px !important}
.cc-body .btn::before{background:linear-gradient(90deg, transparent, rgba(242,241,239,.12), transparent)}
.cc-body .btn:hover{background:var(--ink) !important}
.ct-cards.live{pointer-events:auto}

/* ——— 5. PLATFORM OVERVIEW ——— */
.dusk-ground{position:absolute; inset:0; background-size:cover; filter:sepia(.55) saturate(.8) brightness(.62) contrast(1.15)}
.dusk-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(42,35,31,.15), rgba(42,35,31,.75))}
.map-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(21,29,31,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(21,29,31,.22) 1px, transparent 1px); background-size:56px 56px}
.plat{position:relative; height:calc(3 * 90vh + 100vh)}
.plat-pin{position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden}
.pl-left{position:relative; overflow:hidden; color:var(--bone)}
.pl-left .dusk-ground{background-position:30% 40%; inset:-4%}
.pl-left .dusk-scrim{background:linear-gradient(180deg, rgba(42,35,31,.35), rgba(42,35,31,.2) 40%, rgba(21,29,31,.85))}
.pl-left .map-grid{background-size:100px 100px}
.pl-ring{position:absolute; left:50%; top:44%; width:min(62%, 56vh); aspect-ratio:1; transform:translate(-50%,-50%)}
.pl-ring > svg{width:100%; height:100%; overflow:visible}
.pl-ring svg *{vector-effect:non-scaling-stroke}
.pl-ring .trk{fill:none; stroke:rgba(242,241,239,.32)}
.pl-ring .arc{fill:none; stroke:var(--bone); stroke-width:1.4; transform:rotate(-90deg)}
.pl-ring .tk{stroke:var(--bone)}
.pl-ring .lk{stroke:var(--sky); stroke-dasharray:3 5; fill:none}
.pl-ring .nr{fill:rgba(21,29,31,.6); stroke:var(--bone)}
.pl-ring .g *{fill:rgba(242,241,239,.14); stroke:var(--bone); stroke-width:1}
.pl-ring .lab rect{fill:rgba(21,29,31,.7); stroke:rgba(242,241,239,.6)}
.pl-ring .lab text{font-family:var(--display); font-weight:500; font-size:11px; letter-spacing:.18em; fill:var(--bone); text-anchor:middle; dominant-baseline:central}
.pl-ring .ctr *{fill:rgba(242,241,239,.1); stroke:var(--bone); stroke-width:1}
.pl-ring .ctr .y{fill:var(--yellow); stroke:none}
.pl-ring .ctr g{opacity:0; transform:scale(.6); transition:opacity .5s var(--ease), transform .8s var(--ease)}
.pl-ring .ctr g.on{opacity:1; transform:none}
.pl-ring .dt{fill:var(--yellow)}
.pl-cnt{position:absolute; left:50%; top:16%; transform:translateX(-50%); display:flex; gap:10px; color:rgba(242,241,239,.6); font-variant-numeric:tabular-nums}
.pl-cnt b{color:var(--bone); font-weight:500}
.pl-scroll{position:absolute; left:50%; bottom:14%; transform:translateX(-50%); color:var(--bone)}
.pl-title{position:absolute; left:calc(var(--gut) + var(--pad)); right:var(--pad); bottom:calc(var(--fi) + clamp(24px, 4vh, 44px))}
.pl-title .eyebrow{color:var(--sky); margin-bottom:14px}
.pl-title h2{margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(34px, 4.4vw, 80px); line-height:.94; letter-spacing:-.035em; color:var(--bone)}
.pl-right{position:relative; display:flex; flex-direction:column; justify-content:center; padding:110px calc(var(--gut-r) + var(--pad)) 40px clamp(24px, 4vw, 64px)}
.pi{border-top:1px solid var(--rule); padding-block:18px}
.pi:last-child{border-bottom:1px solid var(--rule)}
.pi-head{display:grid; grid-template-columns:72px 1fr; align-items:baseline; cursor:pointer}
.pi-head .n{color:var(--silt); font-variant-numeric:tabular-nums; transition:color .4s}
.pi h3{margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:22px; line-height:1; letter-spacing:-.01em; color:var(--loam); transition:font-size .7s var(--ease), color .5s var(--ease), letter-spacing .7s var(--ease)}
.pi.on h3{font-size:clamp(36px, 3.6vw, 64px); color:var(--ink); letter-spacing:-.035em}
.pi.on .n{color:var(--ink)}
.pi-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s var(--ease)}
.pi.on .pi-body{grid-template-rows:1fr}
.pi-body > div{overflow:hidden; padding-left:72px}
.pi-in{display:flex; flex-direction:column; gap:20px; padding-top:22px; opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .8s var(--ease)}
.pi.on .pi-in{opacity:1; transform:none; transition-delay:.15s}
.pi-in p{margin:0; color:var(--umber); max-width:42ch; font-size:17px; line-height:1.6}
.pi-pic{--k:16px; position:relative; width:min(100%, 420px); aspect-ratio:16/9; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, var(--k) 100%, 0 calc(100% - var(--k)))}
.pi-pic .dusk-ground{inset:-8%}
.pi-pic svg{position:absolute; left:50%; top:50%; height:72%; width:auto; transform:translate(-50%,-50%); overflow:visible}
.pi-pic svg *{fill:rgba(242,241,239,.12); stroke:var(--bone); stroke-width:1; vector-effect:non-scaling-stroke}
.pi-pic svg .y{fill:var(--yellow); stroke:none}
.pi-pic .cap{position:absolute; left:14px; bottom:10px; color:rgba(242,241,239,.85); font-size:10px}
.end{height:24vh}

@media (max-width: 900px){
  .strip .mk span{display:none}
  .h1{font-size:clamp(40px, 12vw, 80px); bottom:clamp(330px, 44vh, 380px)}
  .hud .copy{flex-direction:column; align-items:flex-start}
  .h1 .ln{white-space:normal; width:calc(100% - var(--gut) - var(--gut-r) - 2*var(--pad))}
  .h1 .l1{top:108px}

  .hread{display:none}
  .pills{display:none}
  .htop .h1 .ln{white-space:normal}
  .hud{flex-direction:column-reverse; align-items:stretch}
  .hud .copy{flex-direction:column; align-items:flex-start}
  .ring svg{width:44px; height:44px}
  .tag-sub{display:flex; flex-direction:column; align-items:flex-start; gap:24px}
  .statement .l2{padding-left:0}
  .sol-head{display:flex; flex-direction:column; gap:24px}
  .sol-cols{display:flex; flex-direction:column; gap:32px}
    .dial{width:min(88vw, 52vh); top:50%}
  .d-title{top:calc(var(--fi) + 104px); transform:none; width:auto; right:calc(var(--gut-r) + var(--pad)); height:92px}
  .d-title h3{font-size:clamp(26px, 8vw, 38px); top:0}
  .d-title h3,.d-title h3.on,.d-title h3.up{transform:none}
  .d-index{top:auto; bottom:calc(var(--fi) + 26px); transform:none}
  .d-index b{font-size:56px}
  .d-list{display:none}
  .plat{height:auto}
  .plat-pin{position:relative; height:auto; display:flex; flex-direction:column}
  .pl-left{height:92vh; min-height:560px}
  .pl-ring{width:min(78vw, 46vh); top:44%}
  .pl-right{padding:48px calc(var(--gut-r) + var(--pad)) 40px calc(var(--gut) + var(--pad))}
  .pi-head{grid-template-columns:52px 1fr}
  .pi-body > div{padding-left:0}
  .pi h3,.pi.on h3{font-size:30px}
  .coord{display:none}
  .hide-m{display:none}
  .about{height:auto}
  .ab-pin{position:relative; height:auto; display:flex; flex-direction:column}
  .ab-left{height:88vh; min-height:540px}
  .ab-dial{width:min(84vw, 46vh)}
  .ab-right{padding:48px calc(var(--gut-r) + var(--pad)) 56px calc(var(--gut) + var(--pad))}
  .ai-head{grid-template-columns:1fr auto}
  .ai-body > div{padding-left:0}
  .ai h3,.ai.on h3{font-size:30px}
  .ai-numbered .ai-head{grid-template-columns:52px 1fr auto} .ai-numbered .ai-body > div{padding-left:0}
  /* the homepage opens every item on mobile: keep the number, drop the toggle */
  #about .ai-head{grid-template-columns:52px 1fr} #about .ai-head::after{display:none}
  .contact{height:auto}
  .ct-pin{position:relative; height:auto; padding-bottom:40px}
  .ct-side{display:none}
  .ct-intro{position:relative; left:auto; top:auto !important; transform:none !important; width:auto; padding:110px calc(var(--gut) + var(--pad)) 40px; opacity:1 !important}
  .ct-intro .wv > span{transform:none !important}
  .ct-media{position:relative; height:60vh; clip-path:none}
  .ct-cards{position:relative; bottom:auto; margin-top:-120px; pointer-events:auto}
  .ct-panel{grid-template-columns:1fr}
  .ct-card + .ct-card{border-left:0; border-top:1px solid rgba(42,35,31,.28)}
  .ct-card,.ct-panel{opacity:1 !important; transform:none !important}
  .htop{display:flex; flex-direction:column; align-items:flex-start; gap:24px}
  .h1 .ln{white-space:normal}
  .pl-scroll{display:none}
  .pl-cnt{top:10%}
  .btn{--h:56px; --c:46px} .btn .lbl{font-size:13px}
  .sub-links ul{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* v26 — compact menu panel (fits viewport, square) */
html,body{margin:0; padding:0}
.panel-foot{align-items:center !important; gap:16px}
.pf-mail{display:flex; align-items:baseline; gap:18px}
.panel-foot .pf-copy{color:var(--silt); text-transform:none; letter-spacing:.06em}
.panel{top:calc(100% + 4px) !important; width:min(640px, calc(100vw - 2 * var(--gut) - 16px)) !important; padding:clamp(22px, min(2.6vw, 4vh), 44px) clamp(22px,2.6vw,44px) !important; max-height:calc(100dvh - 120px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none}
.panel::-webkit-scrollbar{display:none}
.panel.open{clip-path:inset(0 0 0 0) !important}
.big-links{padding-bottom:clamp(16px, 2.6vh, 30px) !important}
.big-links a{font-size:clamp(30px, min(3.6vw, 6.2vh), 56px) !important; line-height:1.12 !important}
.sub-links{padding-top:clamp(16px, 2.6vh, 26px) !important}
.sub-links h3{font-size:12px !important; letter-spacing:.2em !important}
.sl{padding:clamp(10px,1.4vh,14px) 16px clamp(10px,1.4vh,14px) 18px !important; font-size:17px !important}
.panel-about{margin-top:clamp(16px,2.6vh,26px) !important; padding-top:clamp(16px,2.6vh,26px) !important; font-size:clamp(14px, 1.9vh, 16px) !important}
.panel-foot{margin-top:clamp(16px,2.6vh,26px) !important; font-size:16px !important}