/* ============================================================
   COPPERLINE — "Networks, engineered."
   Design system: paper / ink / safety orange. Technical drawing.
   ============================================================ */

:root{
  --paper:#faf8f4;
  --paper-2:#f3f0e9;
  --ink:#141311;
  --ink-60:rgba(20,19,17,.62);
  --ink-40:rgba(20,19,17,.4);
  --hairline:rgba(20,19,17,.16);
  --hairline-soft:rgba(20,19,17,.08);
  --grid-line:rgba(20,19,17,.05);
  --grid-major:rgba(20,19,17,.09);
  --orange:#ff4d00;           /* graphics, fills, large marks */
  --orange-deep:#c43a00;      /* small text on paper — AA safe */
  --green:#1b7a3d;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --maxw:1180px;
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}

body{
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:240px 240px,240px 240px,48px 48px,48px 48px;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--paper)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
main{display:block}

h1,h2,h3,h4{line-height:1.08;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.7rem,7vw,4.8rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800}
h3{font-size:1.25rem}
p{max-width:62ch}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-60);line-height:1.55}

/* ---- mono spec labels ---- */
.spec{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-60);
}
.spec--orange{color:var(--orange-deep)}
.spec--fig::before{content:"";display:inline-block;width:9px;height:9px;background:var(--orange);margin-right:.6em;vertical-align:baseline}

/* dimension rule with end ticks */
.dim{
  position:relative;height:1px;background:var(--hairline);
  margin:var(--s3) 0;
}
.dim::before,.dim::after{
  content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--ink-40);
}
.dim::before{left:0}
.dim::after{right:0}

/* ---- section scaffold ---- */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--line{border-top:1px solid var(--hairline)}
.sec-head{margin-bottom:var(--s4)}
.sec-head .spec{display:block;margin-bottom:var(--s2)}
.sec-head h2{max-width:22ch}
.sec-head p{margin-top:var(--s2)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.78rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:.95em 1.6em;border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
  cursor:pointer;white-space:nowrap;
}
.btn::after{content:"→";font-weight:400;transition:transform .22s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover::after{transform:translateX(4px)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--bare{border-color:transparent;padding-inline:.2em}
.btn--bare:hover{background:transparent;color:var(--orange-deep)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:var(--s3);
}
.brand{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--mono);font-weight:600;font-size:.95rem;letter-spacing:.12em;
}
.brand .brand-mark{width:16px;height:16px;flex:none}
.brand span b{color:var(--orange-deep);font-weight:600}
.main-nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem)}
.main-nav a{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-60);padding:.4em 0;position:relative;
  transition:color .2s ease;
}
.main-nav a i{font-style:normal;color:var(--ink-40);margin-right:.45em}
.main-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--orange);transition:right .25s ease;
}
.main-nav a:hover{color:var(--ink)}
.main-nav a:hover::after{right:0}
.main-nav a[aria-current="page"]{color:var(--ink)}
.main-nav a[aria-current="page"]::after{right:0}
.main-nav .btn{margin-left:.5rem}
.nav-toggle{display:none;width:44px;height:44px;position:relative}
.nav-toggle span,
.nav-toggle::before,.nav-toggle::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--ink);
  transition:transform .28s ease,opacity .2s ease;
}
.nav-toggle::before{top:15px}
.nav-toggle span{top:21px}
.nav-toggle::after{top:27px}
body.nav-open .nav-toggle::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span{opacity:0}
body.nav-open .nav-toggle::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:49;
  background:var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:48px 48px;
  display:flex;flex-direction:column;gap:0;
  padding:var(--s4) clamp(1.1rem,4vw,2rem);
  transform:translateX(100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s .32s;
}
body.nav-open .mobile-nav{transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.mobile-nav a{
  font-family:var(--mono);font-size:1.3rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  padding:1rem 0;border-bottom:1px solid var(--hairline);
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-nav a i{font-style:normal;font-size:.75rem;color:var(--orange-deep)}
.mobile-nav .btn{margin-top:var(--s3);justify-content:center}
body.nav-open{overflow:hidden}

/* ============================================================
   HERO + SCHEMATIC
   ============================================================ */
.hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero-copy .spec{display:block;margin-bottom:var(--s2)}
.hero-copy h1{margin-bottom:var(--s3)}
.hero-copy h1 em{font-style:normal;color:var(--orange)}
.hero-copy .lede{margin-bottom:var(--s4)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--hairline);
}
.hero-meta div{font-family:var(--mono)}
.hero-meta .k{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60)}
.hero-meta .v{font-size:1rem;font-weight:600}

.schematic{position:relative}
.schematic figcaption{margin-top:var(--s2);display:flex;justify-content:space-between;gap:1rem}
.schematic svg{width:100%;height:auto}
.schematic text{font-family:var(--mono);letter-spacing:.08em}

/* stroke draw-in: every drawable carries pathLength="1" + class d */
.scheme .d{
  stroke:var(--ink);stroke-width:1.3;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
}
.scheme .d--soft{stroke:var(--ink-40);stroke-width:1}
.scheme .d--orange{stroke:var(--orange)}
.scheme.drawn .d{animation:draw 1.1s cubic-bezier(.5,0,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.scheme .led{fill:var(--orange);opacity:0}
.scheme.drawn .led{animation:led .4s ease forwards;animation-delay:var(--d,1.6s)}
@keyframes led{to{opacity:1}}
.scheme .fill-in{opacity:0;transition:opacity .5s ease 1.9s}
.scheme.drawn .fill-in{opacity:1}

/* typed callouts */
.callouts{position:absolute;inset:0;pointer-events:none}
.callout{
  position:absolute;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);
  padding:.4em .7em;white-space:nowrap;
}
.callout .cursor{display:inline-block;width:.55em;height:1em;background:var(--orange);
  vertical-align:text-bottom;animation:blink .9s steps(1) infinite}
.callout.done .cursor{display:none}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  border-block:1px solid var(--hairline);
  background:var(--ink);color:var(--paper);
  overflow:hidden;position:relative;
}
.ticker-track{
  display:flex;width:max-content;
  animation:ticker 46s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-set{display:flex;flex:none}
.ticker-item{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;
  padding:.7em 0;display:flex;align-items:center;gap:.9em;
  margin-right:3.2rem;white-space:nowrap;
}
.ticker-item b{font-weight:600;color:#ffb38f;font-variant-numeric:tabular-nums}
.ticker-item::before{content:"";width:7px;height:7px;background:var(--orange);flex:none}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ============================================================
   FIG CARDS  (measurement-bracket hover)
   ============================================================ */
.fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.fig-card{
  position:relative;background:var(--paper);padding:var(--s4) var(--s3) var(--s3);
  transition:background-color .25s ease;
}
.fig-card:hover{background:var(--paper-2)}
.fig-card h3{margin-bottom:.6rem}
.fig-card p{font-size:.95rem;color:var(--ink-60)}
.fig-card .spec{display:block;margin-bottom:var(--s3)}
/* fig tag — appears on hover */
.fig-card::before{
  content:"FIG " attr(data-fig);
  position:absolute;top:10px;right:12px;
  font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.1em;
  color:var(--orange-deep);
  opacity:0;transform:translateY(-4px);
  transition:opacity .22s ease,transform .22s ease;
}
.fig-card:hover::before{opacity:1;transform:translateY(0)}
/* measurement bracket corners */
.fig-card .bk{position:absolute;width:14px;height:14px;pointer-events:none;opacity:0;transition:opacity .22s ease,transform .25s ease}
.fig-card .bk-tl{top:6px;left:6px;border-top:2px solid var(--orange);border-left:2px solid var(--orange);transform:translate(4px,4px)}
.fig-card .bk-tr{top:6px;right:6px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);transform:translate(-4px,4px)}
.fig-card .bk-bl{bottom:6px;left:6px;border-bottom:2px solid var(--orange);border-left:2px solid var(--orange);transform:translate(4px,-4px)}
.fig-card .bk-br{bottom:6px;right:6px;border-bottom:2px solid var(--orange);border-right:2px solid var(--orange);transform:translate(-4px,-4px)}
.fig-card:hover .bk{opacity:1;transform:translate(0,0)}
.fig-card .num{
  font-family:var(--mono);font-size:2rem;font-weight:600;color:var(--hairline);
  line-height:1;margin-bottom:var(--s2);transition:color .25s ease;
}
.fig-card:hover .num{color:var(--orange)}

/* ============================================================
   PLAN CARDS
   ============================================================ */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.plan-card{
  background:var(--paper);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  position:relative;transition:background-color .25s ease;
}
.plan-card:hover{background:var(--paper-2)}
.plan-card.is-featured{outline:2px solid var(--orange);outline-offset:-2px}
.plan-card .flag{
  position:absolute;top:0;right:0;background:var(--orange);color:var(--ink);
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.45em .8em;
}
.plan-card h3{font-family:var(--mono);font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.plan-speed{font-size:clamp(2rem,3.5vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.plan-speed small{font-size:.45em;font-weight:600;color:var(--ink-60)}
.plan-price{font-family:var(--mono);font-size:.85rem;color:var(--ink-60)}
.plan-price b{font-size:1.25rem;color:var(--ink);font-weight:600}
.plan-card ul{list-style:none;display:grid;gap:.45rem;margin-block:var(--s1) auto;padding-bottom:var(--s2)}
.plan-card li{
  font-size:.88rem;color:var(--ink-60);padding-left:1.2em;position:relative;
}
.plan-card li::before{content:"—";position:absolute;left:0;color:var(--orange-deep)}
.plan-card .btn{justify-content:center}

/* ============================================================
   STACK DIAGRAM (exploded)
   ============================================================ */
.stack-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.stack{display:flex;flex-direction:column;align-items:center;padding-block:3.2rem}
.stack-layer{
  width:min(320px,80%);display:block;position:relative;
  margin-top:-58px;
  transition:transform .6s cubic-bezier(.3,.7,.2,1),filter .25s ease;
  transition-delay:calc(var(--i)*60ms);
  cursor:pointer;
}
.stack-layer:first-child{margin-top:0}
.stack.exploded .stack-layer{transform:translateY(calc((var(--i) - 1.5)*30px))}
.stack-layer svg{width:100%;height:auto;overflow:visible}
.stack-layer .board{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;transition:fill .25s ease,stroke .25s ease}
.stack-layer .detail{stroke:var(--ink-40);stroke-width:1;fill:none}
.stack-layer .accent{fill:var(--orange);opacity:0;transition:opacity .25s ease}
.stack-layer:hover .board,.stack-layer.active .board{stroke:var(--orange)}
.stack-layer.active .board{fill:#fff2ea}
.stack-layer:hover .accent,.stack-layer.active .accent{opacity:1}
.stack-layer .tag{
  position:absolute;left:calc(100% - 8px);top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;color:var(--ink-60);
  display:flex;align-items:center;gap:.6em;pointer-events:none;
}
.stack-layer .tag::before{content:"";width:26px;height:1px;background:var(--ink-40)}
.stack-layer.active .tag{color:var(--orange-deep)}
.stack-layer.active .tag::before{background:var(--orange)}

.spec-sheet{
  border:1px solid var(--ink);background:var(--paper);
  padding:var(--s3);position:relative;
}
.spec-sheet::before{
  content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;
  border:1px solid var(--hairline-soft);pointer-events:none;
}
.spec-sheet .spec{display:block}
.spec-sheet h3{font-family:var(--mono);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin:.4rem 0 1rem}
.spec-sheet dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;font-size:.85rem}
.spec-sheet dt{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);padding-top:.15em}
.spec-sheet dd{border-bottom:1px dashed var(--hairline);padding-bottom:.35em}
.spec-sheet .sheet-body{transition:opacity .25s ease,transform .25s ease}
.spec-sheet.swap .sheet-body{opacity:0;transform:translateX(10px)}

/* ============================================================
   STATS
   ============================================================ */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.stat{background:var(--paper);padding:var(--s3)}
.stat .v{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat .v em{font-style:normal;color:var(--orange)}
.stat .spec{display:block;margin-top:.6rem}

/* ============================================================
   COVERAGE CHECKER
   ============================================================ */
.checker{
  border:1px solid var(--ink);background:var(--paper);padding:var(--s4) var(--s3);
  position:relative;
}
.checker::after{
  content:"FORM CL-01";position:absolute;top:10px;right:12px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-40);
}
.checker form{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.checker input{
  flex:1 1 220px;
  font-family:var(--mono);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.85em 1em;border:1px solid var(--ink);background:var(--paper);
}
.checker input::placeholder{color:var(--ink-40);text-transform:uppercase}
.check-result{
  margin-top:var(--s3);border:1px solid var(--orange);background:#fff2ea;
  padding:var(--s3);display:none;
}
.check-result.show{display:block;animation:result-in .45s cubic-bezier(.3,.7,.2,1)}
@keyframes result-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.check-result .headline{
  font-family:var(--mono);font-weight:600;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;display:flex;align-items:center;gap:.7em;margin-bottom:var(--s2);
}
.check-result .headline::before{content:"";width:10px;height:10px;background:var(--green);border-radius:50%}
.check-result dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);font-family:var(--mono)}
.check-result dt{font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60)}
.check-result dd{font-size:.95rem;font-weight:600}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.quote{background:var(--paper);padding:var(--s4) var(--s3)}
.quote blockquote{font-size:1.05rem;line-height:1.55;letter-spacing:-.01em}
.quote blockquote::before{content:"“";color:var(--orange);font-size:1.6em;line-height:0;vertical-align:-.25em;margin-right:.1em}
.quote figcaption{margin-top:var(--s3);display:flex;flex-direction:column;gap:.15rem}
.quote figcaption b{font-size:.9rem}
.quote figcaption .spec{font-size:.66rem}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border:1px solid var(--hairline);border-bottom:none}
.faq details{border-bottom:1px solid var(--hairline);background:var(--paper)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--s2);
  padding:var(--s3);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  transition:background-color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--paper-2)}
.faq summary .idx{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--ink-40);flex:none;padding-top:.2em}
.faq summary .pm{margin-left:auto;font-family:var(--mono);font-weight:400;color:var(--orange-deep);flex:none}
.faq summary .pm::before{content:"+"}
.faq details[open] summary .pm::before{content:"−"}
.faq details p{padding:0 var(--s3) var(--s3) calc(var(--s3) + 2.4rem);color:var(--ink-60);font-size:.95rem}
@media (max-width:600px){.faq details p{padding-left:var(--s3)}}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(250,248,244,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,248,244,.07) 1px,transparent 1px);
  background-size:48px 48px;
}
.cta-band .wrap{position:relative;padding-block:clamp(3.5rem,7vw,5.5rem);display:grid;gap:var(--s3);justify-items:start}
.cta-band .spec{color:rgba(250,248,244,.6)}
.cta-band h2{max-width:20ch}
.cta-band h2 em{font-style:normal;color:var(--orange)}
.cta-band .btn{border-color:var(--paper);color:var(--paper)}
.cta-band .btn:hover{background:var(--paper);color:var(--ink)}
.cta-band .btn--primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.cta-band .btn--primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ============================================================
   TABLES
   ============================================================ */
.table-scroll{overflow-x:auto;border:1px solid var(--ink);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:640px;background:var(--paper)}
caption{text-align:left;padding:var(--s2) var(--s3);font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);border-bottom:1px solid var(--hairline)}
th,td{padding:.85rem var(--s3);text-align:left;border-bottom:1px solid var(--hairline);font-size:.9rem;vertical-align:top}
thead th{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;background:var(--paper-2);
}
tbody th{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-60);font-weight:500}
td .yes{color:var(--green);font-weight:600}
td .no{color:var(--ink-40)}
td.hl{background:#fff2ea}
tr:last-child th,tr:last-child td{border-bottom:none}

/* ============================================================
   COVERAGE MAP
   ============================================================ */
.map-frame{border:1px solid var(--ink);background:var(--paper);position:relative}
.map-frame svg{width:100%;height:auto}
.map-frame .map-legend{
  display:flex;flex-wrap:wrap;gap:var(--s3);padding:var(--s2) var(--s3);
  border-top:1px solid var(--hairline);
}
.map-legend span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);display:flex;align-items:center;gap:.6em}
.map-legend .sw{width:14px;height:0;border-top:2px solid var(--ink);flex:none}
.map-legend .sw--dash{border-top-style:dashed;border-color:var(--orange)}
.map-legend .sw--dot{width:9px;height:9px;border:none;background:var(--orange);border-radius:50%}
.city-map .street{stroke:var(--hairline);stroke-width:1}
.city-map .street--main{stroke:var(--ink-40);stroke-width:1.4}
.city-map .block{fill:none;stroke:var(--hairline-soft)}
.city-map .route{
  stroke:var(--orange);stroke-width:1.6;fill:none;
  stroke-dasharray:7 7;
  animation:march 1.6s linear infinite;
}
@keyframes march{to{stroke-dashoffset:-28}}
.city-map .pop{fill:var(--orange)}
.city-map .pop-ring{fill:none;stroke:var(--orange);opacity:0;transform-origin:center;transform-box:fill-box}
.city-map .pop-g .pop-ring{animation:pulse 2.6s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes pulse{
  0%{opacity:.7;transform:scale(.4)}
  70%{opacity:0;transform:scale(1.6)}
  100%{opacity:0;transform:scale(1.6)}
}
.city-map text{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;fill:var(--ink-60);text-transform:uppercase}
.city-map .lbl-pop{fill:var(--ink);font-weight:600}

/* ---- status panel ---- */
.status-panel{border:1px solid var(--hairline)}
.status-row{
  display:flex;align-items:center;gap:var(--s2);justify-content:space-between;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--hairline);background:var(--paper);
  flex-wrap:wrap;
}
.status-row:last-child{border-bottom:none}
.status-row .name{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.status-row .state{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:.6em}
.status-row .state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(27,122,61,.15)}
.status-row .meta{font-family:var(--mono);font-size:.68rem;color:var(--ink-40)}

/* ---- timeline ---- */
.timeline{list-style:none;position:relative;padding-left:1.6rem}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--hairline)}
.timeline li{position:relative;padding-bottom:var(--s3)}
.timeline li::before{
  content:"";position:absolute;left:-1.6rem;top:.4em;width:11px;height:11px;
  background:var(--paper);border:2px solid var(--ink);
}
.timeline li.done::before{background:var(--orange);border-color:var(--orange)}
.timeline li.now::before{background:var(--paper);border-color:var(--orange)}
.timeline .spec{display:block;margin-bottom:.2rem}
.timeline b{font-size:1.02rem}
.timeline p{font-size:.9rem;color:var(--ink-60);margin-top:.2rem}

/* ============================================================
   LOGOS ROW (fictional wordmarks)
   ============================================================ */
.logo-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
}
.logo-row span{
  background:var(--paper);padding:var(--s3);display:flex;align-items:center;justify-content:center;
  color:var(--ink-40);font-weight:700;letter-spacing:.04em;text-align:center;
  transition:color .25s ease;font-size:.95rem;
}
.logo-row span:hover{color:var(--ink)}
.logo-row .lm-mono{font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.logo-row .lm-serifish{font-weight:800;letter-spacing:-.02em}
.logo-row .lm-caps{text-transform:uppercase;letter-spacing:.22em;font-weight:500;font-size:.78rem}

/* ============================================================
   FORMS
   ============================================================ */
.form-card{border:1px solid var(--ink);background:var(--paper);padding:var(--s4) var(--s3);position:relative}
.form-card::after{
  content:attr(data-form-id);position:absolute;top:10px;right:12px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-40);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.form-grid .full{grid-column:1/-1}
.field label{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%;padding:.8em .9em;border:1px solid var(--hairline);
  background:var(--paper);font-size:.95rem;
  transition:border-color .2s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-60)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline-offset:0}
.field textarea{resize:vertical;min-height:120px}
.form-success{display:none;border:1px solid var(--green);background:#eef6f0;padding:var(--s3);margin-top:var(--s3)}
.form-success.show{display:block;animation:result-in .45s cubic-bezier(.3,.7,.2,1)}
.form-success .headline{font-family:var(--mono);font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:.6em;margin-bottom:.5rem}
.form-success .headline::before{content:"";width:9px;height:9px;background:var(--green);border-radius:50%}
.form-success p{font-size:.9rem;color:var(--ink-60)}
form.submitted .form-grid,form.submitted > .btn{display:none}

/* ============================================================
   MISC LAYOUT
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.split--center{align-items:center}
.trust-strip{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  border-block:1px solid var(--hairline);padding-block:var(--s3);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
}
.trust-strip span{display:flex;align-items:center;gap:.7em}
.trust-strip span::before{content:"✓";color:var(--orange-deep);font-weight:600}
.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.addon{background:var(--paper);padding:var(--s3)}
.addon h3{font-size:1rem;margin-bottom:.4rem}
.addon .spec{display:block;margin-bottom:var(--s2)}
.addon p{font-size:.88rem;color:var(--ink-60)}
.addon .price{font-family:var(--mono);font-weight:600;margin-top:var(--s2);font-size:.9rem}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.contact-card{background:var(--paper);padding:var(--s3)}
.contact-card .spec{display:block;margin-bottom:var(--s2)}
.contact-card h3{margin-bottom:.4rem}
.contact-card p{font-size:.9rem;color:var(--ink-60)}
.contact-card .mono-line{font-family:var(--mono);font-weight:600;font-size:1rem;margin-top:var(--s2);display:block;text-decoration:none}
.contact-card .mono-line:hover{color:var(--orange-deep)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.5rem 2rem;font-family:var(--mono);font-size:.85rem}
.hours dt{color:var(--ink-60);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding-top:.2em}
.hours dd{border-bottom:1px dashed var(--hairline);padding-bottom:.3em;font-variant-numeric:tabular-nums}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.case{background:var(--paper);padding:var(--s4) var(--s3)}
.case .spec{display:block;margin-bottom:var(--s2)}
.case .big{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.case .big em{font-style:normal;color:var(--orange)}
.case h3{margin-top:var(--s2);font-size:1.05rem}
.case p{font-size:.9rem;color:var(--ink-60);margin-top:.5rem}

/* prose lists */
.tick-list{list-style:none;display:grid;gap:.6rem}
.tick-list li{padding-left:1.5em;position:relative;font-size:.95rem;color:var(--ink-60)}
.tick-list li::before{content:"—";position:absolute;left:0;color:var(--orange-deep)}
.tick-list li b{color:var(--ink)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--ink);background:var(--paper);margin-top:var(--s5)}
.footer-grid{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s4);
  padding-block:var(--s5) var(--s4);
}
.footer-brand .brand{margin-bottom:var(--s2)}
.footer-brand p{font-size:.85rem;color:var(--ink-60);max-width:32ch}
.footer-col .spec{display:block;margin-bottom:var(--s2)}
.footer-col ul{list-style:none;display:grid;gap:.5rem}
.footer-col a{font-size:.88rem;text-decoration:none;color:var(--ink-60);transition:color .2s ease}
.footer-col a:hover{color:var(--orange-deep)}
.footer-legal{
  border-top:1px solid var(--hairline);padding-block:var(--s3);
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-40);
}
.footer-legal a{color:var(--ink-60);text-decoration:none}
.footer-legal a:hover{color:var(--orange-deep);text-decoration:underline}

/* ============================================================
   REVEALS
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.3,.7,.2,1);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .hero-grid,.stack-grid,.split{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .schematic{max-width:520px}
}
@media (max-width:820px){
  .main-nav{display:none}
  .nav-toggle{display:block}
}
@media (min-width:821px){
  .mobile-nav{display:none}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .callout{position:static;display:inline-block;margin:.3rem .3rem 0 0}
  .callouts{position:static;pointer-events:auto;margin-top:var(--s2)}
  .callout .leader{display:none}
  .stack-layer{width:min(280px,86%)}
  .stack-layer .tag{position:static;transform:none;justify-content:center;margin-top:.2rem}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .scheme .d{stroke-dashoffset:0;stroke-dasharray:none}
  .scheme .led,.scheme .fill-in{opacity:1}
  .ticker-track{animation:none;transform:none}
  .city-map .route{animation:none}
  .city-map .pop-g .pop-ring{animation:none;opacity:0}
  .reveal{opacity:1;transform:none}
  .stack.exploded .stack-layer,.stack .stack-layer{transition:none}
}