/* EZ Locksmith — single stylesheet. No framework, no @import. */

:root {
  /* Brand navy, lightened. The old #16223f read as flat black on most
     screens and was unreadable as "blue" in daylight. These stay well
     inside AA contrast for white text. */
  --navy: #1e3160;
  --navy-2: #2b437c;
  --navy-line: #43598f;
  --red: #c8331f;
  --red-dark: #a82a19;
  --paper: #ffffff;
  --wash: #dfe7f3;
  --wash-2: #f4f7fb;
  --ink: #16223f;
  --muted: #5d6a83;
  --line: #d9e0ec;

  --f-display: "Libre Baskerville", Georgia, serif;
  --f-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --wrap: 72rem;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --radius: 8px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--f-display);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: 1.05rem; }
p { margin: 0; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

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

.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(--red); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  min-height: 44px;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- header / mega menu ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Navy utility strip. Gives the header weight, and carries the 24/7 and
   coverage lines as real text near the top of the document. */
.utility {
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
}
.utility-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .5rem var(--pad);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  align-items: center;
}
.utility a { text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
.utility a:hover { border-bottom-color: #fff; }
.utility li:first-child { font-weight: 500; color: #fff; }
.utility li + li { position: relative; }
.utility li + li::before {
  content: "";
  position: absolute;
  left: -.9rem;
  top: .35em;
  bottom: .35em;
  width: 1px;
  background: rgba(255, 255, 255, .28);
}
@media (max-width: 640px) {
  .utility .hide-sm { display: none; }
  .utility li + li::before { display: none; }
  .utility-inner { justify-content: center; }
}

.bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .5rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The logo file already contains the logotype — no wordmark beside it. */
.brand { flex-shrink: 0; display: block; text-decoration: none; }
.brand img { width: 56px; height: 56px; }
.foot-brand .brand { display: inline-block; }

.call-btn {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.drawer-toggle {
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bars, .bars::before, .bars::after {
  display: block; width: 20px; height: 2px; background: var(--ink);
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }

.nav-list { list-style: none; margin: 0; padding: 0; }

.trigger {
  display: flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  color: inherit;
  background: none;
  border: 0;
  padding: .85rem 0;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* Chevron on the three triggers that open a panel. Drawn in CSS so it
   inherits colour and needs no icon file. Flips when the panel opens. */
.has-panel > .trigger::after {
  content: "";
  width: .4em;
  height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  opacity: .55;
  flex-shrink: 0;
}
.has-panel > .trigger::after { margin-left: auto; }

.has-panel:hover > .trigger::after,
.has-panel:focus-within > .trigger::after {
  transform: translateY(.1em) rotate(-135deg);
  opacity: 1;
}

.panel-inner { display: grid; gap: var(--gap); }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.link-list a { text-decoration: none; display: block; padding: .45rem 0; font-size: .92rem; }
.link-list a:hover { color: var(--red); }
.link-list.rich li { padding: .3rem 0; }
.link-list .blurb { display: block; font-size: .78rem; color: var(--muted); line-height: 1.4; }

.group-h, .need-q {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
  font-weight: 600;
}
.need-q {
  font-family: var(--f-display);
  font-size: .98rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

/* ---- locations panel: cities, with their neighbourhoods nested ---- */
.city-cols { display: grid; gap: var(--gap); margin-top: .25rem; }
.city-block { min-width: 0; }

.city-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  display: inline-block;
  padding-bottom: .5rem;
}
.city-name:hover { color: var(--red); }

/* The left rule is the signal: anything indented under it is inside that
   city, not a city of its own. */
.area-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 .85rem;
  border-left: 2px solid var(--line);
  display: grid;
  gap: .1rem;
}
.area-list a {
  display: block;
  padding: .3rem 0;
  font-size: .86rem;
  color: var(--muted);
  text-decoration: none;
}
.area-list a:hover { color: var(--red); }
.area-none {
  padding-left: .85rem;
  border-left: 2px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

/* Small label inside a card, above a nested list */
.card-label {
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: .35rem 0 -.35rem;
}
.card .area-list { margin-bottom: .25rem; }

.also-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.also-list {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}
.also-list a {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
}
.also-list a:hover { border-color: var(--red); color: var(--red); }

.panel-foot { font-size: .85rem; color: var(--muted); margin-top: 1rem; }
.tel { font-weight: 600; color: var(--red); text-decoration: none; }

/* mobile: drawer, panels always expanded in flow */
@media (max-width: 899px) {
  .call-btn { display: none; }
  .nav {
    display: none;
    width: 100%;
    order: 3;
    border-top: 1px solid var(--line);
    padding-bottom: 1rem;
    max-height: 75vh;
    overflow-y: auto;
  }
  .bar { flex-wrap: wrap; }
  .nav[data-open="true"] { display: block; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .panel { padding: 0 0 1rem; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}

/* desktop: hover / focus-within panels, zero JS */
@media (min-width: 900px) {
  .drawer-toggle { display: none; }

  .site-header { position: sticky; top: 0; z-index: 50; }
  .brand img { width: 72px; height: 72px; }

  /* Nav takes the free space and centres in it, so the gap is shared
     evenly either side instead of pooling before the call button. */
  .nav { display: flex; flex: 1; justify-content: center; align-self: stretch; }

  /* Every menu item runs the FULL height of the bar, so its bottom edge
     touches the top of its panel. Previously items were ~40px tall and
     centred in an 88px bar, leaving a 23px dead strip where the pointer
     was over neither item nor panel — and the panel closed. Vertical
     padding moves from the bar onto the logo so the bar keeps its height. */
  .bar { padding-block: 0; align-items: stretch; }
  .brand { align-self: center; padding-block: .5rem; }
  .call-btn { align-self: center; }
  .nav-list { display: flex; gap: clamp(1rem, 2.2vw, 1.75rem); align-items: stretch; }
  .nav-list > li { position: static; display: flex; align-items: center; }
  .has-panel { position: static; }
  .site-header .bar { position: relative; }

  .panel {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 24px 48px -20px rgba(30, 49, 96, .45);
    padding: 1.75rem var(--pad) 1.9rem;
    z-index: 40;
    visibility: hidden;
    opacity: 0;
  }
  .has-panel:hover > .panel,
  .has-panel:focus-within > .panel { visibility: visible; opacity: 1; z-index: 41; }

  /* Grace period: when the pointer leaves, a panel waits 200ms before it
     hides, so a diagonal move toward a link doesn't close it mid-journey.
     Opening stays instant. This is functional, not decorative, so it
     applies under reduced motion too. The open panel sits one layer higher
     (z-index 41) so a panel still in its grace period can never cover the
     one the pointer has just moved to. */
  .panel { transition: visibility 0s linear .2s; }
  .has-panel:hover > .panel,
  .has-panel:focus-within > .panel { transition-delay: 0s; }

  /* Keep the caret on the trigger itself rather than pushed to the far right */
  .has-panel > .trigger::after { margin-left: 0; }

  /* Red rule that wipes in under the label on hover, keyboard focus, and
     while its panel is open. This is the piece that makes the bar read as
     designed rather than as a row of plain links. */
  .trigger { position: relative; }
  .trigger::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.65rem;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left center;
  }
  .nav-list > li:hover > .trigger::before,
  .nav-list > li:focus-within > .trigger::before { transform: scaleX(1); }

  .nav-list > li > .trigger[aria-current="page"]::before { transform: scaleX(1); }

  @media (prefers-reduced-motion: no-preference) {
    .trigger::before { transition: transform .18s ease; }
  }

  .cols-2 { grid-template-columns: 1fr 1.15fr; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .link-list.grid-2 { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; }
  .link-list.grid-3 { grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; }
  .city-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trigger { padding: .5rem 0; width: auto; }
}

/* ---------- sections ---------- */
main > section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad);
}
main > section > .lede,
main > section > h2 + p { max-width: 62ch; color: var(--muted); margin-top: .75rem; }

.eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem;
}

/* Full-bleed navy band; the grid inside is what stays constrained. */
.hero {
  background: var(--navy);
  color: #fff;
  max-width: none;
  padding: 0;
}
.hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 4.5rem) var(--pad);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.hero .eyebrow, .hero .lede { color: rgba(255, 255, 255, .74); }
.hero .lede { margin-top: 1.25rem; max-width: 50ch; }

/* Pill eyebrow, as in the design */
.hero .eyebrow {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: .4rem .9rem;
  margin-bottom: 1.5rem;
  font-size: .68rem;
}

.hero-img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.stats dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.stats dd { margin: .3rem 0 0; font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }

/* City heroes have no image — keep the copy readable rather than full width. */
.hero-city .hero-copy { max-width: 46rem; }

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  /* copy left, image right, stats under the copy only */
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-img  { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; height: 100%; aspect-ratio: auto; min-height: 26rem; }
  .stats     { grid-column: 1; grid-row: 2; align-self: end; }
}

.card-grid {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  background: var(--paper);
}
/* Service cards sit on a faint navy-tinted wash so white cards read as
   raised objects rather than outlined boxes. */
.services { background: var(--wash-2); max-width: none; }
.services > * { max-width: var(--wrap); margin-inline: auto; }

.card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  box-shadow:
    0 1px 2px rgba(30, 49, 96, .05),
    0 10px 24px -16px rgba(30, 49, 96, .30);
}

/* :focus-within so keyboard users get the same cue as the mouse */
.card:hover,
.card:focus-within {
  border-color: #c3cfe4;
  box-shadow:
    0 2px 4px rgba(30, 49, 96, .07),
    0 18px 34px -18px rgba(30, 49, 96, .42);
  transform: translateY(-2px);
}
.card:hover h3 a,
.card:focus-within h3 a { color: var(--red); }

@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
}
.card h3 { font-size: 1.2rem; margin: 0; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--red); }
.card p { font-size: .9rem; color: var(--muted); margin: 0; }

/* Checklist inside a service card */
.ticks { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .45rem; }
.ticks li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9rem;
  line-height: 1.4;
}
.ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-weight: 600;
}
.ticks a { text-decoration: none; }
.ticks a:hover { color: var(--red); text-decoration: underline; }

.why { background: var(--wash); max-width: none; }
.why > * { max-width: var(--wrap); margin-inline: auto; }
.why-grid {
  list-style: none; padding: 0; margin: 2rem auto 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.why-grid li { background: var(--paper); padding: 1.3rem; }
.why-grid p { font-size: .86rem; color: var(--muted); margin-top: .4rem; }

.also { margin-top: 1.5rem; font-size: .9rem; color: var(--muted); }
.also a { color: var(--ink); }

.quick-answer { background: var(--wash-2); max-width: none; }
.quick-answer > * { max-width: var(--wrap); margin-inline: auto; }
.quick-answer p { max-width: 62ch; margin-top: .75rem; }

.longform :is(p, ul, ol) { max-width: 65ch; margin-top: 1rem; }
.longform .todo {
  border-left: 3px solid var(--red);
  background: var(--wash-2);
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: .9rem;
}

.crumbs { max-width: var(--wrap); margin: 0 auto; padding: 1rem var(--pad) 0; font-size: .82rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: .5rem; }

.pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; padding: 0; }
.pill-list a {
  display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1rem; font-size: .88rem; text-decoration: none;
}
.pill-list a:hover { border-color: var(--red); color: var(--red); }

/* ---------- service pages ---------- */

/* "At a glance" card fills the hero's right column where city pages
   would otherwise leave it empty. */
.hero-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.hero-card-h {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  font-weight: 600;
  margin-bottom: .4rem;
}
.hero-card dl { margin: 0; }
.hero-card dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-card dl > div:first-child { border-top: 0; }
.hero-card dt { color: rgba(255, 255, 255, .72); font-size: .88rem; }
.hero-card dd { margin: 0; font-weight: 600; text-align: right; }
.hero-note { font-size: .86rem; color: rgba(255, 255, 255, .62); margin-top: 1rem; max-width: 48ch; }
.hero-note a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 2px; }
.hero-note a:hover { text-decoration-color: #fff; }
.hero-service .lede + .lede { margin-top: .9rem; }

@media (min-width: 900px) {
  .hero-card { grid-column: 2; grid-row: 1; align-self: center; }
}

/* Related link at the foot of a card */
.card-link { margin-top: auto; padding-top: .25rem; font-size: .88rem; }
.card-link a { color: var(--red); font-weight: 500; text-decoration: none; }
.card-link a:hover { text-decoration: underline; }

/* How it works — a real sequence, so the numbers carry meaning */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.steps li { counter-increment: step; position: relative; padding-top: 3.4rem; }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.steps h3 { margin-bottom: .45rem; font-size: 1.1rem; }
.steps p { font-size: .92rem; color: var(--muted); }

/* Price table */
.tablewrap {
  overflow-x: auto;
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 46rem;
}
.price-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.price-table th,
.price-table td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.price-table thead th {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: var(--wash-2);
}
.price-table tbody th { font-weight: 500; }
.price-table td,
.price-table thead th:last-child { text-align: right; }
.price-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table tr:last-child > * { border-bottom: 0; }
.note-text { font-size: .88rem; color: var(--muted); margin-top: 1rem; max-width: 60ch; }

/* Single "from" price, used until per-item ranges exist */
.price-from { display: flex; align-items: baseline; gap: .6rem; margin: 1.25rem 0 .25rem; }
.price-from .from {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.price-from .amount {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Small uppercase label above a pill list */
.list-label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 1.75rem;
}
.list-label + .pill-list { margin-top: .6rem; }

/* Owner-input markers. Preview only — build.php warns while any remain,
   so these never reach a live page. Deliberately loud. */
mark.owner {
  background: #fff1bf;
  color: #5c4100;
  border: 1px dashed #c99612;
  border-radius: 4px;
  padding: .05em .4em;
  font-size: .82em;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
}

/* ---------- faq ---------- */
.faq { background: var(--wash); max-width: none; }
.faq > * { max-width: 52rem; margin-inline: auto; }
.faq-list { margin-top: 1.75rem; display: grid; gap: .5rem; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary {
  cursor: pointer; padding: 1rem 1.25rem; font-weight: 500; font-size: .95rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  min-height: 44px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 1.25rem 1.25rem; }
.faq .answer p { font-size: .9rem; color: var(--muted); max-width: 60ch; }

/* ---------- cta ---------- */
.cta { background: var(--navy); color: #fff; max-width: none; text-align: center; }
.cta > * { max-width: 44rem; margin-inline: auto; }
.cta p { color: rgba(255,255,255,.75); margin-top: .75rem; }
.cta .actions { justify-content: center; }
.fine { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: 1.25rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.72); padding: clamp(2.5rem, 5vw, 4rem) var(--pad) 2rem; }
.foot-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot-brand p { font-size: .85rem; margin-top: 1rem; max-width: 34ch; }
.foot-col h2 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--f-sans); color: rgba(255,255,255,.5); }
.foot-col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.foot-col a { text-decoration: none; font-size: .88rem; }
.foot-col a:hover { color: #fff; }
.foot-col .fine { color: rgba(255,255,255,.45); }
.copyright { max-width: var(--wrap); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .78rem; }

@media (prefers-reduced-motion: no-preference) {
  /* Adds the fade on top of the 200ms close delay set in the desktop block.
     Both properties are listed so this rule can't silently drop the delay. */
  .panel { transition: opacity .12s ease, visibility 0s linear .2s; }
  .has-panel:hover > .panel,
  .has-panel:focus-within > .panel { transition: opacity .12s ease, visibility 0s linear 0s; }
  .btn, .link-list a { transition: background-color .12s ease, color .12s ease; }
}