/* =========================================================
   Charlotte Commercial Door Repair — "Louver Plate"
   Plain CSS. No build step, no framework, no webfont request.

   DESIGN BRIEF — this property must not read as a sibling of
   the operator's three Charlotte locksmith sites:

     emergencylocksmithcharlottenc.com
       royal blue #1a56db, Georgia serif headings, 10px
       rounded cards, full-bleed photo hero, centred bands.
     charlottencemergencylocksmith.com
       charcoal #14161a + hi-vis amber, heavy uppercase sans,
       square corners, mono numerals, dispatch-board layout.
     emergencylocksmithscharlottenc.com
       copper #9a3412 on warm stone, slab serif, 4px corners,
       sticky section rail, checklist hero card.

   This one: deep navy #123A63 with amber #F2A93B pulled
   straight from the logo mark, on a cool paper. Sans
   headings at heavy weight with negative tracking and NO
   uppercase above label size. 3px corners on surfaces but
   fully pill buttons. Signature motif is the logo's stacked
   louver bars, reused as section markers, band texture, and
   card headers. Layout is asymmetric split hero + spec strip
   + left-numbered section rails, not centred card grids.

   CONVERSION MODEL — phone calls only. There is not one
   form element anywhere in this stylesheet or this site.
   Every CTA resolves to a tel: link, and a persistent call
   bar is pinned to the bottom of the viewport on mobile.
   ========================================================= */

:root {
  /* navy — from the logo tile */
  --navy-900: #0A2340;   /* deepest: hero panel, footer, CTA band */
  --navy-800: #0E2E51;   /* raised panel inside navy */
  --navy-700: #123A63;   /* logo navy: headings on paper, rules */
  --navy-600: #1A5289;   /* links, hover */
  --navy-line: #1E436B;  /* hairline on navy */

  /* amber — from the logo's accent bar */
  --amber:     #F2A93B;
  --amber-600: #D28C1B;  /* pressed, and amber text on white */
  --amber-100: #FDF2DE;  /* soft callout fill */
  --amber-200: #F7DEB1;  /* callout edge */

  /* paper + ink */
  --paper:     #FFFFFF;
  --cool:      #EFF4F9;  /* tinted band */
  --cool-deep: #E3ECF4;  /* second tint */
  --rule:      #D7E2ED;
  --rule-soft: #E9F0F6;

  --ink:       #14202C;  /* headings */
  --body:      #45586C;  /* paragraphs */
  --muted:     #78899B;  /* captions, meta */

  --max:   1180px;
  --r:     3px;          /* surfaces */
  --pill:  999px;        /* buttons */

  --f: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
       'Helvetica Neue', Arial, sans-serif;

  --shadow: 0 1px 2px rgba(10,35,64,.05), 0 8px 24px rgba(10,35,64,.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 22px; }
.wrap--narrow { max-width: 860px; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--f);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.021em;
  font-weight: 800;
}
h1 { font-size: clamp(2.05rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.62rem, 3.1vw, 2.32rem); margin-bottom: .55em; }
h3 { font-size: 1.19rem; font-weight: 750; letter-spacing: -.012em; margin-bottom: .3em; }
h4 { font-size: 1.02rem; font-weight: 750; letter-spacing: -.008em; }

p { margin-bottom: 1.05rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: var(--ink); font-weight: 700; }

.lead { font-size: 1.12rem; color: var(--body); max-width: 62ch; }
.muted { color: var(--muted); font-size: .89rem; }

/* label — the ONLY place uppercase is allowed */
.label {
  display: block; margin-bottom: 7px;
  font-size: .705rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-600);
}
.on-navy .label, .navy .label { color: var(--amber); }

/* ---------- louver motif (the logo's stacked bars) ---------- */
.louver { display: block; width: 38px; margin-bottom: 14px; }
.louver i {
  display: block; height: 3px; border-radius: 2px;
  background: var(--navy-700); margin-bottom: 4px;
}
.louver i:nth-child(2) { opacity: .55; }
.louver i:nth-child(3) { width: 60%; background: var(--amber); margin-bottom: 0; }
/* every dark surface in the site, so the top two bars never
   end up navy-on-navy and invisible */
.on-navy .louver i,
.band--navy .louver i,
.ctaband .louver i,
.callpanel .louver i,
.pagehead .louver i,
.hero .louver i { background: #fff; }

.on-navy .louver i:nth-child(2),
.band--navy .louver i:nth-child(2),
.ctaband .louver i:nth-child(2),
.callpanel .louver i:nth-child(2),
.pagehead .louver i:nth-child(2),
.hero .louver i:nth-child(2) { opacity: .45; }

.on-navy .louver i:nth-child(3),
.band--navy .louver i:nth-child(3),
.ctaband .louver i:nth-child(3),
.callpanel .louver i:nth-child(3),
.pagehead .louver i:nth-child(3),
.hero .louver i:nth-child(3) { background: var(--amber); opacity: 1; }

.band--navy .label, .ctaband .label, .callpanel .label, .pagehead .label { color: var(--amber); }

/* louver texture used behind navy panels */
.louvered { position: relative; overflow: hidden; }
.louvered::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    180deg, rgba(255,255,255,.055) 0 2px, transparent 2px 16px);
  pointer-events: none;
}
.louvered > * { position: relative; z-index: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--amber); color: var(--navy-900);
  padding: 14px 27px; border-radius: var(--pill);
  font-weight: 750; font-size: 1rem; letter-spacing: -.008em;
  border: 2px solid var(--amber);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--amber-600); border-color: var(--amber-600); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 17px 34px; font-size: 1.08rem; }

.btn--outline { background: transparent; color: var(--navy-700); border-color: var(--rule); }
.btn--outline:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
/* every dark surface, or the outline button renders navy
   text on a navy background and effectively disappears */
.on-navy .btn--outline,
.band--navy .btn--outline,
.ctaband .btn--outline,
.callpanel .btn--outline,
.pagehead .btn--outline,
.hero .btn--outline {
  color: #fff; border-color: rgba(255,255,255,.45); background: transparent;
}
.on-navy .btn--outline:hover,
.band--navy .btn--outline:hover,
.ctaband .btn--outline:hover,
.callpanel .btn--outline:hover,
.pagehead .btn--outline:hover,
.hero .btn--outline:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-top: 22px; }

/* phone glyph — scales with whatever it sits inside, so it
   works in a 15px nav pill and a 32px display number alike.
   Without an explicit size an inline SVG expands to fill its
   container, which is how it once ate a whole call panel. */
.ico { width: 1em; height: 1em; flex: none; }
.btn .ico { width: 17px; height: 17px; }
.btn--lg .ico { width: 19px; height: 19px; }

/* .wc-phone is a stable hook for dynamic number insertion */
.wc-phone { font-weight: 750; }

/* ---------- top call bar ---------- */
.topbar {
  background: var(--navy-900); color: rgba(255,255,255,.74);
  font-size: .82rem; line-height: 1.4;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 8px;
}
.topbar__note { display: flex; align-items: center; gap: 9px; }
.topbar__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none;
}
.topbar a { color: #fff; font-weight: 750; }
.topbar a:hover { color: var(--amber); text-decoration: none; }
@media (max-width: 720px) { .topbar__note { display: none; } .topbar .wrap { justify-content: center; } }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 11px;
}
.brand { flex: none; }
/* the wordmark carries a lot of small type, so it needs more
   height than a typical logo before the strapline is legible */
.brand img { height: 58px; width: auto; }
@media (max-width: 1080px) { .brand img { height: 50px; } }
@media (max-width: 480px)  { .brand img { height: 42px; } }

.nav { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav > li { position: relative; }
.nav a {
  color: var(--ink); font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
  padding-block: 6px; display: inline-block;
}
.nav a:hover { color: var(--navy-600); text-decoration: none; }
.nav .is-current > a { color: var(--navy-600); }
.nav .is-current > a::after {
  content: ""; display: block; height: 2px; background: var(--amber);
  border-radius: 2px; margin-top: 3px;
}

.nav .caret { margin-left: 5px; font-size: .62rem; color: var(--muted); }

.submenu {
  display: none; position: absolute; top: calc(100% + 11px); left: -14px;
  background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--amber);
  border-radius: var(--r); min-width: 274px; padding: 7px 0;
  box-shadow: var(--shadow); list-style: none;
}
/* hover bridge so the pointer can travel into the submenu */
.has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 13px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { display: block; }
.submenu a { display: block; padding: 10px 18px; font-size: .91rem; font-weight: 600; }
.submenu a:hover { background: var(--cool); color: var(--navy-600); }

.nav__call {
  background: var(--amber); color: var(--navy-900) !important;
  padding: 11px 21px !important; border-radius: var(--pill);
  font-weight: 800 !important; font-size: .97rem !important;
  display: inline-flex !important; align-items: center; gap: 8px;
  white-space: nowrap;   /* the number must never break across lines */
}
.nav__call:hover { background: var(--amber-600); color: #fff !important; text-decoration: none; }
.nav__call::after { display: none !important; }

.burger {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--r); width: 44px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.burger span { display: block; width: 19px; height: 2px; background: var(--navy-700); border-radius: 2px; }

@media (max-width: 960px) {
  .burger { display: flex; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 8px 22px 18px; box-shadow: var(--shadow);
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav > li { border-bottom: 1px solid var(--rule-soft); }
  .nav > li:last-child { border-bottom: 0; padding-top: 14px; }
  .nav a { padding: 12px 0; width: 100%; }
  .nav .is-current > a::after { display: none; }
  .submenu {
    display: block; position: static; border: 0; box-shadow: none;
    padding: 0 0 8px 15px; min-width: 0; border-left: 2px solid var(--amber);
    margin: 0 0 10px;
  }
  .submenu a { padding: 8px 0; color: var(--body); }
  .submenu a:hover { background: none; }
  .has-sub::after { display: none; }
  .nav__call { justify-content: center; }
}

/* ---------- hero: asymmetric split ---------- */
.hero { background: var(--navy-900); color: #fff; }
.hero__grid {
  display: grid; grid-template-columns: 1.04fr .96fr; align-items: stretch;
  max-width: var(--max); margin-inline: auto;
}
.hero__copy { padding: 74px 46px 74px 22px; align-self: center; }
.hero h1 { color: #fff; margin: 13px 0 18px; max-width: 15ch; }
.hero p { color: rgba(255,255,255,.8); font-size: 1.14rem; max-width: 46ch; }
.hero__media { position: relative; min-height: 430px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* amber corner rule — the signature the sibling sites don't have */
.hero__media::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--amber); z-index: 2;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding: 52px 22px 46px; }
  .hero__media { min-height: 280px; order: -1; }
  .hero__media::after { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 5px; }
}

/* hero variant for interior pages — no photo, louvered navy */
.pagehead { background: var(--navy-900); color: #fff; }
.pagehead .wrap { padding-block: 58px 54px; }
.pagehead h1 { color: #fff; margin: 12px 0 16px; max-width: 22ch; }
.pagehead p { color: rgba(255,255,255,.8); max-width: 62ch; font-size: 1.08rem; }

/* breadcrumb */
.crumbs { font-size: .81rem; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.crumbs a { color: rgba(255,255,255,.78); }
.crumbs a:hover { color: var(--amber); text-decoration: none; }
.crumbs li + li::before { content: "/"; margin-right: 7px; color: rgba(255,255,255,.35); }

/* ---------- spec strip ---------- */
.specstrip { background: var(--navy-800); border-top: 1px solid var(--navy-line); }
.specstrip ul {
  display: grid; grid-template-columns: repeat(4, 1fr); list-style: none;
  max-width: var(--max); margin-inline: auto;
}
.specstrip li {
  padding: 22px 24px; border-left: 1px solid var(--navy-line);
}
.specstrip li:first-child { border-left: 0; padding-left: 22px; }
.specstrip dt {
  font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 5px;
}
.specstrip dd { color: #fff; font-weight: 700; font-size: 1.01rem; letter-spacing: -.01em; line-height: 1.35; }
@media (max-width: 820px) {
  .specstrip ul { grid-template-columns: 1fr 1fr; }
  .specstrip li:nth-child(odd) { border-left: 0; padding-left: 22px; }
  .specstrip li:nth-child(n+3) { border-top: 1px solid var(--navy-line); }
}
@media (max-width: 460px) {
  .specstrip ul { grid-template-columns: 1fr; }
  .specstrip li { border-left: 0; padding-left: 22px; }
  .specstrip li + li { border-top: 1px solid var(--navy-line); }
}

/* ---------- bands ---------- */
.band { padding-block: 68px; }
.band--tight { padding-block: 50px; }
.band--cool { background: var(--cool); }
.band--navy { background: var(--navy-900); color: rgba(255,255,255,.8); }
.band--navy h2, .band--navy h3, .band--navy h4 { color: #fff; }
.band--navy a { color: var(--amber); }

.secthead { margin-bottom: 30px; max-width: 68ch; }
.secthead h2 { margin-top: 4px; }
.secthead p { color: var(--body); font-size: 1.06rem; }
.band--navy .secthead p { color: rgba(255,255,255,.78); }

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.15rem; }

/* two-column split with figure */
.split {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center;
}
.split--flip .split__media { order: -1; }
/* panels of differing height look wrong centred — the call
   panel and the list beside it should share a top edge */
.split--top { align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } .split--flip .split__media { order: 0; } }

/* framed figure — offset amber plate behind the photo */
.figure { position: relative; }
.figure img { border-radius: var(--r); position: relative; z-index: 1; width: 100%; }
.figure::before {
  content: ""; position: absolute; left: -14px; bottom: -14px; width: 62%; height: 62%;
  border-left: 6px solid var(--amber); border-bottom: 6px solid var(--amber);
  border-bottom-left-radius: var(--r); z-index: 0;
}
.figure figcaption { margin-top: 14px; font-size: .85rem; color: var(--muted); }
@media (max-width: 880px) { .figure::before { left: -8px; bottom: -8px; } }

/* ---------- cards ---------- */
.cards { display: grid; gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards--2, .cards--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 25px 24px 24px; position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 46px; height: 3px;
  background: var(--amber); border-radius: var(--r) 0 0 0;
}
.card:hover { border-color: var(--rule); box-shadow: var(--shadow); }
.card p { font-size: .96rem; }
.card__more { display: inline-block; margin-top: 13px; font-weight: 700; font-size: .92rem; }
.card__more::after { content: " \2192"; }

/* service card with a small mark */
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; border-color: var(--navy-600); }
a.card h3 { color: var(--navy-700); }

/* ---------- spec list: bordered rows, numbered ---------- */
.speclist { border-top: 1px solid var(--rule); }
.speclist > li {
  list-style: none; display: grid; grid-template-columns: 62px 1fr;
  gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.speclist .n {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--amber-600);
  padding-top: 3px;
}
.speclist h3 { margin-bottom: .25em; }
.speclist p { font-size: .97rem; }
@media (max-width: 560px) {
  .speclist > li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- numbered process ---------- */
.steps { counter-reset: s; display: grid; gap: 2px; }
.steps > li {
  list-style: none; counter-increment: s;
  display: grid; grid-template-columns: 78px 1fr; gap: 22px;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
  position: relative;
}
.steps > li:first-child { border-top: 1px solid var(--rule); }
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px var(--navy-600);
  letter-spacing: -.03em;
}
.band--navy .steps > li { border-color: var(--navy-line); }
.band--navy .steps > li::before { -webkit-text-stroke-color: var(--amber); }
@media (max-width: 560px) {
  .steps > li { grid-template-columns: 54px 1fr; gap: 14px; }
  .steps > li::before { font-size: 1.6rem; }
}

/* ---------- checklist ---------- */
.checklist { list-style: none; display: grid; gap: 11px; }
.checklist li { position: relative; padding-left: 30px; font-size: .99rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 13px; height: 7px; border-left: 2.5px solid var(--amber);
  border-bottom: 2.5px solid var(--amber); transform: rotate(-45deg);
}
.band--navy .checklist li { color: rgba(255,255,255,.85); }

/* plain bullets inside legal / prose blocks */
.bullets { list-style: none; display: grid; gap: 9px; margin: 4px 0 1.15rem; }
.bullets li { position: relative; padding-left: 21px; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; background: var(--amber); border-radius: 2px;
}

/* ---------- callout ---------- */
.callout {
  background: var(--amber-100); border: 1px solid var(--amber-200);
  border-left: 4px solid var(--amber); border-radius: var(--r);
  padding: 20px 22px; margin: 26px 0;
}
.callout p { font-size: .97rem; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- call panel (replaces the lead form) ---------- */
.callpanel {
  background: var(--navy-900); color: rgba(255,255,255,.82);
  border-radius: var(--r); padding: 34px 32px; position: relative; overflow: hidden;
}
.callpanel h2, .callpanel h3 { color: #fff; }
.callpanel .bignum {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: clamp(1.55rem, 3.4vw, 2.05rem); font-weight: 800; letter-spacing: -.02em;
  color: #fff; margin: 6px 0 4px; white-space: nowrap;
}
.callpanel .bignum:hover { color: var(--amber); text-decoration: none; }
.callpanel hr { border: 0; border-top: 1px solid var(--navy-line); margin: 24px 0; }
.callpanel .checklist li { color: rgba(255,255,255,.85); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; background: var(--paper); min-width: 560px; }
thead th {
  background: var(--navy-700); color: #fff; text-align: left;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 18px;
}
tbody td { padding: 15px 18px; border-top: 1px solid var(--rule); font-size: .95rem; vertical-align: top; }
tbody tr:nth-child(even) td { background: #FAFCFE; }
tbody td:first-child { font-weight: 700; color: var(--ink); }
.table-note { font-size: .92rem; color: var(--muted); margin-top: 14px; max-width: 68ch; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 11px; max-width: 860px; }
.faq details {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 0 22px;
}
.faq details[open] { border-color: var(--navy-600); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 34px 17px 0;
  font-weight: 700; font-size: 1.03rem; color: var(--ink); position: relative;
  letter-spacing: -.011em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 2px; background: var(--amber-600); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.faq summary::after { top: calc(50% - 1px); width: 13px; height: 2px; }
.faq summary::before { top: calc(50% - 7px); right: 7.5px; width: 2px; height: 14px; }
.faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.faq .answer { padding: 0 0 19px; }
.faq .answer p { font-size: .98rem; }

/* ---------- link grids ---------- */
.linkgrid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .linkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .linkgrid { grid-template-columns: 1fr; } }
.linkgrid a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); color: var(--ink); font-weight: 700; font-size: .96rem;
  transition: border-color .15s ease, color .15s ease;
}
.linkgrid a::after { content: "\2192"; color: var(--amber-600); font-weight: 700; }
.linkgrid a:hover { border-color: var(--navy-600); color: var(--navy-600); text-decoration: none; }

/* ---------- team ---------- */
.team { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }
.person {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px 24px;
  border-top: 3px solid var(--navy-700);
}
.person .role { color: var(--amber-600); font-weight: 750; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 11px; }
.person p { font-size: .96rem; }

/* ---------- CTA band ---------- */
.ctaband { background: var(--navy-900); color: rgba(255,255,255,.82); padding-block: 62px; }
.ctaband h2 { color: #fff; max-width: 20ch; }
.ctaband .inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: center; }
.ctaband p { font-size: 1.05rem; }
.ctaband .callbox { text-align: left; }
.ctaband .bignum {
  display: inline-flex; align-items: center; gap: 11px; color: #fff;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem); font-weight: 800; letter-spacing: -.02em;
}
.ctaband .bignum:hover { color: var(--amber); text-decoration: none; }
@media (max-width: 860px) { .ctaband .inner { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- footer ---------- */
.footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding: 58px 0 26px; font-size: .93rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.05fr; gap: 40px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 {
  color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 15px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: var(--amber); text-decoration: none; }
.footer__logo img { height: 54px; width: auto; margin-bottom: 16px; }
.footer__phone {
  display: inline-flex; align-items: center; gap: 9px; color: #fff !important;
  font-size: 1.24rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px;
}
.footer__phone:hover { color: var(--amber) !important; }
.fineprint { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.55; margin-top: 13px; }
.footer__bottom {
  border-top: 1px solid var(--navy-line); margin-top: 42px; padding-top: 20px;
  font-size: .82rem; color: rgba(255,255,255,.45);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}

/* ---------- sticky mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--navy-900); border-top: 3px solid var(--amber);
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--amber); color: var(--navy-900); font-weight: 800; font-size: 1.06rem;
    padding: 13px; border-radius: var(--pill); letter-spacing: -.01em;
  }
  .callbar a:hover { text-decoration: none; }
  body { padding-bottom: 78px; }
}

/* ---------- misc ---------- */
.center { text-align: center; }
.center .secthead, .center .lead { margin-inline: auto; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: 40px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--navy-900); padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}