/* Cold Serve — one stylesheet. Black + icy steel, dark only (snow and frost need the dark ground).
   Scroll-linked effects read two numbers: --p (0..1, per [data-sd] element, as it enters the view)
   and --h (0..1, hero logo, over the first screen of scroll). CSS scroll-driven animations set them
   where supported; snow.js sets them elsewhere. Reduced motion: --p stays 1, --h stays 0 (final, still). */
@property --p{syntax:'<number>';inherits:true;initial-value:1}
@property --h{syntax:'<number>';inherits:true;initial-value:0}

:root{
  --bg:#050709;--fg:#e8eef3;--mute:#a7b2bc;--ice:#a8dcf7;--ice-strong:#5ec4f2;
  --line:rgba(168,200,222,.14);--rim:rgba(150,215,250,.42);
  --display:"Michroma","Eurostile","Arial",sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* fine frost grain: sparse bright specks */
  --frost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .94 0 0 0 0 1 0 0 0 2.4 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* frost clouds: patchy rime */
  --rime:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .9 0 0 0 0 1 0 0 0 2.6 -1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* brushed steel: noise stretched along x (low x frequency, high y frequency) */
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .88 0 0 0 0 .94 .3 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--sans);overflow-wrap:break-word;overflow-x:hidden}
a{color:var(--ice)}a:hover{color:#fff}
:focus-visible{outline:2px solid var(--ice-strong);outline-offset:3px;border-radius:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 40px}}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:#111;padding:8px 12px;z-index:5}
.site-head,main,.site-foot{position:relative;z-index:1}

/* ---------- background: steel ground, brushed grain, moving sheen, edge frost, snow ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(110% 70% at 75% -10%,#132330 0%,rgba(19,35,48,0) 60%),
    radial-gradient(80% 55% at 0% 105%,#0b161e 0%,rgba(11,22,30,0) 70%),
    linear-gradient(180deg,#080a0d,#040506)}
.bg .steel{position:absolute;inset:0;background:var(--brush);opacity:.5}
.bg .sheen{position:absolute;inset:-40% -60%;will-change:transform;
  background:linear-gradient(105deg,rgba(150,210,245,0) 38%,rgba(150,210,245,.06) 47%,rgba(225,242,255,.11) 50%,rgba(150,210,245,.06) 53%,rgba(150,210,245,0) 62%)}
.bg .frost{position:absolute;inset:0;background:var(--frost),var(--rime);opacity:.35;
  -webkit-mask-image:radial-gradient(140% 110% at 50% 45%,transparent 58%,#000 100%);
          mask-image:radial-gradient(140% 110% at 50% 45%,transparent 58%,#000 100%)}
#snow{position:absolute;left:0;top:0;width:100%;height:100vh;height:100lvh}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);background:rgba(5,7,9,.74)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none;font:400 .95rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.brand:hover{color:#fff}
.brand img{width:36px;height:36px;border-radius:7px;box-shadow:0 0 0 1px var(--line),0 0 18px -4px rgba(94,196,242,.5)}
.site-head nav ul{display:flex;gap:4px 22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-head nav a{color:var(--mute);text-decoration:none;font:500 .78rem/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.site-head nav a:hover,.site-head nav a[aria-current=page]{color:var(--ice)}

/* ---------- type ---------- */
h1,h2,.display{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.1;margin:0 0 22px;padding-bottom:.1em}
h2{font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.2;margin:0 0 14px}
h3{font:600 1.1rem/1.35 var(--sans);margin:0 0 6px;color:#f2f6f9}
.eyebrow{font:500 .78rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ice);margin:0 0 18px}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:#c3ccd4;max-width:34em;margin:0 0 30px}
.mute{color:var(--mute)}
main p,main li,main dd{text-shadow:0 1px 10px rgba(0,0,0,.85)}

/* steel lettering: grey-to-white metal with an ice highlight that sweeps with --p */
.steel-text{color:#dde6ed}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .steel-text{
    background:linear-gradient(100deg,#9aa6b1 0%,#dfe8ef 28%,#fff 44%,#a8dcf7 50%,#fff 56%,#dfe8ef 72%,#9aa6b1 100%);
    background-size:260% 100%;background-position:calc((1 - var(--p,1)) * 100%) 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
}

/* ---------- buttons, plates ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-block;padding:12px 20px;border-radius:4px;font:500 .8rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--fg);
  border:1px solid rgba(168,200,222,.28);border-top-color:var(--rim);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),linear-gradient(115deg,#1a1f24,#0e1114);
  box-shadow:inset 0 1px 0 rgba(200,235,255,.14)}
.btn:hover{color:#fff;border-color:var(--ice-strong)}
.btn.primary{color:#04121b;border-color:#bfe7fb;
  background:linear-gradient(180deg,#d6f0fc 0%,#8fd3f7 45%,#4fb4e8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 34px -10px rgba(94,196,242,.75)}
.btn.primary:hover{color:#04121b;filter:brightness(1.08)}

.plate{position:relative;overflow:hidden;border-radius:6px;padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);border-top-color:var(--rim);
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 35%),
    linear-gradient(rgba(14,17,20,.5),rgba(14,17,20,.5)),
    var(--brush),
    linear-gradient(115deg,rgba(24,29,34,.94),rgba(12,15,18,.94) 55%,rgba(18,22,27,.94));
  box-shadow:inset 0 1px 0 rgba(190,232,255,.12),0 30px 80px -30px rgba(0,0,0,.9)}
/* frost creeping into the plate's top-right corner as it scrolls in */
.plate::after{content:"";position:absolute;right:0;top:0;width:70%;height:80%;pointer-events:none;
  background:var(--frost);opacity:calc(var(--p,1) * .6);
  -webkit-mask-image:radial-gradient(farthest-side at 100% 0,#000,transparent calc(var(--p,1) * 100%));
          mask-image:radial-gradient(farthest-side at 100% 0,#000,transparent calc(var(--p,1) * 100%))}
.plate>*{position:relative;z-index:1}

/* ---------- hero ---------- */
.hero{position:relative;overflow-x:clip}
.hero .wrap{display:grid;gap:36px;align-items:center;min-height:calc(100svh - 69px);padding-top:40px;padding-bottom:88px}
.hero .wrap{position:relative}
.hero .wrap>div:not(.hero-mark){position:relative;z-index:1}
/* logo sits behind the hero text as a large faint mark; it does not move with scroll */
.hero-mark{position:absolute;z-index:0;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);aspect-ratio:1;opacity:.2}
@media (min-width:900px){.hero-mark{left:auto;right:max(-80px,calc(50% - 760px));transform:translateY(-50%);width:min(760px,52vw);opacity:.32}}
.hero-mark::before{content:"";position:absolute;inset:-22%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(14,165,233,.34),rgba(14,165,233,.08) 60%,rgba(14,165,233,0))}
.hex-clip{position:absolute;inset:0;clip-path:polygon(50% 1%,92.5% 25.5%,92.5% 74.5%,50% 99%,7.5% 74.5%,7.5% 25.5%)}
.hex-clip img{display:block;width:100%;height:100%;filter:brightness(calc(1 + var(--h,0) * .35)) saturate(calc(1 - var(--h,0) * .55))}
/* rime grows over the logo as you scroll */
.hex-clip::after{content:"";position:absolute;inset:0;background:var(--frost),var(--rime);mix-blend-mode:screen;opacity:calc(.12 + var(--h,0) * .88)}
.strip{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:22px 0 0;margin:34px 0 0;border-top:1px solid var(--line);font:500 .74rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.strip li{display:flex;align-items:center;gap:9px}
.strip li::before{content:"";width:9px;height:10px;background:var(--ice-strong);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pill{display:inline-flex;align-items:center;gap:9px;font:500 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:rgba(10,13,16,.8);margin:0 0 22px}
.led{flex:none;width:9px;height:9px;border-radius:50%;background:#f0bd55;box-shadow:0 0 0 3px rgba(240,189,85,.18),0 0 14px rgba(240,189,85,.7)}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 .68rem/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:10px}
.cue::after{content:"";width:1px;height:38px;background:linear-gradient(var(--ice-strong),transparent)}
@media (max-height:640px),(max-width:899px){.cue{display:none}}

/* ---------- sections ---------- */
section{position:relative;padding:clamp(76px,11vw,150px) 0}
/* rime creeping down from each section's top edge, and a cold rim line drawing across */
section::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;
  background:var(--frost),linear-gradient(rgba(150,215,250,.10),rgba(150,215,250,0));transform-origin:top;transform:scaleY(var(--p,1));opacity:calc(var(--p,1) * .8);
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
section::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--rim) 30%,#d8f1ff 50%,var(--rim) 70%,transparent);transform:scaleX(var(--p,1))}
.reveal{opacity:clamp(0,calc(var(--p,1) * 1.6 - .25),1);transform:translateY(calc((1 - var(--p,1)) * 46px))}

/* offer: sticky title on the left, ruled rows on the right */
.split{display:grid;gap:28px}
@media (min-width:860px){.split{grid-template-columns:.85fr 1.15fr;gap:64px}.split .side{position:sticky;top:110px;align-self:start}}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;gap:4px 28px;padding:30px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
@media (min-width:600px){.row{grid-template-columns:120px 1fr}}
.tag{font:500 .74rem/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.row p{margin:0;color:var(--mute)}

/* how: an outlined statement that fills with ice as it scrolls in, then two plates */
.statement{font:400 clamp(2.1rem,8.2vw,7rem)/1.02 var(--display);letter-spacing:-.025em;margin:6px 0 clamp(24px,5vw,52px);padding-bottom:.18em;color:#e6f4fc}
@supports ((-webkit-background-clip:text) or (background-clip:text)) and (-webkit-text-stroke:1px #000){
  .statement{-webkit-text-stroke:1px rgba(168,220,247,.7);-webkit-text-fill-color:transparent;text-shadow:none;
    background:linear-gradient(90deg,#e6f4fc 0%,#bfe6fa calc(var(--p,1) * 100%),rgba(230,244,252,0) calc(var(--p,1) * 100% + 6%));
    -webkit-background-clip:text;background-clip:text}
}
.duo{display:grid;gap:18px}
@media (min-width:860px){.duo{grid-template-columns:1.1fr .9fr;gap:22px}}
.duo .plate p{color:#c3ccd4}
ul.checks{list-style:none;padding:0;margin:18px 0 0}
ul.checks li{padding-left:24px;position:relative;color:var(--mute);margin:8px 0}
ul.checks li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:10px;background:var(--ice-strong);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
dl.spec{margin:16px 0 0;display:grid;grid-template-columns:1fr auto}
dl.spec dt,dl.spec dd{padding:12px 0;border-bottom:1px solid var(--line);margin:0}
dl.spec dt{color:#c3ccd4}
dl.spec dd{font:500 .8rem/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);text-align:right}
dl.spec dd.kept{text-transform:none;letter-spacing:0;font:400 .92rem/1.6 var(--sans);color:var(--mute);max-width:16em}
.where{margin:26px 0 0;color:var(--mute);font:500 .76rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* status: one wide plate */
.band{display:grid;gap:18px 28px;align-items:center}
@media (min-width:760px){.band{grid-template-columns:auto 1fr auto}}
.band h2{margin:0 0 6px}
.band p{margin:0;color:#c3ccd4}
.band .led{width:14px;height:14px}

/* contact: the address is the headline */
.contact{text-align:center}
.big-mail{display:inline-block;font:400 clamp(1.25rem,5.2vw,3.2rem)/1.2 var(--display);letter-spacing:-.01em;color:#eaf6fd;text-decoration:none;margin:10px 0 18px;border-bottom:1px solid var(--rim);padding-bottom:6px}
.big-mail:hover{color:#fff;border-color:#fff}

/* ---------- document pages ---------- */
.doc{max-width:860px;padding-top:56px;padding-bottom:88px}
.doc h1{font-size:clamp(1.8rem,5vw,3rem)}
.doc .plate{margin-top:8px}
.doc h2{font-size:clamp(1.05rem,2.4vw,1.3rem);margin-top:40px}
.doc .plate>h2:first-child{margin-top:0}
.doc p,.doc li{max-width:44em;color:#c9d2da}
.doc li{margin:6px 0}
.meta{color:var(--mute);font:500 .76rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 28px}
.note{border:1px solid var(--line);border-left:2px solid var(--ice-strong);background:rgba(12,15,18,.9);padding:14px 18px;border-radius:4px;margin:24px 0}
.note p{margin:0}
.table-scroll{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:#c9d2da}
th{font:500 .72rem/1.4 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.12em}
td.no{color:var(--ice);font:500 .8rem/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
code{font:.9em var(--mono);background:rgba(160,200,230,.09);padding:1px 5px;border-radius:3px}
pre{background:#030405;color:#d6e9f5;border:1px solid var(--line);border-top-color:var(--rim);border-radius:4px;padding:16px 18px;overflow-x:auto;font:.86rem/1.6 var(--mono);margin:16px 0;text-shadow:none}
pre code{background:none;padding:0;font:inherit;color:inherit}
dl.endpoints{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:16px 0}
dl.endpoints dt{font:500 .85rem/1.9 var(--mono);color:var(--ice)}
dl.endpoints dd{margin:0;color:#c9d2da}
@media (max-width:519px){pre{font-size:.78rem;padding:14px}dl.endpoints{grid-template-columns:1fr;gap:2px}dl.endpoints dd{margin-bottom:12px}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:rgba(4,5,7,.88);color:var(--mute);font-size:.9rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:36px}
.site-foot ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.site-foot a{color:var(--mute)}.site-foot a:hover{color:var(--fg)}
.site-foot p{margin:0;font:500 .74rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- motion (skipped entirely under prefers-reduced-motion) ---------- */
@keyframes sd{from{--p:0}to{--p:1}}
@keyframes sdh{from{--h:0}to{--h:1}}
@keyframes sheen{from{transform:translateX(-22%)}to{transform:translateX(22%)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes breathe{from{opacity:.65}to{opacity:1}}
@keyframes blink{50%{opacity:.35}}
@keyframes drop{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1);transform-origin:top}}
@media (prefers-reduced-motion:no-preference){
  .bg .sheen{animation:sheen 24s ease-in-out infinite alternate}
  .rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 110ms)}
  .hero h1.steel-text{animation:rise 1s cubic-bezier(.2,.7,.2,1) both,sweep 2.8s .3s cubic-bezier(.3,.6,.2,1) both}
  .hero-mark::before{animation:breathe 5s ease-in-out infinite alternate}
  .led{animation:blink 2.4s ease-in-out infinite}
  .cue::after{animation:drop 2s ease-in-out infinite}
  @supports (animation-timeline:view()){
    [data-sd]{animation:sd linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
    .hero-mark{animation:sdh linear both;animation-timeline:scroll(root);animation-range:0px 90vh}
  }
}