/* Silver Standard Systems
   Design system. Deliberately quieter than the portfolio: this page is read by
   an owner deciding whether to spend money, not by someone browsing for delight.
   Serious, dense, high-contrast, fast. No neon, no glow, no arcade.

   Per-niche pages override --accent only. Everything else stays fixed so the
   brand reads as one company across every funnel. */

:root{
  --bg:#0d1013;
  --panel:#141920;
  --panel-2:#1b2129;
  --line:#252d38;
  --line-soft:#1e242c;
  --ink:#eef2f6;
  --dim:#9aa7b5;
  --dimmer:#697787;
  --accent:#c8d4e0;
  --accent-ink:#0a0e14;
  /* hover fill for solid buttons: dark enough that white text is unmistakable */
  --btn-hover:#2b3644;
  --good:#4fbf8b;
  --warn:#e0a45c;
  --bad:#e0705f;
  --r:10px;
  --maxw:1120px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",SFMono-Regular,ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(13,16,19,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:62px}
.brand{font-weight:650;letter-spacing:-.02em;text-decoration:none;font-size:1.02rem;white-space:nowrap}
.brand span{color:var(--dimmer);font-weight:450}
.nav nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav nav a{color:var(--dim);text-decoration:none;font-size:.9rem;transition:color .15s}
.nav nav a:hover,.nav nav a.cur{color:var(--ink)}
/* The nav CTA is a .btn inside .nav nav, so the link rule above was overriding
   its dark ink and rendering the label as faint grey on a light fill. Restate
   the button colours at equal specificity so it matches every other solid button. */
.nav nav a.btn{color:var(--accent-ink)}
.nav nav a.btn:hover{color:#fff}
@media(max-width:720px){.nav nav a.hide-sm{display:none}}

/* ---- type ---- */
h1,h2,h3{line-height:1.18;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(2rem,4.6vw,3.15rem);font-weight:660}
h2{font-size:clamp(1.5rem,2.9vw,2.1rem);font-weight:640}
h3{font-size:1.06rem;font-weight:620}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.7vw,1.19rem);color:var(--dim);line-height:1.62;max-width:62ch}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dimmer);margin:0 0 14px
}
.section{padding:76px 0;border-top:1px solid var(--line-soft)}
.section-head{max-width:64ch;margin-bottom:38px}
.section-head h2{margin-bottom:14px}

/* ---- buttons ---- */
/* Solid buttons sit ON the accent colour, so a brightness bump reads as noise.
   On hover they invert instead: the fill darkens hard and the label goes white,
   which is unambiguous about what is selected. Ghost buttons already have a
   clear outline change, so they keep it. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);
  padding:13px 24px;border-radius:8px;text-decoration:none;
  font-weight:600;font-size:.95rem;border:1px solid var(--accent);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s;
  font-family:inherit;
}
.btn:hover{
  background:var(--btn-hover,#2b3644);
  border-color:var(--btn-hover,#2b3644);
  color:#fff;
  transform:translateY(-1px);
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.lg{padding:16px 30px;font-size:1.01rem}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---- hero ---- */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}}

/* The turn line. Dots tick in one at a time, then "until now" arrives, so the
   sentence performs the pause instead of just printing it. */
.chaos{
  margin-top:22px;padding-left:15px;border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);
  font-size:1.03rem;color:var(--dim);line-height:1.6;max-width:52ch;
}
.chaos b{color:var(--ink);font-weight:640}
.chaos .dots{display:inline-block;letter-spacing:.08em}
.chaos .dots i{opacity:0;font-style:normal;animation:dotIn .01s linear forwards}
.chaos .dots i:nth-child(1){animation-delay:.55s}
.chaos .dots i:nth-child(2){animation-delay:1.0s}
.chaos .dots i:nth-child(3){animation-delay:1.45s}
@keyframes dotIn{to{opacity:1}}
.chaos b{opacity:0;animation:untilIn .5s ease 1.9s forwards}
@keyframes untilIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .chaos .dots i,.chaos b{animation:none;opacity:1;transform:none}
}

/* ---- hero slide deck ----
   Auto-advancing mockups of things we build. Deliberately shows range rather
   than one feature, because a prospect who already has missed call text back
   needs to see there is more here than that. Driven by site.js; each slide is
   plain markup so it degrades to a readable static panel without JS. */
.deck{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;min-height:290px;
}
.deck-bar{
  display:flex;align-items:center;gap:8px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:var(--panel-2);
}
.deck-bar .dots{display:flex;gap:5px}
.deck-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.deck-bar .ttl{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
               text-transform:uppercase;color:var(--dimmer);margin-left:6px}
.deck-stage{position:relative;padding:19px;min-height:232px}

.slide{
  position:absolute;inset:19px;opacity:0;transform:translateY(9px);
  transition:opacity .5s ease,transform .5s ease;pointer-events:none;
}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide h4{font-size:.98rem;margin:0 0 3px;font-weight:620}
.slide .sd{font-size:.83rem;color:var(--dimmer);margin-bottom:15px}

/* rows inside a slide */
.sr{
  display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:7px;
  background:var(--bg);border:1px solid var(--line-soft);border-radius:7px;
  font-size:.85rem;opacity:0;animation:srIn .45s ease forwards;
}
.slide.on .sr:nth-child(3){animation-delay:.10s}
.slide.on .sr:nth-child(4){animation-delay:.28s}
.slide.on .sr:nth-child(5){animation-delay:.46s}
.slide.on .sr:nth-child(6){animation-delay:.64s}
.slide:not(.on) .sr{animation:none;opacity:0}
@keyframes srIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sr .dot{width:7px;height:7px;border-radius:50%;background:var(--dimmer);flex:none}
.sr .tag{margin-left:auto;font-family:var(--mono);font-size:.71rem;color:var(--dimmer);letter-spacing:.05em}
.sr.ok{border-color:color-mix(in srgb,var(--good) 34%,transparent);
       background:color-mix(in srgb,var(--good) 9%,transparent)}
.sr.ok .dot{background:var(--good)}.sr.ok .tag{color:var(--good)}
.sr.hot{border-color:color-mix(in srgb,var(--bad) 34%,transparent);
        background:color-mix(in srgb,var(--bad) 9%,transparent)}
.sr.hot .dot{background:var(--bad)}.sr.hot .tag{color:var(--bad)}
.sr.wrn{border-color:color-mix(in srgb,var(--warn) 34%,transparent);
        background:color-mix(in srgb,var(--warn) 9%,transparent)}
.sr.wrn .dot{background:var(--warn)}.sr.wrn .tag{color:var(--warn)}

.deck-nav{display:flex;gap:6px;padding:0 15px 14px;flex-wrap:wrap}
.deck-nav button{
  flex:1;min-width:44px;height:3px;border:none;border-radius:2px;padding:0;
  background:var(--line);cursor:pointer;position:relative;overflow:hidden;
}
.deck-nav button.on{background:color-mix(in srgb,var(--accent) 34%,var(--line))}
.deck-nav button.on::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform-origin:left;transform:scaleX(0);animation:deckFill 4.6s linear forwards;
}
@keyframes deckFill{to{transform:scaleX(1)}}
.deck-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  .sr{animation:none!important;opacity:1!important;transform:none!important}
  .deck-nav button.on::after{animation:none;transform:scaleX(1)}
}

/* ---- panels & cards ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;transition:border-color .18s,transform .18s;
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));transform:translateY(-2px)}
.card h3{margin-bottom:9px}
.card p{color:var(--dim);font-size:.93rem}
.card .ico{
  width:34px;height:34px;border-radius:8px;margin-bottom:15px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  display:grid;place-items:center;color:var(--accent);
}
.card .ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ---- animated niche mark (top of each niche page) ----
   One recognisable object per trade, animating the thing that defines it:
   the fan turns, the drip falls, the rain hits the roof. Reads instantly at a
   glance, which the old text eyebrow did not. */
/* Sits on the right of the niche hero, in the same slot the deck occupies on the
   home page, so both page types share one layout. */
.niche-hero{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:center}
@media(max-width:940px){
  .niche-hero{grid-template-columns:1fr;gap:30px}
  .niche-hero .mark-wrap{order:-1}
}

.mark-wrap{display:grid;place-items:center}
.mark{
  width:210px;height:210px;border-radius:26px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  display:grid;place-items:center;color:var(--accent);position:relative;
}
.mark::after{
  content:"";position:absolute;inset:-1px;border-radius:26px;pointer-events:none;
  box-shadow:0 0 60px color-mix(in srgb,var(--accent) 13%,transparent) inset;
}
.mark svg{width:118px;height:118px;stroke:currentColor;fill:none;
          stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:940px){
  .mark{width:150px;height:150px;border-radius:20px}
  .mark svg{width:84px;height:84px}
}

/* HVAC: blades spin, cool air drifts up */
.mark .fan{transform-origin:16px 16px;animation:spin 2.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mark .puff{opacity:0;animation:puff 2.6s ease-in-out infinite}
.mark .puff:nth-of-type(2){animation-delay:.85s}
@keyframes puff{0%{opacity:0;transform:translateY(2px)}
                40%{opacity:.85}
                100%{opacity:0;transform:translateY(-6px)}}

/* Plumbing: a drop forms, falls, and lands */
.mark .drop{animation:drip 2.2s cubic-bezier(.5,0,.75,.3) infinite}
@keyframes drip{0%,22%{opacity:0;transform:translateY(0)}
                30%{opacity:1;transform:translateY(0)}
                72%{opacity:1;transform:translateY(9px)}
                80%,100%{opacity:0;transform:translateY(9px)}}
.mark .splash{opacity:0;animation:splash 2.2s ease-out infinite}
@keyframes splash{0%,72%{opacity:0;transform:scaleX(.3)}
                  82%{opacity:.9;transform:scaleX(1)}
                  100%{opacity:0;transform:scaleX(1.3)}}

/* Roofing: rain falls onto a roof that holds */
.mark .rain{animation:rain 1.5s linear infinite}
.mark .rain:nth-of-type(2){animation-delay:.5s}
.mark .rain:nth-of-type(3){animation-delay:1s}
@keyframes rain{0%{opacity:0;transform:translateY(-4px)}
                35%{opacity:.9}
                100%{opacity:0;transform:translateY(7px)}}

@media(prefers-reduced-motion:reduce){
  .mark .fan,.mark .puff,.mark .drop,.mark .splash,.mark .rain{
    animation:none;opacity:1;transform:none;
  }
}

/* ---- niche selector ---- */
.niche-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.niche-grid{grid-template-columns:1fr}}
/* Flex column with the paragraph flexed, so the CTA sits on the same baseline in
   every card regardless of how long the copy above it runs. */
.niche{
  display:flex;flex-direction:column;text-decoration:none;padding:26px 24px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s,transform .18s,background .18s;position:relative;overflow:hidden;
}
.niche:hover{transform:translateY(-3px);background:var(--panel-2)}
.niche .n-label{font-family:var(--mono);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:11px}
.niche h3{font-size:1.3rem;margin-bottom:9px}
.niche p{color:var(--dim);font-size:.92rem;margin-bottom:17px;flex:1}
.niche .n-go{font-size:.87rem;font-weight:590;display:inline-flex;align-items:center;gap:7px;margin-top:auto}
.niche.hv:hover{border-color:#5aa9e0}.niche.hv .n-go{color:#5aa9e0}
.niche.pl:hover{border-color:#4fbf9b}.niche.pl .n-go{color:#4fbf9b}
.niche.rf:hover{border-color:#e0954f}.niche.rf .n-go{color:#e0954f}

/* ---- animated demo preview on the niche cards ----
   A miniature of what the linked page's live demo actually does, so the value
   is legible before anyone scrolls. CSS only, no JS, and it holds a static
   readable state under prefers-reduced-motion. */
.prev{
  --c:var(--dim);
  height:74px;margin:0 0 15px;border-radius:8px;padding:9px 10px;
  background:var(--bg);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:5px;overflow:hidden;position:relative;
}
.niche.hv .prev{--c:#5aa9e0}
.niche.pl .prev{--c:#4fbf9b}
.niche.rf .prev{--c:#e0954f}

.prev .r{
  display:flex;align-items:center;gap:6px;height:16px;flex:none;
  border-radius:4px;padding:0 7px;font-family:var(--mono);font-size:.6rem;
  color:var(--dimmer);background:var(--panel);border:1px solid var(--line-soft);
}
.prev .r .d{width:5px;height:5px;border-radius:50%;background:var(--dimmer);flex:none}
.prev .r .g{margin-left:auto;letter-spacing:.06em}
.prev .r.hot{color:var(--c);border-color:color-mix(in srgb,var(--c) 34%,transparent);
             background:color-mix(in srgb,var(--c) 11%,transparent)}
.prev .r.hot .d{background:var(--c)}
.prev .r.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent);
              background:color-mix(in srgb,var(--warn) 10%,transparent)}
.prev .r.warn .d{background:var(--warn)}

/* HVAC: an emergency call jumps the queue. */
.niche.hv .prev .r:nth-child(1){animation:hvSink 5s ease-in-out infinite}
.niche.hv .prev .r:nth-child(2){animation:hvSink 5s ease-in-out infinite .1s}
.niche.hv .prev .r:nth-child(3){animation:hvRise 5s ease-in-out infinite}
@keyframes hvSink{0%,18%{transform:translateY(0)}34%,82%{transform:translateY(21px)}100%{transform:translateY(0)}}
@keyframes hvRise{0%,18%{transform:translateY(0);opacity:.5}
                  34%,82%{transform:translateY(-42px);opacity:1}100%{transform:translateY(0);opacity:.5}}

/* Plumbing: the after hours call wakes the on call tech. */
.niche.pl .prev .r:nth-child(2){animation:plFade 5s ease-in-out infinite}
.niche.pl .prev .r:nth-child(3){animation:plFade 5s ease-in-out infinite .7s}
@keyframes plFade{0%,22%{opacity:0;transform:translateX(-7px)}
                  38%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-7px)}}

/* Roofing: a file sits too long and gets flagged. */
.niche.rf .prev .r:nth-child(3){animation:rfFlag 5s ease-in-out infinite}
@keyframes rfFlag{0%,44%{color:var(--dimmer);border-color:var(--line-soft);background:var(--panel)}
                  60%,90%{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent);
                          background:color-mix(in srgb,var(--warn) 10%,transparent)}
                  100%{color:var(--dimmer);border-color:var(--line-soft);background:var(--panel)}}
.niche.rf .prev .r:nth-child(3) .d{animation:rfDot 5s ease-in-out infinite}
@keyframes rfDot{0%,44%{background:var(--dimmer)}60%,90%{background:var(--warn)}100%{background:var(--dimmer)}}

@media(prefers-reduced-motion:reduce){
  .prev .r,.prev .r .d{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---- stat / proof strip ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:24px 22px;background:var(--panel);border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
@media(max-width:760px){
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:none}
}
.stat .v{font-size:1.72rem;font-weight:660;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .k{font-size:.82rem;color:var(--dimmer);margin-top:5px}

/* ---- pricing ---- */
.price-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column}
.price-card.feature{border-color:color-mix(in srgb,var(--accent) 46%,transparent);background:var(--panel-2);position:relative}
.price-tag{position:absolute;top:-11px;right:20px;background:var(--accent);color:var(--accent-ink);font-size:.7rem;font-weight:680;padding:4px 11px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
.price-card .amt{font-size:2.35rem;font-weight:670;letter-spacing:-.035em;margin:12px 0 4px}
.price-card .amt small{font-size:.92rem;font-weight:450;color:var(--dimmer);letter-spacing:0}
.price-card .terms{font-size:.85rem;color:var(--dimmer);margin-bottom:20px}
.price-card ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.price-card li{position:relative;padding-left:25px;margin-bottom:11px;font-size:.92rem;color:var(--dim);line-height:1.5}
.price-card li::before{
  content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);
  transform:rotate(-45deg);
}

/* ---- proof / credential ---- */
/* Labels are single words on a fixed column. white-space:nowrap is load bearing:
   without it the narrow column broke values across two lines ("20 / yrs"). */
.cred{display:flex;gap:16px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--line-soft)}
.cred:last-child{border-bottom:none}
.cred .num{
  font-family:var(--mono);font-size:.76rem;font-weight:660;color:var(--accent);
  width:104px;flex:none;white-space:nowrap;letter-spacing:.11em;text-transform:uppercase;
}
.cred .txt{font-size:.94rem;color:var(--dim);flex:1}
@media(max-width:520px){
  .cred{flex-direction:column;gap:7px}
  .cred .num{width:auto}
}
.cred .txt b{color:var(--ink);font-weight:590}

/* ---- FAQ ---- */
details.faq{border-bottom:1px solid var(--line-soft);padding:17px 0}
details.faq summary{cursor:pointer;font-weight:570;list-style:none;display:flex;align-items:center;gap:12px;font-size:.99rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";color:var(--accent);font-weight:600;font-size:1.15rem;line-height:1;width:14px;flex:none}
details.faq[open] summary::before{content:"\2212"}
details.faq p{color:var(--dim);font-size:.93rem;margin-top:11px;padding-left:26px;max-width:70ch}

/* ---- footer ---- */
footer{border-top:1px solid var(--line-soft);padding:40px 0;color:var(--dimmer);font-size:.88rem}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--ink);border-color:var(--accent)}
footer .sp{margin-left:auto}
@media(max-width:620px){footer .sp{margin-left:0;width:100%}}

/* ---- closing section: leak list + corner accents ---- */
.leaks{margin:26px auto 0;max-width:60ch;text-align:left;display:flex;flex-direction:column;gap:9px}
.leak{
  display:flex;align-items:flex-start;gap:11px;font-size:.95rem;color:var(--dim);
  background:var(--panel);border:1px solid var(--line-soft);border-radius:8px;padding:12px 15px;
  transition:border-color .18s;
}
.leak:hover{border-color:color-mix(in srgb,var(--accent) 34%,var(--line))}
.leak .lk{
  width:7px;height:7px;border-radius:50%;flex:none;margin-top:7px;
  background:var(--bad);animation:leakPulse 2.6s ease-in-out infinite;
}
.leak:nth-child(2) .lk{animation-delay:.4s}
.leak:nth-child(3) .lk{animation-delay:.8s}
.leak:nth-child(4) .lk{animation-delay:1.2s}
.leak:nth-child(5) .lk{animation-delay:1.6s}
@keyframes leakPulse{0%,100%{opacity:.32;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}

/* Divider sweep. Every section's top border gets an accent line that draws
   itself left to right as the section enters view, then holds. One consistent
   system across the whole page rather than a one-off ornament. */
.section{position:relative}
.section::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 78%,transparent),
    color-mix(in srgb,var(--accent) 30%,transparent) 62%,
    transparent);
  transform:scaleX(0);transform-origin:left;pointer-events:none;
}
.section.in::before{animation:sweep 1.05s cubic-bezier(.22,.75,.28,1) both}
@keyframes sweep{to{transform:scaleX(1)}}
/* the hero has no top border, so it gets no sweep */
.section.hero::before{display:none}
@media(prefers-reduced-motion:reduce){
  .leak .lk{animation:none;opacity:1}
  .section::before,.section.in::before{animation:none;transform:scaleX(1)}
}

/* ---- motion ---- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}