/* Lestom Consulting — 2027 redesign, direction prototype.
   Tokens first; contrast ratios measured against their real backgrounds. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* colour — pairs and ratios:
     ink/paper 16.46 · ink-2/paper 7.45 · gold-text/paper 5.60
     on-dark/graphite 15.99 · on-dark-2/graphite 7.89 · amber/graphite 10.49
     ink/amber 10.32 · ink/gold 10.27 · gold/graphite 10.44 · gold/paper 1.60 (graphics only) */
  --paper: #f2f0eb;
  --paper-2: #e8e5de;
  --ink: #111214;
  --ink-2: #4a4d52;
  --line: #d6d2c9;
  --graphite: #0e1013;
  --graphite-2: #1a1d22;
  --graphite-line: #2b2f36;
  --on-dark: #edebe6;
  --on-dark-2: #a3a7ae;
  --signal: #f2b630;       /* gold, from the logo; buttons and graphics */
  --signal-text: #7a5a0a;  /* dark gold for text on paper (5.60:1) */
  --amber: #f5b53f;
  --gold-deep: #c8901a;
  --gold-light: #ffd877;
  --ok: #ffd877;
  --trace: linear-gradient(90deg, var(--gold-deep), var(--signal) 45%, var(--gold-light));

  /* type — one superfamily, variable */
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
  --step-4: clamp(2.7rem, 1.6rem + 5vw, 6rem);

  /* space */
  --s-1: 0.5rem; --s-2: 0.75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem;
  --s-6: 3rem; --s-7: 4.5rem; --s-8: 7rem;

  /* shape — radii vary by role, not one size everywhere */
  --r-tile: 22px;
  --r-panel: 34px;
  --r-control: 999px;
  --r-field: 12px;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-spring: cubic-bezier(0.2, 1.35, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--sans);
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.kicker {
  font: 500 var(--step--1)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-text);
  display: flex; align-items: center; gap: var(--s-2);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--trace); }
.on-dark .kicker { color: var(--amber); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-4);
  border-radius: var(--r-control); border: 2px solid transparent;
  background: var(--bg); color: var(--fg);
  font: 600 var(--step-0)/1 var(--sans); text-decoration: none;
  transition: transform .35s var(--ease-spring), background-color .25s, box-shadow .35s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgb(17 18 20 / .55); }
.btn .icon { transition: transform .35s var(--ease-spring); }
.btn:hover .icon { transform: translateX(4px); }
.btn--signal { --bg: var(--signal); --fg: var(--ink); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.on-dark .btn--ghost { --fg: var(--on-dark); border-color: var(--on-dark-2); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 76px; }
.brand img { width: 210px; height: auto; }
.footer-logo { width: 220px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.nav a, .nav summary { font-weight: 500; text-decoration: none; cursor: pointer; padding: var(--s-1) 0; }
.nav a:hover, .nav summary:hover { color: var(--signal-text); }
.nav details { position: relative; }
.nav summary { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); }
.nav .menu {
  position: absolute; top: calc(100% + 14px); left: -20px; min-width: 300px;
  background: var(--graphite); color: var(--on-dark); border-radius: var(--r-tile);
  padding: var(--s-2); display: grid; gap: 2px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6);
}
.nav .menu a { padding: var(--s-2) var(--s-3); border-radius: 12px; display: flex; justify-content: space-between; gap: var(--s-3); }
.nav .menu a:hover { background: var(--graphite-2); color: var(--amber); }
.nav .menu span { font: 500 var(--step--1) var(--mono); color: var(--on-dark-2); }
.header-phone { font: 500 var(--step--1) var(--mono); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.header-cta { min-height: 44px; }
.menu-toggle { display: none; }

@media (max-width: 1080px) {
  .header-phone { display: none; }
}
@media (max-width: 900px) {
  .site-header .wrap { min-height: 64px; gap: var(--s-3); }
  .brand img { width: 168px; }
  .menu-toggle {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper);
  }
  .nav, .header-cta { display: none; }
  .site-header.is-open .nav {
    display: grid; position: absolute; inset: 64px 0 auto 0; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: var(--s-3) var(--gutter) var(--s-5); gap: var(--s-1);
  }
  .site-header.is-open .nav a, .site-header.is-open .nav summary { font-size: var(--step-1); padding: var(--s-2) 0; }
  .nav .menu { position: static; min-width: 0; margin-top: var(--s-1); }
}

/* ---------- section scaffolding ---------- */
.section { padding: clamp(3rem, 2rem + 2.5vw, 4.5rem) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-5); align-items: end; margin-bottom: var(--s-5); }
.section-head h2 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.03em; font-weight: 640; margin: var(--s-3) 0 0; max-width: 16ch; }
.section-head p { margin: 0; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } .section { padding: var(--s-6) 0; } }

/* ---------- masonry services ---------- */
.masonry {
  position: relative;
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 64px;
  grid-auto-flow: dense;
}
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-tile);
  padding: var(--s-5);
  background: #fbfaf7; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-3);
  text-decoration: none; color: inherit;
  transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-out);
}
.tile.is-link:hover, .feat:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 50px -34px rgb(17 18 20 / .55); }
/* travelling trace around the edge on hover — brand gradient, not decoration for its own sake */
.tile.is-link::after, .feat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--gold-deep), var(--signal), var(--gold-light), transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.tile.is-link:hover::after, .feat:hover::after { opacity: 1; animation: orbit 2.4s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --a: 360deg; } }

.tile .num { font: 500 var(--step--1) var(--mono); color: var(--ink-2); letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; }
.tile h3 { margin: 0; font-size: var(--step-2); line-height: 1.05; letter-spacing: -0.025em; font-weight: 640; }
.tile p { margin: 0; color: var(--ink-2); }
.tile .go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tile .go .icon { transition: transform .4s var(--ease-spring); }
.tile.is-link:hover .go .icon { transform: translate(3px, -3px); }

.tile--lead { grid-column: span 7; grid-row: span 8; background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.tile--lead h3 { font-size: var(--step-3); max-width: 12ch; }
.tile--lead p, .tile--lead .num { color: var(--on-dark-2); }
.caps { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--graphite-line); }
.caps li { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--graphite-line); display: flex; gap: var(--s-2); align-items: baseline; font-weight: 500; }
.caps li::before { content: attr(data-n); font: 500 var(--step--1) var(--mono); color: var(--amber); }
.tile--lead .go { color: var(--amber); }

.tile--cisco { grid-column: span 5; grid-row: span 5; }
.tile--stat { grid-column: span 5; grid-row: span 3; background: var(--amber); border-color: var(--amber); justify-content: space-between; }
.tile--stat .big { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: .9; }
.tile--stat p { color: var(--ink); font-weight: 500; max-width: 26ch; }
.tile--switch { grid-column: span 4; grid-row: span 6; }
.tile--voip { grid-column: span 4; grid-row: span 6; background: var(--graphite-2); border-color: var(--graphite-2); color: var(--on-dark); }
.tile--voip p, .tile--voip .num { color: var(--on-dark-2); }
.tile--web { grid-column: span 4; grid-row: span 6; }
.tile--quote { grid-column: span 12; grid-row: span 3; background: transparent; border: 2px solid var(--ink); flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-5); }
.tile--quote blockquote { margin: 0; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; max-width: 30ch; }
.tile--quote cite { font: 500 var(--step--1) var(--mono); font-style: normal; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }

/* tile illustrations: drawn, not stock */
.art { margin-top: auto; }
.art svg { width: 100%; height: auto; }
.led { animation: blink var(--d, 1.6s) steps(2, jump-none) infinite; animation-delay: var(--o, 0s); }
@keyframes blink { 50% { opacity: .15; } }
.wave path { stroke-dasharray: 4 6; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }

@media (max-width: 1100px) {
  .tile--lead { grid-column: span 12; grid-row: span 8; }
  .tile--cisco, .tile--stat { grid-column: span 6; }
  .tile--stat { grid-row: span 6; }
  .tile--switch, .tile--voip { grid-column: span 6; }
  .tile--web { grid-column: span 12; grid-row: span 5; }
}
@media (max-width: 700px) {
  .masonry { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile, .tile--lead, .tile--cisco, .tile--stat, .tile--switch, .tile--voip, .tile--web, .tile--quote { grid-column: auto; grid-row: auto; }
  .tile { padding: var(--s-4); }
  .caps { grid-template-columns: 1fr; }
  .tile--quote { flex-direction: column; align-items: flex-start; }
}

/* burst canvas for the "explode in" moment */
.burst { position: absolute; inset: -60px; pointer-events: none; z-index: 5; width: calc(100% + 120px); height: calc(100% + 120px); }

/* ---------- DTC (dark band) ---------- */
.on-dark { background: var(--graphite); color: var(--on-dark); }
.dtc .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--s-5), 5vw, var(--s-8)); }
.dtc h2 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.03em; margin: var(--s-3) 0 var(--s-4); font-weight: 640; }
.dtc .body { color: var(--on-dark-2); max-width: 44ch; }
.dtc .body strong { color: var(--on-dark); font-weight: 600; }
.terminal {
  background: var(--graphite-2); border: 1px solid var(--graphite-line); border-radius: var(--r-tile);
  font-family: var(--mono); overflow: hidden; align-self: start;
}
.terminal .bar { display: flex; gap: 6px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--graphite-line); font-size: var(--step--1); color: var(--on-dark-2); align-items: center; }
.terminal .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--graphite-line); display: inline-block; }
.terminal .bar i:first-child { background: var(--gold-deep); } .terminal .bar i:nth-child(2) { background: var(--signal); } .terminal .bar i:nth-child(3) { background: var(--gold-light); }
.terminal .bar span { margin-left: var(--s-2); }
.terminal ol { list-style: none; margin: 0; padding: var(--s-2) 0; counter-reset: l; }
.terminal li { padding: var(--s-3) var(--s-4); display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); border-bottom: 1px dashed var(--graphite-line); }
.terminal li:last-child { border-bottom: 0; }
.terminal li::before { counter-increment: l; content: counter(l, decimal-leading-zero); color: var(--on-dark-2); font-size: var(--step--1); padding-top: 3px; }
.terminal code { color: var(--amber); font-size: var(--step--1); }
.terminal li p { grid-column: 2; margin: 0; font-family: var(--sans); color: var(--on-dark); }
@media (max-width: 900px) { .dtc .wrap { grid-template-columns: 1fr; } }

/* ---------- closing CTA + form ---------- */
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--s-5), 5vw, var(--s-8)); align-items: start; }
.cta h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); line-height: 1.02; letter-spacing: -0.035em; margin: var(--s-3) 0 var(--s-4); font-weight: 650; }
.cta .lead { color: var(--ink-2); font-size: var(--step-1); line-height: 1.45; max-width: 32ch; }
.contact-lines { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-2); }
.contact-lines a { display: inline-flex; gap: var(--s-2); align-items: center; font-weight: 600; text-decoration: none; font-size: var(--step-1); }
.contact-lines a:hover { color: var(--signal-text); }
.form, .form-panel { background: #fbfaf7; border: 1px solid var(--line); border-radius: var(--r-panel); padding: clamp(var(--s-4), 3vw, var(--s-6)); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: var(--step--1); }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink);
  min-height: 48px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(242 182 48 / .35); }
.form .note { grid-column: 1 / -1; margin: 0; font: 500 var(--step--1) var(--mono); color: var(--ink-2); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 900px) { .cta .wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s-6) 0 calc(var(--s-6) + env(safe-area-inset-bottom)); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-5); }
.site-footer .foot-h { margin: 0 0 var(--s-3); font: 500 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.site-footer a { text-decoration: none; }
.site-footer ul a { display: inline-block; padding: 6px 0; }
.site-footer a:hover { color: var(--signal-text); }
.site-footer .fine { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .35s var(--ease-spring), background .2s; }
.social a:hover { transform: translateY(-3px); background: var(--ink); color: var(--paper); }
@media (max-width: 800px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .brandcol { grid-column: 1 / -1; } }

/* ---------- phone action bar ---------- */
.action-bar { display: none; }
@media (max-width: 700px) {
  .action-bar {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
    position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 8px; border-radius: 22px; background: var(--graphite);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .6);
  }
  .action-bar .btn { justify-content: center; min-height: 50px; padding: 0 var(--s-3); }
  .action-bar .btn--ghost { --fg: var(--on-dark); border-color: var(--graphite-line); }
  body { padding-bottom: 86px; }
}

/* ---------- motion (only once JS has opted in; content is visible without it) ---------- */
.js .masonry .tile { will-change: transform, opacity, filter; }
.js .masonry:not(.is-in) .tile {
  opacity: 0;
  transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(.55);
  filter: blur(6px);
}
.js .masonry.is-in .tile {
  transition: transform 1.1s var(--ease-spring) var(--delay, 0s), opacity .5s var(--ease-out) var(--delay, 0s), filter .7s var(--ease-out) var(--delay, 0s), box-shadow .5s var(--ease-out);
}
.js .rise .line > span { transform: translateY(105%); transition: transform 1s var(--ease-out) var(--delay, 0s); }
.js .rise.is-in .line > span { transform: none; }
.js [data-type] { visibility: hidden; }
.js [data-type].is-typed { visibility: visible; }
.js .terminal li { opacity: 0; transform: translateX(-12px); transition: opacity .4s var(--ease-out) var(--delay, 0s), transform .6s var(--ease-out) var(--delay, 0s); }
.js .terminal.is-in li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .masonry:not(.is-in) .tile, .js .rise .line > span, .js .terminal li { opacity: 1; transform: none; filter: none; }
  .js [data-type] { visibility: visible; }
}

/* =====================================================================
   WordPress block theme layer
   ===================================================================== */
.wp-site-blocks { padding: 0; }
.page-body > * + *, .wp-site-blocks > * + * { margin-block-start: 0; }
.site-main { display: block; }
.wp-block-heading { margin: 0; }
.wp-block-list { margin: 0; }
.form-panel { display: block; }

/* tiles as groups: the heading link stretches over the whole tile */
.tile h3 a { color: inherit; text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.tile .num, .tile .live { position: relative; }
.tile p { margin: 0; }

/* ---------- long copy: statement left, paragraphs right ---------- */
.detail .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--s-5), 5vw, var(--s-8)); border-top: 1px solid var(--line); padding-top: var(--s-6); }
.detail h2 { font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.03em; font-weight: 640; margin: var(--s-3) 0 0; }
.detail .copy p:not(.kicker) { margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; }
.detail .copy p:not(.kicker):first-child, .detail--viz .copy h2 + p { color: var(--ink); }
.detail .points { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.detail .points li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 2.5rem 1fr; font-weight: 500; }
.detail .points li::before { content: counter(p, decimal-leading-zero); counter-increment: p; font: 500 var(--step--1) var(--mono); color: var(--signal-text); padding-top: 4px; }
.detail .points { counter-reset: p; }
@media (max-width: 860px) { .detail .wrap { grid-template-columns: 1fr; } }

/* ---------- feature masonry on service pages ---------- */
.features .masonry { grid-auto-rows: 56px; }
.feat { grid-column: span 4; grid-row: span 4; }
.feat h3 { font-size: var(--step-1); }
.feat--lead { grid-column: span 6; grid-row: span 4; background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.feat--lead h3 { font-size: var(--step-2); }
.feat--lead p, .feat--lead .num { color: var(--on-dark-2); }
.feat--wide { grid-column: span 6; grid-row: span 4; }
.feat--amber { background: var(--amber); border-color: var(--amber); }
.feat--amber p, .feat--amber .num { color: var(--ink); }
.feat--tall { grid-row: span 6; }
@media (max-width: 1100px) { .feat, .feat--lead, .feat--wide { grid-column: span 6; grid-row: span 5; } }
@media (max-width: 700px) { .feat, .feat--lead, .feat--wide { grid-column: auto; grid-row: auto; } }

/* ---------- reading pages (privacy, blog) ---------- */
.prose-section { padding: var(--s-7) 0; }
.prose { max-width: 760px; }
.prose h1 { font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.03em; margin: var(--s-3) 0 var(--s-5); }
.prose h2 { font-size: var(--step-2); letter-spacing: -0.02em; margin: var(--s-6) 0 var(--s-3); }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin: 0 0 var(--s-3); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s-3); }
.prose a { color: var(--signal-text); }
.note-box { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-tile); border: 1px dashed var(--line); font: 500 var(--step--1) var(--mono); color: var(--ink-2); }

/* ---------- 404 ---------- */
.not-found h1 { font-size: var(--step-4); line-height: .98; letter-spacing: -0.04em; margin: var(--s-4) 0; max-width: 14ch; }
.not-found .lead { font-size: var(--step-1); color: var(--ink-2); max-width: 40ch; }
.not-found a { color: var(--signal-text); }

/* ---------- contact block + WPForms ---------- */
.contact-lines a { font-weight: 600; text-decoration: none; font-size: var(--step-1); }
.contact-lines li { list-style: none; }
.cta .contact-lines { padding: 0; }
.form-panel .wpforms-container { margin: 0 !important; }
.form-panel .wpforms-field { padding: 0 0 var(--s-3) !important; }
.form-panel .wpforms-field-label { font-weight: 500 !important; font-size: var(--step--1) !important; color: var(--ink) !important; margin-bottom: 6px !important; }
.form-panel .wpforms-field-sublabel { font: 500 var(--step--1) var(--mono) !important; color: var(--ink-2) !important; }
.form-panel input[type=text], .form-panel input[type=email], .form-panel input[type=tel], .form-panel input[type=number], .form-panel select, .form-panel textarea {
  height: auto !important; line-height: 1.4 !important;
  width: 100% !important; max-width: 100% !important; font: inherit !important; font-size: var(--step-0) !important; color: var(--ink) !important;
  min-height: 48px; padding: var(--s-2) var(--s-3) !important; border: 1px solid var(--line) !important; border-radius: var(--r-field) !important; background: var(--paper) !important; box-shadow: none !important;
}
.form-panel textarea { min-height: 130px !important; }
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgb(242 182 48 / .35) !important; outline: none; }
.form-panel .wpforms-submit-container { padding-top: var(--s-2) !important; }
.form-panel button[type=submit] {
  display: inline-flex !important; align-items: center; min-height: 48px; padding: 0 var(--s-5) !important;
  border-radius: var(--r-control) !important; border: 0 !important; background: var(--signal) !important; color: var(--ink) !important;
  font: 600 var(--step-0)/1 var(--sans) !important; cursor: pointer; transition: transform .35s var(--ease-spring);
}
.form-panel button[type=submit]:hover { transform: translateY(-2px); }
.form-panel .wpforms-confirmation-container-full { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--r-tile); color: var(--ink) !important; }
.form-panel label.wpforms-error, .form-panel em.wpforms-error { color: var(--signal-text) !important; font-size: var(--step--1); }
.feat--full { grid-column: span 12; grid-row: span 3; }
@media (max-width: 1100px) { .feat--full { grid-column: span 12; grid-row: span 4; } }
@media (max-width: 700px) { .feat--full { grid-column: auto; grid-row: auto; } }
.tile--quote .quote-text { margin: 0; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; max-width: 30ch; color: var(--ink); }
.tile--quote .cite { font: 500 var(--step--1) var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.tile--stat .big { margin: 0; }
.dtc .terminal-wrap { align-self: start; }
.dtc .body h2 { color: var(--on-dark); }
.dtc .body p { margin: 0 0 var(--s-3); }
/* phones: feature tiles size to their content (beats the 56px desktop rows above) */
@media (max-width: 700px) { .features .masonry { grid-auto-rows: auto; } }
/* the spark burst overhangs its grid by 60px; never let it widen the page */
.site-main { overflow-x: clip; }

/* =====================================================================
   Hero band: full-width black field, live network behind the copy.
   Everything the hero says fits on the first screen at every size.
   ===================================================================== */
.hero-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 90% at 78% 50%, #17191d 0%, var(--graphite) 60%);
  color: var(--on-dark);
  min-height: clamp(520px, calc(100svh - 77px), 800px);
  display: grid; align-items: center;
}
.hero-band canvas, .hero-band .net-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.js .hero-band .net-static { display: none; }
.hero-band::before {
  /* keeps the copy readable over the network */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(14 16 19 / .97) 0%, rgb(14 16 19 / .88) 32%, rgb(14 16 19 / .4) 56%, rgb(14 16 19 / 0) 74%);
}
.hero-band .wrap { padding-block: clamp(28px, 6vh, 64px); }
.hero-band .hero-copy { max-width: 660px; }
.hero-band .kicker { color: var(--signal); }
.hero-band h1 {
  font-size: clamp(2.3rem, 1.1rem + 3.5vw, 4.5rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 650;
  margin: var(--s-3) 0 var(--s-4); color: #fff;
}
.hero-band h1 em { font-style: normal; background: var(--trace); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-band .lead { font-size: var(--step-1); line-height: 1.45; color: #c9ccd2; max-width: 44ch; margin: 0 0 var(--s-5); }
.hero-band .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.hero-band .btn--ghost { --fg: var(--on-dark); border-color: #5b6069; }
.hero-band .btn--ghost:hover { border-color: var(--signal); }
.hero-band .hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-5) 0 0; padding: var(--s-4) 0 0;
  border-top: 1px solid rgb(237 235 230 / .14);
}
.hero-band .hero-facts dt { font: 500 var(--step--1) var(--mono); color: var(--on-dark-2); text-transform: uppercase; letter-spacing: .06em; }
.hero-band .hero-facts dd { margin: 0; font-weight: 600; font-size: var(--step-1); color: var(--gold-light); }
.hero-hud {
  position: absolute; right: var(--gutter); bottom: var(--s-4); z-index: 1;
  display: flex; gap: var(--s-4); align-items: center;
  font: 500 var(--step--1) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2);
}
.hero-hud .live { color: var(--gold-light); }
.hero-band--page { min-height: clamp(440px, 62svh, 640px); }

@media (max-width: 860px) {
  .hero-band { min-height: calc(100svh - 64px); align-items: end; }
  .hero-band::before { background: linear-gradient(180deg, rgb(14 16 19 / .15) 0%, rgb(14 16 19 / .82) 34%, rgb(14 16 19 / .97) 60%); }
  .hero-band .wrap { padding-top: clamp(150px, 26svh, 240px); padding-bottom: var(--s-5); }
  .hero-band .lead { font-size: 1.05rem; margin-bottom: var(--s-4); }
  .hero-hud { top: var(--s-3); bottom: auto; right: auto; left: var(--gutter); }
  .hero-band--page { min-height: 0; }
}
@media (max-width: 700px) {
  /* the pinned Call / Book bar carries the actions on phones */
  .hero-band .actions { display: none; }
  .hero-band { min-height: calc(100svh - 64px - 86px); }
  .hero-band .hero-facts { gap: var(--s-1) var(--s-4); margin-top: var(--s-4); padding-top: var(--s-3); }
  .hero-band .hero-facts dd { font-size: 1.05rem; }
  .hero-hud span:last-child { display: none; }
}
/* service-page heroes say less, so on phones they size to their content (after the rule above) */
@media (max-width: 700px) { .hero-band--page { min-height: 0; } }
/* hero headline keeps its line breaks without the rise animation (it is the LCP element) */
.hero-band h1 .line { display: block; }

/* =====================================================================
   Nav: illuminated hardware keys plugged into a circuit trace.
   Keycap bevel, gold LED, light sweep on hover; each key connects down to
   the trace through a pin that ends in a ring, like the logo's circuits.
   ===================================================================== */
.nav { position: relative; gap: 10px; padding-bottom: 16px; margin-bottom: -16px; }
.nav::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(200 144 26 / .6) 8%, rgb(242 182 48 / .6) 92%, transparent);
}
.nav::before {
  /* a data pulse running along the trace */
  content: ""; position: absolute; bottom: -1px; left: -60px; width: 60px; height: 3px; border-radius: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow: 0 0 10px 1px rgb(242 182 48 / .7);
  animation: trace-run 5s linear infinite;
}
@keyframes trace-run { from { left: -60px; } to { left: 100%; } }

.nav > a, .nav summary {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 16px 0 13px;
  font: 600 0.74rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: #cfd2d8;
  border: 1px solid #2c3037; border-radius: 10px;
  background: linear-gradient(180deg, #2b2f36 0%, #17191d 46%, #0b0c0f 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 -2px 0 rgb(0 0 0 / .55), 0 2px 0 #050506, 0 10px 18px -12px rgb(0 0 0 / .75);
  transition: color .2s, border-color .3s, box-shadow .35s var(--ease-out), transform .25s var(--ease-spring);
}
.nav > a::before, .nav summary::before {
  /* light sweeping across the keycap */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 236 180 / .2) 45%, rgb(255 255 255 / .34) 50%, rgb(255 236 180 / .2) 55%, transparent 70%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
}
.nav > a:hover::before, .nav summary:hover::before { opacity: 1; animation: key-shine .9s var(--ease-out); }
@keyframes key-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.nav summary::after { margin-left: 2px; }

.nav .led {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #3a311c; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6);
  transition: background .25s, box-shadow .25s;
}
.nav .pin {
  position: absolute; left: 50%; top: calc(100% + 1px); width: 1px; height: 14px; transform: translateX(-50%); pointer-events: none;
  background: rgb(242 182 48 / .45); transition: background .25s, box-shadow .25s;
}
.nav .pin::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%);
  border: 1.5px solid rgb(242 182 48 / .75); background: var(--paper); transition: background .25s, box-shadow .25s;
}

.nav > a:hover, .nav summary:hover, .nav details[open] summary, .nav > a[aria-current="page"], .nav summary.is-current {
  color: #fff; border-color: rgb(242 182 48 / .75); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 240 200 / .25), inset 0 -2px 0 rgb(0 0 0 / .55), inset 0 -16px 22px -16px rgb(242 182 48 / .6),
    0 2px 0 #050506, 0 0 0 1px rgb(242 182 48 / .25), 0 0 24px -2px rgb(242 182 48 / .55);
}
.nav > a[aria-current="page"], .nav summary.is-current { color: var(--gold-light); }
.nav > a:hover .led, .nav summary:hover .led, .nav details[open] summary .led, .nav > a[aria-current="page"] .led, .nav summary.is-current .led {
  background: var(--gold-light); box-shadow: 0 0 6px 2px rgb(242 182 48 / .85), 0 0 16px 5px rgb(242 182 48 / .35);
}
.nav > a:hover .pin, .nav summary:hover .pin, .nav > a[aria-current="page"] .pin, .nav summary.is-current .pin { background: var(--signal); box-shadow: 0 0 8px rgb(242 182 48 / .9); }
.nav > a:hover .pin::after, .nav summary:hover .pin::after, .nav > a[aria-current="page"] .pin::after, .nav summary.is-current .pin::after {
  background: var(--gold-light); box-shadow: 0 0 10px 2px rgb(242 182 48 / .85);
}
.nav > a:active, .nav summary:active { transform: translateY(1px); box-shadow: inset 0 3px 8px rgb(0 0 0 / .75), 0 0 18px -4px rgb(242 182 48 / .5); }
.nav .menu { border: 1px solid rgb(242 182 48 / .35); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7), 0 0 30px -12px rgb(242 182 48 / .4); }

@media (max-width: 900px) {
  .nav::before, .nav::after, .nav .pin { display: none; }
  .nav { padding-bottom: 0; margin-bottom: 0; }
  .site-header.is-open .nav { gap: 10px; }
  .site-header.is-open .nav > a, .site-header.is-open .nav summary { width: 100%; min-height: 52px; font-size: 0.9rem; padding: 0 16px 0 14px; }
}

/* =====================================================================
   Buttons: machined gold that glows; CTAs carry a recurring shine.
   ===================================================================== */
.btn { border-radius: 12px; }
.btn--signal {
  position: relative; overflow: hidden; isolation: isolate;
  color: #111214;
  background: linear-gradient(180deg, #ffe39a 0%, #f5bd3c 44%, #d6961a 100%);
  border: 1px solid #a8740f;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(110 72 0 / .35), 0 0 0 1px rgb(242 182 48 / .25), 0 8px 26px -8px rgb(242 182 48 / .8);
}
.btn--signal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .75) 50%, transparent 65%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  animation: cta-shine 3.8s ease-in-out infinite;
}
@keyframes cta-shine { 0%, 58% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.btn--signal:hover {
  background: linear-gradient(180deg, #fff0c4 0%, #ffcb52 44%, #e3a524 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 -2px 0 rgb(110 72 0 / .3), 0 0 0 1px rgb(242 182 48 / .5), 0 12px 36px -6px rgb(242 182 48 / .95), 0 0 44px -8px rgb(255 216 119 / .9);
}
.btn--signal:hover::after { animation-duration: 1.4s; }
.btn--ghost { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.hero-band .btn--ghost:hover { box-shadow: 0 0 22px -6px rgb(242 182 48 / .6); color: #fff; }
.form-panel button[type=submit] {
  border-radius: 12px !important; border: 1px solid #a8740f !important;
  background: linear-gradient(180deg, #ffe39a 0%, #f5bd3c 44%, #d6961a 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 8px 26px -8px rgb(242 182 48 / .8) !important;
}
.form-panel button[type=submit]:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 12px 36px -6px rgb(242 182 48 / .95), 0 0 40px -8px rgb(255 216 119 / .85) !important; }

/* kicker: a glowing circuit node instead of a dash */
.kicker::before { width: 9px; height: 9px; border-radius: 50%; background: none; border: 2px solid var(--signal); box-shadow: 0 0 8px rgb(242 182 48 / .6); flex: none; }

/* hero type: smaller headline, tighter lead */
.hero-band h1 { font-size: clamp(2rem, 1.15rem + 2.5vw, 3.5rem); }
.hero-band .lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); max-width: 46ch; }
/* stronger trace and connectors on the light header */
.nav::after { height: 2px; background: linear-gradient(90deg, transparent, rgb(200 144 26 / .85) 6%, rgb(242 182 48 / .85) 94%, transparent); }
.nav .pin { width: 2px; background: rgb(200 144 26 / .85); }
.nav .pin::after { width: 9px; height: 9px; bottom: -5px; border: 2px solid var(--gold-deep); }
.nav .led { background: #6b5520; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .55), 0 0 4px rgb(242 182 48 / .25); }
/* JS drives the pulse so keys can react as it passes beneath them */
.motion .nav::before { animation: none; left: var(--pulse-x, -60px); }
.nav > a.is-hit .led, .nav summary.is-hit .led { background: var(--gold-light); box-shadow: 0 0 6px 2px rgb(242 182 48 / .85), 0 0 16px 5px rgb(242 182 48 / .35); }
.nav > a.is-hit .pin, .nav summary.is-hit .pin { background: var(--signal); box-shadow: 0 0 8px rgb(242 182 48 / .9); }
.nav > a.is-hit .pin::after, .nav summary.is-hit .pin::after { background: var(--gold-light); box-shadow: 0 0 10px 2px rgb(242 182 48 / .85); }
.nav > a.is-hit, .nav summary.is-hit { box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -2px 0 rgb(0 0 0 / .55), inset 0 -12px 18px -14px rgb(242 182 48 / .55), 0 2px 0 #050506, 0 0 18px -6px rgb(242 182 48 / .45); }

/* =====================================================================
   Mission tile: three linked steps on a gold circuit trace
   ===================================================================== */
.tile--mission { flex-direction: column; align-items: stretch; justify-content: center; gap: var(--s-4); background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); grid-row: span 4; padding: var(--s-5) clamp(var(--s-4), 3vw, var(--s-6)); }
.tile--mission .cite { color: var(--signal); }
.mission-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); position: relative; counter-reset: m; }
.mission-steps::before {
  /* the trace linking the three nodes */
  content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--signal) 50%, var(--gold-light));
  box-shadow: 0 0 10px rgb(242 182 48 / .45);
}
.mission-steps li { position: relative; padding-top: 30px; display: grid; gap: 6px; }
.mission-steps li::before {
  /* ring node on the trace, numbered like a port */
  counter-increment: m; content: "";
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--graphite); border: 2px solid var(--gold-light); box-shadow: 0 0 10px 1px rgb(242 182 48 / .7);
}
.mission-steps li::after { content: counter(m, decimal-leading-zero); position: absolute; left: 20px; top: -1px; padding: 0 6px; background: var(--graphite); font: 500 var(--step--1) var(--mono); line-height: 16px; color: var(--signal); }
.mission-steps strong { font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.015em; font-weight: 650; color: #fff; }
.mission-steps span { color: var(--on-dark-2); font-size: var(--step-0); line-height: 1.45; }
@media (max-width: 1100px) { .tile--mission { grid-row: span 5; } }
@media (max-width: 700px) {
  .tile--mission { grid-row: auto; }
  .mission-steps { grid-template-columns: 1fr; gap: var(--s-4); padding-left: 0; }
  .mission-steps::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold-deep), var(--gold-light)); }
  .mission-steps li { padding: 0 0 0 30px; }
  .mission-steps li::after { left: auto; right: 0; }
}

/* =====================================================================
   Terminal: the three status lights blink like the router LEDs, and
   each command starts with a circuit node instead of a "$" prompt
   ===================================================================== */
.terminal .bar i { animation: blink var(--d, 1.6s) steps(2, jump-none) infinite; animation-delay: var(--o, 0s); box-shadow: 0 0 8px rgb(242 182 48 / .6); }
.terminal .bar i:nth-child(1) { --d: 1.1s; --o: .2s; }
.terminal .bar i:nth-child(2) { --d: 1.7s; --o: .6s; }
.terminal .bar i:nth-child(3) { --d: .9s; --o: 1s; }
.terminal code::before {
  content: ""; display: inline-block; width: 24px; height: 10px; margin-right: 8px; vertical-align: -1px;
  background:
    radial-gradient(circle at 5px 50%, transparent 2.4px, var(--signal) 2.6px, var(--signal) 4.4px, transparent 4.8px),
    linear-gradient(var(--signal), var(--signal)) no-repeat 10px 50% / 14px 1.5px;
  filter: drop-shadow(0 0 3px rgb(242 182 48 / .7));
}

/* =====================================================================
   Form: a visible dropdown arrow on "I'm interested in"
   ===================================================================== */
.form-panel select {
  appearance: none !important; -webkit-appearance: none !important; cursor: pointer;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(180deg, #ffe39a, #d6961a) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 13px center, right 0 center !important;
  background-size: 14px 14px, 38px 100% !important;
  background-color: var(--paper) !important;
}

/* =====================================================================
   Footer: textured black to mirror the hero (grid, crosshairs, gold glow),
   with a gold circuit trace and node along the top edge; light logo
   ===================================================================== */
.site-footer {
  position: relative; isolation: isolate; color: var(--on-dark); border-top: 0;
  background:
    radial-gradient(70% 120% at 85% 0%, rgb(242 182 48 / .10), transparent 60%),
    radial-gradient(50% 80% at 10% 100%, rgb(200 144 26 / .07), transparent 60%),
    linear-gradient(rgb(242 182 48 / .045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(242 182 48 / .045) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--graphite);
}
.site-footer::before {
  /* crosshair marks every 160px, as in the hero */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M77 80h7M80 77v7' stroke='%23f2b630' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 160px 160px repeat;
}
.site-footer::after {
  /* gold trace across the top with a node, the logo's circuit motif */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 12%, var(--signal) 50%, var(--gold-light) 88%, transparent);
  box-shadow: 0 0 14px rgb(242 182 48 / .45);
}
.site-footer .foot-h { color: var(--signal); }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--gold-light); }
.site-footer .fine { border-top-color: rgb(237 235 230 / .12); color: var(--on-dark-2); }
.site-footer .social a { border-color: rgb(237 235 230 / .18); color: var(--on-dark); background: rgb(255 255 255 / .02); }
.site-footer .social a:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); box-shadow: 0 0 18px -4px rgb(242 182 48 / .8); }
.footer-logo { filter: drop-shadow(0 0 18px rgb(242 182 48 / .18)); }

/* =====================================================================
   Tighter rhythm between blocks
   ===================================================================== */
.section { padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) 0; }
.detail .wrap { border-top: 0; padding-top: 0; }
.section-head { margin-bottom: var(--s-4); }
@media (max-width: 800px) { .section { padding: var(--s-5) 0; } }

/* feature tiles: the running gold edge glow, plus a soft gold halo while hovered */
.feat:hover { box-shadow: 0 26px 46px -32px rgb(17 18 20 / .6), 0 0 32px -14px rgb(242 182 48 / .7); }
.feat::after { padding: 2px; }

/* =====================================================================
   Diagram tiles (backup, Cisco lifecycle, support desk, VoIP install): copy left, animated diagram right
   ===================================================================== */
.feat--viz {
  grid-column: span 12; grid-row: span 5;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr; column-gap: var(--s-6); row-gap: var(--s-3);
  background: var(--graphite); border-color: var(--graphite); color: var(--on-dark);
}
.feat--viz .num, .feat--viz p { color: var(--on-dark-2); }
.feat--viz h3 { font-size: var(--step-2); color: #fff; }
.feat--viz .bk { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.bk-svg { width: 100%; height: auto; overflow: visible; }
.bk-fill { transform-box: fill-box; transform-origin: left center; animation: bk-fill 3.6s ease-in-out infinite; animation-delay: var(--o, 0s); }
@keyframes bk-fill { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
.bk-flow { stroke-dasharray: 3 9; animation: flow 1s linear infinite; filter: drop-shadow(0 0 3px rgb(242 182 48 / .8)); }
.bk-vault { animation: bk-pulse 3.6s ease-in-out infinite; }
@keyframes bk-pulse { 0%, 100% { filter: drop-shadow(0 0 2px rgb(242 182 48 / .3)); } 50% { filter: drop-shadow(0 0 14px rgb(242 182 48 / .85)); } }
.bk-ping { transform-box: fill-box; transform-origin: center; animation: bk-ping 2.4s ease-out infinite; }
@keyframes bk-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@media (max-width: 1100px) { .feat--viz { grid-column: span 12; grid-row: span 7; } }
@media (max-width: 760px) {
  .feat--viz { grid-column: 1 / -1; grid-template-columns: 1fr; grid-row: auto; }
  .feat--viz .bk { grid-column: 1; grid-row: auto; margin-top: var(--s-3); }
}
@media (max-width: 700px) {
  /* phones: diagrams run to the tile edges so their labels stay legible */
  .feat--viz .bk { margin-inline: calc(var(--s-4) * -1 + 6px); }
}

/* diagram parts shared by the .feat--viz tiles and the coverage console */
.vz-step { animation: vz-step 4.8s var(--ease-out) infinite; animation-delay: var(--o, 0s); }
@keyframes vz-step { 0%, 8% { opacity: .25; } 18%, 100% { opacity: 1; } }
.vz-state { animation: vz-state 3.6s ease-in-out infinite; animation-delay: var(--o, 0s); }
.vz-state rect { transition: stroke .3s; }
@keyframes vz-state { 0%, 100% { opacity: .45; filter: none; } 12%, 30% { opacity: 1; filter: drop-shadow(0 0 8px rgb(242 182 48 / .75)); } 45% { opacity: .8; filter: none; } }
.vz-state--done { animation-name: vz-done; }
@keyframes vz-done { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px rgb(242 182 48 / .4)); } 50% { filter: drop-shadow(0 0 12px rgb(242 182 48 / .9)); } }
.vz-spin { animation: vz-spin 6s linear infinite; }
@keyframes vz-spin { to { transform: rotate(360deg); } }
.vz-ring { stroke-dasharray: 440; animation: vz-ring 6s linear infinite; transform: rotate(-90deg); }
@keyframes vz-ring { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }

/* =====================================================================
   "What it covers": statement and copy left, live coverage console right
   ===================================================================== */
.detail--viz .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.detail--viz .copy h2 { margin-bottom: var(--s-4); }
.detail h2 em { font-style: normal; color: var(--signal-text); background: linear-gradient(var(--signal), var(--signal)) 0 92% / 100% 3px no-repeat; }
.motion .detail h2 em { background-size: 0 3px; animation: em-draw 1.2s .4s var(--ease-out) forwards; }
@keyframes em-draw { to { background-size: 100% 3px; } }
.console {
  position: relative; overflow: hidden; border-radius: 18px; color: var(--on-dark);
  background:
    linear-gradient(rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 30%, rgb(242 182 48 / .12), transparent 60%),
    var(--graphite);
  box-shadow: 0 0 0 1px var(--graphite-line), 0 40px 70px -40px rgb(17 18 20 / .7);
}
.console::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--a, 0deg), transparent 0 72%, var(--gold-deep), var(--signal), var(--gold-light), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: orbit 5s linear infinite; }
/* the scan line from the hero, sweeping the console */
.console::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(transparent, rgb(242 182 48 / .09) 85%, rgb(255 216 119 / .35)); border-bottom: 1px solid rgb(255 216 119 / .4);
  animation: console-scan 5.5s linear infinite; transform: translateY(-100%); }
@keyframes console-scan { to { transform: translateY(560px); } }
.console-bar { display: flex; align-items: center; gap: 6px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--graphite-line); font: 500 var(--step--1) var(--mono); color: var(--on-dark-2); }
.console-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 0 8px rgb(242 182 48 / .6); animation: blink var(--d, 1.6s) steps(2, jump-none) infinite; }
.console-bar i:nth-child(2) { background: var(--signal); --d: 2.1s; } .console-bar i:nth-child(3) { background: var(--gold-light); --d: 1.2s; }
.console-bar span { margin-left: var(--s-2); }
.console-bar .live { margin-left: auto; font-weight: 500; color: var(--gold-light); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 6px; }
.console-bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 8px var(--signal); animation: blink 1s steps(2, jump-none) infinite; }
.console .bk-svg { display: block; padding: var(--s-4); box-sizing: border-box; }
@media (max-width: 860px) { .detail--viz .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .console .bk-svg { padding: var(--s-3) var(--s-2); } }

/* =====================================================================
   Tighter rhythm: paper sections that follow each other share one gap
   instead of stacking two paddings; feature tiles size to their content
   ===================================================================== */
.section:not(.on-dark) + .section:not(.on-dark) { padding-top: clamp(.5rem, .25rem + 1vw, 1rem); }
.detail .copy > :last-child { margin-bottom: 0; }
.features .masonry { grid-auto-rows: auto; }
.features .masonry > .feat { grid-row: auto; }

/* =====================================================================
   Cisco "After the warranty": statement, full-width coverage map, copy
   ===================================================================== */
.detail--map .wrap { display: block; }
.detail--map .detail-head { margin-bottom: var(--s-5); }
.detail--map h2 { max-width: 22ch; }
.section-head h2, .detail h2 { text-wrap: balance; }
.detail--map .copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-5); }
.detail--map .copy p { margin: 0; }
@media (max-width: 860px) { .detail--map .copy { grid-template-columns: 1fr; gap: var(--s-4); } }

.covermap {
  position: relative; overflow: hidden; border-radius: 20px; color: var(--on-dark); padding: var(--s-4) var(--s-5) var(--s-5);
  background:
    linear-gradient(rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse at 25% 50%, rgb(242 182 48 / .13), transparent 55%),
    var(--graphite);
  box-shadow: 0 0 0 1px var(--graphite-line), 0 40px 70px -40px rgb(17 18 20 / .7);
}
.covermap::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 120px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(242 182 48 / .08) 80%, rgb(255 216 119 / .3)); border-right: 1px solid rgb(255 216 119 / .35);
  transform: translateX(-130px); }
.motion .covermap::after { animation: cm-scan 6s linear infinite; }
@keyframes cm-scan { to { transform: translateX(1400px); } }
.cm-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--graphite-line); }
.cm-title { margin: 0; font: 500 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gold-light); display: flex; align-items: center; gap: 10px; }
.cm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 10px var(--signal); animation: blink 1.2s steps(2, jump-none) infinite; flex: none; }
.covermap[data-mode="device"] .cm-title { color: var(--on-dark-2); }
.covermap[data-mode="device"] .cm-dot { background: #6b6f76; box-shadow: none; }
.cm-device { display: none; }
.covermap[data-mode="device"] .cm-device { display: inline; }
.covermap[data-mode="device"] .cm-network { display: none; }

/* the toggle only exists with JS; without it the map shows our coverage */
.cm-toggle { display: none; padding: 4px; border-radius: 999px; background: #05060a; box-shadow: inset 0 0 0 1px var(--graphite-line); }
.js .cm-toggle { display: inline-flex; }
.cm-toggle button { font: 600 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .06em; border: 0; border-radius: 999px; padding: 10px 18px; min-height: 40px; cursor: pointer; color: var(--on-dark-2); background: transparent; transition: background .35s var(--ease-out), color .35s, box-shadow .35s; }
.cm-toggle button:hover { color: #fff; }
.cm-toggle button[aria-pressed="true"] { color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--signal) 55%, var(--gold-deep)); box-shadow: 0 0 18px rgb(242 182 48 / .55); }
.cm-toggle button[data-set="device"][aria-pressed="true"] { background: #d6d2c9; box-shadow: none; }
.cm-toggle button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.cm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cm-svg--v { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 640px) { .cm-svg--h { display: none; } .cm-svg--v { display: block; } .covermap { padding: var(--s-3) var(--s-3) var(--s-4); } .cm-head { justify-content: flex-start; } }

/* nodes light up in a wave when the map switches to the complete network */
.cm-node { transition: opacity .45s var(--ease-out) calc(var(--i) * 70ms), filter .45s calc(var(--i) * 70ms); }
.cm-node .cm-no { display: none; }
.covermap[data-mode="device"] .cm-node:not(.is-key):not(.is-isp) { opacity: .3; filter: grayscale(1); transition-delay: 0s; }
.covermap[data-mode="device"] .cm-node:not(.is-key) .cm-yes { display: none; }
.covermap[data-mode="device"] .cm-node:not(.is-key) .cm-no { display: inline; }
.covermap[data-mode="device"] .cm-node:not(.is-key) .cm-led { fill: #3a3d42; }
.covermap[data-mode="device"] .cm-node.is-key { animation: cm-key 1.6s ease-in-out infinite; }
@keyframes cm-key { 50% { filter: drop-shadow(0 0 12px rgb(242 182 48 / .9)); } }
.covermap[data-mode="network"] .cm-node:not(.is-isp) { filter: drop-shadow(0 0 5px rgb(242 182 48 / .35)); }
.cm-led { animation: blink 1.4s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * -.23s); }
.cm-flow { transition: opacity .5s; }
.covermap[data-mode="device"] .cm-link:not(.is-key) .cm-flow { opacity: 0; }

.cm-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font: 500 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark-2); }
.cm-meter b { color: var(--gold-light); font-weight: 600; }
.covermap[data-mode="device"] .cm-meter b { color: var(--on-dark-2); }
.cm-bar { height: 8px; border-radius: 99px; background: #05060a; box-shadow: inset 0 0 0 1px var(--graphite-line); overflow: hidden; }
.cm-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--signal), var(--gold-light)); box-shadow: 0 0 12px rgb(242 182 48 / .7); transition: width .9s var(--ease-out); }
.covermap[data-mode="device"] .cm-bar i { width: 11.1%; background: #a3a7ae; box-shadow: none; }
@media (max-width: 480px) { .cm-meter { grid-template-columns: 1fr auto; } .cm-meter > span:first-child { display: none; } }

/* =====================================================================
   Cisco "After the warranty": the copy as a code diff (manufacturer
   package removed, Lestom added) beside an incident card
   ===================================================================== */
.diff-wrap { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); align-items: stretch; }
@media (max-width: 900px) { .diff-wrap { grid-template-columns: 1fr; } }
.diff { counter-reset: ln; background: #fbfaf7; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 50px -40px rgb(17 18 20 / .5); }
.diff-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); font: 500 var(--step--1) var(--mono); color: var(--ink-2); }
.diff-file::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); vertical-align: 1px; }
.diff-legend { display: flex; gap: var(--s-3); }
.diff-legend b { font-weight: 600; }
.diff-legend .m { color: var(--ink-2); } .diff-legend .p { color: var(--signal-text); }
.diff ul { list-style: none; margin: 0; padding: 0; }
.diff li { counter-increment: ln; display: grid; grid-template-columns: 3rem 1.5rem minmax(0, 1fr); align-items: baseline; padding: 11px 20px 11px 0; font-size: var(--step-0); line-height: 1.5; }
.diff li::before { content: counter(ln); font: 500 var(--step--1) var(--mono); color: #6b6f76; text-align: right; padding-right: 14px; }
.diff .sign { font: 700 var(--step-0) var(--mono); }
.diff-del li { background: #ebe8e0; color: var(--ink-2); }
.diff-del li + li, .diff-add li + li { border-top: 1px solid rgb(17 18 20 / .05); }
.diff-del .sign { color: var(--ink-2); }
.diff-add li { background: rgb(242 182 48 / .13); color: var(--ink); box-shadow: inset 3px 0 0 var(--signal); }
.diff-add .sign { color: var(--signal-text); }
.diff-add strong { font-weight: 650; background: linear-gradient(transparent 62%, rgb(242 182 48 / .45) 62%); }
.diff .caret { display: inline-block; width: .55em; height: 1.1em; margin-left: 4px; vertical-align: -3px; background: var(--signal); animation: blink 1s steps(2, jump-none) infinite; }
/* lines arrive one by one; added lines flash gold as they land */
.js .diff li { opacity: 0; transform: translateX(-14px); transition: opacity .45s var(--ease-out) var(--delay, 0s), transform .45s var(--ease-out) var(--delay, 0s); }
.js .diff.is-in li { opacity: 1; transform: none; }
.motion .diff.is-in .diff-add li { animation: diff-flash 1.4s var(--ease-out) var(--delay, 0s) backwards; }
@keyframes diff-flash { from { background-color: rgb(242 182 48 / .55); } }
@media (prefers-reduced-motion: reduce) { .js .diff li { opacity: 1; transform: none; } }

.incident { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: 16px; color: var(--on-dark);
  background:
    linear-gradient(rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(circle at 85% 10%, rgb(242 182 48 / .2), transparent 55%),
    var(--graphite);
  box-shadow: 0 0 0 1px var(--graphite-line), 0 30px 50px -36px rgb(17 18 20 / .6); }
.incident::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 72%, var(--gold-deep), var(--signal), var(--gold-light), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: orbit 4s linear infinite; }
.incident p { margin: 0; color: var(--on-dark-2); font-size: var(--step-0); line-height: 1.5; }
.incident .incident-k { display: flex; align-items: center; gap: 12px; font: 500 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gold-light); }
.incident .ping { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 10px var(--signal); flex: none; }
.incident .ping::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold-light); animation: incident-ping 1.8s var(--ease-out) infinite; }
@keyframes incident-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.incident .incident-h { font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.02em; font-weight: 650; color: #fff; }
.incident-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto !important; padding-top: var(--s-2); }
.incident .btn--ghost { --fg: var(--on-dark); border-color: var(--on-dark-2); }
@media (max-width: 560px) {
  .diff li { grid-template-columns: 2.1rem 1.2rem minmax(0, 1fr); padding-right: 14px; }
  .diff li::before { padding-right: 10px; }
  .incident { padding: var(--s-4); }
}

/* =====================================================================
   Service "why" sections: heading beside a visual, full-width piece below
   ===================================================================== */
.rich .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--s-5) var(--s-6); }
.rich .wrap > :nth-child(3) { grid-column: 1 / -1; }
.rich .lead-p { margin: var(--s-4) 0 0; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.mini-k { margin: 0 0 var(--s-3); font: 500 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--signal-text); }
@media (max-width: 860px) { .rich .wrap { grid-template-columns: 1fr; } }
/* panels that share the console look */
.bill, .devices, .settings { position: relative; overflow: hidden; border-radius: 18px; color: var(--on-dark);
  background:
    linear-gradient(rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(242 182 48 / .05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 60% 40%, rgb(242 182 48 / .12), transparent 60%),
    var(--graphite);
  box-shadow: 0 0 0 1px var(--graphite-line), 0 40px 70px -40px rgb(17 18 20 / .7); }
.devices .bk-svg { display: block; padding: var(--s-4); box-sizing: border-box; }
.bill .bk-svg { display: block; padding: var(--s-3) var(--s-4) var(--s-4); box-sizing: border-box; }

/* --- Switch: circuit spine for the two paragraphs --- */
.spine { position: relative; display: grid; gap: var(--s-5); padding-left: 34px; }
.spine::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--gold-deep), var(--signal), var(--gold-light)); box-shadow: 0 0 10px rgb(242 182 48 / .5); }
.spine-item { position: relative; }
.spine-item::before { content: ""; position: absolute; left: -32px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--signal); box-shadow: 0 0 0 4px rgb(242 182 48 / .18), 0 0 12px rgb(242 182 48 / .6); }
.spine-k { margin: 0 0 6px; font: 600 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--signal-text); }
.spine-item p:last-child { margin: 0; font-size: var(--step-0); line-height: 1.6; color: var(--ink-2); }
.spine-item:first-child p:last-child { color: var(--ink); }

/* --- Switch: patch panel and port cards --- */
.patch { margin-top: var(--s-2); }
.patch-panel { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgb(17 18 20 / .35)); }
.patch-cables { display: block; width: 100%; height: 56px; overflow: visible; }
.patch-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.patch-cards li { position: relative; padding: var(--s-4) var(--s-5) var(--s-5); border-radius: 14px; background: #fbfaf7; border: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--signal), 0 24px 40px -34px rgb(17 18 20 / .5); }
.patch-cards li::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgb(242 182 48 / .25), 0 0 14px var(--signal); }
.pc-k { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s-2); font: 600 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--signal-text); }
.pc-led { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: blink 1.3s steps(2, jump-none) infinite; }
.pc-t { margin: 0; font-size: var(--step-1); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.js .patch-cards li { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out) var(--delay, 0s), transform .5s var(--ease-out) var(--delay, 0s); }
.js .patch.is-in .patch-cards li { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .patch-cables { display: none; }
  .patch-cards { grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
  .patch-cards li::before { left: 22px; margin-left: 0; }
}

/* --- VoIP: the cost chart, why it costs less, settings toggles --- */
.bill .console-bar, .settings .console-bar { display: flex; }
.bill-stairs { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .bill:not(.is-in) .bill-stairs { stroke-dashoffset: 1; }
.motion .bill-stairs { transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .55, 1); }
.motion .bill:not(.is-in) .bill-gap { opacity: 0; }
.bill-gap { transition: opacity 1s 2s; }
.voip-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-4); margin-top: var(--s-2); }
@media (max-width: 860px) { .voip-why { grid-template-columns: 1fr; } }
.cheaper { padding: var(--s-5); border-radius: 18px; background: #fbfaf7; border: 1px solid var(--line); }
.cheaper ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.cheaper li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: var(--step-0); line-height: 1.5; color: var(--ink); }
.cheaper svg { width: 30px; height: 30px; padding: 4px; box-sizing: border-box; border-radius: 50%; color: var(--ink); background: var(--signal); box-shadow: 0 0 12px rgb(242 182 48 / .55); }
.settings ul { list-style: none; margin: 0; padding: var(--s-2) var(--s-5) var(--s-4); }
.settings li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--graphite-line); font-size: var(--step-0); line-height: 1.45; color: var(--on-dark); }
.settings li:last-child { border-bottom: 0; }
.tg { position: relative; flex: none; width: 46px; height: 26px; border-radius: 99px; background: linear-gradient(180deg, var(--gold-light), var(--signal) 60%, var(--gold-deep)); box-shadow: 0 0 14px rgb(242 182 48 / .55); transition: background .4s var(--delay, 0s), box-shadow .4s var(--delay, 0s); }
.tg i { position: absolute; top: 3px; left: 23px; width: 20px; height: 20px; border-radius: 50%; background: #111214; transition: left .4s var(--ease-spring) var(--delay, 0s), background .4s var(--delay, 0s); }
.js .voip-why:not(.is-in) .tg { background: #2b2f36; box-shadow: none; }
.js .voip-why:not(.is-in) .tg i { left: 3px; background: #6b6f76; }
.cheaper li { transition: opacity .5s var(--ease-out) var(--delay, 0s), transform .5s var(--ease-out) var(--delay, 0s); }
.js .voip-why:not(.is-in) .cheaper li { opacity: 0; transform: translateX(-12px); }

/* --- Web: build rail --- */
.rail { list-style: none; margin: var(--s-2) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.rail::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 3px; border-radius: 2px; background: var(--line); }
.rail::after { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 3px; border-radius: 2px; background: var(--trace); box-shadow: 0 0 10px rgb(242 182 48 / .7); transform-origin: left; transition: transform 1.6s var(--ease-out) .1s; }
.js .rail:not(.is-in)::after { transform: scaleX(0); }
.rail li { position: relative; padding-top: 48px; }
.rail-n { position: absolute; z-index: 1; top: 0; left: 0; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); color: var(--ink); background: var(--signal); box-shadow: 0 0 0 5px var(--paper), 0 0 16px rgb(242 182 48 / .8); transition: background .4s var(--delay, 0s), box-shadow .4s var(--delay, 0s), color .4s var(--delay, 0s); }
.js .rail:not(.is-in) .rail-n { background: #e2ded5; color: var(--ink-2); box-shadow: 0 0 0 5px var(--paper); }
.rail-k { margin: 0 0 6px; font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.rail li p:last-child { margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 860px) {
  .rail { grid-template-columns: 1fr; gap: var(--s-4); }
  .rail::before, .rail::after { left: 14px; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; }
  .rail::after { background: linear-gradient(var(--gold-deep), var(--signal), var(--gold-light)); transform-origin: top; }
  .js .rail:not(.is-in)::after { transform: scaleY(0); }
  .rail li { padding: 2px 0 0 52px; }
}
@media (prefers-reduced-motion: reduce) { .js .patch-cards li, .js .voip-why .cheaper li { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .pc-t { font-size: var(--step-0); }
  /* two-up tablet grid: an odd fifth tile spans the row instead of leaving a hole */
  .features .masonry > .feat:nth-child(5):is(:last-child, :has(+ .feat--viz), :has(+ canvas)) { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .features .masonry > .feat:nth-child(5) { grid-column: auto; } }