/* =========================================================================
   Charlotte Door Solutions — charlottedoorsolutions.com
   Design system: "Dashed Arc". Plain CSS. No framework, no build step,
   no webfont request.

   SEPARATION BRIEF. This is the operator's sixth commercial door property
   in Charlotte and it must not read as a sibling of any of these:

     charlottecommercialdoorrepair.com
       navy #123A63 + amber, heavy sans with negative tracking,
       3px corners, pill buttons, stacked louver-bar motif.
     charlottecommercialdoors.com
       oxblood #7E2B33 + brass on warm concrete, Outfit geometric,
       asymmetric 0/12 corners, quarter-circle swing arc motif,
       monospace for dimensions, no shadows.
     charlottecommercialdoors.net
       forest #24614A + lime, Archivo Narrow condensed heads over a
       serif body, zero radius, 3px left rule on cards, no shadows.
     charlottecommercialdoorservice.com
       aubergine #4A2B45 + antique brass, single-family Inter,
       zero radius, single 720px editorial column, rules only.
     charlottecommercialdoorservice.net
       fir #2C4A34 + slate blue, serif heads over sans body,
       uniform 8px radius, measure-tick motif, split photo hero.

   THIS ONE: indigo #3A3A7A with turquoise #17BEBB, both sampled from the
   supplied logo. Squared humanist headings (Rajdhani, the wordmark's own
   face, falling back to Bahnschrift). Uniform 14px radius. The recurring
   motif is a DASHED SEGMENT taken from the dashed arc in the logo mark —
   not an arc, not a tick, not a louver bar, not a left rule. Two-layer
   indigo-tinted shadow on cards. Hero is a photo-free indigo band with the
   functional component overlapping upward onto it.

   COLOUR RULE, NON-NEGOTIABLE. #17BEBB is 2.30:1 on white. It is a
   GRAPHIC COLOUR ONLY and must never appear in a `color:` declaration on
   a text rule at any size. Text that needs to read as accent uses
   --accent-ink #0F6E6C, which is 6.06:1 on paper. Do not "fix" a design
   by reaching for the bright turquoise here.

   CONVERSION MODEL. Phone calls only. There is not one form element in
   this stylesheet or anywhere in this site. Every CTA resolves to a tel:
   link and a call bar pins to the bottom of the viewport on narrow
   screens.

   RETRIEVAL COST. One stylesheet, no @import, no webfont, no framework.
   Everything below is used.
   ========================================================================= */

:root {
  /* indigo — from the logo tile */
  --indigo:       #3A3A7A;
  --indigo-dark:  #2B2B5E;   /* hover, pressed, footer */
  --indigo-deep:  #1E1E44;   /* deepest panel */
  --indigo-tint:  #EFEFF8;   /* soft callout fill */
  --indigo-line:  #4E4E92;   /* hairline on indigo */

  /* turquoise — from the logo's dashed arc. GRAPHIC ONLY. */
  --turq:         #17BEBB;
  --turq-soft:    #7FDCDA;
  --accent-ink:   #0F6E6C;   /* the text-safe accent, 6.06:1 on paper */

  /* paper + ink */
  --paper:        #FCFCFD;
  --white:        #FFFFFF;
  --surface:      #F4F4FA;   /* alternating band */
  --border:       #DCDDEA;
  --border-firm:  #BFC1D6;

  --ink:          #16162E;   /* headings */
  --body:         #4A4A63;   /* paragraphs */
  --slate:        #5C6670;   /* labels, captions, meta */
  --on-dark:      #EEEEF6;
  --on-dark-2:    #B9BAD6;

  --max:   1160px;
  --gut:   22px;

  /* uniform 14 is the signature. Do not mix radii. */
  --r:     14px;
  --r-btn: 10px;
  --pill:  999px;

  --shadow:    0 1px 2px rgba(30,30,68,.06), 0 6px 20px rgba(58,58,122,.09);
  --shadow-lg: 0 2px 4px rgba(30,30,68,.07), 0 14px 40px rgba(58,58,122,.14);

  --f-head: 'Rajdhani', 'Bahnschrift', 'DIN Alternate', 'Saira',
            'Segoe UI Semibold', system-ui, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  font-variant-numeric: tabular-nums lining-nums;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.05rem, 4.4vw, 3.05rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.3rem;  line-height: 1.3; }
h4 { font-size: 1.06rem; line-height: 1.35; }

p  { margin: 0 0 1.05em; max-width: 68ch; }
ul, ol { max-width: 68ch; padding-left: 1.15em; }
li { margin-bottom: .4em; }
a  { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--indigo); }
strong { color: var(--ink); font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--indigo); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 780px; }

/* ---- the signature motif: a dashed segment ---------------------------- */
.dash {
  display: block; width: 56px; height: 0;
  border-top: 3px dashed var(--turq);
  margin: 0 0 14px;
}
.dash--under { margin: -2px 0 20px; }
.dash--dark { border-top-color: var(--turq); }

.eyebrow {
  font-family: var(--f-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 8px;
}
/* CONTRAST. The default eyebrow colour is --slate, which is 1.74:1 on the
   indigo band and fails outright. Every dark context must override it.
   If you add a new dark section, add its selector here — verify.js asserts
   that the hero override exists, so this comment is not the only guard. */
.hero .eyebrow,
.hero-facts .eyebrow,
.band--indigo .eyebrow,
.cta-band .eyebrow,
.site-footer .eyebrow,
.call-bar .eyebrow { color: var(--on-dark-2); }   /* 5.35:1 on #3A3A7A */

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-head); font-size: 1.12rem; font-weight: 600;
  letter-spacing: .01em;
  padding: 13px 26px; border-radius: var(--r-btn);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.btn--call { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.btn--call:hover { background: var(--indigo-dark); border-color: var(--indigo-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--indigo); border-color: var(--border-firm); }
.btn--ghost:hover { border-color: var(--indigo); color: var(--indigo); }
.btn--onDark { background: transparent; color: #fff; border-color: var(--turq); }
.btn--onDark:hover { background: var(--turq); color: var(--indigo-deep); border-color: var(--turq); }

.btn .tel { font-variant-numeric: tabular-nums; }

/* ---- header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,252,253,.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(160%) blur(6px);
}
.header-in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
  height: 68px; display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 38px; width: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-nav a {
  font-family: var(--f-head); font-size: 1.05rem; font-weight: 600;
  color: var(--ink); text-decoration: none; padding: 6px 0;
  border-bottom: 3px dashed transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--indigo); border-bottom-color: var(--turq);
}
.header-call {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--indigo); color: #fff; text-decoration: none;
  font-family: var(--f-head); font-weight: 600; font-size: 1.06rem;
  padding: 9px 20px; border-radius: var(--pill); white-space: nowrap;
}
.header-call:hover { background: var(--indigo-dark); color: #fff; }

.nav-toggle {
  display: none; margin-left: auto; background: none;
  border: 1px solid var(--border-firm); border-radius: var(--r-btn);
  padding: 8px 12px; font-family: var(--f-head); font-weight: 600;
  font-size: 1rem; color: var(--ink);
}

/* ---- hero: indigo band, no photograph -------------------------------- */
.hero {
  background: var(--indigo);
  color: var(--on-dark);
  padding: 62px 0 96px;
  border-bottom: 3px dashed var(--indigo-line);
}
.hero-grid {
  display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: start;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero .lede {
  color: var(--on-dark); font-size: 1.16rem; max-width: 62ch; margin-bottom: 26px;
}
.hero .cta-line { color: var(--on-dark-2); font-size: 1rem; max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.hero .dash { border-top-color: var(--turq); }

/* Right-hand facts panel. Same three rows on every page. */
.hero-facts {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--indigo-line);
  border-radius: var(--r);
  padding: 22px 24px;
}
.hero-facts dl { margin: 0; }
.hero-facts dl > div + div {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--indigo-line);
}
.hero-facts dt {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--turq-soft); margin-bottom: 4px;
}
.hero-facts dd { color: var(--on-dark); font-size: .97rem; line-height: 1.5; }

/* the component that overlaps upward onto the hero band */
.centerpiece { margin-top: -40px; position: relative; z-index: 2; }

/* ---- sections and bands ---------------------------------------------- */
.band { padding: 62px 0; }
.band--alt { background: var(--surface); }
.band--indigo {
  background: var(--indigo); color: var(--on-dark);
  padding: 54px 0;
}
.band--indigo h2, .band--indigo h3 { color: #fff; }
.band--indigo p { color: var(--on-dark); }
.band--indigo a:not(.btn) { color: var(--turq-soft); }

.section-head { margin-bottom: 30px; }
.section-head p { color: var(--body); max-width: 68ch; }
.band--indigo .section-head p { color: var(--on-dark); }

/* ---- cards ------------------------------------------------------------ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px 26px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 6px; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* service index cards */
.svc-card { display: flex; flex-direction: column; }
.svc-card .teaser { color: var(--body); flex: 1; margin-bottom: 14px; }
.svc-card a.more {
  font-family: var(--f-head); font-weight: 600; font-size: 1.05rem;
  text-decoration: none; color: var(--indigo);
}
.svc-card a.more:hover { text-decoration: underline; }
.svc-card a.more::after { content: " →"; }

.group-head { margin: 0 0 6px; }
.group-blurb { color: var(--slate); margin-bottom: 20px; }

/* ---- subitem panels (single-column stack, dashed rule under title) ---- */
.subitem {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px 24px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.subitem h3 { margin-bottom: 10px; }
.subitem .dash { width: 48px; margin-bottom: 12px; }
.subitem p { margin-bottom: 0; }

/* ---- spec rows (label / value) ---------------------------------------- */
.specs {
  border-top: 1px solid var(--border-firm);
  margin: 0 0 34px; max-width: 860px;
}
.spec-row {
  display: grid; grid-template-columns: 170px 1fr; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.spec-row dt {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate); padding-top: 3px;
}
.spec-row dd { color: var(--body); }

/* ---- tables ----------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
table {
  width: 100%; border-collapse: collapse; font-size: .97rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
caption {
  caption-side: top; text-align: left; color: var(--slate);
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 0 0 10px;
}
thead th {
  background: var(--indigo); color: #fff; text-align: left;
  font-family: var(--f-head); font-weight: 600; font-size: 1rem;
  letter-spacing: .01em; padding: 12px 14px; vertical-align: bottom;
}
tbody td, tbody th {
  padding: 12px 14px; border-top: 1px solid var(--border);
  vertical-align: top; text-align: left;
}
tbody th { font-weight: 600; color: var(--ink); }
.matrix td { min-width: 190px; }
.matrix th[scope="row"] { min-width: 170px; }
.na { color: var(--slate); font-style: italic; }

/* ---- the opening router ----------------------------------------------- */
.router {
  background: var(--white); border: 1px solid var(--border-firm);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 26px 28px 22px;
}
.router > h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.router .intro { color: var(--body); max-width: 72ch; }
.router-controls {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  padding: 18px 0 14px; border-top: 3px dashed var(--turq);
  border-bottom: 1px solid var(--border); margin-top: 16px;
}
.router-field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; flex: 1 1 240px; }
.router-field label {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate);
}
/* select is not a form control here — there is no form element and nothing
   is submitted. It is a filter over content already present in the DOM. */
.router-field select {
  font-family: var(--f-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border-firm);
  border-radius: var(--r-btn); padding: 10px 12px; width: 100%;
}
.router-reset {
  font-family: var(--f-head); font-weight: 600; font-size: 1rem;
  background: none; border: 2px solid var(--border-firm);
  border-radius: var(--r-btn); padding: 9px 18px; color: var(--indigo); cursor: pointer;
}
.router-reset:hover { border-color: var(--indigo); }
.router-count {
  font-size: .95rem; color: var(--slate); padding: 12px 0 4px; margin: 0;
}
.router table { border: none; border-radius: 0; }
.router tbody tr[hidden] { display: none; }
.router td a { font-weight: 600; }
.router .empty { padding: 18px 0; color: var(--body); }

/* ---- the force reference (calculator) --------------------------------- */
.force { }
.force-controls {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 24px;
  padding-top: 18px; border-top: 3px dashed var(--turq);
}
.force-tab {
  font-family: var(--f-head); font-weight: 600; font-size: 1.02rem;
  background: var(--white); color: var(--indigo);
  border: 2px solid var(--border-firm); border-radius: var(--r-btn);
  padding: 10px 16px; cursor: pointer; text-align: left;
}
.force-tab:hover { border-color: var(--indigo); }
.force-tab[aria-selected="true"] {
  background: var(--indigo); color: #fff; border-color: var(--indigo);
}
.force-panel {
  background: var(--white); border: 1px solid var(--border-firm);
  border-left: 6px solid var(--turq);
  border-radius: var(--r); padding: 24px 26px; box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.force-panel h3 { margin-bottom: 14px; }
.force-figure {
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.05rem); color: var(--ink);
  line-height: 1.2; margin-bottom: 4px;
}
.force-figure--sm { font-size: clamp(1.12rem, 2vw, 1.38rem); line-height: 1.35; max-width: 54ch; }
.force-cite { font-size: .93rem; color: var(--slate); margin-bottom: 14px; }
.force-block + .force-block { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.force-verdict {
  background: var(--indigo-tint); border-radius: var(--r);
  padding: 14px 18px; margin-top: 18px; color: var(--ink);
}
.force-verdict p { margin: 0; }
.force-note { font-size: .96rem; }

/* ---- grade cards ------------------------------------------------------ */
.grade-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow);
}
.grade-card .desig {
  font-family: var(--f-head); font-weight: 600; font-size: 1.22rem;
  color: var(--indigo); margin-bottom: 4px;
}
.grade-card .governs {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 12px;
}
.grade-card .dash { width: 40px; margin-bottom: 12px; }
.grade-card .misquoted {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .96rem;
}
.grade-card .misquoted strong { display: block; margin-bottom: 3px; }

/* ---- process steps: numbered card grid -------------------------------- */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0,1fr)); counter-reset: step; }
.step {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px 24px 20px; box-shadow: var(--shadow);
}
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--turq); color: var(--indigo);
  font-family: var(--f-head); font-weight: 600; font-size: 1.25rem;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.12rem; margin-bottom: 6px; }
.step p { margin: 0; font-size: .98rem; }

/* ---- why us ----------------------------------------------------------- */
.why { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.why .card p { margin: 0; }

/* ---- FAQ -------------------------------------------------------------- */
.faq-list { max-width: 860px; }
details.faq {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 12px; box-shadow: var(--shadow);
}
details.faq > summary {
  list-style: none; cursor: pointer; padding: 17px 22px;
  font-family: var(--f-head); font-weight: 600; font-size: 1.14rem;
  color: var(--ink); display: flex; gap: 14px; align-items: flex-start;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::before {
  content: ""; flex: 0 0 auto; width: 18px; margin-top: 11px;
  border-top: 3px dashed var(--turq);
}
details.faq[open] > summary { color: var(--indigo); }
details.faq .answer { padding: 0 22px 18px 54px; }
details.faq .answer p:last-child { margin-bottom: 0; }
.faq-group { margin-bottom: 38px; }

/* ---- callouts and lists ----------------------------------------------- */
.callout {
  background: var(--indigo-tint); border-radius: var(--r);
  padding: 20px 24px; margin: 0 0 24px; border-left: 6px solid var(--turq);
}
.callout p:last-child { margin-bottom: 0; }
.checklist { list-style: none; padding-left: 0; }
.checklist li {
  padding-left: 26px; position: relative; margin-bottom: .55em;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 16px; border-top: 3px dashed var(--turq);
}

/* ---- photo band ------------------------------------------------------- */
.photo-band { margin: 0; }
.photo-band img {
  width: 100%; height: clamp(220px, 32vw, 420px);
  object-fit: cover; display: block;
}
.photo-band figcaption {
  max-width: var(--max); margin: 10px auto 0; padding: 0 var(--gut);
  font-size: .92rem; color: var(--slate);
}

/* ---- CTA band --------------------------------------------------------- */
.cta-band { background: var(--indigo); color: #fff; padding: 50px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-dark); max-width: 62ch; }
.cta-band .dash { border-top-color: var(--turq); }

/* ---- breadcrumbs ------------------------------------------------------ */
.crumbs { font-size: .92rem; color: var(--slate); padding: 16px 0 0; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/ "; color: var(--border-firm); }
.crumbs a { color: var(--slate); }

/* ---- footer ----------------------------------------------------------- */
.site-footer {
  background: var(--indigo-deep); color: var(--on-dark-2);
  padding: 52px 0 28px; margin-top: 0;
}
.site-footer h2, .site-footer h3 {
  color: #fff; font-size: 1.06rem; margin-bottom: 12px;
}
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1.6fr 1fr 1fr; }
.site-footer img.flogo { height: 40px; width: auto; margin-bottom: 16px; }
.site-footer p { color: var(--on-dark-2); font-size: .96rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .45em; }
.site-footer a { color: var(--on-dark); text-decoration: none; font-size: .96rem; }
.site-footer a:hover { color: var(--turq-soft); text-decoration: underline; }
.footer-phone {
  font-family: var(--f-head); font-weight: 600; font-size: 1.5rem;
  color: #fff !important; text-decoration: none; display: inline-block; margin-bottom: 8px;
}
.footer-bottom {
  border-top: 1px solid var(--indigo-line); margin-top: 34px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: .9rem;
}

/* ---- fixed call bar, narrow screens only ------------------------------ */
.call-bar { display: none; }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-facts { max-width: 560px; }
}
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  body { padding-bottom: 66px; }   /* clears the fixed call bar */
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    background: var(--paper); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 16px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--turq); }
  .nav-toggle { display: inline-block; }
  .header-call { display: none; }   /* the fixed bar carries it below 760 */

  .hero { padding: 44px 0 80px; }
  .band { padding: 44px 0; }
  .grid--2, .grid--3, .why, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
  .centerpiece { margin-top: -32px; }
  .router { padding: 22px 18px 18px; }
  .force-panel, .card, .subitem, .step, .grade-card { padding-left: 18px; padding-right: 18px; }
  details.faq .answer { padding-left: 22px; }

  .call-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--indigo); border-top: 3px dashed var(--turq);
    padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px;
  }
  .call-bar .label { color: var(--on-dark-2); font-size: .82rem; line-height: 1.3; }
  .call-bar .label strong { color: #fff; display: block; font-size: .96rem; }
  .call-bar a {
    background: var(--turq); color: var(--indigo-deep); text-decoration: none;
    font-family: var(--f-head); font-weight: 600; font-size: 1.08rem;
    padding: 10px 20px; border-radius: var(--pill); white-space: nowrap;
  }
}
@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .router-field { min-width: 100%; }
  .force-tab { width: 100%; }
}

/* ---- print ------------------------------------------------------------ */
@media print {
  .site-header, .call-bar, .cta-band, .router-controls, .force-controls { display: none !important; }
  .force-panel[hidden] { display: block !important; }
  body { padding-bottom: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}