/* Mobile City Tax Services and Wireless. Homepage draft, 2026-09-19.
   Direction: a strip-mall storefront window. Sun yellow awning, navy glass,
   service names set like vinyl window lettering, each with its flyer colour.
   Flat, bold sans, square-ish corners. Deliberately not the agency house look
   (no cream paper, no serif display, no soft shadow cards). */

:root {
  --navy: #0e1f47;
  --navy-2: #182d63;
  --sun: #ffc629;
  --sun-deep: #f0b000;
  --sky: #5bb8f0;
  --sky-wash: #eaf5fd;
  --white: #ffffff;
  --ink: #0b1530;
  --muted: #4a5674;
  --line: #d5dcea;

  /* Service colours, taken from the flyer tiles */
  --c-wireless: #1f6feb;
  --c-repair: #0b7d73;
  --c-unlock: #e08a00;
  --c-tax: #0e1f47;
  --c-livescan: #6d3fc4;
  --c-dmv: #1b8439;
  --c-immigration: #d23b2e;

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --bar-h: 64px;
  --top-h: 60px; /* sticky header height, keeps in-page anchors clear of it */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  padding-bottom: var(--bar-h);
}
img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--c-wireless); outline-offset: 3px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 100; }

/* Draft ribbon. Delete before launch. */
.draft {
  background: var(--ink); color: var(--sun);
  font-size: 0.8125rem; text-align: center; padding: 6px 16px;
}

/* Header: pinned to the top on every page and width. Solid background and a z-index
   above page content, below the bottom bar (50) and the skip link (100). */
.top { background: var(--navy); color: var(--white); position: sticky; top: 0; z-index: 40; }
.top-in { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; }
.mark svg { width: 34px; height: 34px; flex: none; }
.mark-name { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1; }
.mark-sub { display: block; font-family: var(--body); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); margin-top: 3px; }
.nav { display: none; gap: 22px; font-size: 0.9375rem; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--sun); }
.lang { display: flex; border: 1px solid rgba(255,255,255,0.35); }
.lang a, .lang span { padding: 5px 9px; font-size: 0.8125rem; font-weight: 700; text-decoration: none; }
.lang [aria-current] { background: var(--sun); color: var(--navy); }

/* Hero: the awning and the window */
.hero { background: var(--sun); position: relative; }
.hero::after { /* scalloped awning edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  background: radial-gradient(circle at 14px 0, var(--sun) 14px, transparent 14.5px) 0 0 / 28px 14px repeat-x;
  z-index: 2;
}
.hero-in { display: grid; gap: 28px; padding: 36px 0 44px; }
.hero-in > * { min-width: 0; }
.open-sign {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white);
  font-weight: 700; font-size: 0.875rem; padding: 6px 12px; margin-bottom: 18px;
}
.open-sign i { width: 10px; height: 10px; border-radius: 50%; background: #9aa6c2; flex: none; }
.open-sign.is-open i { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,0.25); }
.open-sign.is-closed i { background: #f87171; }
.hero h1 { font-weight: 800; font-size: clamp(2.6rem, 9.5vw, 5.25rem); color: var(--navy); }
.hero h1 em { font-style: normal; display: table; background: var(--navy); color: var(--sun); padding: 0 0.14em 0.06em; margin: 0.06em 0 0.06em -0.06em; }
.hero-lede { margin-top: 18px; font-size: 1.1875rem; max-width: 34ch; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px;
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  text-decoration: none; border: 2px solid var(--navy); cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 4px 4px 0 rgba(14,31,71,0.28); }
.btn-line { background: var(--white); color: var(--navy); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(14,31,71,0.35); }
.rating { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 0.9375rem; border-bottom: 2px solid var(--navy); padding-bottom: 2px; }
.rating b { font-family: var(--display); font-size: 1.25rem; }
.stars { color: var(--navy); letter-spacing: 2px; }

/* The window: vinyl lettering list of services */
.window {
  background: var(--navy); color: var(--white);
  border: 6px solid var(--white); outline: 2px solid var(--navy);
  padding: 8px 0; position: relative;
}
.window-cap { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); padding: 10px 18px 6px; }
.window ul { list-style: none; margin: 0; padding: 0; }
.window li + li { border-top: 1px solid rgba(255,255,255,0.12); }
.window a {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 14px;
  padding: 13px 18px; text-decoration: none;
}
.window a::before { content: ""; width: 12px; height: 12px; background: var(--c, var(--sun)); }
.window a span { font-family: var(--display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.01em; }
.window a small { color: #aebbd8; font-size: 0.8125rem; text-align: right; }
.window a:hover { background: var(--navy-2); }
.window a:hover span { color: var(--sun); }

/* Sections */
.sec { padding: 64px 0; }
.sec-tint { background: var(--sky-wash); }
.sec-head { margin-bottom: 28px; max-width: 46ch; }
.sec-head h2 { font-weight: 800; font-size: clamp(1.9rem, 5vw, 2.75rem); color: var(--navy); }
.sec-head p { margin-top: 10px; color: var(--muted); }

/* Wireless cluster: three big tiles */
.tiles { display: grid; gap: 16px; }
.tile {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 2px solid var(--navy); border-top: 10px solid var(--c);
  padding: 22px 20px 20px; text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c); }
.tile h3 { font-weight: 800; font-size: 1.5rem; color: var(--navy); }
.tile p { margin-top: 10px; color: var(--muted); }
.tile ul { margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.9688rem; }
.tile li { padding: 7px 0; border-top: 1px dashed var(--line); }
.tile .go { margin-top: auto; padding-top: 18px; font-family: var(--display); font-weight: 700; color: var(--c); }

/* Paperwork services: counter rows */
.rows { border-top: 2px solid var(--navy); }
.row {
  display: grid; gap: 6px 24px; padding: 20px 0 20px 18px;
  border-bottom: 2px solid var(--navy); border-left: 8px solid var(--c);
  text-decoration: none; background: var(--white);
}
.row > * { min-width: 0; }
.row h3 { font-weight: 800; font-size: 1.375rem; color: var(--navy); }
.row p { color: var(--muted); }
.row .go { font-family: var(--display); font-weight: 700; color: var(--c); white-space: nowrap; }
.row:hover { background: var(--sky-wash); }
.fineprint { margin-top: 16px; font-size: 0.875rem; color: var(--muted); max-width: 70ch; }

/* Skip the wait band */
.band { background: var(--navy); color: var(--white); padding: 48px 0; }
.band-in { display: grid; gap: 20px; align-items: center; }
.band h2 { font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.band h2 span { color: var(--sun); }
.band p { color: #c8d2ea; margin-top: 10px; max-width: 52ch; }
.band .btn { border-color: var(--sun); background: var(--sun); color: var(--navy); box-shadow: none; }

/* Lead form */
.ask { display: grid; gap: 32px; }
.ask > * { min-width: 0; }
.form { display: grid; gap: 14px; background: var(--white); border: 2px solid var(--navy); padding: 22px 20px; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 0.9375rem; }
.form input, .form select, .form textarea {
  font: inherit; color: var(--ink); background: var(--white);
  border: 2px solid var(--line); padding: 12px; min-height: 48px; width: 100%; border-radius: 0;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--navy); outline: none; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.form .check input { width: 20px; min-height: 20px; height: 20px; flex: none; margin-top: 2px; }
.form .hp { position: absolute; left: -9999px; }
.form .fx { display: grid; gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0; }
.form .fx[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form-note { font-size: 0.875rem; color: var(--muted); }
.form-msg { font-weight: 700; padding: 10px 12px; background: var(--sky-wash); border-left: 6px solid var(--c-wireless); }
.form-msg[hidden] { display: none; }

/* Home photo grid */
.ph-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }

/* Visit */
.visit { display: grid; gap: 28px; }
.visit > * { min-width: 0; }
.nap { font-style: normal; font-size: 1.125rem; }
.nap strong { font-family: var(--display); font-size: 1.25rem; display: block; margin-bottom: 4px; }
.hours { width: 100%; border-collapse: collapse; margin-top: 20px; }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours td { text-align: right; font-weight: 700; }
.hours .closed td { color: var(--c-immigration); }
.hours .today th, .hours .today td { background: #fff6d6; box-shadow: -8px 0 0 #fff6d6, 8px 0 0 #fff6d6; }
.map-wrap { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.map { border: 2px solid var(--navy); background: var(--sky-wash); aspect-ratio: 4 / 3; min-height: 320px; flex: 1 1 auto; }
.map iframe { width: 100%; height: 100%; border: 0; }
.map-link { margin: 0; }

/* Footer */
.foot { background: var(--ink); color: #c8d2ea; padding: 40px 0 32px; font-size: 0.9375rem; }
.foot-in { display: grid; gap: 22px; }
.foot strong { color: var(--white); font-family: var(--display); font-size: 1.125rem; }
.foot a { color: var(--white); }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot small { color: #8b96ab; }

/* Sticky bottom bar, every page */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr 1fr; background: var(--navy);
  border-top: 3px solid var(--sun); padding-bottom: env(safe-area-inset-bottom);
}
.bar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--white); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
}
.bar a:first-child { background: var(--sun); color: var(--navy); }
.bar svg { width: 22px; height: 22px; }

@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 240px 1fr auto; align-items: center; }
  .band-in { grid-template-columns: 1fr auto; }
  .visit { grid-template-columns: 5fr 7fr; }
  .ask { grid-template-columns: 1fr 1fr; align-items: start; }
  .foot-in { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .bar { display: none; }
  .nav { display: flex; }
  .hero-in { grid-template-columns: 7fr 5fr; align-items: center; gap: 48px; padding: 64px 0 76px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .tile { transition: none; }
  .btn:hover, .tile:hover { transform: none; }
}

/* ============================================================
   Inner-page class vocabulary (build.js layout + page fragments).
   Same flat, square, bold language as the homepage above: hard
   2px borders, no radius, no soft shadows, colour comes from --c.
   ============================================================ */

/* Page hero band. --c is set on <main style="--c:var(<accent>)">, one of
   the service colours in :root. White text is the default; every colour
   except amber clears WCAG for large/bold text at that weight, and amber
   (--c-unlock) is kept only as the placeholder-note border colour.
   The contract's vocabulary does not require a .wrap inside .page-hero,
   and page fragments do it both ways, so the band gives itself the same
   16px-minimum, 1120px-max gutter .wrap uses, then cancels a nested .wrap
   so pages that add one anyway do not get gutter twice. */
.page-hero {
  background: var(--c, var(--navy)); color: var(--white);
  padding: 40px max(16px, calc((100% - var(--wrap)) / 2)) 36px;
}
.page-hero > .wrap { width: 100%; margin: 0; }
.page-hero > * { min-width: 0; }
.page-hero h1 { color: inherit; font-weight: 800; font-size: clamp(2.1rem, 6.5vw, 3.5rem); margin-top: 10px; }
.page-hero .cta-row { margin-top: 22px; }
/* Logo card: artwork on its own ground, white border, hard shadow. The DMV banner variant is below. */
.logo-card { display: block; width: min(100%, 220px); margin: 16px 0 0; background: #fef6eb; border: 3px solid var(--white); box-shadow: 5px 5px 0 rgba(14,31,71,0.35); }
.logo-card img { width: 100%; height: auto; display: block; }
.page-hero .logo-card + h1 { margin-top: 20px; }
@media (min-width: 720px) { .logo-card { width: 320px; } }
@media (min-width: 900px) {
  .hero-logo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 56px; align-items: center; }
  .hero-logo > * { grid-column: 1; }
  .hero-logo > .crumb { justify-self: start; }
  .hero-logo > .logo-card { grid-column: 2; grid-row: 1 / span 5; width: 100%; margin: 0; }
  .hero-logo > .cta-row { align-self: start; }
}

/* Breadcrumb: a light pill sitting on top of the band, not coloured text
   on a coloured background, so it reads clearly no matter which accent
   colour the page uses. */
.crumb {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.94); color: var(--navy);
  font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em;
  padding: 6px 12px; text-decoration: none; margin: 0;
}
.crumb a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.crumb a:hover { text-decoration-thickness: 2px; }

/* Lede: the one or two sentence intro under a hero (or section) heading.
   Bold + sized to qualify as "large text" under WCAG so it clears
   contrast on every accent colour at the 3:1 large-text threshold. */
.lede { font-weight: 700; font-size: 1.1875rem; line-height: 1.45; max-width: 46ch; margin-top: 14px; }
.page-hero .lede { color: inherit; }

/* Two column layout, stacked on phones. Used for "what it is" copy next
   to a fact list, photo, or similar pairing inside a .sec. */
.cols { display: grid; gap: 24px; margin-top: 8px; }
.cols > * { min-width: 0; }
@media (min-width: 720px) {
  .cols { grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; }
}

/* "What to bring" checklist: square tick bullets in the page's accent
   colour, matching the site's no-rounded-corners look. */
ul.bring { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
ul.bring li { position: relative; padding-left: 34px; min-width: 0; font-weight: 600; }
ul.bring li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: var(--c, var(--navy)); color: var(--white);
  font-size: 0.75rem; font-weight: 800;
}

/* Fact list: label/value rows, e.g. "Walk in or book" / "Call ahead". dt
   and dd are direct children so a two-column grid lines them up without
   an extra wrapper element. */
dl.facts { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 0 20px; margin: 18px 0 0; border-top: 2px solid var(--navy); }
dl.facts dt, dl.facts dd { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
dl.facts dt { font-weight: 700; color: var(--navy); margin: 0; }
dl.facts dd { color: var(--muted); margin: 0; }

/* Visible placeholder: a fact is missing and the page must not pretend
   otherwise. Dashed amber box, impossible to mistake for real copy. */
.ph-note {
  border: 2px dashed var(--c-unlock); background: #fff7e8; color: var(--ink);
  font-weight: 700; font-size: 0.9375rem; padding: 12px 14px; margin: 14px 0 0;
}

/* FAQ entries: h3 + p pairs, each pair in its own <div> inside a .cols
   grid within a .sec (the shape every page fragment actually uses).
   Scoped to .cols so it never touches .tile/.row, which already style
   their own h3/p and live in .tiles/.rows, not .cols. */
.sec .cols h3 { font-family: var(--display); font-weight: 800; font-size: 1.125rem; color: var(--navy); margin: 0; }
.sec .cols h3 + p { margin-top: 8px; color: var(--muted); }

@media (min-width: 720px) {
  .page-hero h1 { margin-top: 14px; }
}

/* Inner pages: the lead form sits alone in its section, so cap its width. */
.sec > .wrap > .form { max-width: 640px; }

/* Booking buttons */
.btn-sun { background: var(--sun); color: var(--navy); border-color: var(--navy); box-shadow: 4px 4px 0 rgba(14,31,71,0.28); }
.page-hero .btn-sun { border-color: var(--sun); }
.book-links { display: grid; gap: 10px; min-width: 0; }
.band .book-links .btn { justify-content: flex-start; }
@media (min-width: 720px) { .book-links { grid-template-columns: 1fr 1fr; } .band-in { grid-template-columns: 1fr 1fr; } }
.page-hero .btn-navy { border-color: var(--white); box-shadow: none; }

/* Language switcher as flags (same idea as the Bella site, restyled square).
   Stripes are pinned in pixels at the edges and the label sits on the white
   centre band, so the text is always navy on white whatever the flag. */
.lang { border: 0; gap: 6px; }
.lang .flag {
  --fa: #B22234; --fb: #3C3B6E;               /* en: US red, US blue */
  padding: 6px 16px; color: var(--navy); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--fa) 0 9px, #fff 9px calc(100% - 9px), var(--fb) calc(100% - 9px) 100%);
  opacity: 0.92;
}
.lang .flag[data-flag="es"] { --fa: #006847; --fb: #CE1126; }  /* Mexican green, red */
.lang .flag[data-flag="so"] { --fa: #4189DD; --fb: #4189DD; }  /* Somali blue */
.lang .flag[aria-current] { opacity: 1; background-color: #fff; outline: 2px solid var(--sun); outline-offset: 1px; color: var(--navy); }
.lang a.flag:hover { opacity: 1; }
@media (max-width: 380px) { .lang .flag { padding: 6px 13px; background: linear-gradient(90deg, var(--fa) 0 7px, #fff 7px calc(100% - 7px), var(--fb) calc(100% - 7px) 100%); } }

/* Real photo in the wide slot of the photo grid */
.ph-photo { grid-column: 1 / -1; display: block; border: 2px solid var(--navy); }
.ph-photo img { width: 100%; height: auto; }

/* Real photo in one of the two half-width tiles of the photo grid */
.ph-photo.ph-tile { grid-column: auto; aspect-ratio: 4 / 3; overflow: hidden; }
.ph-photo.ph-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Reviews band: real Google excerpts, set like receipts pinned by the till */
.reviews { background: var(--sun); }
.reviews .sec-head p { color: var(--ink); }
.revs { display: grid; gap: 14px; margin: 8px 0 24px; }
.rev { margin: 0; min-width: 0; background: var(--white); border: 2px solid var(--navy); padding: 18px 18px 16px; display: flex; flex-direction: column; box-shadow: 5px 5px 0 var(--navy); }
.rev-stars { color: var(--sun-deep); letter-spacing: 3px; font-size: 1.05rem; }
.rev blockquote { margin: 8px 0 14px; font-family: var(--display); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; color: var(--navy); }
.rev figcaption { margin-top: auto; font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rev figcaption a { color: var(--muted); }
.reviews .ph-note { background: var(--white); }
@media (min-width: 720px) { .revs { grid-template-columns: 1fr 1fr; } .revs-3 { grid-template-columns: repeat(3, 1fr); } .revs-1 { grid-template-columns: minmax(0, 560px); } }
.reviews .ph-note { margin: 0 0 18px; }

/* Brands we work with: plain names in our own type, never imitations of their logos */
.brand-strip { margin-top: 22px; border-top: 2px solid var(--navy); padding-top: 16px; }
.brand-strip h3 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-family: var(--body); font-weight: 700; }
.brands { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.brands li { border: 2px solid var(--navy); background: var(--white); padding: 10px 16px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--navy); box-shadow: 3px 3px 0 var(--c, var(--navy)); }

/* Official brand logos, unmodified, each on its own equal tile */
.brand-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brands.brand-logos li { display: grid; place-items: center; height: 92px; padding: 14px 18px; box-shadow: none; }
.brand-logos li.on-black { background: #000; padding: 0 8px; }
.brand-logos img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.brand-logos li.on-black img { max-height: 88px; }
@media (min-width: 720px) { .brand-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
span.ph-note { display: inline-block; margin: 6px 0 0; padding: 4px 8px; font-size: 0.875rem; }

/* Card marks on the payment row: official artwork, equal height, unmodified */
.pay-marks { display: inline-flex; align-items: center; gap: 12px; vertical-align: middle; margin-right: 8px; }
.pay-marks img { height: 22px; width: auto; display: block; }
.pay-marks img[alt="Visa"] { height: 16px; }
.pay-marks span { display: grid; place-items: center; height: 34px; padding: 0 9px; border: 1px solid var(--line); background: var(--white); }
.pay-marks span.visa { background: #1434CB; border-color: #1434CB; }
.pay-marks span.applepay { padding: 0; border: 0; }
.pay-marks span.applepay img { height: 34px; }

/* Call-for-a-quote line under a section heading */
.quote-line { margin-top: 20px; font-size: 1.0625rem; color: var(--ink); max-width: 60ch; }
.quote-line a { color: var(--navy); font-weight: 700; }

/* Price list (DMV page): grouped service + price rows, prices right-aligned */
.price-head { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--navy); margin: 28px 0 0; }
.price-groups { display: grid; gap: 24px; margin-top: 14px; }
.price-groups > * { min-width: 0; }
.price-groups h3 { font-family: var(--body); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-dmv); margin: 0; }
dl.facts.prices { grid-template-columns: 1fr auto; margin-top: 8px; }
dl.facts.prices dt { font-weight: 600; }
dl.facts.prices dd { font-family: var(--display); font-weight: 800; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.price-note { margin-top: 16px; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 960px) { .price-groups { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* IQRA Registration Services banner (DMV page hero): wide artwork on its own white ground */
.logo-card.logo-banner { width: min(100%, 560px); background: var(--white); }
@media (min-width: 720px) { .logo-card.logo-banner { width: min(100%, 560px); } }
/* Storefront photo with a caption, kept to a readable width */
.shop-photo { margin: 28px 0 0; max-width: 640px; }
.shop-photo figcaption { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; }
dl.facts dd a[href^="tel:"] { color: var(--navy); font-weight: 700; }
.list-head { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--navy); margin: 24px 0 0; }

/* Phone menu: the main nav is hidden below 960px, so phones get a Menu button in the pinned
   header that opens the same links as a full-width list. Native <details>, no script needed. */
.mnav { flex: none; }
.mnav summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 2px solid rgba(255,255,255,0.7); color: var(--white); font-weight: 700; font-size: 0.875rem; cursor: pointer; user-select: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary svg { width: 20px; height: 20px; flex: none; }
.mnav[open] summary { background: var(--sun); border-color: var(--sun); color: var(--navy); }
.mnav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-top: 2px solid var(--sun); box-shadow: 0 10px 0 rgba(14,31,71,0.25); display: grid; padding: 6px 0 10px; max-height: calc(100vh - var(--top-h) - 70px); overflow-y: auto; }
.mnav-panel a { display: block; padding: 14px 20px; color: var(--white); text-decoration: none; font-weight: 700; font-size: 1.0625rem; border-bottom: 1px solid rgba(255,255,255,0.14); }
.mnav-panel a:last-child { border-bottom: 0; }
.mnav-panel a[aria-current="page"] { color: var(--sun); }
@media (max-width: 420px) { .mnav summary span { display: none; } .top-in { gap: 10px; } }
@media (min-width: 960px) { .mnav { display: none; } }
dl.facts.prices.price-single { max-width: 520px; }
/* Immigration: fee list sits beside "What we do" on wide screens */
.cols-fees .price-head { font-size: 1.5rem; margin: 0; }
.cols-fees dl.facts.prices.price-single { max-width: none; }
.cols-fees .sec-head { margin-bottom: 0; }
/* Wireless and Repair: photo or list sits beside "What it is" on wide screens */
.cols-side .shop-photo { margin: 0; max-width: none; }
.cols-side .list-head { margin: 0; font-size: 1.25rem; }
.cols-side .sec-head { margin-bottom: 0; }
/* DMV page: banner beside the hero text; Registration prices beside the intro, the other two groups below */
@media (min-width: 900px) { .hero-logo.hero-banner { grid-template-columns: minmax(0, 1fr) 420px; } }
.sec .cols-dmv h3.price-head { font-size: 1.5rem; margin: 0 0 14px; }
.sec .cols-dmv h3.group { font-family: var(--body); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-dmv); margin: 0; }
.cols-dmv .sec-head { margin-bottom: 0; }
.price-groups.price-groups-2 { margin-top: 28px; }
@media (min-width: 720px) { .price-groups.price-groups-2 { grid-template-columns: 1fr 1fr; gap: 40px; } }
/* Current page in the desktop menu: yellow text on a yellow underline */
.nav a[aria-current="page"] { color: var(--sun); border-bottom-color: var(--sun); font-weight: 700; }

/* QA pass 2026-10-11: layout fixes */
/* Headings: balance the lines so a short last word is not left on its own. */
h1, h2, h3 { text-wrap: balance; }
/* Wrapped FAQ questions were set at 1.02 line height and touched each other. */
.sec .cols h3 { line-height: 1.2; }
/* Immigration hero: the "not attorneys" line sits under the h1 and needs air. */
.page-hero h1 + p:not(.lede) { margin-top: 14px; }
/* Rating link inside a coloured hero: the navy stars and underline vanished on the navy Tax band. */
.page-hero .rating { border-bottom-color: currentColor; }
.page-hero .stars { color: var(--sun); }
/* Contact hero is the yellow band, so it takes navy text instead of white. */
.page-hero.hero-sun { color: var(--navy); }
.page-hero.hero-sun .btn-navy { border-color: var(--navy); }
/* Phones: label above value for fact lists (the 1fr/2fr split left the value column about 120px wide at 320px,
   and a long Spanish word pushed the page 5px wider than the screen). Price lists keep their own two columns. */
@media (max-width: 480px) {
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  dl.facts dt { border-bottom: 0; padding-bottom: 0; }
  dl.facts dd { padding-top: 2px; }
  dl.facts.prices { grid-template-columns: minmax(0, 1fr) auto; }
  dl.facts.prices dt { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  dl.facts.prices dd { padding-top: 12px; }
}
/* Row links: the "go" label may wrap on narrow screens (nowrap pushed it past the edge at 320px). */
@media (max-width: 719px) { .row .go { white-space: normal; } }
/* Tap targets: bigger hit areas without changing how things look. */
.lang .flag { padding-block: 10px; }
.crumb a { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
.rev figcaption a { display: inline-block; padding: 9px 0; margin: -9px 0; }
.foot ul { gap: 0 18px; }
.foot ul a { display: inline-block; padding: 9px 0; }
/* Focus ring: the blue ring disappears on blue and navy bands, so those use yellow (navy on the yellow Contact band). */
.top :focus-visible, .foot :focus-visible, .band :focus-visible, .window :focus-visible, .bar :focus-visible, .page-hero :focus-visible { outline-color: var(--sun); }
.page-hero.hero-sun :focus-visible { outline-color: var(--navy); }
.bar :focus-visible { outline-offset: -4px; }