/* Stedman Computer Solutions Inc. site styles.
   Layout: navy bands carry the brand moments (hero with the oversized speed mark, how a plan
   works, custom systems); white and blue-tint bands carry the reading. One accent, one typeface. */
:root {
  color-scheme: light;
  /* Brand palette (2026 brand reference). No other hues. */
  --navy: #081F27;
  --blue: #00A1EA;
  --ink: #1F1F1F;
  --white: #FFFFFF;
  --tint: #E5F6FD;
  /* Derived from the palette only: tints of ink and navy for secondary text and hairlines. */
  --ink-soft: color-mix(in srgb, #1F1F1F 74%, #FFFFFF);
  --rule: color-mix(in srgb, #081F27 16%, #FFFFFF);
  --rule-strong: color-mix(in srgb, #081F27 42%, #FFFFFF);
  --on-navy: #FFFFFF;
  --on-navy-soft: color-mix(in srgb, #FFFFFF 76%, #081F27);
  --navy-rule: color-mix(in srgb, #FFFFFF 18%, #081F27);
  --navy-raised: color-mix(in srgb, #FFFFFF 6%, #081F27);
  --navy-ghost: color-mix(in srgb, #FFFFFF 4%, #081F27);
  --navy-glow: color-mix(in srgb, #00A1EA 14%, #081F27);
  --metal-top: color-mix(in srgb, #FFFFFF 22%, #00A1EA);
  --metal-low: color-mix(in srgb, #081F27 10%, #00A1EA);
  /* Box finishes: a fine dot grid, a corner glow and a thin metal edge, in dark and light versions. */
  /* Dark panel finish, top layer first: corner glow; a fade from clear in the middle to solid panel
     at the edges, which hides the grid toward the edges without masking the text; a 24px grid of
     faint white lines; the panel fill; the metal edge in the border. */
  --grid-line: color-mix(in srgb, #FFFFFF 6%, transparent);
  --panel-dark:
    radial-gradient(ellipse 80% 70% at 85% 15%, color-mix(in srgb, #00A1EA 14%, #081F27), transparent 70%) padding-box,
    radial-gradient(ellipse at center, transparent 25%, color-mix(in srgb, #FFFFFF 6%, #081F27) 80%) padding-box,
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px) padding-box,
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) padding-box,
    linear-gradient(color-mix(in srgb, #FFFFFF 6%, #081F27), color-mix(in srgb, #FFFFFF 6%, #081F27)) padding-box,
    conic-gradient(from 210deg, #FFFFFF, #E5F6FD, #00A1EA, #081F27, #E5F6FD, #FFFFFF, #00A1EA, #081F27, #FFFFFF) border-box;
  --panel-dark-size: auto, auto, 24px 24px, 24px 24px, auto, auto;
  --glow-light: radial-gradient(ellipse 75% 60% at 90% 0%, color-mix(in srgb, #E5F6FD 90%, transparent), transparent 70%);
  /* Decorative only, so the touch of Brand Blue here is not a meaningful line on white (rule 2). */
  --edge-light: conic-gradient(from 210deg, color-mix(in srgb, #081F27 30%, #FFFFFF), #FFFFFF, #E5F6FD, color-mix(in srgb, #00A1EA 55%, #FFFFFF), color-mix(in srgb, #081F27 22%, #FFFFFF), #FFFFFF, #E5F6FD, color-mix(in srgb, #081F27 30%, #FFFFFF));

  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --step-h1: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem);
  --step-h2: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem);
  --step-h3: 1.25rem;
  --step-body: 1.0625rem;
  --step-small: 0.9375rem;
  --step-label: 0.8125rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --band: clamp(3.5rem, 2rem + 6vw, 6.75rem);
  --radius: 10px;       /* buttons, menu */
  --radius-card: 16px;  /* panels and framed photos */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--step-h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.012em; }
h2 { font-size: var(--step-h2); font-weight: 600; line-height: 1.08; letter-spacing: -0.008em; }
h3 { font-size: var(--step-h3); font-weight: 500; line-height: 1.25; }
/* Brand Blue is under 3:1 against white and tint, so on light backgrounds link underlines and focus
   rings use the text colour and navy. On navy bands they use Brand Blue. */
a { color: inherit; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--blue); }
.band-navy a { text-decoration-color: var(--blue); }
.band-navy a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.band-navy :focus-visible, .skip:focus-visible { outline-color: var(--blue); }
.icon { width: 1.5rem; height: 1.5rem; flex: none; stroke-width: 1.75; }
.icon-tile { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius); background: var(--tint); color: var(--navy); }
.icon-tile .icon { width: 1.75rem; height: 1.75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band-navy { background: var(--navy); color: var(--on-navy); }
.band-tint { background: var(--tint); }
.label {
  display: block;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.band-navy .label { color: var(--blue); }
.lede { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; max-width: 38rem; }
.soft { color: var(--ink-soft); }
.band-navy .soft { color: var(--on-navy-soft); }
.section-head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.skip { position: absolute; left: -999rem; top: 0; background: var(--white); color: var(--ink); padding: 0.75rem 1rem; z-index: 10; }
.skip:focus { left: var(--gutter); top: 0.5rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.35rem;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 600; line-height: 1.15; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--blue); color: var(--navy); }
.btn-primary:hover { background: var(--white); color: var(--navy); }
.band-tint .btn-primary:hover, .on-light .btn-primary:hover { background: var(--navy); color: var(--white); }
.btn-ghost { border-color: var(--navy-rule); color: var(--on-navy); }
.btn-ghost:hover { border-color: var(--blue); }

/* Liquid metal button, for the one main action in a navy band. A rim of white, tint, Brand Blue
   and navy turns slowly around a Brand Blue face that is lit from above; on hover a sheen crosses
   the face and the button lifts. Palette colours only, no script. Without @property support the
   rim simply stays still. */
@property --metal { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-metal {
  --metal-bg:
    linear-gradient(180deg, var(--metal-top) 0%, var(--blue) 52%, var(--metal-low) 100%) padding-box,
    conic-gradient(from var(--metal), #FFFFFF 0deg, var(--tint) 40deg, var(--blue) 95deg, var(--navy) 150deg,
      var(--tint) 200deg, #FFFFFF 230deg, var(--blue) 285deg, var(--navy) 330deg, #FFFFFF 360deg) border-box;
  position: relative; isolation: isolate; overflow: hidden;
  border: 1.5px solid transparent; padding: calc(0.7rem + 0.5px) calc(1.35rem + 0.5px);
  background: var(--metal-bg);
  box-shadow: 0 1px 0 color-mix(in srgb, #FFFFFF 10%, transparent), 0 10px 24px -12px #000000;
  animation: metal-turn 7s linear infinite;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.btn-metal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, #FFFFFF 38%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-metal:hover {
  background: var(--metal-bg);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 color-mix(in srgb, #FFFFFF 12%, transparent), 0 16px 30px -14px #000000;
}
.btn-metal:hover::after { transform: translateX(120%); transition: transform 0.7s ease; }
.btn-metal:active { transform: translateY(1px) scale(0.98); box-shadow: 0 4px 10px -6px #000000; }
@keyframes metal-turn { to { --metal: 360deg; } }

/* Raised panel on navy: a step lighter than the band, a hairline edge, a highlight along the top
   and a long soft shadow. Used for the booking card, the plan steps and the custom build cards. */
.book, .raised, .builds li {
  background: var(--navy-raised); border: 1px solid var(--navy-rule); border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 8%, transparent), 0 40px 80px -40px #000000;
}
/* Light panel on white or tint: white, a hairline edge and a soft navy shadow. Used for the
   "Who we work with" panel, the service cards, and the lists, cards and table on inner pages. */
.sectors, .service-list, .svc-items, .parts li, .tiers li, .table-scroll, .onboard li, .note, .kinds-list li, .notebooks li, .tools {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-card);
  box-shadow: 0 1px 2px color-mix(in srgb, #081F27 6%, transparent), 0 24px 48px -32px color-mix(in srgb, #081F27 35%, transparent);
}
/* A soft Brand Blue glow on the right of a navy band, as in the hero. */
.band-glow {
  background:
    radial-gradient(ellipse 45% 70% at 78% 50%, var(--navy-glow), transparent 70%),
    var(--navy);
}

/* Header */
.site-header { padding-block: 1.25rem; }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.brand { display: block; flex: none; }
.brand img { width: clamp(9.5rem, 7rem + 8vw, 12.5rem); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a { text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--blue); }
.nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav .phone { font-weight: 600; white-space: nowrap; }
.nav .btn { min-height: 2.6rem; padding: 0.5rem 1rem; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; font-weight: 600;
  border: 2px solid var(--navy-rule); border-radius: var(--radius); padding: 0.5rem 1rem;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--blue); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 5; min-width: 15rem;
  background: var(--navy-raised); border: 1px solid var(--navy-rule); border-radius: var(--radius);
  display: grid; padding: 0.5rem;
}
.menu-panel a { padding: 0.7rem 0.85rem; text-decoration: none; font-weight: 500; border-radius: 6px; }
.menu-panel a:hover { background: var(--navy); color: var(--blue); }
@media (max-width: 66rem) {
  .nav { display: none; }
  .menu { display: block; }
}

/* Speed mark depth: a large "ghost" copy of the mark in a lighter navy sits behind the hero and the
   inner page heads, over a soft glow of Brand Blue mixed into navy. Both stay well under the
   contrast of the text on top, so white and Brand Blue text keep their ratios. */
.hero, .page-band {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 75% at 85% 55%, var(--navy-glow), transparent 70%),
    var(--navy);
}
.hero::before, .page-band::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  aspect-ratio: 92 / 49;
  background: var(--navy-ghost);
  -webkit-mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
  mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
}
.hero::before { width: clamp(30rem, 80vw, 80rem); right: -30vw; top: -8%; }
.page-band::before { width: clamp(26rem, 62vw, 62rem); right: -18vw; top: 50%; transform: translateY(-46%); }
.page-band .page-head { position: relative; }
.page-mark {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(12rem, 26vw, 24rem); max-width: none; right: -4vw; bottom: -2.5rem;
}
@media (max-width: 58rem) {
  .page-band::before { width: 34rem; right: -16rem; top: auto; bottom: -3rem; transform: none; }
  .page-mark { width: 11rem; right: -3rem; bottom: -1.5rem; }
}

/* Hero */
.hero-body { position: relative; z-index: 1; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem); }
.hero-copy { display: grid; gap: 1.5rem; max-width: 41rem; }
.hero-copy .lede { color: var(--on-navy-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.5rem; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin-top: clamp(2rem, 5vw, 3.5rem);
  font-size: var(--step-small); font-weight: 500;
}
.hero-facts li { padding-inline: 1.25rem; border-left: 2px solid var(--blue); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
.hero-mark {
  position: absolute; z-index: 0; pointer-events: none;
  right: -20vw; top: 20%;
  width: clamp(18rem, 60vw, 62rem); max-width: none;
  animation: mark-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes mark-in { from { transform: translate(3rem, 1.5rem); } to { transform: none; } }
@media (max-width: 68rem) { .hero-copy { max-width: 34rem; } .hero-mark { width: 40vw; right: -5vw; top: auto; bottom: 14%; } }
@media (max-width: 58rem) {
  .hero-body { padding-bottom: 46vw; }
  .hero-copy { max-width: 38rem; }
  .hero-mark { width: 74vw; right: -12vw; top: auto; bottom: 5vw; }
  .hero-facts li { padding-inline: 0.9rem; }
}
@media (max-width: 30rem) {
  .hero-facts { display: grid; gap: 0.6rem; }
  .hero-facts li, .hero-facts li:first-child { padding-inline: 0.9rem 0; border-left: 2px solid var(--blue); }
}

/* Client support strip */
.support { padding-block: clamp(2rem, 4vw, 3rem); }
.support .wrap { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); align-items: start; }
.support-head { display: grid; gap: 0.4rem; }
.support-head h2 { font-size: 1.5rem; font-weight: 600; }
.support-head p { font-size: var(--step-small); }
.support-east { margin-top: 0.5rem; font-weight: 500; }
.support-east a { white-space: nowrap; padding-block: 0.2rem; display: inline-block; }
.support-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
.support-links a {
  display: grid; gap: 0.1rem; height: 100%; padding-block: 0.85rem;
  border-top: 2px solid var(--navy); text-decoration: none;
}
.support-links li { min-width: 0; }
.support-links a { overflow-wrap: anywhere; }
.support-links strong { font-weight: 600; }
.support-links span { font-size: var(--step-small); color: var(--ink-soft); }
.support-links a:hover strong { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (max-width: 52rem) { .support .wrap { grid-template-columns: minmax(0, 1fr); } .support-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .support-links { grid-template-columns: minmax(0, 1fr); } }

/* Homepage service index: a numbered list of the eight services on the left and, on wide screens, a
   navy display panel on the right that shows whichever service is hovered or focused (site.js).
   Each title links to its section on the Services page. Without script, or on narrow screens, each
   description shows under its title instead. */
.index { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.index-list { border-top: 1px solid var(--rule-strong); }
.index-item { position: relative; border-bottom: 1px solid var(--rule); }
.index-item > a {
  position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding-block: 1.15rem; text-decoration: none; color: var(--ink-soft);
  transition: color 0.25s ease;
}
.index-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.index-num { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.index-name { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.index-arrow { display: flex; color: var(--navy); opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.25s ease, transform 0.25s ease; }
.index-item > a:hover, .index-item.is-active > a { color: var(--navy); }
.index-item > a:hover::after, .index-item.is-active > a::after { transform: scaleX(1); }
.index-item > a:hover .index-arrow, .index-item.is-active .index-arrow, .index-item > a:focus-visible .index-arrow { opacity: 1; transform: none; }
.index-icon { display: none; }
.index-desc { padding: 0 0 1.15rem 4rem; margin-top: -0.35rem; color: var(--ink); font-size: var(--step-small); max-width: 38rem; }
.index-panel { display: none; }
@media (min-width: 62.01rem) {
  .index.is-live .index-desc { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .index.is-live .index-panel {
    display: block; position: sticky; top: 2rem; min-height: 23rem; overflow: hidden; isolation: isolate;
    padding: clamp(2rem, 3vw, 2.75rem); color: var(--on-navy); border-radius: var(--radius-card);
    border: 1.5px solid transparent;
    background: var(--panel-dark);
    background-size: var(--panel-dark-size);
    box-shadow: 0 40px 80px -40px color-mix(in srgb, #081F27 80%, transparent);
  }
  .index.is-live .index-panel::after {
    content: ""; position: absolute; z-index: -1; right: -5rem; bottom: -3rem; width: 24rem; aspect-ratio: 92 / 49;
    background: var(--navy-ghost);
    -webkit-mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
    mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
  }
}
/* Touch mode (site.js adds .is-accordion on touch or narrow screens): each service is a button that
   opens its own dark card inline, in the same finish as the panel. The links and the side panel
   step aside; the cards carry a "See the details" link instead. */
.index-toggle, .index-card { display: none; }
.index.is-accordion { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.index.is-accordion .index-panel, .index.is-accordion .index-desc, .index.is-accordion .index-item > a:first-child { display: none; }
.index.is-accordion .index-toggle {
  position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  width: 100%; padding-block: 1.15rem; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink-soft); transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.index.is-accordion .index-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.index.is-accordion .index-toggle .index-arrow { opacity: 1; transform: none; transition: transform 0.3s ease; }
.index.is-accordion .is-open .index-toggle { color: var(--navy); }
.index.is-accordion .is-open .index-toggle::after { transform: scaleX(1); }
.index.is-accordion .is-open .index-toggle .index-arrow { transform: rotate(90deg); }
.index.is-accordion .index-card {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.index.is-accordion .is-open .index-card { grid-template-rows: 1fr; }
.index-card-inner {
  min-height: 0; overflow: hidden; display: grid; gap: 0.75rem; position: relative; isolation: isolate;
  margin-bottom: 0; padding: 0 1.5rem; border-radius: var(--radius-card); color: var(--on-navy);
  border: 1.5px solid transparent; background: var(--panel-dark); background-size: var(--panel-dark-size);
  border-width: 0; opacity: 0;
  transition: margin 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}
.index.is-accordion .is-open .index-card-inner { margin-bottom: 1.25rem; padding-block: 1.5rem; border-width: 1.5px; opacity: 1; }
.index-card-inner::after {
  content: ""; position: absolute; z-index: -1; right: -4rem; bottom: -2.5rem; width: 16rem; aspect-ratio: 92 / 49;
  background: var(--navy-ghost); pointer-events: none;
  -webkit-mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
  mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
}
.index-card-inner .index-panel-icon { margin: 0; }
.index-card-inner .index-panel-icon .icon { width: 2.5rem; height: 2.5rem; }
.index-card-link { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; padding-block: 0.35rem; font-weight: 600; color: var(--on-navy); }
.index-card-link .icon { width: 1.1rem; height: 1.1rem; }
.index-panel-body { display: grid; gap: 1rem; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.35s ease, transform 0.35s ease; }
.index-panel-body.is-shown { opacity: 1; transform: none; }
.index-panel-num { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; color: var(--blue); font-variant-numeric: tabular-nums; }
.index-panel-icon { color: var(--blue); margin-block: 0.5rem 0.25rem; }
.index-panel-icon .icon { width: 3.25rem; height: 3.25rem; stroke-width: 1.4; }
.index-panel-title { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 600; line-height: 1.1; }
.index-panel-text { color: var(--on-navy-soft); max-width: 26rem; }
@media (max-width: 34rem) {
  .index-item > a, .index.is-accordion .index-toggle { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; }
  .index-desc { padding-left: 3rem; }
}
.ledger-note { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--rule); max-width: 46rem; }
.more { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1.1rem; font-weight: 600; }
.more a { padding-block: 0.2rem; }

/* How a plan works */
.plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.plan-photo img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 25% 50%;
  border: 1px solid var(--navy-rule); border-radius: var(--radius-card); box-shadow: 0 40px 80px -40px #000000;
}
.plan-copy { display: grid; gap: 1.25rem; }
.steps { counter-reset: step; display: grid; margin-top: 0.75rem; padding: 0.5rem clamp(1.25rem, 3vw, 2rem); }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.2rem 1rem;
  padding-block: 1.35rem;
}
.steps li::before {
  content: counter(step); grid-row: span 2;
  font-size: 2rem; font-weight: 700; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums;
}
.steps p { color: var(--on-navy-soft); }
@media (max-width: 54rem) {
  .plan { grid-template-columns: minmax(0, 1fr); }
  .plan-photo img { aspect-ratio: 16 / 10; }
}

/* Why us and who we work with */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.reasons { counter-reset: reason; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem clamp(1.5rem, 4vw, 3.5rem); }
.reasons li { counter-increment: reason; display: grid; gap: 0.6rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--rule-strong); }
.reasons li::before {
  content: counter(reason, decimal-leading-zero);
  font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.reasons h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.reasons p { color: var(--ink); max-width: 24rem; }
.sectors {
  display: grid; gap: 1.1rem; padding: clamp(1.75rem, 3vw, 2.25rem);
}
.sectors ul { display: grid; }
.sectors li { padding-block: 0.75rem; border-top: 1px solid var(--rule); font-size: 1.125rem; font-weight: 500; }
.sectors li:first-child { border-top: 0; padding-top: 0; }
.sectors p { font-size: var(--step-small); color: var(--ink-soft); padding-top: 1rem; border-top: 1px solid var(--rule); }
@media (max-width: 58rem) { .about { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 34rem) { .reasons { grid-template-columns: minmax(0, 1fr); } }

/* Custom systems: the build photo fills the right side of the band and fades into the navy. */
.systems { position: relative; overflow: hidden; }
.systems-photo { position: absolute; inset: 0 0 0 auto; width: 48%; }
.systems-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.systems-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, color-mix(in srgb, #081F27 55%, transparent) 22%, transparent 55%);
}
.systems .wrap { position: relative; }
.systems-copy { display: grid; gap: 1.25rem; max-width: 50%; padding-right: clamp(1rem, 3vw, 3rem); }
.builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 0.75rem; }
.builds li { display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.builds p { color: var(--on-navy-soft); }
.fineprint { font-size: var(--step-small); }
@media (max-width: 54rem) {
  .systems { padding-top: 0; }
  .systems-photo { position: relative; inset: auto; width: 100%; margin-bottom: clamp(2rem, 6vw, 3rem); }
  .systems-photo img { aspect-ratio: 4 / 3; }
  .systems-photo::after { background: linear-gradient(180deg, transparent 55%, var(--navy) 100%); }
  .systems-copy { max-width: none; padding-right: 0; }
}
@media (max-width: 30rem) { .builds { grid-template-columns: minmax(0, 1fr); } }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3.5rem); }
.quotes figure { display: grid; gap: 1.1rem; align-content: start; padding-top: 1.35rem; border-top: 1px solid var(--rule-strong); }
.quotes blockquote { font-size: 1.1875rem; line-height: 1.5; }
.quotes figcaption { font-size: var(--step-small); font-weight: 600; }
.quotes figcaption span { display: block; font-weight: 400; color: var(--ink-soft); }
/* One quote leads, set large on a navy panel (Brand Blue is allowed there); the others stack beside it. */
.quotes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.quotes .quote-feature {
  grid-row: span 2; position: relative; overflow: hidden; isolation: isolate;
  align-content: end; gap: 1.75rem;
  padding: clamp(2rem, 4vw, 3.25rem); border-top: 0;
  background: var(--navy); color: var(--on-navy); border-radius: var(--radius-card);
}
.quote-feature::before {
  content: "\201C"; display: block; font-size: 7rem; font-weight: 700; line-height: 0.6; color: var(--blue);
  margin-bottom: -0.5rem;
}
.quote-feature::after {
  content: ""; position: absolute; z-index: -1; right: -6rem; bottom: -3rem; width: 26rem; aspect-ratio: 92 / 49;
  background: var(--navy-ghost);
  -webkit-mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
  mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
}
.quote-feature blockquote { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
.quote-feature figcaption { font-size: 1rem; }
.quote-feature figcaption span { color: var(--on-navy-soft); }
@media (max-width: 56rem) {
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .quotes .quote-feature { grid-row: auto; }
}

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.contact-info { display: grid; gap: 1.5rem; }
.contact-list { display: grid; gap: 0; margin-top: 0.5rem; }
.contact-list > div { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--navy-rule); }
.contact-list dt { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 0.25rem; color: var(--on-navy-soft); }
.contact-list dd { font-weight: 500; overflow-wrap: anywhere; }
.contact-list dd span { display: block; font-weight: 400; color: var(--on-navy-soft); font-size: var(--step-small); }

.book { display: grid; gap: 1.1rem; justify-items: start; padding: clamp(1.75rem, 3vw, 2.75rem); }
.book h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
.book p { color: var(--on-navy-soft); }
.book-alt { padding-top: 0.5rem; width: 100%; }
.book-alt a { color: var(--on-navy); font-weight: 500; overflow-wrap: anywhere; }
.book-alt a[href^="tel:"] { white-space: nowrap; }
.book small { font-size: 0.8125rem; line-height: 1.5; color: var(--on-navy-soft); }
/* When a page ends on a navy band, a hairline is all that separates it from the footer. */
main:has(> .band-navy:last-child) + .site-footer { border-top: 1px solid var(--navy-rule); }
@media (max-width: 58rem) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* Inner pages */
.page-head { display: grid; gap: 1.1rem; }
.page-head .lede { color: var(--on-navy-soft); }
.band-tint .icon-tile { background: var(--white); }
/* Services page: a numbered index down the left that stays in view and marks the service being
   read (site.js), and one column of services, each a small number, a title, a one-line summary and
   its details in a light panel as a two-column list. */
.svc-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.svc-index { position: sticky; top: 1.5rem; display: grid; gap: 0.6rem; font-size: var(--step-small); }
.svc-index .label { margin-top: 1rem; color: var(--ink-soft); }
.svc-index .label:first-child { margin-top: 0; }
.svc-index ol { display: grid; }
.svc-index a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: 0.45rem 0 0.45rem 0.85rem;
  border-left: 2px solid var(--rule); text-decoration: none; color: var(--ink-soft); font-weight: 500;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.svc-index a span { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.svc-index a:hover { color: var(--ink); border-left-color: var(--rule-strong); }
.svc-index a[aria-current="true"] { color: var(--navy); border-left-color: var(--navy); font-weight: 600; }
.svc-list { display: grid; }
.svc-group { padding-bottom: 1rem; border-bottom: 1px solid var(--rule-strong); }
.svc-group:not(:first-child) { margin-top: clamp(3rem, 6vw, 5rem); }
.svc { display: grid; gap: 0.75rem; padding-block: clamp(2rem, 4vw, 3rem); scroll-margin-top: 1.5rem; }
.svc + .svc { border-top: 1px solid var(--rule); }
.svc-num { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums; }
.svc h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.006em; }
.svc-lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; max-width: 44rem; }
.svc-items {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 0.75rem; padding: 0.5rem clamp(1.25rem, 2.5vw, 1.75rem) 1rem;
}
.svc-items li { padding-top: 0.95rem; margin-top: 0.95rem; border-top: 1px solid var(--rule); }
.svc-items li:nth-child(-n+2) { margin-top: 0; border-top: 0; }
.svc-items a { font-weight: 500; }
.svc-more { margin-top: 0.25rem; font-weight: 600; }
@media (max-width: 62rem) {
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-index { position: static; padding: 1.25rem 1.5rem; background: var(--tint); border-radius: var(--radius-card); }
  .svc-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
@media (max-width: 40rem) {
  .svc-items { grid-template-columns: minmax(0, 1fr); }
  .svc-items li:nth-child(2) { margin-top: 0.95rem; border-top: 1px solid var(--rule); }
  .svc-index ol { grid-template-columns: minmax(0, 1fr); }
}
.service-list { display: grid; align-content: start; padding: 0.4rem clamp(1.25rem, 2.5vw, 1.75rem); }
.service-list li { padding-block: 0.95rem; border-top: 1px solid var(--rule); }
.service-list li:first-child { border-top: 0; }
.service-list a { font-weight: 500; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.split .section-head { margin-bottom: 0; }
.parts { counter-reset: part; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.parts li, .onboard li { counter-increment: part; display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem); }
.parts li::before, .onboard li::before {
  content: counter(part, decimal-leading-zero);
  font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.parts h3, .onboard h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.parts p { color: var(--ink); }
.note { margin-top: 1.25rem; padding: 1rem 1.35rem; max-width: 52rem; background: var(--tint); box-shadow: none; }
.band-tint .note { background: var(--white); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.tiers li { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem); }
.tiers h3 { font-size: 1.5rem; font-weight: 600; }
.tiers p { color: var(--ink); }
.tiers .tier-pick {
  border: 1.5px solid transparent; color: var(--on-navy);
  background:
    linear-gradient(var(--navy-raised), var(--navy-raised)) padding-box,
    conic-gradient(from 210deg, #FFFFFF, var(--tint), var(--blue), var(--navy), var(--tint), #FFFFFF, var(--blue), var(--navy), #FFFFFF) border-box;
  box-shadow: 0 40px 80px -40px color-mix(in srgb, #081F27 80%, transparent);
}
.tier-pick p { color: var(--on-navy-soft); }
.tier-pick .label { order: -1; color: var(--blue); }
.compare th:nth-child(3), .compare td:nth-child(3) { background: color-mix(in srgb, #E5F6FD 70%, #FFFFFF); }
.table-scroll { margin-top: 1.25rem; overflow-x: auto; }
.compare { width: 100%; min-width: 42rem; border-collapse: collapse; table-layout: fixed; font-size: var(--step-small); }
.compare caption { padding: 1.1rem 1.25rem 0.4rem; text-align: left; font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.compare th, .compare td { padding: 0.8rem 1.25rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.compare thead th { border-top: 0; font-size: 1.0625rem; font-weight: 600; }
.compare tbody th { width: 34%; font-weight: 500; }
.compare td { color: var(--ink-soft); }
.compare td .icon { width: 1.1rem; height: 1.1rem; margin-right: 0.45rem; vertical-align: -0.2em; stroke-width: 2.25; }
.compare td.yes { color: var(--ink); }
.compare td.yes .icon { color: var(--navy); }
.onboard { counter-reset: part; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.onboard h3 { font-size: 1.25rem; }
.onboard p { color: var(--ink); }
.cta .wrap { display: flex; flex-wrap: wrap; gap: 1.75rem 3rem; align-items: center; justify-content: space-between; }
.cta .wrap > div:first-child { display: grid; gap: 0.75rem; max-width: 38rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 58rem) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .onboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) { .parts, .onboard { grid-template-columns: minmax(0, 1fr); } }
.page-band .page-head { padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem); }
.page-head h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); }
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.prose h3 { font-size: 1.5rem; font-weight: 600; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.prose h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin-top: 1.75rem; }
.prose .updated { margin-top: 0.5rem; font-size: 1.125rem; font-weight: 500; color: var(--ink-soft); }
.prose p { margin-top: 0.75rem; }
.prose p:empty { display: none; }
.prose .bullet { padding-left: 1.4rem; text-indent: -1.4rem; }
.prose ul { margin-top: 0.75rem; padding-left: 1.4rem; list-style: disc; }
.prose li p { margin-top: 0.4rem; }
.prose li + li { margin-top: 0.4rem; }
.footer-legal a { display: inline-block; padding-block: 0.2rem; }
.prose a { overflow-wrap: anywhere; }

/* About page: portrait beside the story. */
.about-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.portrait { display: grid; gap: 1rem; }
.portrait img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card);
  border: 1.5px solid transparent; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--edge-light) border-box;
  box-shadow: 0 1px 2px color-mix(in srgb, #081F27 6%, transparent), 0 24px 48px -32px color-mix(in srgb, #081F27 35%, transparent);
}
.portrait figcaption { display: grid; gap: 0.1rem; }
.portrait figcaption span { color: var(--ink-soft); font-size: var(--step-small); }
.prose-block { display: grid; gap: 1rem; max-width: 40rem; }
.prose-block p { color: var(--ink); }

/* Custom systems page. */
.kinds { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.kinds-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, #081F27 60%, transparent);
}
.kinds-copy { display: grid; gap: 0.5rem; }
.kinds-copy .section-head { margin-bottom: 1.25rem; }
.kinds-list { display: grid; gap: 1.25rem; }
.kinds-list li { display: grid; gap: 0.5rem; padding: clamp(1.5rem, 3vw, 2rem); scroll-margin-top: 1.5rem; }
.kinds-list h3, .notebooks h3, .warranty h3, .warranty-terms h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.kinds-tested { font-size: var(--step-small); color: var(--ink-soft); }
.aftercare-list { display: grid; padding: 0.5rem clamp(1.25rem, 3vw, 2rem); color: var(--on-navy); }
.aftercare-list li { padding-block: 1rem; }
.aftercare-list li:last-child { color: var(--on-navy-soft); font-size: var(--step-small); }
.notebooks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.notebooks li { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem); }
.warranty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.warranty > div { display: grid; gap: 1rem; }
.warranty-note { font-size: var(--step-small); color: var(--ink-soft); }
.warranty-terms { display: grid; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3rem); max-width: 52rem; }
.warranty-terms p { color: var(--ink); }
@media (max-width: 58rem) {
  .about-story, .kinds, .warranty { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 26rem; }
  .kinds-photo { max-width: 28rem; }
  .notebooks { grid-template-columns: minmax(0, 1fr); }
}

/* Client support page: the urgent call panel beside the list of client tools. */
.help { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 6vw, 5rem); align-items: start; }
.help-call { display: grid; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.5rem); color: var(--on-navy); }
.help-call .label { color: var(--blue); }
.help-call h2 { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); }
.help-call p { color: var(--on-navy-soft); }
.help-phones { display: grid; gap: 0.9rem; margin-top: 0.5rem; }
.help-phones dt { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-soft); }
.help-phones dd { font-size: 1.375rem; font-weight: 600; }
.help-phones dd a { color: var(--on-navy); }
.help-tools { display: grid; gap: 1rem; }
.tools { display: grid; padding: 0.4rem clamp(1.25rem, 2.5vw, 1.75rem); }
.tools li + li { border-top: 1px solid var(--rule); }
.tools a { display: grid; gap: 0.2rem; padding-block: 1rem; text-decoration: none; overflow-wrap: anywhere; }
.tools strong { font-size: 1.125rem; font-weight: 600; }
.tools span { color: var(--ink-soft); font-size: var(--step-small); }
.tools a:hover strong, .tools a:focus-visible strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.support-more { margin-top: 0.25rem; font-weight: 600; }
.site-footer h2 a { color: inherit; text-decoration: none; }
.site-footer h2 a:hover { text-decoration: underline; }
@media (max-width: 58rem) { .help { grid-template-columns: minmax(0, 1fr); } }

/* FAQs: native details and summary, grouped under small labels, no script. */
.faq-layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.faq-group { display: grid; max-width: 52rem; }
.faq-group .label { padding-bottom: 1rem; border-bottom: 1px solid var(--rule-strong); }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.25s ease;
}
.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { color: var(--navy); }
.faq p { padding: 0 2.5rem 1.35rem 0; color: var(--ink); max-width: 44rem; }
.faq p a { font-weight: 600; }

.service-list .sub-list { display: grid; gap: 0.35rem; margin-top: 0.6rem; padding-left: 1.25rem; list-style: disc; }
.service-list .sub-list li { padding: 0; border: 0; }

/* Footer */
.site-footer { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; font-size: var(--step-small); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.footer-brand { display: grid; gap: 1rem; align-content: start; }
.footer-brand img { width: 11rem; }
.footer-brand .tagline { font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.site-footer h2 { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.75rem; }
.footer-grid > div { min-width: 0; }
.site-footer li { min-width: 0; overflow-wrap: anywhere; }
.site-footer ul { display: grid; gap: 0.15rem; }
.site-footer li a { display: inline-block; padding-block: 0.2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--blue); }
.site-footer li, .site-footer p { color: var(--on-navy-soft); }
.site-footer li:not(:has(a)) { padding-block: 0.2rem; }
.site-footer li a { color: var(--on-navy); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--navy-rule); }
@media (max-width: 54rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 26rem) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Every box shares the homepage display panel's finish. Dark boxes: faded grid, corner glow, thin
   metal edge and, on the larger ones, a ghost speed mark. Light boxes: corner glow and a silvery
   edge, without the dots (Ben's choice). */
.book, .raised, .builds li, .quotes .quote-feature, .tiers .tier-pick {
  border: 1.5px solid transparent;
  background: var(--panel-dark);
  background-size: var(--panel-dark-size);
}
.book, .raised, .tiers .tier-pick { position: relative; overflow: hidden; isolation: isolate; }
.book::after, .raised::after, .tiers .tier-pick::after {
  content: ""; position: absolute; z-index: -1; right: -5rem; bottom: -3rem; width: 22rem; aspect-ratio: 92 / 49;
  background: var(--navy-ghost); pointer-events: none;
  -webkit-mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
  mask: url("/assets/img/speed-mark.svg") center / contain no-repeat;
}
.sectors, .service-list, .svc-items, .parts li, .tiers li:not(.tier-pick), .onboard li, .kinds-list li, .notebooks li, .tools {
  border: 1.5px solid transparent;
  background: var(--glow-light) padding-box,
    linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--edge-light) border-box;
}
.table-scroll { border: 1.5px solid transparent; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--edge-light) border-box; }
.note { border-color: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-mark { animation: none; }
  .btn-metal { animation: none; transition: none; }
  .btn-metal:hover, .btn-metal:active { transform: none; }
  .btn-metal:hover::after { transition: none; }
  .faq summary::after { transition: none; }
  .svc-index a { transition: none; }
  .index-item > a, .index-item > a::after, .index-arrow, .index-panel-body, .index-toggle, .index-toggle::after, .index-card, .index-card-inner { transition: none; }
  .btn { transition: none; }
}