/* ══════════════════════════════════════════════
   GLACIER: the site-wide visual layer
   Loaded after style.css (and any page sheet) on every page except the
   client templates and the two demo dashboards. It carries the home
   page's look everywhere: glacial blue-black, frosted bars, panels lit
   from above like slabs of ice, and headings in the wordmark's voice.
   The only image it adds is the hero still, which the home page has
   usually cached already. No scripts.
══════════════════════════════════════════════ */
:root {
  --base: #05080D;
  --surface: #0A1119;
  --border: #15202C;
  --frost: #EAF6FB;
  --deep: #0B1C2C;
  --muted: #9FB2C4;
  --panel: linear-gradient(180deg, rgba(168,216,234,0.055), rgba(168,216,234,0.012) 55%);
  --panel-edge: rgba(168,216,234,0.11);
  --panel-lit: rgba(168,216,234,0.26);
  --panel-shadow: inset 0 1px 0 rgba(234,246,251,0.05), 0 40px 70px -40px rgba(0,0,0,0.75);
}
html { scrollbar-color: #1E2C3A transparent; }
body { background: var(--base); }
.scanlines { opacity: 0.45; }
.grain { opacity: 0.025; animation: none; }
#stream-canvas { opacity: 0.04; }
::selection { background: rgba(168,216,234,0.28); color: var(--frost); }

/* ── FROST: header, footer strip and the next-frame button are panes of frosted ice ── */
#site-header, .frame-next, .proof-strip {
  -webkit-backdrop-filter: blur(10px) saturate(1.25) brightness(1.05);
  backdrop-filter: blur(10px) saturate(1.25) brightness(1.05);
}
#site-header {
  background: linear-gradient(180deg, rgba(168,216,234,0.07), rgba(168,216,234,0.02)), rgba(6,10,16,0.58);
  border-bottom: 1px solid rgba(168,216,234,0.10);
  box-shadow: inset 0 -1px 0 rgba(234,246,251,0.03), 0 10px 30px -20px rgba(0,0,0,0.8);
}
.frame-next {
  background: linear-gradient(180deg, rgba(168,216,234,0.10), rgba(168,216,234,0.03)), rgba(6,10,16,0.55);
  border-color: rgba(168,216,234,0.22);
  box-shadow: inset 0 1px 0 rgba(234,246,251,0.10), 0 12px 28px -14px rgba(0,0,0,0.8);
  border-radius: 6px;
}
.proof-strip {
  background: linear-gradient(180deg, rgba(168,216,234,0.05), rgba(168,216,234,0.015)), rgba(8,13,20,0.6);
  border-top: 1px solid rgba(168,216,234,0.10);
}
#site-footer { background: linear-gradient(180deg, rgba(10,17,25,0.4), var(--base)); border-top-color: rgba(168,216,234,0.08); }
@media (max-width: 760px) {
  #site-header { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background: linear-gradient(180deg, rgba(168,216,234,0.07), rgba(168,216,234,0.02)), rgba(6,10,16,0.72); }
  .frame-next { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(168,216,234,0.12), rgba(168,216,234,0.04)), rgba(8,13,20,0.9); }
}

/* ── PAGE HEAD: every inner page opens over a slice of the ice stream ── */
main > .section:first-child:not(.hero-view) { position: relative; isolation: isolate; }
main > .section:first-child:not(.hero-view)::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: clamp(260px, calc(46vh / var(--zu)), 460px); pointer-events: none;
  background:
    linear-gradient(90deg, var(--base) 0%, rgba(5,8,13,0.86) 30%, rgba(5,8,13,0.35) 70%, rgba(5,8,13,0.55) 100%),
    url("/img/hero-ice-v3.webp") 70% 38% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  opacity: 0.85;
}
@media (max-width: 760px) and (orientation: portrait) {
  main > .section:first-child:not(.hero-view)::before {
    height: 300px;
    background: linear-gradient(90deg, rgba(5,8,13,0.9) 0%, rgba(5,8,13,0.55) 70%, rgba(5,8,13,0.4) 100%), url("/img/hero-ice-portrait-v3.webp") 50% 30% / cover no-repeat;
    opacity: 0.7;
  }
}

/* section brackets: quieter, in ice instead of steel */
.section-inner::before, .section-inner::after { border-color: rgba(168,216,234,0.35); opacity: 0.6; }

/* titles in the wordmark's voice, with its waterline running out beside them */
.section-header { gap: 14px; }
.section-index { color: rgba(168,216,234,0.55); }
.section-title {
  font-family: var(--font-mark); font-weight: 700; letter-spacing: 0.04em; color: var(--frost);
  font-size: clamp(1.25rem, calc(3.2vw / var(--zu)), 2.1rem); line-height: 1.12; white-space: normal;
}
main > .section:first-child .section-title {
  font-weight: 900; font-size: clamp(1.7rem, calc(5.2vw / var(--zu)), 3.4rem); letter-spacing: 0.01em;
  text-shadow: 0 0 30px rgba(168,216,234,0.18), 0 12px 30px rgba(0,0,0,0.6);
}
.section-rule {
  height: 18px; align-self: center; border-radius: 0; box-shadow: none;
  background: url("/img/waterline.svg") left center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(168,216,234,0.35));
}
.section-intro { color: var(--muted); }
.breadcrumb { color: rgba(159,178,196,0.8); }

/* ── PANELS: lit from above, like a slab of ice ── */
.about-block, .service-card, .price-tier, .faq-item, .work-item, .sk-card,
.contact-form-wrap, .track-form-wrap, .svc-fig, .qb-wrap, .show-frame {
  background: var(--panel), var(--surface);
  border: 1px solid var(--panel-edge);
  border-top-color: var(--panel-lit);
  border-radius: 8px;
  box-shadow: var(--panel-shadow);
}
.about-block { border-top-width: 1px; transition: border-color .25s ease; }
.about-block:hover { border-color: rgba(168,216,234,0.22); border-top-color: rgba(168,216,234,0.5); }
.about-block p { color: var(--muted); }
.about-block strong { color: var(--frost); font-weight: 600; }
.block-label { color: var(--ice); }

/* service cards drop the steel bar on top; the lit edge does that job now */
.service-card::before { display: none; }
.service-card:hover { border-color: rgba(168,216,234,0.32); border-top-color: rgba(168,216,234,0.55); }
.service-card .sc-title { color: var(--frost); }
.service-card.classified { border-color: rgba(255,140,0,0.25); border-top-color: rgba(255,140,0,0.45); }

/* rows keep their left accent (it marks a tier or entry), but softened and rounded */
.price-tier, .work-item { border-left: 3px solid rgba(46,134,171,0.8); border-radius: 6px; }
.price-tier:hover, .work-item:hover { border-left-color: var(--ice); }
.work-item.classified { border-left-color: var(--spice); }
.faq-item { border-radius: 6px; }
.faq-item:hover { border-color: rgba(168,216,234,0.22); }
.pg-label { color: rgba(168,216,234,0.7); border-bottom: 1px solid rgba(168,216,234,0.10); }
.pricing-remark { border-left-color: rgba(168,216,234,0.3); background: rgba(168,216,234,0.025); border-radius: 0 6px 6px 0; }
.spec-list li::before { color: var(--ice); opacity: 0.7; }
.tldr, .about-block .tldr { border-left-color: var(--ice); color: var(--frost); }

/* diagrams sit in a deeper slab, so the drawing reads as the subject */
.svc-fig { background: radial-gradient(120% 140% at 50% 0%, rgba(46,134,171,0.12), rgba(5,8,13,0.4) 60%), var(--surface); }

/* ── BUTTONS: one filled primary per view, the rest stay ghosts ── */
.cta-btn { border-radius: 4px; }
.cta-btn:not(.cta-ghost) { background: var(--ice); color: var(--base); border-color: var(--ice); box-shadow: 0 10px 30px -10px rgba(168,216,234,0.55); }
.cta-btn:not(.cta-ghost):hover { background: var(--frost); border-color: var(--frost); color: var(--base); }
.text-link { border-bottom-color: rgba(168,216,234,0.25); }
.submit-btn { border-radius: 4px; background: var(--ice); color: var(--base); border-color: var(--ice); box-shadow: 0 10px 30px -12px rgba(168,216,234,0.5); }
.submit-btn:hover { background: var(--frost); color: var(--base); }
.submit-btn:disabled { opacity: 0.6; cursor: progress; }

/* ── FORMS: fields like clear ice, a frost ring on focus ── */
.contact-form-wrap, .track-form-wrap { padding: clamp(16px, calc(2.6vw / var(--zu)), 30px); }
.form-field input, .form-field select, .form-field textarea {
  background: rgba(5,8,13,0.55); border: 1px solid rgba(168,216,234,0.12); border-bottom-color: rgba(168,216,234,0.3); border-radius: 4px;
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: rgba(168,216,234,0.24); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--ice); background: rgba(10,17,25,0.9); box-shadow: 0 0 0 3px rgba(168,216,234,0.12);
}
.form-field select option { background: var(--surface); }
.cd-item { border-left-color: rgba(168,216,234,0.4); }
.cd-value { color: var(--frost); }
.track-tabs { border-bottom-color: rgba(168,216,234,0.10); }
.track-tab.active { color: var(--frost); border-bottom-color: var(--ice); }

/* ── CLOSING BAND: each page ends on a frosted slab with a still echo of the streams ── */
.detail-cta {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(28px, calc(5vh / var(--zu)), 52px); padding: clamp(20px, calc(3.4vw / var(--zu)), 36px);
  border: 1px solid var(--panel-edge); border-top-color: var(--panel-lit); border-radius: 8px;
  background: radial-gradient(70% 140% at 100% 100%, rgba(46,134,171,0.22), transparent 70%), var(--panel), var(--surface);
  box-shadow: var(--panel-shadow);
}
.detail-cta::after {
  content: ''; position: absolute; z-index: -1; right: -8%; top: -40%; width: 60%; height: 180%; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(168,216,234,0.06) 14px 15px);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.detail-cta .cta-btn { margin-top: 0; }

/* the home page's closing band, shared */
.closer { position: relative; overflow: hidden; padding: clamp(56px, calc(10vh / var(--zu)), 120px) clamp(20px, calc(5vw / var(--zu)), 64px); border-top: 1px solid rgba(168,216,234,0.08);
  background: radial-gradient(60% 90% at 85% 100%, rgba(46,134,171,0.22), transparent 70%), radial-gradient(40% 60% at 10% 0%, rgba(168,216,234,0.06), transparent 70%), var(--base); }
.closer::after {
  content: ''; position: absolute; right: -10%; bottom: -30%; width: 70%; height: 140%; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(168,216,234,0.05) 14px 15px);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.closer-in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.closer-title { margin: 0 0 14px; max-width: 18em; font-family: var(--font-mark); font-weight: 700; font-size: clamp(1.6rem, calc(4vw / var(--zu)), 3rem); line-height: 1.1; color: var(--frost); }
.closer-text { max-width: 36em; margin: 0 0 24px; font-family: var(--font-body); font-size: clamp(1.1rem, calc(1.6vw / var(--zu)), 1.35rem); line-height: 1.5; color: var(--muted); }
@media (max-width: 600px) {
  .closer .hero-ctas { flex-direction: column; } .closer .hero-ctas .cta-btn { width: 100%; text-align: center; }
  .detail-cta { flex-direction: column; align-items: center; text-align: center; }
  .detail-cta .cta-btn { align-self: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .about-block, .service-card, .faq-item { transition: none; }
}

/* blocks keep their own height, so a short one is not a half-empty slab */
.about-grid { align-items: start; }
.section-rule { min-width: 40px; }
/* price builder options follow the same rounding as the panels around them */
.qb-opt { border-radius: 6px; background: rgba(5,8,13,0.55); border-color: rgba(168,216,234,0.10); }
.qb-sum { border-radius: 8px; border-top-color: var(--panel-lit); background: var(--panel), rgba(10,17,25,0.94); }
.qb-bar { border-radius: 4px; }
/* the resume picker's button matches the rest of the form instead of the browser default */
.form-field input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 5px 12px; border: 1px solid rgba(168,216,234,0.3); border-radius: 4px;
  background: rgba(168,216,234,0.08); color: var(--ice); font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer;
}
.form-field input[type="file"]::file-selector-button:hover { background: rgba(168,216,234,0.16); }

/* the waterline returns between sections and above each closing band, so the page reads as one stream */
main > .section + .section:not(.closer) { background: url("/img/waterline-faint.svg") center top / min(1200px, 92%) 22px no-repeat; }
.detail-cta::before {
  content: ''; position: absolute; left: clamp(20px, calc(3.4vw / var(--zu)), 36px); right: 30%; top: -1px; height: 14px; pointer-events: none;
  background: url("/img/waterline.svg") left top / 100% 100% no-repeat; opacity: 0.8;
}

/* ── STATEMENT LEDE: an inner page opens on a sentence, not just a label ── */
.page-lede, main > .section:first-child .section-intro {
  max-width: 19em; margin: clamp(4px, calc(1vh / var(--zu)), 10px) 0 clamp(26px, calc(5vh / var(--zu)), 52px);
  font-family: var(--font-body); font-style: normal; font-weight: 400;
  font-size: clamp(1.7rem, calc(3.9vw / var(--zu)), 3.1rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--frost);
  text-shadow: 0 2px 30px rgba(5,8,13,0.9);
  text-wrap: balance;
}
main > .section:first-child .section-intro { max-width: 24em; font-size: clamp(1.4rem, calc(2.8vw / var(--zu)), 2.25rem); line-height: 1.2; color: #D6E4EE; }

/* ── ABOUT ── */
.ab-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: clamp(28px, calc(5vw / var(--zu)), 80px); align-items: start; }
.ab-intro-text p { font-family: var(--font-body); font-size: clamp(1.1rem, calc(1.45vw / var(--zu)), 1.3rem); line-height: 1.7; color: var(--muted); margin: 0 0 14px; max-width: 36em; }
.ab-intro-text p:first-child { color: #D6E4EE; }
.ab-facts { margin: 0; padding: 6px 0 0; border-top: 1px solid rgba(168,216,234,0.14); }
.ab-facts div { padding: 14px 0; border-bottom: 1px solid rgba(168,216,234,0.08); }
.ab-facts dt { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(168,216,234,0.7); margin-bottom: 4px; }
.ab-facts dd { margin: 0; font-family: var(--font-body); font-size: clamp(1.08rem, calc(1.4vw / var(--zu)), 1.24rem); line-height: 1.35; color: var(--frost); }

.ab-quote-band { position: relative; overflow: hidden; }
.ab-quote-band::after {
  content: ''; position: absolute; z-index: -1; inset: 10% -10% 0 30%; pointer-events: none;
  background: radial-gradient(50% 60% at 60% 50%, rgba(46,134,171,0.16), transparent 70%);
}
.ab-quote { margin: 8px 0 clamp(20px, calc(3vh / var(--zu)), 32px); }
.ab-quote p {
  max-width: 16em; font-family: var(--font-mark); font-weight: 700; letter-spacing: 0.005em;
  font-size: clamp(1.9rem, calc(5vw / var(--zu)), 4rem); line-height: 1.06; color: var(--frost); text-wrap: balance;
}
.ab-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, calc(4vw / var(--zu)), 60px); max-width: 980px; }
.ab-two p, .ab-approach-text p { font-family: var(--font-body); font-size: clamp(1.1rem, calc(1.45vw / var(--zu)), 1.3rem); line-height: 1.65; color: var(--muted); margin: 0 0 12px; }

.ab-sub { font-family: var(--font-body); font-size: clamp(1.15rem, calc(1.7vw / var(--zu)), 1.45rem); color: #D6E4EE; margin: -6px 0 clamp(20px, calc(3vh / var(--zu)), 32px); }
.ab-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, calc(2vw / var(--zu)), 24px); align-items: start; }
.ab-col {
  position: relative; padding: clamp(20px, calc(2.4vw / var(--zu)), 30px);
  background: var(--panel), var(--surface); border: 1px solid var(--panel-edge); border-top-color: var(--panel-lit); border-radius: 8px; box-shadow: var(--panel-shadow);
}
.ab-ico { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(168,216,234,0.22); background: rgba(168,216,234,0.05); margin-bottom: 16px; }
.ab-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ice); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-col h3 { font-family: var(--font-mark); font-weight: 700; font-size: clamp(1.05rem, calc(1.5vw / var(--zu)), 1.3rem); letter-spacing: 0.02em; color: var(--frost); margin: 0 0 14px; }
.ab-col ul { list-style: none; margin: 0; padding: 0; }
.ab-col li { padding: 11px 0; border-top: 1px solid rgba(168,216,234,0.08); font-family: var(--font-body); font-size: 1.05rem; line-height: 1.4; color: var(--muted); }
.ab-col li b { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ice); margin-bottom: 2px; }

.ab-approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, calc(5vw / var(--zu)), 80px); align-items: start; }
.ab-big { font-family: var(--font-mark); font-weight: 700; font-size: clamp(1.5rem, calc(3.2vw / var(--zu)), 2.5rem); line-height: 1.1; color: var(--frost); margin: 0; text-wrap: balance; }

@media (max-width: 900px) {
  .ab-intro, .ab-approach { grid-template-columns: 1fr; }
  .ab-map { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .ab-two { grid-template-columns: 1fr; } }

/* ── SERVICE CARDS: each service gets its own line drawing; the core service leads ── */
.service-card { display: flex; flex-direction: column; gap: 10px; }
.service-card .sc-index { order: -1; position: absolute; top: clamp(18px, calc(2vw / var(--zu)), 26px); right: clamp(16px, calc(2vw / var(--zu)), 24px); color: rgba(168,216,234,0.55); }
.sc-ico { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(168,216,234,0.2); background: radial-gradient(circle at 30% 20%, rgba(168,216,234,0.14), rgba(168,216,234,0.03)); margin-bottom: 4px; transition: border-color .25s ease, box-shadow .25s ease; }
.sc-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ice); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-card:hover .sc-ico { border-color: rgba(168,216,234,0.45); box-shadow: 0 0 14px rgba(168,216,234,0.08); }
.service-card.classified .sc-ico { border-color: rgba(255,140,0,0.35); background: rgba(255,140,0,0.05); }
.service-card.classified .sc-ico svg { stroke: var(--spice); }
.service-card .sc-desc { flex: 1 0 auto; }
.service-card .text-link { align-self: flex-start; }
.sc-lead { grid-column: span 2; isolation: isolate; overflow: hidden; padding-right: min(42%, 420px); }
.sc-lead::after {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none;
  background: linear-gradient(90deg, var(--surface), rgba(10,17,25,0.2) 45%, rgba(10,17,25,0.4)), url("/img/hero-ice-v3.webp") 78% 50% / cover no-repeat;
  opacity: 0.9;
}
.sc-lead .sc-title { font-family: var(--font-mark); font-size: clamp(1.25rem, calc(2.2vw / var(--zu)), 1.75rem); line-height: 1.15; letter-spacing: 0.01em; }
.sc-lead .sc-desc { font-size: clamp(1.1rem, calc(1.5vw / var(--zu)), 1.3rem); color: #C7D6E2; }
.sc-lead .sc-ico { width: 56px; height: 56px; }
@media (max-width: 760px) {
  .sc-lead { grid-column: auto; padding-right: clamp(16px, calc(2vw / var(--zu)), 24px); }
  .sc-lead::after { width: 100%; opacity: 0.25; }
}
/* a long title takes the whole line and the waterline drops beneath it, like the wordmark */
.section-header { flex-wrap: wrap; row-gap: 6px; }
.section-rule { flex: 1 1 140px; }

/* ── SERVICE DETAIL PAGES: an editorial run instead of a grid of boxes ── */
.sv-part .section-inner::before, .sv-part .section-inner::after,
.sv-end .section-inner::before, .ab-part .section-inner::before, .ab-part .section-inner::after { display: none; }
.sv-open .svc-fig { margin-top: 0; }
.sv-part > .section-inner { padding-top: clamp(40px, calc(7vh / var(--zu)), 80px); padding-bottom: clamp(28px, calc(5vh / var(--zu)), 56px); }
.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: clamp(24px, calc(5vw / var(--zu)), 80px); align-items: start; }
.sv-side { position: sticky; top: calc(var(--hdr-live, 80px) + 28px); }
.sv-state {
  margin: 0; font-family: var(--font-mark); font-weight: 700; letter-spacing: 0.005em;
  font-size: clamp(1.3rem, calc(2.4vw / var(--zu)), 1.95rem); line-height: 1.15; color: var(--frost); text-wrap: balance;
}
.sv-state-wide { max-width: 22em; margin: 0 0 clamp(22px, calc(4vh / var(--zu)), 40px); font-size: clamp(1.45rem, calc(3vw / var(--zu)), 2.4rem); }
.sv-prose p { margin: 0 0 16px; max-width: 38em; font-family: var(--font-body); font-size: clamp(1.1rem, calc(1.45vw / var(--zu)), 1.3rem); line-height: 1.7; color: var(--muted); }
.sv-prose p:first-child { color: #D6E4EE; font-size: clamp(1.2rem, calc(1.7vw / var(--zu)), 1.45rem); line-height: 1.55; }
.sv-prose strong, .sv-note strong, .sv-list strong { color: var(--frost); font-weight: 600; }

.sv-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, calc(4vw / var(--zu)), 56px); counter-reset: none; }
.sv-list li {
  position: relative; padding: 18px 0 18px 36px; border-top: 1px solid rgba(168,216,234,0.10);
  font-family: var(--font-body); font-size: clamp(1.05rem, calc(1.35vw / var(--zu)), 1.22rem); line-height: 1.55; color: #C7D6E2;
}
.sv-list li::before {
  content: ''; position: absolute; left: 2px; top: 22px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(168,216,234,0.35); background: radial-gradient(circle at 35% 30%, rgba(168,216,234,0.2), rgba(168,216,234,0.04));
}
.sv-list li::after {
  content: ''; position: absolute; left: 9px; top: 27px; width: 6px; height: 9px;
  border: solid var(--ice); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.sv-note { margin: 18px 0 0; max-width: 46em; padding: 14px 18px; border-left: 2px solid rgba(168,216,234,0.35); border-radius: 0 6px 6px 0; background: rgba(168,216,234,0.03);
  font-family: var(--font-body); font-size: clamp(1.02rem, calc(1.3vw / var(--zu)), 1.15rem); line-height: 1.6; color: var(--muted); }

.sv-q { border-top: 1px solid rgba(168,216,234,0.12); }
.sv-q:last-of-type { border-bottom: 1px solid rgba(168,216,234,0.12); }
.sv-q summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0;
  font-family: var(--font-body); font-weight: 600; font-size: clamp(1.12rem, calc(1.5vw / var(--zu)), 1.32rem); line-height: 1.35; color: var(--frost);
  transition: color .2s ease;
}
.sv-q summary::-webkit-details-marker { display: none; }
.sv-q summary::before, .sv-q summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.6px; background: var(--ice); transition: transform .25s ease; }
.sv-q summary::after { transform: rotate(90deg); }
.sv-q[open] summary::after { transform: rotate(0deg); }
.sv-q summary:hover { color: var(--ice); }
.sv-q summary:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; border-radius: 2px; }
.sv-a p { margin: 0 0 20px; max-width: 40em; font-family: var(--font-body); font-size: clamp(1.05rem, calc(1.35vw / var(--zu)), 1.2rem); line-height: 1.65; color: var(--muted); }
.sv-end > .section-inner { padding-top: 0; }

@media (max-width: 900px) {
  .sv-row { grid-template-columns: 1fr; gap: 14px; }
  .sv-side { position: static; }
  .sv-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sv-q summary::before, .sv-q summary::after { transition: none; } }
/* a section with no headline sentence reads as one wide column, opening on a larger paragraph */
.sv-row:has(> .sv-side > .block-label:only-child) { grid-template-columns: 1fr; gap: 10px; }
.sv-row:has(> .sv-side > .block-label:only-child) .sv-side { position: static; }
.sv-row:has(> .sv-side > .block-label:only-child) .sv-prose { columns: 2 22em; column-gap: clamp(28px, calc(5vw / var(--zu)), 72px); }
.sv-row:has(> .sv-side > .block-label:only-child) .sv-prose p { break-inside: avoid; }
.sv-row:has(> .sv-side > .block-label:only-child) .sv-prose p:first-child { column-span: all; max-width: 30em; font-size: clamp(1.35rem, calc(2.3vw / var(--zu)), 1.9rem); line-height: 1.4; color: var(--frost); margin-bottom: 22px; }

/* ══════════════════════════════════════════════
   MATERIALS: light, wetness, frost and ice
   Three small textures (frost, caustic light, condensation; about 36 KB in all,
   cached after the first page) and layered gradients. No filters, no blend
   modes on large areas, nothing animated, so scrolling stays cheap.
══════════════════════════════════════════════ */
.about-block, .service-card, .price-tier, .faq-item, .work-item, .sk-card,
.contact-form-wrap, .track-form-wrap, .qb-wrap, .ab-col,
.race, .cmp, .proof-stats li, .cmp-table-wrap, .story-scene {
  /* layer order, top to bottom: the pointer's light, a wet sheen, frost in the corner, light through the ice, the slab */
  --ice-light: radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), rgba(190,228,242,0.045), transparent 70%); /* kept faint: it sits behind text */
  --ice-sheen: linear-gradient(118deg, transparent 18%, rgba(234,246,251,0.035) 30%, rgba(234,246,251,0.06) 33%, transparent 46%);
  --ice-frost: url("/img/frost-tl.webp") left top / 230px 230px no-repeat;
  --ice-caustic: url("/img/caustics.webp") 0 0 / 256px 256px repeat;
  background: var(--ice-light), var(--ice-sheen), var(--ice-frost), var(--ice-caustic), var(--panel), var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(234,246,251,0.16),           /* the wet top lip catches the light */
    inset 1px 0 0 rgba(234,246,251,0.04),
    inset 0 -26px 40px -32px rgba(46,134,171,0.35), /* light pooling at the thick bottom edge */
    0 1px 0 rgba(0,0,0,0.4),
    0 40px 70px -40px rgba(0,0,0,0.8);
}
/* rows sit lower in the hierarchy: less frost, so a long price list does not repeat one corner forty times */
.price-tier, .faq-item, .proof-stats li, .work-item, .race, .cmp, .cmp-table-wrap, .qb-wrap { --ice-frost: linear-gradient(transparent, transparent); --ice-caustic: linear-gradient(transparent, transparent); }
.sk-card:nth-child(3n+2), .service-card:nth-child(3n+2), .ab-col:nth-child(2) { background-position: 0 0, 0 0, -60px -40px, 120px 80px, 0 0, 0 0; }
.sk-card:nth-child(3n), .service-card:nth-child(3n), .ab-col:nth-child(3) { background-position: 0 0, 0 0, -20px -90px, 60px 190px, 0 0, 0 0; }
.sc-lead { background: var(--ice-light), var(--ice-sheen), var(--ice-frost), var(--panel), var(--surface); }
.service-card.classified { --ice-frost: linear-gradient(transparent, transparent); }

/* the diagram slabs read as clear ice: caustic light only */
.svc-fig { background: url("/img/caustics.webp") 0 0 / 256px 256px repeat, radial-gradient(120% 140% at 50% 0%, rgba(46,134,171,0.12), rgba(5,8,13,0.4) 60%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(234,246,251,0.14), inset 0 -26px 40px -32px rgba(46,134,171,0.35), 0 40px 70px -40px rgba(0,0,0,0.8); }

/* ── GLASS: condensation beads on the frosted bars and the closing slabs ── */
#site-header {
  background: url("/img/droplets.webp") 0 0 / 256px 256px repeat, linear-gradient(180deg, rgba(168,216,234,0.07), rgba(168,216,234,0.02)), rgba(6,10,16,0.58);
}
@media (max-width: 760px) {
  #site-header { background: url("/img/droplets.webp") 0 0 / 200px 200px repeat, linear-gradient(180deg, rgba(168,216,234,0.07), rgba(168,216,234,0.02)), rgba(6,10,16,0.74); }
}
.detail-cta {
  background: url("/img/droplets.webp") 30px 10px / 256px 256px repeat, url("/img/frost-tl.webp") left top / 260px 260px no-repeat,
    radial-gradient(70% 140% at 100% 100%, rgba(46,134,171,0.22), transparent 70%), var(--panel), var(--surface);
  box-shadow: inset 0 1px 0 rgba(234,246,251,0.16), inset 0 -26px 40px -32px rgba(46,134,171,0.35), 0 40px 70px -40px rgba(0,0,0,0.8);
}
.closer { background: url("/img/frost-tl.webp") left top / 420px 420px no-repeat, radial-gradient(60% 90% at 85% 100%, rgba(46,134,171,0.22), transparent 70%), radial-gradient(40% 60% at 10% 0%, rgba(168,216,234,0.06), transparent 70%), var(--base); }

/* ── POLISHED ICE: the primary buttons ── */
.cta-btn:not(.cta-ghost), .submit-btn, .hero-ctas .cta-btn:not(.cta-ghost) {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #E4F4FA 0%, #B9E0EE 46%, #A2D3E6 54%, #8FC6DC 100%);
  color: #04121C; border-color: rgba(234,246,251,0.9);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -3px 8px rgba(46,134,171,0.35), 0 12px 30px -10px rgba(168,216,234,0.55), 0 0 0 1px rgba(5,8,13,0.4);
}
.cta-btn:not(.cta-ghost)::after, .submit-btn::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent); transform: skewX(-18deg); opacity: 0;
}
.cta-btn:not(.cta-ghost):hover::after, .submit-btn:hover::after, .cta-btn:not(.cta-ghost):focus-visible::after { animation: ice-glint 1.6s cubic-bezier(.3,.6,.2,1) 1; }
@keyframes ice-glint { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
.cta-btn:not(.cta-ghost):hover, .submit-btn:hover { background: linear-gradient(180deg, #F2FAFD 0%, #CDEAF4 46%, #B4DCEB 54%, #9FD0E3 100%); color: #04121C; }
/* ghost buttons are clear ice with a frosted edge */
.cta-btn.cta-ghost { background: linear-gradient(180deg, rgba(168,216,234,0.08), rgba(168,216,234,0.02)); box-shadow: inset 0 1px 0 rgba(234,246,251,0.14); border-color: rgba(168,216,234,0.3); }
.cta-btn.cta-ghost:hover { background: linear-gradient(180deg, rgba(168,216,234,0.16), rgba(168,216,234,0.05)); }

/* ── FROSTED TYPE: the big headings are lit from above, like the wordmark ── */
.section-title, .sv-state, .ab-quote p, .ab-big, .closer-title, .story-title, .proof-title, .sc-lead .sc-title, .ab-col h3 {
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF6FB 40%, #BFE3F0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
main > .section:first-child .section-title { text-shadow: none; filter: drop-shadow(0 0 22px rgba(168,216,234,0.16)) drop-shadow(0 10px 24px rgba(0,0,0,0.55)); }
.sc-lead .sc-title a { -webkit-text-fill-color: transparent; }

/* ── WET FIELDS: clear ice inputs with a lit lower lip ── */
.form-field input, .form-field select, .form-field textarea {
  background: linear-gradient(180deg, rgba(5,8,13,0.7), rgba(10,17,25,0.6));
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(168,216,234,0.12);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), 0 0 0 3px rgba(168,216,234,0.14), 0 0 24px -6px rgba(168,216,234,0.4);
}

/* ── ICONS sit in small blocks of ice ── */
.sc-ico, .ab-ico {
  background: url("/img/caustics.webp") 0 0 / 128px 128px, radial-gradient(circle at 30% 20%, rgba(168,216,234,0.18), rgba(168,216,234,0.03));
  box-shadow: inset 0 1px 0 rgba(234,246,251,0.25), inset 0 -6px 10px -6px rgba(46,134,171,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn:not(.cta-ghost):hover::after, .submit-btn:hover::after, .cta-btn:not(.cta-ghost):focus-visible::after { animation: none; }
}

/* ══════════════════════════════════════════════
   LIVING SIGNAL: the second line under the wordmark is a travelling wave,
   with a soft pulse of light crossing it; the main signal line catches an
   occasional glint. Small SVG, so the cost is tiny. Still under reduced motion.
══════════════════════════════════════════════ */
.wm-sig-still { display: none; }
/* the pulse on the lower line is light, not a dash: a soft band in the stroke's gradient swells along the
   wave every 10 s (SVG animation in the markup), brightening the line as it passes */
.wm-sig-pulse { opacity: 0.9; }
.wm-glint { stroke-dasharray: 0 1000; stroke-dashoffset: 0; opacity: 0; animation: wm-glint 28s cubic-bezier(.45,0,.55,1) 11s infinite; }
@keyframes wm-glint {
  0% { stroke-dasharray: 90 1000; stroke-dashoffset: 90; opacity: 0; }
  8% { opacity: 0.45; }
  20% { opacity: 0.45; }
  28% { stroke-dasharray: 90 1000; stroke-dashoffset: -1000; opacity: 0; }
  28.01%, 100% { stroke-dasharray: 90 1000; stroke-dashoffset: -1000; opacity: 0; }
}

/* ══════════════════════════════════════════════
   AMBIENT LIGHT: two soft pools of cold light drift slowly behind every page,
   one steel blue, one with a trace of glacial teal, swelling and fading out of
   step. Transform and opacity only, so the graphics chip does the work.
   Phones and tablets get one still pool of light instead: touch screens are
   where battery and frame rate matter most.
══════════════════════════════════════════════ */
body { position: relative; }
body::before, body::after {
  content: ''; position: fixed; z-index: -1; inset: -30%; pointer-events: none; will-change: transform, opacity;
}
body::before {
  background:
    radial-gradient(28% 24% at 26% 22%, rgba(46,134,171,0.26), transparent 70%),
    radial-gradient(24% 22% at 78% 74%, rgba(168,216,234,0.11), transparent 70%);
  animation: amb-a 64s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(30% 22% at 70% 24%, rgba(52,170,170,0.13), transparent 70%),
    radial-gradient(26% 26% at 18% 80%, rgba(80,120,190,0.13), transparent 70%);
  animation: amb-b 47s ease-in-out infinite alternate;
}
@media not all and (hover: hover) and (pointer: fine) {
  body::before { animation: none; will-change: auto; inset: 0; }
  body::after { display: none; }
}
@keyframes amb-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  50%  { transform: translate3d(9%, 6%, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(-5%, 10%, 0) scale(1.04); opacity: 0.8; }
}
@keyframes amb-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); opacity: 0.4; }
  50%  { transform: translate3d(-10%, -4%, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(6%, -9%, 0) scale(1.15); opacity: 0.55; }
}
/* the title waterline catches the same slow light: a glint crosses it now and then */
main > .section:first-child .section-rule { position: relative; overflow: hidden; }
main > .section:first-child .section-rule::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 44%, rgba(255,255,255,0.95) 50%, transparent 56%) 0 0 / 400% 100% no-repeat;
  -webkit-mask: url("/img/waterline.svg") 0 0 / 100% 100% no-repeat; mask: url("/img/waterline.svg") 0 0 / 100% 100% no-repeat;
  opacity: 0; animation: rule-glint 18s ease-in-out 3s infinite;
}
@keyframes rule-glint { 0% { background-position: 100% 0; opacity: 0; } 3% { opacity: 1; } 22% { background-position: 0% 0; opacity: 0.9; } 24%, 100% { background-position: 0% 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wm-sig-still { display: inline; }
  .wm-sig-wave, .wm-sig-pulse, .wm-glint, .wm-sheen { display: none; }
  body::before, body::after, main > .section:first-child .section-rule::after { animation: none; }
}

/* ── FOOTER WATERLINE: the wordmark's two lines run slowly along the top of the footer ── */
#site-footer { position: relative; }
.ft-wave { position: absolute; left: 0; right: 0; top: -12px; width: 100%; height: 24px; pointer-events: none; overflow: visible; }
.ft-w1 { stroke: rgba(168,216,234,0.45); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ft-w2 { stroke: rgba(46,134,171,0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ft-w3 { stroke: rgba(205,239,250,0.95); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 40 1100; animation: sig-run 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ft-w3 { display: none; } }

/* ══════════════════════════════════════════════
   DETAIL: every edge, border and surface
   One edge language for everything small: a lit top edge, soft sides, a deeper
   bottom, rounded to its rank (slabs 8px, rows 6px, controls 6px, inputs 4px,
   chips fully round). One state language: hover brightens the edge, pressed
   fills with ice, keyboard focus gets a frost ring that follows the shape.
══════════════════════════════════════════════ */
:root {
  --edge-hi: inset 0 1px 0 rgba(234,246,251,0.14);
  --edge-lo: inset 0 -1px 0 rgba(0,0,0,0.35);
  --ring: 0 0 0 2px var(--base), 0 0 0 4px rgba(168,216,234,0.85), 0 0 18px 2px rgba(168,216,234,0.35);
}

/* keyboard focus: a frost ring that follows each shape's own corners, instead of a square box */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.sk-filter .sc-chip:focus-visible, .sc-chip:focus-visible, .frame-next:focus-visible, .frame-rail button:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 6px;
}
.cta-btn:not(.cta-ghost):focus-visible, .submit-btn:focus-visible { box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,0.9); }
.skip-link { border-radius: 6px; background: linear-gradient(180deg, #E4F4FA, #A2D3E6); color: #04121C; }
.skip-link:focus { outline: none; box-shadow: var(--ring); }

/* the scrollbar is a thin capsule of ice */
html { scrollbar-color: rgba(168,216,234,0.28) transparent; }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(168,216,234,0.35), rgba(46,134,171,0.35)); border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
html::-webkit-scrollbar-thumb:hover { background-color: rgba(168,216,234,0.5); }

/* ── NAV: the current page sits on its own small waterline; hover lifts the light ── */
.nav-link { position: relative; padding: 6px 2px; border-radius: 4px; transition: color .2s ease, text-shadow .2s ease; }
.nav-link:hover { color: var(--frost); text-shadow: 0 0 8px rgba(168,216,234,0.22); }
.nav-link.active { color: var(--frost); }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; pointer-events: none;
  background: url("/img/waterline.svg") 0 0 / 100% 100% no-repeat; opacity: 0; transform: scaleX(0.4); transform-origin: left center;
  transition: opacity .25s ease, transform .35s var(--ease-out);
}
.nav-link.active::after { opacity: 0.9; transform: none; }
.nav-link:hover::after { opacity: 0.5; transform: none; }
/* the status light sits in a small capsule of glass, breathing like a pilot light */
.header-status { padding: 5px 10px 5px 9px; border-radius: 999px; border: 1px solid rgba(57,255,20,0.18); background: linear-gradient(180deg, rgba(57,255,20,0.07), rgba(57,255,20,0.02)); box-shadow: var(--edge-hi); }

/* ── CHIPS AND TAGS: fully round, filled with a little light instead of boxed ── */
.sc-tags span, .wi-tags span {
  border: 0; border-radius: 999px; padding: 3px 9px;
  background: linear-gradient(180deg, rgba(168,216,234,0.12), rgba(168,216,234,0.05));
  box-shadow: inset 0 0 0 1px rgba(168,216,234,0.14), var(--edge-hi);
  color: #B8DCEB;
}
.wi-status { border-radius: 999px; padding: 2px 9px 2px 20px; position: relative; box-shadow: var(--edge-hi); }
.wi-status::before { content: ''; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.wi-status.complete { background: rgba(57,255,20,0.06); }
.wi-status.active { background: rgba(168,216,234,0.06); }
.wi-status.redacted { background: rgba(255,140,0,0.07); }

/* filter and option chips: clear ice; the chosen one is filled and lit */
.sc-chip, .sk-filter .sc-chip {
  border-radius: 999px; padding: 8px 14px; border: 1px solid rgba(168,216,234,0.18);
  background: linear-gradient(180deg, rgba(168,216,234,0.07), rgba(168,216,234,0.015)), rgba(10,17,25,0.7);
  box-shadow: var(--edge-hi); transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.sc-chip:hover, .sk-filter .sc-chip:hover { border-color: rgba(168,216,234,0.45); color: var(--frost); }
.sc-chip[aria-pressed="true"], .sk-filter .sc-chip[aria-pressed="true"] {
  color: #04121C; border-color: rgba(234,246,251,0.9);
  background: linear-gradient(180deg, #E4F4FA 0%, #B9E0EE 50%, #98CBE0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 5px rgba(46,134,171,0.35), 0 6px 18px -8px rgba(168,216,234,0.6);
}

/* ── TABS: a segmented slab; the chosen track is lit from below by the waterline ── */
.track-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(168,216,234,0.12); border-radius: 8px; background: rgba(5,8,13,0.55); box-shadow: inset 0 2px 8px rgba(0,0,0,0.4); }
.track-tab { margin: 0; border: 0; border-radius: 6px; padding: 9px 16px; position: relative; transition: color .2s ease, background .2s ease; }
.track-tab:hover { color: var(--frost); background: rgba(168,216,234,0.05); }
.track-tab.active { color: var(--frost); background: linear-gradient(180deg, rgba(168,216,234,0.14), rgba(168,216,234,0.05)); box-shadow: var(--edge-hi), 0 6px 16px -10px rgba(168,216,234,0.5); }
.track-tab.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 5px; background: url("/img/waterline.svg") 0 0 / 100% 100% no-repeat; }

/* ── ACCENTED ROWS: the left accent is light inside the edge, so it bends with the corners ── */
.price-tier, .work-item, .sk-card { border-left-width: 1px; border-left-color: var(--panel-edge); }
.price-tier, .work-item {
  box-shadow: inset 3px 0 0 rgba(46,134,171,0.85), inset 14px 0 24px -16px rgba(46,134,171,0.5), var(--edge-hi), 0 20px 40px -30px rgba(0,0,0,0.8);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.price-tier:hover, .work-item:hover, .price-tier:has(details[open]) {
  border-color: rgba(168,216,234,0.22);
  box-shadow: inset 3px 0 0 var(--ice), inset 14px 0 24px -16px rgba(168,216,234,0.22), var(--edge-hi), 0 20px 40px -30px rgba(0,0,0,0.8);
}
.work-item.classified { box-shadow: inset 3px 0 0 var(--spice), var(--edge-hi); }
/* the disclosure arrow becomes a small round button of ice */
.pt-chev { right: 0; top: 0; width: 26px; height: 26px; border: 0; border-radius: 50%; transform: none;
  background: linear-gradient(180deg, rgba(168,216,234,0.14), rgba(168,216,234,0.04)); box-shadow: inset 0 0 0 1px rgba(168,216,234,0.25), var(--edge-hi); }
.pt-chev::after { content: ''; position: absolute; left: 9px; top: 7px; width: 7px; height: 7px; border-right: 1.6px solid var(--ice); border-bottom: 1.6px solid var(--ice); transform: rotate(45deg); transition: transform .25s var(--ease-out), top .25s var(--ease-out); }
details[open] > summary .pt-chev { transform: none; top: 0; }
details[open] > summary .pt-chev::after { transform: rotate(225deg); top: 10px; }
summary:hover .pt-chev { box-shadow: inset 0 0 0 1px rgba(168,216,234,0.5), var(--edge-hi), 0 0 8px rgba(168,216,234,0.12); }

/* ── SMALL SLABS ── */
.contact-build {
  border: 1px solid rgba(168,216,234,0.14); border-radius: 8px; padding: 14px 16px 14px 52px; position: relative;
  background: linear-gradient(180deg, rgba(168,216,234,0.06), rgba(168,216,234,0.015)); box-shadow: var(--edge-hi);
}
.contact-build::before { /* a small calculator mark, drawn in CSS */
  content: ''; position: absolute; left: 16px; top: 16px; width: 22px; height: 26px; border-radius: 4px;
  border: 1.5px solid rgba(168,216,234,0.7);
  background: linear-gradient(rgba(168,216,234,0.7), rgba(168,216,234,0.7)) 4px 4px / 11px 5px no-repeat,
              radial-gradient(circle, rgba(168,216,234,0.8) 1.2px, transparent 1.6px) 3px 12px / 5px 5px;
}
.cf-ref { border-radius: 8px; border: 1px solid rgba(168,216,234,0.2); box-shadow: inset 3px 0 0 var(--ice), var(--edge-hi); }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(168,216,234,0.12); background: rgba(168,216,234,0.10); }
.cd-item { border: 0; padding: 12px 14px; background: linear-gradient(180deg, rgba(14,24,34,0.95), rgba(10,17,25,0.95)); }
@media (max-width: 420px) { .contact-details { grid-template-columns: 1fr; } }

/* the price builder's options and boxes */
.qb-opt { box-shadow: var(--edge-hi); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.qb-opt:hover { border-color: rgba(168,216,234,0.35); }
.qb-opt.is-on { border-color: rgba(168,216,234,0.7); background: linear-gradient(180deg, rgba(168,216,234,0.13), rgba(168,216,234,0.04)); box-shadow: var(--edge-hi), 0 0 0 1px rgba(168,216,234,0.15), 0 10px 24px -14px rgba(168,216,234,0.5); }
.qb-box { border-radius: 4px; border-color: rgba(168,216,234,0.45); background: rgba(5,8,13,0.6); }
.qb-opt.is-on .qb-box { background: linear-gradient(180deg, #E4F4FA, #98CBE0); border-color: #E4F4FA; box-shadow: inset 0 0 0 3px #0a1119, 0 0 10px rgba(168,216,234,0.5); }
.qb-opt input:focus-visible + .qb-box { outline: none; box-shadow: var(--ring); }
.qb-seg { border-right-color: #0a1119; }
.qb-bar { box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }

/* checkboxes on the careers form */
.skill-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 4px; border: 1px solid rgba(168,216,234,0.45); background: rgba(5,8,13,0.6); display: inline-grid; place-content: center; cursor: pointer; flex: none; }
.skill-check input[type="checkbox"]::after { content: ''; width: 4px; height: 8px; margin-top: -2px; border: solid #04121C; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s ease; }
.skill-check input[type="checkbox"]:checked { background: linear-gradient(180deg, #E4F4FA, #98CBE0); border-color: #E4F4FA; box-shadow: 0 0 10px rgba(168,216,234,0.45); }
.skill-check input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.skill-check input[type="checkbox"]:focus-visible { box-shadow: var(--ring); }

/* showcase: the name bar and the customize drawer */
.sc-you { border-radius: 8px; border: 1px solid rgba(168,216,234,0.16); border-left-width: 1px; box-shadow: inset 3px 0 0 var(--ice), var(--edge-hi);
  background: url("/img/frost-tl.webp") left top / 200px 200px no-repeat, linear-gradient(90deg, rgba(168,216,234,0.08), rgba(168,216,234,0.02)), var(--surface); }
.sc-you-row input { border-radius: 4px; background: linear-gradient(180deg, rgba(5,8,13,0.75), rgba(10,17,25,0.6)); border: 1px solid rgba(168,216,234,0.14); border-bottom-color: rgba(168,216,234,0.35); box-shadow: inset 0 2px 6px rgba(0,0,0,0.45); }
.sc-you-row input:focus { box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), 0 0 0 3px rgba(168,216,234,0.14); }
.sc-you-go { border-radius: 4px; background: linear-gradient(180deg, #E4F4FA 0%, #B9E0EE 46%, #A2D3E6 54%, #8FC6DC 100%); color: #04121C; border-color: rgba(234,246,251,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -3px 8px rgba(46,134,171,0.35), 0 10px 24px -10px rgba(168,216,234,0.55); }
.sc-you-go:hover { background: linear-gradient(180deg, #F2FAFD, #B4DCEB); }
.sc-you-cfg, .sc-you-clear { border-radius: 4px; box-shadow: var(--edge-hi); }
.sc-cfg { border: 1px solid rgba(168,216,234,0.22); border-right: 0; border-radius: 12px 0 0 12px;
  background: url("/img/frost-tl.webp") left top / 280px 280px no-repeat, linear-gradient(180deg, rgba(168,216,234,0.05), transparent 40%), #0a1119;
  box-shadow: inset 1px 0 0 rgba(234,246,251,0.12), -30px 0 80px rgba(0,0,0,0.6); }
.sc-cfg::backdrop { background: rgba(4,6,8,0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sc-cfg-x { border-radius: 50%; border-color: rgba(168,216,234,0.2); }
.show-frame { overflow: hidden; }

/* ── SECTION RAIL: beads of ice; the current one is a lit capsule ── */
.frame-rail { gap: 6px; padding: 8px 4px; border-radius: 999px; background: rgba(6,10,16,0.35); box-shadow: inset 0 0 0 1px rgba(168,216,234,0.08); }
.frame-rail button { width: 22px; height: 18px; }
.frame-rail button::after { left: 7px; top: 5px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(168,216,234,0.45); background: rgba(168,216,234,0.06); transition: height .3s var(--ease-out), top .3s var(--ease-out), background .2s ease, box-shadow .2s ease; }
.frame-rail button:hover::after { background: rgba(168,216,234,0.35); box-shadow: 0 0 10px rgba(168,216,234,0.4); }
.frame-rail button[aria-current="true"]::after { transform: none; top: 1px; height: 16px; border-radius: 6px; border-color: #E4F4FA; background: linear-gradient(180deg, #E4F4FA, #98CBE0); box-shadow: 0 0 12px rgba(168,216,234,0.6); }

/* ── DATA TABLE: a header cap of frost and a lit column for the chosen connection ── */
.cmp-table-wrap table { border-collapse: separate; border-spacing: 0; }
.cmp-table-wrap thead th { background: linear-gradient(180deg, rgba(168,216,234,0.08), rgba(168,216,234,0.02)); border-bottom: 1px solid rgba(168,216,234,0.14); }
.cmp-table-wrap tbody tr:hover td, .cmp-table-wrap tbody tr:hover th { background-color: rgba(168,216,234,0.035); }

/* ── LINKS: an underline that sits a little below the letters, and wakes on hover ── */
.text-link { border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(168,216,234,0.35); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color .2s ease, text-decoration-color .2s ease, text-shadow .2s ease; }
.text-link:hover { color: var(--frost); text-decoration-color: var(--ice); text-shadow: 0 0 8px rgba(168,216,234,0.18); }
.footer-tool { border-radius: 4px; transition: color .2s ease, text-shadow .2s ease; }
.footer-tool:hover { color: var(--frost); text-shadow: 0 0 8px rgba(168,216,234,0.2); }
.breadcrumb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid rgba(168,216,234,0.14); background: rgba(10,17,25,0.55); box-shadow: var(--edge-hi); }
.breadcrumb:hover { border-color: rgba(168,216,234,0.4); color: var(--frost); }

/* ── CORNERS: the section brackets become thin frost corners with a soft joint ── */
.section-inner::before, .section-inner::after { border-color: rgba(168,216,234,0.4); opacity: 0.55; }
.section-inner::before { border-top-left-radius: 6px; box-shadow: -2px -2px 10px -6px rgba(168,216,234,0.5); }
.section-inner::after { border-bottom-right-radius: 6px; box-shadow: 2px 2px 10px -6px rgba(168,216,234,0.5); }

/* ── RULES AND DIVIDERS inside slabs: hairlines that fade at both ends ── */
.ab-col li, .ab-facts div, .sv-list li { border-top-color: transparent; border-image: linear-gradient(90deg, transparent, rgba(168,216,234,0.16) 15%, rgba(168,216,234,0.16) 85%, transparent) 1; }
.ab-facts div { border-bottom: 1px solid; border-top: 0; }
.sv-q { border-image: linear-gradient(90deg, rgba(168,216,234,0.2), rgba(168,216,234,0.06)) 1; }

@media (prefers-reduced-motion: reduce) {
  .nav-link::after, .track-tab, .qb-opt, .frame-rail button::after, .pt-chev::after { transition: none; }
}

/* small badges (popular, live, hiring) become lit capsules with a pilot light */
.qb-txt b em, .hire-tag, .live-t {
  display: inline-flex; align-items: center; gap: 5px; border: 0 !important; border-radius: 999px; padding: 2px 8px 2px 7px;
  background: rgba(57,255,20,0.07); box-shadow: inset 0 0 0 1px rgba(57,255,20,0.28), var(--edge-hi);
}
.qb-txt b em::before, .hire-tag::before, .live-t::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.pt-more { border-top: 1px solid; border-image: linear-gradient(90deg, rgba(168,216,234,0.22), rgba(168,216,234,0.04)) 1; }
.sk-ico { border-radius: 10px; border-color: rgba(168,216,234,0.22);
  background: url("/img/caustics.webp") 0 0 / 128px 128px, radial-gradient(circle at 30% 20%, rgba(168,216,234,0.18), rgba(168,216,234,0.03));
  box-shadow: inset 0 1px 0 rgba(234,246,251,0.25), inset 0 -6px 10px -6px rgba(46,134,171,0.5); }
.cd-item { border-radius: 6px; box-shadow: var(--edge-hi); }
.contact-details .cd-item { border-radius: 0; box-shadow: none; }

/* the status light breathes slowly instead of blinking */
.status-dot { animation-duration: 4.5s; }

/* ── SKILL SETS: every card the same size, the full write-up in a panel ── */
.works-list.sk-grid { grid-auto-rows: 1fr; align-items: stretch; }
.sk-card { height: 100%; }
.sk-card .sk-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sk-card .wi-tags { max-height: 46px; overflow: hidden; }
.sk-card .sk-more .wi-desc { margin: 12px 0 0; }
.sk-pop .sk-card .wi-tags { max-height: none; overflow: visible; }
.sk-pop .wi-tags [hidden] { display: none; }
.wi-tags .sk-more-tags { color: var(--ice); border-color: rgba(168,216,234,0.4); }
/* with the popup running, the write-up lives in the popup and the whole card opens it */
.sk-pop .sk-more { display: none; }
.sk-pop .sk-card { cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sk-pop .sk-card.sk-in { animation-fill-mode: backwards; }   /* let the hover lift take over once the entrance ends */
.sk-pop .sk-card:hover { transform: translateY(-3px); }
.sk-open { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(168,216,234,0.28); background: rgba(168,216,234,0.06); color: var(--ice);
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.sk-open::after { content: '+'; font-size: 1rem; line-height: 1; transition: transform .25s ease; }
.sk-card:hover .sk-open, .sk-open:focus-visible { background: rgba(168,216,234,0.14); border-color: var(--ice); color: var(--frost); }
.sk-card:hover .sk-open::after { transform: rotate(90deg); }
.sk-card.classified .sk-open { color: var(--spice); border-color: rgba(255,140,0,0.35); }
.sk-dlg { display: none; flex-direction: column; overflow: hidden; }
.sk-dlg[open] { display: flex; }
.sk-dlg { width: min(680px, calc(calc(100vw / var(--zu)) - 32px)); max-height: min(calc(86vh / var(--zu)), 760px); padding: 0; margin: auto; color: var(--white);
  border: 1px solid rgba(168,216,234,0.22); border-top-color: rgba(168,216,234,0.4); border-radius: 12px;
  background: url("/img/frost-tl.webp") left top / 280px 280px no-repeat, url("/img/caustics.webp") 0 0 / 256px 256px, linear-gradient(180deg, rgba(168,216,234,0.06), transparent 40%), #0A1119;
  box-shadow: inset 0 1px 0 rgba(234,246,251,0.14), 0 40px 90px -20px rgba(0,0,0,0.85); }
.sk-dlg[open] { animation: sk-dlg-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes sk-dlg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sk-dlg::backdrop { background: rgba(4,7,11,0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sk-dlg-in { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, calc(3vw / var(--zu)), 30px) clamp(18px, calc(3vw / var(--zu)), 30px) 8px; }
.sk-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sk-dlg-meta .wi-meta { margin: 0; }
.sk-dlg-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(168,216,234,0.25); background: rgba(168,216,234,0.06); color: var(--ice); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sk-dlg-x:hover { background: rgba(168,216,234,0.14); color: var(--frost); }
.sk-dlg-ico .sk-ico { width: 44px; height: 44px; margin-bottom: 12px; }
.sk-dlg-title { margin: 0 0 8px; font-family: var(--font-mark); font-weight: 700; font-size: clamp(1.15rem, calc(2.2vw / var(--zu)), 1.5rem); line-height: 1.2; color: var(--frost); }
.sk-dlg-sum { margin: 0 0 14px; font-family: var(--font-body); font-size: clamp(1.1rem, calc(1.6vw / var(--zu)), 1.3rem); line-height: 1.45; color: #D6E4EE; }
.sk-dlg-desc p, .sk-dlg-desc .wi-desc { margin: 0 0 12px; font-family: var(--font-body); font-size: clamp(1.02rem, calc(1.35vw / var(--zu)), 1.15rem); line-height: 1.7; color: var(--muted); }
.sk-dlg-tags { margin: 6px 0 18px; }
.sk-dlg-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(18px, calc(3vw / var(--zu)), 30px); border-top: 1px solid rgba(168,216,234,0.12); background: rgba(6,11,17,0.7); }
.sk-dlg-nav button { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(168,216,234,0.22); background: rgba(168,216,234,0.05); color: var(--ice); font-family: var(--font-ui); font-size: 0.74rem; letter-spacing: 0.08em; cursor: pointer; }
.sk-dlg-nav button:hover { border-color: var(--ice); color: var(--frost); }
.sk-dlg-pos { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--dim); }
.sk-dlg.classified { border-color: rgba(255,140,0,0.35); }
@media (prefers-reduced-motion: reduce) { .sk-dlg[open] { animation: none; } .sk-pop .sk-card:hover { transform: none; } }

/* ═══════════════════════════════════════════════
   DETAIL PASS: the finishing layer over the whole site
   Footer, the next-section button, grids that leave no orphans or
   half-empty slabs, aligned gutters, and form controls that match.
═══════════════════════════════════════════════ */

/* ── FOOTER: a real sign-off instead of one run-on line ── */
#site-footer .footer-inner { display: block; min-height: 0; max-width: 1200px; margin: 0 auto; padding: clamp(30px, calc(5vh / var(--zu)), 48px) clamp(20px, calc(5vw / var(--zu)), 64px) 0; text-align: left; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(22px, calc(3vw / var(--zu)), 44px); }
.ft-mark { display: inline-block; font-family: var(--font-mark); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--frost); text-decoration: none; }
.ft-mark:hover { color: var(--white); }
.ft-line { max-width: 26em; margin: 10px 0 12px; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.5; color: var(--muted); }
.ft-coords { margin: 0; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--dim); }
.ft-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ft-h { margin: 2px 0 4px; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(168,216,234,0.6); }
.ft-col a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 1rem; line-height: 1.3; color: #B9C9D4; text-decoration: none; transition: color .2s ease; }
.ft-col a:hover { color: var(--frost); }
.ft-col a[aria-current="page"] { color: var(--ice); }
.ft-col a[aria-current="page"]::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ice); margin-left: -13px; }
.ft-badge { padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(57,255,20,0.35); background: rgba(57,255,20,0.06); color: var(--signal); font-family: var(--font-ui); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ft-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: clamp(26px, calc(4vh / var(--zu)), 40px); padding: 16px 0 20px; border-top: 1px solid rgba(168,216,234,0.08); font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--dim); }
.ft-top { color: var(--dim); text-decoration: none; transition: color .2s ease; }
.ft-top:hover { color: var(--ice); }
#site-footer .proof-strip { position: relative; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  #site-footer .footer-inner { padding: 26px 20px 0; text-align: left; }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .ft-col:last-child { grid-column: 1 / -1; }
  .ft-base { flex-direction: column; align-items: flex-start; }
}

/* ── NEXT-SECTION BUTTON: a small round key that names its target on hover, so it never sits on top of content ── */
.frame-next { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; gap: 0; right: 20px; bottom: 20px; overflow: visible; }
.frame-next .fn-text { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(168,216,234,0.22);
  background: rgba(6,10,16,0.92); color: var(--ice); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.frame-next:hover .fn-text, .frame-next:focus-visible .fn-text { opacity: 1; transform: translate(0, -50%); }
.frame-next svg { width: 16px; height: 16px; }
.frame-next.show { opacity: 0.78; }
.frame-next.show:hover, .frame-next.show:focus-visible { opacity: 1; }
@media (max-width: 600px) { .frame-next { width: 44px; height: 44px; padding: 0; right: 14px; bottom: 14px; } }
@media (hover: none) { .frame-next .fn-text { display: none; } }

/* ── GUTTERS: the home story lines up with every other section ── */
.story-stick { max-width: 1200px; padding-left: clamp(20px, calc(5vw / var(--zu)), 64px); padding-right: clamp(20px, calc(5vw / var(--zu)), 64px); }
/* the page index on a narrow screen clears the frame corner */
@media (max-width: 600px) { main > .section:first-child > .section-inner::before { opacity: 0; } }

/* ── HOME: the jump grid sits at its own height, not centred in a screen of empty space ── */
.quick-access { min-height: 0; display: block; padding-top: clamp(40px, calc(7vh / var(--zu)), 72px); padding-bottom: clamp(48px, calc(8vh / var(--zu)), 88px); }

/* ── ABOUT: the three capability columns stand the same height ── */
.ab-map { align-items: stretch; }

/* ── SERVICES ── */
/* the twelfth service closes the grid as one wide card instead of an orphan */
.services-grid > #s-12 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); column-gap: clamp(20px, calc(4vw / var(--zu)), 56px); row-gap: 10px; align-items: start; }
.services-grid > #s-12 > .sc-ico { grid-column: 1; grid-row: 1; }
.services-grid > #s-12 > .sc-title { grid-column: 1; grid-row: 2; }
.services-grid > #s-12 > .sc-desc { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-right: 48px; }
.services-grid > #s-12 > .sc-tags { grid-column: 2; grid-row: 3; margin: 0; }
.services-grid > #s-12 > .text-link { grid-column: 2; grid-row: 4; justify-self: start; }
@media (max-width: 760px) { .services-grid > #s-12 { display: flex; } .services-grid > #s-12 > .sc-desc { padding-right: 0; } }
/* a grid with only two cards splits the row in half */
.services-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .services-grid:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }
/* the estimate's send button stays on one line in the side panel */
/* the send button: label centred, with the trailing letter space balanced */
.qb-send { padding-left: 14px; padding-right: 14px; letter-spacing: 0.14em; text-indent: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .qb-send { white-space: normal; text-overflow: clip; line-height: 1.35; letter-spacing: 0.08em; text-indent: 0; padding-left: 10px; padding-right: 10px; } }
/* the technical questions get a heading of their own */
.faq-head { margin-top: clamp(48px, calc(9vh / var(--zu)), 96px); }
.faq-intro { max-width: 38em; margin: -4px 0 clamp(18px, calc(3vh / var(--zu)), 30px); font-family: var(--font-body); font-size: clamp(1.1rem, calc(1.5vw / var(--zu)), 1.3rem); line-height: 1.5; color: var(--muted); }

/* ── CLOSING BAND: the droplets gather on the right, away from the links ── */
.detail-cta { background: url("/img/frost-tl.webp") left top / 260px 260px no-repeat, radial-gradient(70% 140% at 100% 100%, rgba(46,134,171,0.22), transparent 70%), var(--panel), var(--surface); }
.detail-cta::after { background: url("/img/droplets.webp") 0 0 / 256px 256px repeat, repeating-linear-gradient(115deg, transparent 0 14px, rgba(168,216,234,0.06) 14px 15px); }

/* ── SHOWCASE ── */
.sc-stage { align-items: stretch; }
.sc-side { align-content: center; border-radius: 10px; border-color: var(--panel-edge); background: var(--panel), var(--surface); }
.sc-ctl { gap: 18px; margin-top: 14px; }
.sc-top { display: flex; flex-wrap: wrap; gap: 18px clamp(22px, calc(3vw / var(--zu)), 40px); }
.sc-grp { display: grid; gap: 8px; align-content: start; }
.sc-grp > .sc-lab { min-width: 0; }
.sc-note { margin: 2px 0 0; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; }
.sc-bar > span:last-child { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.sc-bar a { margin-left: 0; }
@media (max-width: 900px) { .sc-lab { min-width: 0; } }

/* ── FORMS: paired fields split the row evenly, and the dropdown carries its own arrow ── */
@media (min-width: 901px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-field select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A8D8EA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.form-field input[type="file"] { min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); color: var(--muted); }

/* ── SERVICE AREA: blocks in a row share a height, and the last one closes the grid ── */
.sa-grid { align-items: stretch; }
.sa-grid > .about-block:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sa-grid .spec-list { margin-bottom: 16px; }
.sa-grid > .about-block:last-child:nth-child(odd) p { display: inline-block; vertical-align: top; width: calc(50% - 20px); margin-right: 16px; }
@media (max-width: 700px) { .sa-grid > .about-block:last-child:nth-child(odd) p { display: block; width: auto; margin-right: 0; } }

/* ── ONE CHIP: the home race, the template library and the showcase share the clear-ice pill ── */
.rc-chip, .gal .gal-chip {
  border-radius: 999px; padding: 8px 14px; color: var(--ice); border: 1px solid rgba(168,216,234,0.18);
  background: linear-gradient(180deg, rgba(168,216,234,0.07), rgba(168,216,234,0.015)), rgba(10,17,25,0.7);
  box-shadow: var(--edge-hi); transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.rc-chip:hover, .gal .gal-chip:hover { border-color: rgba(168,216,234,0.45); color: var(--frost); }
.rc-chip[aria-pressed="true"], .gal .gal-chip[aria-pressed="true"] {
  color: #04121C; border-color: rgba(234,246,251,0.9);
  background: linear-gradient(180deg, #E4F4FA 0%, #B9E0EE 50%, #98CBE0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 5px rgba(46,134,171,0.35), 0 6px 18px -8px rgba(168,216,234,0.6);
}
.rc-chip:focus-visible, .gal .gal-chip:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
/* template tiles become ice panels like every other card */
.gal .gal-tile { border-radius: 10px; overflow: hidden; border-color: var(--panel-edge); border-top-color: var(--panel-lit); background: var(--panel), var(--surface); box-shadow: var(--panel-shadow); }
.gal .gal-tile:hover { border-color: rgba(168,216,234,0.4); transform: translateY(-3px); }
.gal .gal-frame { border-bottom-color: rgba(168,216,234,0.1); }
.gal .gal-cap { padding: 14px 16px 8px; }
.gal .gal-links { padding: 0 16px 14px; }
.gal .gal-lab { min-width: 86px; }
@media (prefers-reduced-motion: reduce) { .gal .gal-tile:hover { transform: none; } }

/* ═══════════════════════════════════════════════
   SERVICE PAGE FIRST VIEW: one fitted screen
   Breadcrumb, title, the one-line promise, the whole diagram and its
   caption fit the window together, and the signal line closes the view
   at the bottom edge. The diagram takes whatever height is left, so a
   longer title or a shorter window shrinks the drawing, never cuts it.
═══════════════════════════════════════════════ */
.sv-open { position: relative; }
.sv-open > .section-inner { padding-top: clamp(14px, calc(2.6vh / var(--zu)), 30px); padding-bottom: clamp(30px, calc(4.6vh / var(--zu)), 48px); }
.sv-open .breadcrumb { margin-bottom: clamp(8px, calc(1.6vh / var(--zu)), 16px); }
.sv-open .section-header { margin-bottom: clamp(6px, calc(1.4vh / var(--zu)), 14px); }
main > .sv-open:first-child .section-title { font-size: clamp(1.6rem, min(calc(3.6vw / var(--zu)), calc(5.4vh / var(--zu))), 2.9rem); }
main > .sv-open:first-child .section-title.sv-long { font-size: clamp(1.3rem, min(calc(2.5vw / var(--zu)), calc(4vh / var(--zu))), 2.1rem); }
.sv-open .page-lede { max-width: 30em; margin: 0 0 clamp(12px, calc(2.4vh / var(--zu)), 26px); font-size: clamp(1.3rem, min(calc(2.5vw / var(--zu)), calc(3.9vh / var(--zu))), 2.15rem); line-height: 1.16; }
.sv-open .svc-fig figcaption { margin-top: clamp(6px, calc(1.2vh / var(--zu)), 12px); max-width: 90ch; }
/* the signal line closes the first view */
.sv-open::after { content: ''; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: min(1200px, 92%); height: 22px; pointer-events: none;
  background: url("/img/waterline.svg") center / 100% 100% no-repeat; opacity: 0.9; filter: drop-shadow(0 0 6px rgba(168,216,234,0.3)); }
main > .section.sv-open + .section:not(.closer) { background: none; }

@media (min-width: 901px) and (min-height: 600px) {
  .sv-open { height: calc(calc(100vh / var(--zu)) - var(--hdr-live, var(--header-h))); height: calc(calc(100svh / var(--zu)) - var(--hdr-live, var(--header-h))); min-height: 460px; display: flex; flex-direction: column; }
  .sv-open > .section-inner { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  .sv-open > .section-inner > * { flex: none; }
  .sv-open > .section-inner > .svc-fig { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
  .sv-open .svc-fig .m-svg { flex: 1 1 0; min-height: 150px; width: 100%; height: auto; max-height: none; }
}
.sv-open > .section-inner > .breadcrumb { align-self: flex-start; }
.sv-open .svc-fig figcaption { padding: 0 clamp(16px, calc(2vw / var(--zu)), 26px) clamp(12px, calc(1.8vh / var(--zu)), 18px); }

/* ── SKILL SETS: status chips in plain words; the popup says what each one means ── */
.sk-card .wi-status, .sk-dlg .wi-status { letter-spacing: 0.04em; text-transform: none; white-space: nowrap; }
.sk-dlg-note { margin: -4px 0 14px; padding-left: 12px; border-left: 2px solid rgba(168,216,234,0.3); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--muted); }
.sk-dlg.classified .sk-dlg-note { border-left-color: rgba(255,140,0,0.45); }

/* ═══════════════════════════════════════════════
   DIAGRAM VIEWER (figs.js): full screen on phones
═══════════════════════════════════════════════ */
.svc-fig { position: relative; }
.fig-open { display: none; position: static; align-self: flex-start; margin: 10px 0 0 clamp(16px, calc(2vw / var(--zu)), 26px); align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(168,216,234,0.35); background: rgba(6,10,16,0.82); color: var(--ice); font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.08em; }
.fig-open svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .fig-open { display: inline-flex; } .svc-fig { cursor: zoom-in; } }
.fig-dlg { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--white); background: rgba(5,8,12,0.97); display: none; flex-direction: column; }
.fig-dlg[open] { display: flex; }
.fig-dlg::backdrop { background: rgba(4,7,11,0.8); }
.fig-dlg-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid rgba(168,216,234,0.12); }
.fig-dlg-hint { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--dim); }
.fig-dlg-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(168,216,234,0.3); background: rgba(168,216,234,0.06); color: var(--ice); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.fig-dlg-pan { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: url("/img/caustics.webp") 0 0 / 256px 256px repeat, radial-gradient(120% 140% at 50% 0%, rgba(46,134,171,0.14), rgba(5,8,13,0.4) 60%), var(--surface); }
.fig-dlg-stage { flex: none; width: max(200vw, 720px); padding: 12px; box-sizing: border-box; }
.fig-dlg-stage .m-svg { width: 100%; height: auto; max-height: none; }
.fig-dlg-cap { flex: none; margin: 0; padding: 12px 16px 16px; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--muted); border-top: 1px solid rgba(168,216,234,0.12); }
/* turned sideways: the whole drawing fits the screen */
@media (orientation: landscape) {
  .fig-dlg-hint { display: none; }
  .fig-dlg-pan { justify-content: center; }
  .fig-dlg-stage { width: min(100%, calc((100dvh - 120px) * 2.46)); }
  .fig-dlg-cap { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .fig-dlg[open] { animation: sk-dlg-in .3s ease; } }

/* ═══════════════════════════════════════════════
   SERVICES, SHORTER: on a desktop the price list and the technical
   questions run in two columns. A line that is opened takes the full
   width so its details stay readable; nothing is removed.
═══════════════════════════════════════════════ */
@media (min-width: 901px) {
  .price-group, .faq-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: stretch; }
  .price-group > :not(.price-tier), .faq-group > :not(.faq-item) { grid-column: 1 / -1; }
  .price-group > .price-tier, .faq-group > .faq-item { margin-top: 0; margin-bottom: 12px; min-width: 0; }
  .price-group > .price-tier:has(details[open]), .faq-group > .faq-item:has(details[open]) { grid-column: 1 / -1; }
  .price-group > .price-tier > details, .faq-group > .faq-item > details { height: 100%; }
  /* tighter cards and notes: the same words in less height */
  .price-group > .price-tier { padding: 14px 16px 12px; margin-bottom: 10px; }
  .price-group .pt-header { margin-bottom: 4px; }
  .price-group .pt-desc { font-size: 1rem; line-height: 1.5; }
  .price-group > .pricing-remark { margin: 2px 0 0; padding: 10px 14px; font-size: 0.95rem; line-height: 1.5; }
  .price-group { margin-bottom: clamp(26px, calc(4vh / var(--zu)), 40px); }
  .price-group > .pg-label { margin-bottom: 12px; }
  .faq-group > .faq-item { padding: 12px 16px; margin-bottom: 10px; }
  .faq-group > .pg-label { margin-bottom: 12px; }
}

/* ── HOME: the strip under the hero speaks plainly; the speed test's fine print is a short key ── */
.hero-telemetry .di-value { letter-spacing: 0.02em; }
.hero-telemetry .di-value.live { text-shadow: 0 0 10px rgba(57,255,20,0.45); }
.proof-note.pn-key { max-width: none; margin-top: 18px; }
.pn-key .pn-lead { max-width: 62ch; margin: 0 0 12px; font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--muted); }
.pn-key .pn-lead b { color: var(--frost); font-weight: 600; }
.pn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(168,216,234,0.1); }
.pn-list > div { min-width: 0; }
.pn-list dt { margin: 0 0 3px; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(168,216,234,0.7); }
.pn-list dd { margin: 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.45; color: var(--dim); }
@media (max-width: 900px) { .pn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pn-list { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .hero-data.hero-telemetry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; justify-content: stretch; text-align: left; }
  .hero-telemetry .data-item { align-items: flex-start; }
}

/* ═══════════════════════════════════════════════
   HOW WE COMPARE (services): our prices against the market, sourced
═══════════════════════════════════════════════ */
.vs { margin: 0 0 clamp(30px, calc(5vh / var(--zu)), 48px); }
.vs-title { margin: 6px 0 8px; font-family: var(--font-mark); font-weight: 700; font-size: clamp(1.35rem, calc(2.6vw / var(--zu)), 2.1rem); line-height: 1.15; color: var(--frost); }
.vs-lede { max-width: 62ch; margin: 0 0 18px; font-family: var(--font-body); font-size: clamp(1.05rem, calc(1.4vw / var(--zu)), 1.2rem); line-height: 1.55; color: var(--muted); }
.vs-table-wrap { border: 1px solid var(--panel-edge); border-top-color: var(--panel-lit); border-radius: 10px; overflow: hidden; background: var(--panel), var(--surface); box-shadow: var(--panel-shadow); }
.vs-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vs-table th, .vs-table td { padding: 13px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(168,216,234,0.08); font-family: var(--font-body); font-size: 0.98rem; line-height: 1.4; color: var(--dim); }
.vs-table tbody tr:last-child > * { border-bottom: 0; }
.vs-table thead th { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(168,216,234,0.65); background: rgba(5,8,13,0.45); }
.vs-table thead th:first-child { width: 22%; }
.vs-table tbody th { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.03em; font-weight: 600; color: var(--white); }
.vs-table .vs-us { background: linear-gradient(180deg, rgba(168,216,234,0.12), rgba(168,216,234,0.05)); border-left: 1px solid rgba(168,216,234,0.3); border-right: 1px solid rgba(168,216,234,0.3); }
.vs-table thead .vs-us { color: #04121C; background: linear-gradient(180deg, #E4F4FA 0%, #B9E0EE 60%, #98CBE0 100%); }
.vs-table td.vs-us b { display: block; font-family: var(--font-ui); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--frost); }
.vs-table td.vs-us span { display: block; margin-top: 3px; font-size: 0.86rem; color: var(--muted); }
.vs-table td.vs-span { color: var(--dim); font-style: italic; }
.vs-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 10px; }
.vs-points p { margin: 0; padding: 14px 16px; border-left: 2px solid var(--ice); background: rgba(168,216,234,0.04); border-radius: 0 6px 6px 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--muted); }
.vs-points b { color: var(--frost); font-weight: 600; }
.vs-src { margin: 8px 0 0; font-family: var(--font-body); font-size: 0.86rem; line-height: 1.5; color: var(--dim); }
.vs-src a { color: var(--ice); text-decoration: none; border-bottom: 1px solid rgba(168,216,234,0.25); }
@media (max-width: 900px) {
  .vs-points { grid-template-columns: 1fr; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: 100%; }
  .vs-table thead { display: none; }
  .vs-table tbody tr { padding: 4px 0 8px; border-bottom: 1px solid rgba(168,216,234,0.12); }
  .vs-table tbody th { padding: 12px 14px 6px; border: 0; }
  .vs-table td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; padding: 6px 14px; border: 0; }
  .vs-table td::before { content: attr(data-l); font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(168,216,234,0.6); padding-top: 2px; }
  .vs-table td.vs-us { border: 0; border-radius: 6px; margin: 0 8px; width: calc(100% - 16px); }
}
@media (max-width: 900px) { .vs-table td.vs-us > b, .vs-table td.vs-us > span { grid-column: 2; } .vs-table td.vs-us > span { margin-top: -8px; } }