/* ==========================================================
   Aguilera's Bookkeeping, Inc. — temporary site
   One stylesheet. Mobile-first. Tokens first, then sections
   in page order.
   ========================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License, latin subset) ----------
   One pair on every page (owner request, Oct 5, 2026), from Lou's design: Cormorant Garamond for titles,
   Jost for text. (fonts/source-serif-4-latin.woff2 is no longer used.) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #161514;
  --ink-2: #3b3834;
  --muted: #6f6a62;
  --paper: #ffffff;
  --cream: #f6f2ea;
  --cream-2: #ede6d9;
  --line: #ddd5c8;
  --line-strong: #bfb5a5;
  --field-border: #857e73; /* 3.9:1 on white, meets WCAG 1.4.11 for form controls */
  --error: #9b1c1c;

  /* Lou's design reference */
  --ink-0: #0f0d0b;
  --on-ink: #f4f1ee;
  --line-dk: #2e2925;
  --muted-dk: #a39a92;
  --brown: #6f4e37;
  --brown-deep: #5a3e2b;
  --brown-lt: #c9a98e;
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --ui: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--display); /* every title, number and quote */
  --sans: var(--ui);       /* all other text */

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 5.5rem;

  --radius: 2px;
  --container: 1200px;
  --gutter: 16px;
  --header-h: 72px;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1px); /* header height + its bottom border */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Titles match the approved hero on every page: light Cormorant Garamond (Lou's sizes). Italic <em> = brown accent. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.5rem); line-height: 1; }
h2 { font-size: clamp(2.25rem, 4.6vw, 3.9rem); }
h3 { font-size: 1.6rem; font-weight: 400; line-height: 1.15; letter-spacing: 0; } /* small titles: one step heavier to stay legible */
h1 em, h2 em { font-style: italic; color: var(--brown); }

button, input, select, textarea { font-family: inherit; } /* form controls don't inherit the page font by default */

/* EN | ES switch on the light pages (privacy, resources, thank-you, 404); the dark header has its own scoped rules */
.lang-switch { display: flex; align-items: center; gap: 2px; font: 500 0.75rem var(--ui); letter-spacing: 0.14em; }
.lang-btn {
  min-width: 32px; min-height: 40px; padding: 0 5px;
  background: none; border: 0; color: var(--muted);
  font: inherit; letter-spacing: inherit; cursor: pointer;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--brown); text-decoration-thickness: 1px; text-underline-offset: 8px;
}
.lang-sep { color: var(--line-strong); }

p { margin: 0 0 var(--s3); }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s3);
  top: -100px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2) var(--s3);
  z-index: 100;
}
.skip-link:focus { top: var(--s3); }
main:focus { outline: none; } /* focus target for the skip link only */

/* Small uppercase label above section headings: same as the hero eyebrow (brown Jost caps, wide tracking) */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 22px;
}

.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 300; line-height: 1.7; color: var(--ink-2); }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font: 500 0.78125rem/1.2 var(--sans); /* same as the hero buttons */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
/* Every button on the site: brown with white text; on hover/focus it turns white with brown text and a brown edge,
   matching the header "Call Today" button (owner request, Oct 5). Fixed hex so sections that re-tint --brown
   (e.g. the black Reviews section) keep the same button brown. */
.btn, .btn-dark, .btn-outline, .btn-light, .btn-brown, .btn-ghost, .rev-btn {
  background: #6f4e37; border-color: #6f4e37; color: #fff;
}
.btn:hover, .btn:focus-visible, .rev-btn:hover, .rev-btn:focus-visible {
  background: var(--on-ink); border-color: #6f4e37; color: #6f4e37;
}
.btn-sm { min-height: 40px; padding: 0 var(--s3); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }

/* Header + hero buttons (Lou's design reference, Oct 5, 2026): square corners, Jost caps, warm brown */
/* (.btn-brown / .btn-ghost colors now come from the shared button rule above) */
.site-header .btn,
.hero .btn {
  gap: 10px;
  min-height: 0;
  padding: 18px 28px;
  border-radius: 0;
  font: 500 0.78125rem/1 var(--ui); /* 12.5px */
  letter-spacing: 0.16em;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.site-header .btn-sm { padding: 13px 20px; font-size: 0.71875rem; } /* 11.5px */
.hero .btn .arrow { font-size: 15px; letter-spacing: 0; transition: transform 0.2s; }
.hero .btn:hover .arrow { transform: translateX(3px); }

/* ---------- 0. Utility links (IRS / FTB): small and secondary, on the dark header ---------- */
.utility-bar {
  background: var(--ink-0);
  border-bottom: 1px solid var(--line-dk);
  font: 500 0.6875rem/1 var(--ui); /* 11px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.utility-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s2);
  min-height: 32px;
  color: var(--line-dk);
}
.utility-bar a { color: var(--muted-dk); text-decoration: none; padding: 6px 0; white-space: nowrap; transition: color 0.2s; }
.utility-bar a:hover { color: var(--on-ink); }
.utility-bar :focus-visible { outline-color: var(--brown-lt); }
/* Smallest phones: the Spanish labels don't fit on one line, so stack the two links (right-aligned, each label whole) */
@media (max-width: 374px) {
  .utility-inner { flex-direction: column; align-items: flex-end; gap: 0; padding-top: 2px; padding-bottom: 2px; }
  .utility-inner > span[aria-hidden] { display: none; }
  .utility-bar a { padding: 4px 0; }
}

/* ---------- 1. Header (dark, after Lou's design) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-0);
  color: var(--on-ink);
  border-bottom: 1px solid var(--line-dk);
  font-family: var(--ui);
}
.site-header :focus-visible { outline-color: var(--brown-lt); }
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  text-decoration: none;
  line-height: 1;
}
/* Brand lockup: "Aguilera's Bookkeeping, Inc." on one line, small italic "Since 1984" underneath (owner's rule).
   Below 1200px the name scales with the room left beside the header controls (never wraps). */
.brand-name {
  font-family: var(--display);
  font-size: 1.75rem; /* 28px, as in Lou's header */
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-since {
  margin-top: 5px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.0625rem; /* 17px (owner request, Oct 5) */
  letter-spacing: 0.02em;
  color: var(--brown-lt); /* tan, same as "Since 1984." in the hero headline (owner request, Oct 5) */
  white-space: nowrap;
}

.site-nav { display: flex; order: 3; }

.nav-toggle {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-dk);
  border-radius: 0;
  cursor: pointer;
}
/* Two lines, turning into an X while the menu is open (Lou's menu button) */
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block;
  width: 22px; height: 1px;
  position: relative;
}
.nav-toggle-bar { background: transparent; }
.nav-toggle-bar::before,
.nav-toggle-bar::after { content: ""; position: absolute; left: 0; background: var(--on-ink); transition: transform 0.25s; }
.nav-toggle-bar::before { top: -4px; }
.nav-toggle-bar::after { top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-4px) rotate(-45deg); }

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--ink-0);
  border-top: 1px solid var(--line-dk);
  border-bottom: 1px solid var(--line-dk);
  padding: var(--s2) var(--gutter) var(--s5);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
}
.nav-menu.is-open { display: block; }
.nav-menu a {
  display: block;
  padding: var(--s3) 0;
  font-family: var(--display);
  font-size: 1.875rem; /* 30px */
  font-weight: 300;
  line-height: 1.2;
  color: var(--on-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dk);
}
.nav-menu a:hover { color: var(--brown-lt); }

/* Language switch: EN | ES */
.site-header .lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font: 500 0.75rem var(--ui);
  letter-spacing: 0.14em;
}
.site-header .lang-btn {
  min-width: 32px;
  min-height: 40px;
  padding: 0 5px;
  background: none;
  border: 0;
  color: var(--brown-lt); /* tan like the menu; the selected language is off-white */
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.site-header .lang-btn > * { pointer-events: none; }
.site-header .lang-btn:hover { color: var(--on-ink); }
.site-header .lang-btn[aria-pressed="true"] {
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-color: var(--brown-lt);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.site-header .lang-sep { color: var(--line-dk); }
/* Tablet/desktop: EN | ES sits right beside the brand; menu and Call Today stay on the right (owner request, Oct 5) */
@media (min-width: 600px) {
  .brand { margin-right: 0; }
  .site-header .lang-switch { margin-left: var(--s3); margin-right: auto; }
}
.no-js .lang-switch { display: none; } /* it needs JavaScript; the site shows in English */

/* Phones: business name + menu on row 1; EN | ES and Call on a slim second row,
   so the one-line name stays readable in English and Spanish */
@media (max-width: 599px) {
  :root { --header-h: 114px; } /* also keeps in-page links clear of the two-row header */
  .header-inner { flex-wrap: wrap; column-gap: var(--s2); row-gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .brand-name { font-size: clamp(1.125rem, calc((100vw - 112px) / 11.4), 1.75rem); } /* leaves room for the menu button */
  .site-nav { order: 1; }
  .site-header .lang-switch { order: 2; margin-left: auto; }
  .site-header .lang-btn { min-width: 28px; padding: 0 3px; }
  .btn-call { order: 3; }
}
/* Without JS the menu toggle can't work, so show links inline instead. */
.no-js .header-inner { flex-wrap: wrap; }
.no-js .nav-toggle { display: none; }
.no-js .site-nav { width: 100%; }
.no-js .nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  position: static;
  padding: 0 0 var(--s2);
  border: 0;
  box-shadow: none;
}
.no-js .nav-menu a { padding: var(--s1) 0; border: 0; font: 500 0.75rem var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown-lt); }

/* Desktop: links inline (Lou: Jost caps, wide tracking, muted until hover) */
/* Desktop: links inline (Lou: Jost caps, muted until hover). Shown from 1280px so the one-row header fits the
   longer "Call for Appointment" button; narrower screens use the menu button. */
@media (min-width: 1280px) {
  .nav-toggle { display: none; }
  .site-nav { order: 0; }
  .nav-menu {
    display: flex;
    position: static;
    gap: 20px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    margin-right: var(--s2);
  }
  .nav-menu a {
    padding: var(--s2) 0;
    border: 0;
    font: 500 0.75rem/1.2 var(--ui); /* 12px */
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--brown-lt); /* tan (owner request, Oct 5); off-white on hover */
    white-space: nowrap;
    transition: color 0.2s;
  }
  .nav-menu a:hover { color: var(--on-ink); }
  /* Spanish labels are longer */
  html[lang="es"] .nav-menu { gap: 14px; }
  html[lang="es"] .nav-menu a { letter-spacing: 0.06em; font-size: 0.6875rem; }
}
/* "CALL TODAY" (owner request, Oct 5): one line */
.site-header .btn-call { white-space: nowrap; font-size: 0.84375rem; } /* 13.5px: 2 points larger (owner request, Oct 5) */
/* Refund tab: hangs from the header's bottom edge, right-aligned under "Call Today"; pinned with the header.
   Solid header color, so its text never sits directly on the photo. Hidden over Offices/Appointments (js/main.js). */
.refund-tab {
  position: absolute; top: 100%; right: max(var(--gutter), (100% - var(--container)) / 2 + var(--gutter));
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px 40px 34px; /* extra room below the text for the bottom feather */
  /* White, with feathered left/right/bottom edges so it blends into whatever is behind it (owner request, Oct 5) */
  background: rgba(255, 255, 255, 0.75); /* 75% opacity (owner request); link text stays solid */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%),
    linear-gradient(180deg, #000 0, #000 calc(100% - 32px), rgba(0, 0, 0, 0.45) calc(100% - 16px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%),
    linear-gradient(180deg, #000 0, #000 calc(100% - 32px), rgba(0, 0, 0, 0.45) calc(100% - 16px), transparent 100%);
  mask-composite: intersect;
  font: 500 0.6875rem/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase;
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}
.refund-tab a { color: var(--brown); text-decoration: none; padding: 6px 0; white-space: nowrap; transition: color 0.2s; }
.refund-tab a:hover { color: var(--ink-0); }
.refund-tab a:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.refund-sep { color: var(--line-strong); }
.site-header:has(.nav-menu.is-open) .refund-tab { display: none; } /* phone menu open: keep out of its way */
@media (max-width: 400px) { .refund-tab { letter-spacing: 0.08em; padding-inline: 26px; } }
/* Hover/focus: white box, brown text (owner request, Oct 5) */
.site-header .btn-call:hover, .site-header .btn-call:focus-visible { background: var(--on-ink); border-color: var(--on-ink); color: var(--brown); }
/* ---------- 2. Hero (dark, after Lou's design) ---------- */
.hero {
  position: relative;
  overflow: hidden; /* the photo bleeds to the window edge */
  background: var(--ink-0);
  color: var(--on-ink);
  font-family: var(--ui);
}
.hero :focus-visible { outline-color: var(--brown-lt); }
.hero-inner { display: grid; }

.hero-text { padding: var(--s2) 0 clamp(56px, 9vw, 96px); text-align: center; }
.hero-eyebrow { /* Lou's hero eyebrow; one line */
  margin: 0 0 22px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--brown-lt);
}
.hero-cities { margin: 22px 0 0; } /* cities served, beneath the headline (owner request) */
.hero-cities + .hero-lang { margin-top: 36px; }
.hero h1 + .hero-lang { margin-top: 36px; } /* cities line removed (owner request, Oct 5): keep space under the headline */ /* language prompt pushed down below the cities (owner request) */
/* Each city opens the directions chooser; turns white on hover (owner request) */
.hero-city { color: inherit; text-decoration: none; transition: color 0.2s; }
.hero-city:hover, .hero-city[aria-expanded="true"] { color: var(--on-ink); }
.hero h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.6rem, 10vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.025em; /* tracking -25 (owner request, Oct 5) */
  margin: 0;
}
.hero h1 em { display: block; font-style: italic; color: var(--brown-lt); }
.hero h1 em[hidden] { display: none; } /* empty in Spanish */
/* Language prompt under the headline (Lou's hero) */
.hero-lang { margin: 20px 0 0; font-size: 0.9375rem; color: var(--muted-dk); }
.hero-lang-btn {
  margin-left: 6px; padding: 0 0 2px;
  background: none; border: 0; border-bottom: 1px solid var(--brown-lt);
  color: var(--on-ink); font: inherit; cursor: pointer; transition: color 0.2s;
}
.hero-lang-btn:hover { color: var(--brown-lt); }
.no-js .hero-lang { display: none; } /* needs JavaScript */
html[lang="es"] .hero h1 { font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.04; } /* the Spanish headline is about twice as long */
.hero .lead {
  max-width: 34em;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-dk);
}
.hero-cta { justify-content: center; gap: 12px; margin: 36px 0 32px; }
.hero-cta .btn-brown { padding: 20px 32px; }

/* Office strip under the copy (Lou's hero strip, with our confirmed addresses and phones) */
.hero-strip {
  display: grid;
  margin-top: clamp(32px, 3vw, 44px); /* tighter gap under the intro (owner request, Oct 5; was 48-72px) */
  border-top: 1px solid rgba(244, 241, 238, 0.14);
}
.strip-item { padding: 24px 0; border-bottom: 1px solid rgba(244, 241, 238, 0.14); }
.strip-k { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dk); } /* 13px (owner request) */
.hero-strip a { display: block; width: fit-content; max-width: 100%; margin-inline: auto; text-decoration: none; }
.strip-v { font-family: var(--display); font-size: 1.55rem; line-height: 1.2; color: var(--on-ink); transition: color 0.2s; }
.strip-v { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color 0.2s, text-decoration-color 0.2s; }
/* addresses open the Apple Maps / Google Maps chooser: tan + underline on hover so they read as links */
.strip-v:hover, .strip-v[aria-expanded="true"] { color: var(--brown-lt); text-decoration-color: currentColor; }
.strip-v .pin { display: inline; margin-right: 8px; vertical-align: -1px; color: var(--brown-lt); }
.strip-s {
  margin-top: 6px;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--on-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.strip-s:hover { color: var(--brown-lt); border-color: var(--brown-lt); }

/* Photo: never behind text (creative rule). The etched "Aguilera's Bookkeeping Inc." window at the right of the photo
   (about 84-100% across, 26-59% down) must stay fully visible and unshaded at every size.
   Phones/tablets: the whole 16:9 photo, uncropped, above the copy; only its bottom edge fades into the dark. */
.hero-media {
  position: relative;
  order: -1;
  margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 16 / 9;
  background: #221d19;
}
.hero-media picture { height: 100%; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 35%; /* anchored right, so any crop removes the left side, never the window */
  filter: grayscale(0.3); /* Lou's photo treatment */
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 13, 11, 0) 80%, var(--ink-0) 100%); /* bottom edge only; clear of the window */
  pointer-events: none;
}
/* Creative rule: hero photography stays clean. No text, badges or seals over it. */

@media (min-width: 600px) {
  .hero-strip { grid-template-columns: 1fr 1fr; }
  .strip-item:nth-child(2n) { padding-left: 28px; border-left: 1px solid rgba(244, 241, 238, 0.14); }
}
/* Desktop: copy at left, photo in its own column bleeding to the right edge of the window */
@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    min-height: clamp(600px, calc(100vh - var(--header-h) - 33px), 780px);
  }
  .hero-text {
    align-self: center;
    padding: clamp(32px, 3vw, 48px) clamp(32px, 4vw, 56px) clamp(48px, 4.5vw, 72px) 0; /* top was 56-88px: less black above the headline (owner request, Oct 5) */
    text-align: left;
  }
  .hero h1 { font-size: clamp(3.25rem, 5.6vw, 5.5rem); line-height: 0.98; }
  html[lang="es"] .hero h1 { font-size: clamp(2.6rem, 3.9vw, 3.9rem); line-height: 1.04; }
  .hero .lead { margin: 0; }
  .hero-cta { justify-content: flex-start; margin: 40px 0 32px; }
  .hero-strip a { margin-inline: 0; }
  .strip-item { padding-right: 24px; border-bottom: 0; }
  .hero-media {
    order: 0;
    aspect-ratio: auto;
    /* starts under the copy column's empty right padding, so the fade begins before the column edge */
    margin: 0 calc(-1 * max(var(--gutter), 50vw - (var(--container) / 2) + var(--gutter))) 0 calc(-1 * clamp(32px, 4vw, 56px));
  }
  /* Photo framing (owner request, Oct 5): BOTH the "A / Aguilera 1984" wall sign (about 44-55% across the photo) and the
     etched logo window (84-100%) must show. The photo stays anchored to its right edge (window never cropped) and, when
     the column is too narrow for "cover" to reach the sign, it scales down so at least the right 68% of the frame shows.
     Its top and bottom edges fade into the dark (mask), so any space above/below simply blends into the page. */
  .hero-media { container-type: size; background: transparent; overflow: hidden; } /* the photo never extends under the copy */
  .hero-media picture { position: absolute; inset: 0; height: auto; }
  .hero-media img {
    position: absolute; top: 0; right: 0; left: auto;
    width: min(max(100cqw, 100cqh * 16 / 9), 100cqw / 0.68);
    max-width: none; /* the site-wide img max-width would cap it at the column width */
    height: auto; aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
  }
  /* Shading after Lou (~.3 over the right side): eases out of solid ink beside the copy, light enough by ~20% that the
     wall sign reads; ~.3 over the window, like Lou's. Top/bottom blending comes from the mask above. */
  .hero-media::after {
    inset: -2px 0 -2px -2px; /* covers sub-pixel edges so no hairline shows where the photo begins */
    background:
      /* longer, smoother feather from the copy into the photo (owner request, Oct 5) */
      linear-gradient(90deg, var(--ink-0) 0%, rgba(15, 13, 11, 0.96) 4%, rgba(15, 13, 11, 0.89) 9%,
        rgba(15, 13, 11, 0.79) 15%, rgba(15, 13, 11, 0.67) 21%, rgba(15, 13, 11, 0.56) 28%, rgba(15, 13, 11, 0.46) 35%,
        rgba(15, 13, 11, 0.38) 43%, rgba(15, 13, 11, 0.33) 52%, rgba(15, 13, 11, 0.3) 62%, rgba(15, 13, 11, 0.3) 100%);
  }
}

/* Narrow desktop: a little more room for the copy so the two buttons stay on one row */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero-inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

@media (max-width: 479px) {
  .hero-cta .btn { flex: 1 1 100%; }
}

/* ---------- 3. Notice ---------- */
.notice { background: var(--paper); border-bottom: 1px solid var(--line); }
.notice-inner {
  display: grid;
  gap: var(--s2);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.notice p { margin: 0; }
.notice-label { /* eyebrow */
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s1) !important;
}
.notice-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.notice-text { color: var(--ink-2); max-width: 62rem; }

@media (min-width: 900px) {
  .notice-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4); align-items: center; padding-top: var(--s4); padding-bottom: var(--s4); }
  .notice-head { padding-right: var(--s4); border-right: 1px solid var(--line-strong); }
}

/* ---------- Shared section styles ---------- */
.section { padding: var(--s6) 0; }
.section-cream { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: var(--s5); }
.section-head h2 { margin-bottom: 0; }
.section-lead { margin: var(--s3) 0 0; font-size: 1.0625rem; color: var(--ink-2); }

@media (min-width: 900px) { .section { padding: var(--s7) 0; } }

/* ---------- 4. Services ---------- */
/* Black background like the hero: the section's color tokens switch to their on-dark versions (white titles, grey
   descriptions, faint lines). Photo = owner-supplied preparer at his desk (Oct 5), whole frame, uncropped. */
.services {
  --ink: var(--on-ink); --ink-2: var(--muted-dk); --muted: var(--muted-dk); --line: var(--line-dk);
  position: relative; overflow-x: clip; padding-top: 0; background: var(--ink-0); color: var(--on-ink);
}
/* Phones/tablets: a faded strip above the heading */
.services-media { position: relative; aspect-ratio: 16 / 9; margin: 0 0 var(--s3); }
.services-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.services-media::after {
  content: ""; position: absolute; inset: 0 0 -2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 13, 11, 0) 45%, rgba(15, 13, 11, 0.6) 70%, rgba(15, 13, 11, 0.92) 86%, var(--ink-0) 97%);
}
/* Desktop: beside the heading, out to the page edge; fades into the black on the left, top and bottom */
@media (min-width: 900px) {
  .services { padding-top: var(--s6); }
  .services > .container { position: relative; z-index: 1; }
  .services-media { position: absolute; top: 0; right: 0; width: min(56%, 860px); margin: 0; z-index: 0; }
  .services-media::after {
    inset: -2px 0 -2px -2px;
    background:
      linear-gradient(90deg, var(--ink-0) 0%, rgba(15, 13, 11, 0.9) 7%, rgba(15, 13, 11, 0.7) 15%,
        rgba(15, 13, 11, 0.42) 25%, rgba(15, 13, 11, 0.16) 36%, rgba(15, 13, 11, 0) 46%),
      /* solid black over the bottom 20%: the services list overlaps this strip, so no text sits on the photo */
      linear-gradient(0deg, var(--ink-0) 0%, var(--ink-0) 20%, rgba(15, 13, 11, 0.7) 30%, rgba(15, 13, 11, 0.3) 42%, rgba(15, 13, 11, 0) 56%),
      linear-gradient(180deg, rgba(15, 13, 11, 0.55) 0%, rgba(15, 13, 11, 0) 16%);
  }
  /* heading stays left of the photo (48px clear); its block is as tall as the photo, so the list starts below it */
  .services .section-head {
    max-width: min(640px, calc(100vw - min(56vw, 860px) - max(0px, (100vw - var(--container)) / 2) - var(--gutter) - 48px));
    min-height: calc(min(56vw, 860px) * 9 / 16 * 0.8 - var(--s6) - var(--s4)); /* list starts where the photo's solid-black strip begins (owner request, Oct 5) */
  }
}
.services h2, .services h3 { color: var(--on-ink); }
/* "What We Do": italic, thin, hero tan on black (owner requests, Oct 5) */
.services-title { font-weight: 300; margin-bottom: var(--s3); font-style: italic; color: var(--brown-lt) !important; }
.services .section-lead { font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.6; } /* a little bigger (owner request, Oct 5): 18-20px */
.services .section-head { margin-bottom: var(--s4); }
@media (max-width: 899px) { .services .section-head { max-width: 640px; } }.services-grid {
  display: grid;
  border-top: 1px solid var(--ink);
}
.service {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.service-num {
  display: block;
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.service h3 { margin-bottom: var(--s2); }
.service p { margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 30rem; }
/* Who/where a restricted service is offered (Oct 8): the section's tan accent, a little smaller */
.service p.service-note { margin-top: var(--s2); font-size: 0.875rem; color: var(--brown-lt); }

/* Phones: compact list (service numbers removed at the owner's request, Oct 5) */
@media (max-width: 599px) {
  .service { padding: var(--s3) 0; }
  .service h3 { font-size: 1.2rem; margin-bottom: var(--s1); }
}

@media (min-width: 600px) {
  .services-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--s4); }
  .service { padding: 2.25rem var(--s3) 2.25rem 0; }
}

/* ---------- 4b. Client reviews: one featured review at a time (owner-approved direction, Oct 5) ---------- */
/* Black background like the hero (owner request, Oct 5): the section's color tokens switch to their on-dark versions,
   so every text, line, star and control below picks up the hero palette (white text, tan accents, grey secondary). */
.section.reviews {
  --brown: var(--brown-lt); --ink: var(--on-ink); --ink-2: var(--on-ink); --muted: var(--muted-dk);
  --line-strong: rgba(244, 241, 238, 0.24); --paper: var(--ink-0);
  background: var(--ink-0); color: var(--on-ink);
}
.reviews h2 { color: var(--on-ink); }
.rev-grid { display: grid; gap: var(--s5); }
.rev-eyebrow {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brown); margin-bottom: 22px;
}
.rev-title { margin-bottom: var(--s4); font-weight: 700; } /* bold (owner request, Oct 5); size from the shared h2 */
.rev-title em { display: block; font-style: italic; color: var(--brown); }
.rev-lead { color: var(--muted); font-size: 1.0625rem; max-width: 24rem; margin-bottom: var(--s4); }
.rev-side-stars { margin: 0 0 var(--s2); color: var(--brown); font-size: 1.75rem; line-height: 1; letter-spacing: 0.2em; }
.rev-all { margin: 0; }
.rev-all a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--brown); padding: 0 2px; /* 44px tall tap target */
}
.rev-all a:hover { color: var(--brown); }

.rev-main { min-width: 0; }
.rev-main:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.rev-stage { display: grid; touch-action: pan-y; }
.rev { grid-area: 1 / 1; margin: 0; transition: opacity 0.25s ease; }
.js-carousel .rev:not(.is-active) { visibility: hidden; opacity: 0; }
.no-js .rev + .rev, .no-carousel .rev + .rev { grid-area: auto; margin-top: var(--s5); }
.rev-mark { display: block; font-family: var(--serif); font-size: 5rem; line-height: 1; height: 0.5em; overflow: visible; color: var(--brown); margin-bottom: var(--s2); }
.rev-quote { margin: 0 0 var(--s4); }
.rev-quote p { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); line-height: 1.4; color: var(--ink); max-width: 34ch; text-wrap: pretty; }
.rev-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s3); }
.rev-stars { color: var(--brown); font-size: 0.8125rem; letter-spacing: 0.18em; }
.rev-name { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.rev-src { font-size: 0.8125rem; color: var(--muted); }
.rev-trnote { margin: var(--s3) 0 0; font-size: 0.8125rem; color: var(--muted); }
.rev-toggle { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.rev-controls { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.no-js .rev-controls, .no-carousel .rev-controls { display: none; }
.rev-btn {
  flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #6f4e37; border-radius: var(--radius); /* colors: shared button rule */
  font-size: 1.1rem; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.rev-count { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rev-bar { flex: 1 1 auto; max-width: 180px; height: 1px; background: var(--line-strong); position: relative; }
.rev-bar i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 0; background: var(--brown); transition: width 0.25s ease; }

@media (min-width: 900px) {
  .rev-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: center; }
}

/* ---------- 5. Locations ---------- */
/* "Two Locations" is the section's only heading now (city heading removed, owner request Oct 5): 12px + 4pt = ~17.3px */
.loc-kicker { font-size: 1.0833rem; margin-bottom: 0; }
.location-grid { display: grid; gap: var(--s4); }
.location {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
}
.location-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.location-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s4);
}
.location-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s1);
}
.location h3 {
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.location-details { margin: 0 0 var(--s4); }
.location-details div {
  display: grid;
  grid-template-columns: 6.5rem 1fr; /* fits DIRECCIÓN / TELÉFONO */
  gap: var(--s3);
  padding: var(--s2) 0;
}
.location-details dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.location-details dd { margin: 0; }
/* "Team" label sits above the two-per-row boxes so they start at the card's left edge and use its full width
   (owner request, Oct 5) */
.location-details div:has(.team-list) { grid-template-columns: 1fr; gap: var(--s2); }
.location-details a { font-weight: 600; }
/* Team as brown "buttons", two per row (owner request, Oct 5). Display-only until each preparer has a page:
   hover turns white with brown text, nothing else happens. */
.team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.team-list li { margin: 0; }
.team-btn {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  padding: 10px 12px; border: 1px solid var(--brown); border-radius: var(--radius);
  background: var(--brown); color: var(--on-ink); line-height: 1.3; cursor: default;
  transition: background-color 0.15s, color 0.15s;
}
.team-name { font-size: 0.9375rem; font-weight: 500; }
.team-btn > span[data-i18n] { margin-top: 2px; font-size: 0.75rem; color: rgba(244, 241, 238, 0.78); transition: color 0.15s; }
.team-btn:hover { background: var(--on-ink); color: var(--brown); } /* same white as every button's hover */
.team-btn:hover > span[data-i18n] { color: var(--brown); }
/* Owner-approved Oct 7, 2026: with JavaScript the boxes are real buttons that open a floating bio. Same look; the open one
   stays white with brown text, like hover. */
button.team-btn { width: 100%; font: inherit; text-align: left; cursor: pointer; }
button.team-btn:focus-visible, button.team-btn[aria-expanded="true"] { background: var(--on-ink); color: var(--brown); }
button.team-btn:focus-visible > span[data-i18n], button.team-btn[aria-expanded="true"] > span[data-i18n] { color: var(--brown); }
button.team-btn:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.location .btn-row { margin-top: auto; padding-top: var(--s5); } /* buttons sit lower, clear of the team boxes (owner request, Oct 5) */
.location .btn-row { justify-content: center; } /* "Get Directions" centered under the team (owner request, Oct 5) */
.location .btn-row .btn { flex: 0 1 auto; min-width: 240px; }

.hours-note { margin: var(--s4) 0 0; font-size: 0.9375rem; color: var(--ink-2); }

@media (min-width: 768px) {
  .location-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .location-body { padding: var(--s5) var(--s4) var(--s4); }
}
@media (min-width: 1024px) {
  .location-body { padding: var(--s5); }
}

/* ---------- 5b. Our Story ---------- */
/* Lou's photo as a full-width band above the copy, fading softly into the cream background (no text over it).
   Faces sit in the upper-middle of the photo, so the crop is anchored a little above center. */
.story { padding-top: 0; }
.story-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--s4); }
.story-media picture { height: 100%; }
.story-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.story-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 242, 234, 0) 45%, rgba(246, 242, 234, 0.35) 65%,
    rgba(246, 242, 234, 0.8) 82%, var(--cream) 95%, var(--cream) 100%); /* solid cream before the edge: no seam */
}
@media (min-width: 600px) { .story-media { aspect-ratio: 16 / 8; margin-bottom: var(--s5); } }
@media (min-width: 900px) {
  /* text pulled up into the photo's solid-cream fade (owner request, Oct 5); the fade is fully cream by 86%, so no text sits on the photo */
  .story-media { aspect-ratio: auto; height: clamp(380px, 34vw, 560px); margin-bottom: -56px; }
  .story-media::after {
    inset: 0;
    background: linear-gradient(180deg, rgba(246, 242, 234, 0) 42%, rgba(246, 242, 234, 0.35) 58%,
      rgba(246, 242, 234, 0.8) 74%, var(--cream) 86%, var(--cream) 100%);
  }
  .story-layout { position: relative; z-index: 1; }
  /* the photo itself fades out before its bottom edge, so no hairline can show under the text */
  .story-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 92%);
  }
}
/* Same type and alignment as the approved hero (Cormorant headings with an italic accent, Jost text, eyebrow caps,
   strip-style stats), in dark text on the cream background. Centered on phones/tablets, left-aligned on desktop. */
.story-layout { display: grid; gap: var(--s4); text-align: center; font-family: var(--ui); }
.story .kicker {
  justify-content: center;
  margin: 0 0 22px;
  font: 500 0.9167rem/1.2 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; /* 12px + 2pt = ~14.7px (owner request, Oct 5) */
  color: var(--brown);
}
.story .kicker::before { display: none; }
.story h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.6rem, 10vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.story h2 em { display: block; font-style: italic; color: var(--brown); }
.story-text p {
  max-width: 34em;
  margin: 0 auto var(--s3);
  /* same font as the review quotes (Cormorant, dark ink), a size smaller (owner request, Oct 5);
     one weight step heavier, 400 -> 500 Medium, for clearer strokes (owner request, Oct 7) */
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
/* Stats: like the hero's office strip */
.story-stats { display: grid; grid-template-columns: 1fr; /* one stat now ("Offices, one family" removed, owner request Oct 5) */ margin: clamp(32px, 5vw, 48px) 0 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.story-stats div { display: flex; flex-direction: column-reverse; padding: 24px 0; }
.story-stats div + div { padding-left: 28px; border-left: 1px solid var(--line-strong); }
.story-stats dt { margin-top: 10px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.story-stats dd { margin: 0; font-family: var(--display); font-size: clamp(3.6rem, 7vw, 5.5rem); font-weight: 700; line-height: 1; color: var(--ink); } /* bigger and bold (owner request, Oct 5) */
/* "40+yrs" with "Serving our community" stretched beside it (owner request, Oct 5) */
.story-stats .stat-row {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num serving";
  align-items: center; column-gap: clamp(16px, 2.5vw, 28px); text-align: left;
}
.story-stats .stat-row dt { grid-area: serving; margin: 0; }
.story-stats .stat-row dd { grid-area: num; white-space: nowrap; position: relative; top: -0.21em; } /* old-style "4" hangs low: lift so the ink is centered between the lines */
.stat-unit { font-size: 0.5em; margin-left: 0.06em; } /* "yrs" smaller beside the big number */
.stat-serving {
  display: block; font-size: clamp(0.6875rem, 1.6vw, 1.4rem); letter-spacing: 0.2em;
  text-align: justify; text-align-last: justify; /* words spread edge to edge */
}
html[lang="es"] .stat-serving { letter-spacing: 0.06em; font-size: clamp(0.625rem, 1.3vw, 1.15rem); } /* longer Spanish wording still fits on one line */
@media (min-width: 900px) {
  .story-layout { grid-template-columns: 5fr 7fr; gap: var(--s6); text-align: left; }
  .story .kicker { justify-content: flex-start; }
  .story h2 { font-size: clamp(2.9rem, 4.2vw, 3.9rem); line-height: 1.02; } /* Lou's section-heading size */
  .story-text p { margin-left: 0; }
}

/* ---------- 5c. Meet Our Team (owner-approved Oct 7, 2026) ----------
   Revision 2: sits UNDER the unchanged Our Story (photo band, heading, paragraphs, 40+ stat), on the same cream
   background. Compact text-only cards grouped by office (no photos, avatars or initials): four per row on wide
   screens, smaller "View full expertise" buttons. Same fonts and brown buttons as the rest of the page. */
/* Stat under the heading (rev 6): no top/bottom rules, tighter spacing; same number and caps styling as before */
.story-stats--under-title { margin: clamp(20px, 3vw, 32px) 0 0; border-top: 0; border-bottom: 0; }
.story-stats--under-title div { padding: 0; }
/* narrower column than before: caption kept on one line beside the number, still spread edge to edge */
.story-stats--under-title .stat-serving { white-space: nowrap; font-size: clamp(0.625rem, 0.95vw, 0.875rem); letter-spacing: 0.2em; }
/* Spanish caption is much longer: up to two left-aligned lines at a readable size instead of shrinking it */
html[lang="es"] .story-stats--under-title .stat-serving {
  white-space: normal; text-align: left; text-align-last: left;
  font-size: clamp(0.6875rem, 0.95vw, 0.875rem); letter-spacing: 0.14em; line-height: 1.5;
}
.team-layout { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line-strong); }
.team-title {
  margin: 0; text-align: center;
  font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1;
}
.team-title em { font-style: italic; color: var(--brown); }
.team-groups { margin-top: clamp(20px, 3vw, 32px); text-align: left; }
.team-group + .team-group { margin-top: clamp(28px, 4vw, 44px); }
.team-group-head { margin-bottom: var(--s3); padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.team-group-head .location-tag { margin: 0 0 2px; }
.team-group-head h4 { margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); font-weight: 300; line-height: 1.1; }
/* Cards left-aligned in every row, including short rows (owner request, Oct 7): Vista 4 + 3, Escondido 2 */
/* align-items: flex-start = each card keeps its natural height (no stretching to the tallest card in the row) */
.team-cards { --cols: 1; --gap: 12px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: var(--gap); }
.team-cards > li { display: flex; min-width: 0; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.team-card {
  display: flex; flex-direction: column; width: 100%;
  padding: 18px 18px 16px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brown);
}
.team-card-name { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; } /* 400 -> 500 Medium (owner request, Oct 7) */
.team-card-title { margin: 5px 0 12px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown); }
.team-meta { margin: 0 0 12px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.team-meta div { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.team-meta dt { padding-top: 2px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.team-meta dd { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--ink); }
.team-meta-line { display: block; }
.team-card-bio { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.team-exp-wrap { margin-top: auto; }
/* Smaller than the page's main buttons; same brown → white-with-brown-text hover */
.team-exp-toggle { min-height: 34px; padding: 0 14px; font-size: 0.6875rem; letter-spacing: 0.14em; }
.team-exp { margin-top: 12px; }
.team-exp-k { margin: 0 0 var(--s2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* One bullet per line, left-aligned; related specialties share a bullet, joined with commas (js/team.js groups) */
.team-exp-list { display: block; text-align: left; }
.team-exp-list li { position: relative; padding-left: 13px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.team-exp-list li + li { margin-top: 5px; }
.team-exp-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--brown); }
@media (min-width: 600px) { .team-cards { --cols: 2; } }
@media (min-width: 900px) { .team-cards { --cols: 3; --gap: 16px; } }
@media (min-width: 1200px) { .team-cards { --cols: 4; } }

/* Floating team bio (Two Locations). Text only; same paper card as the directions chooser. */
.bio-pop {
  position: fixed; z-index: 70; width: 360px; max-width: calc(100vw - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px 18px; background: var(--paper); color: var(--ink); text-align: left;
  border: 1px solid var(--line); border-top: 3px solid var(--brown); box-shadow: 0 18px 50px rgba(15, 13, 11, 0.28);
  font-family: var(--ui);
}
.bio-pop[hidden] { display: none; }
.bio-pop:focus { outline: none; }
.bio-pop:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.bio-pop-close {
  position: absolute; top: 6px; right: 6px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; color: var(--ink-2); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.bio-pop-close:hover { color: var(--brown); border-color: var(--line); }
.bio-pop-close:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; }
.bio-pop-office { margin: 0 44px 2px 0; font-size: 0.65625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown); }
.bio-pop-name { margin: 0 44px 0 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.15; }
.bio-pop-title { margin: 4px 0 var(--s3); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bio-pop .team-meta div { grid-template-columns: 6.5rem minmax(0, 1fr); }
.bio-pop-bio { margin: 0 0 var(--s3); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- 6. Appointment form ---------- */
.bring { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.bring h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.bring-list li { position: relative; padding: 3px 0 3px 1.25rem; color: var(--ink-2); }
.bring-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 7px; height: 1px; background: var(--ink); }
.form-head-2 { margin-top: var(--s2); }
select:disabled { background-color: var(--cream); color: var(--muted); cursor: not-allowed; }
.appointment-layout { display: grid; gap: var(--s5); }

.next-steps { display: grid; gap: var(--s2); margin: var(--s4) 0; }
.next-steps li { display: flex; align-items: baseline; gap: var(--s3); }
.next-steps span[aria-hidden="true"] { /* the number circle only, not the translated step text */
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 600 0.85rem/1 var(--serif);
  transform: translateY(-2px);
}
.appointment-call a { font-weight: 600; }


/* Form spans the page: "Your Information" left, "Appointment Details" right (owner request, Oct 5) */
.form-cols { display: grid; gap: 0 var(--s6); }
@media (min-width: 900px) {
  .form-cols { grid-template-columns: 1fr 1fr; align-items: start; }
  .form-col .form-head-2 { margin-top: 0; } /* both column headings on the same line */
}
/* "What to Bring" sits below the form (photo removed, owner request Oct 5) */
/* "What to Bring" as its own feature panel, not a footer-like list (owner request, Oct 5): cream panel, display-font
   title, and each item as a small white card with a brown top edge and a check mark. Wording unchanged. */
.appointment-extras .bring {
  margin-top: 0; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line);
  background: var(--cream);
}
.appointment-extras .bring h3 {
  font-family: var(--display); font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.4rem); line-height: 1.1;
  margin: 0 0 var(--s4); color: var(--ink);
}
.appointment-extras .bring-list li {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 18px 22px; background: #fff; border: 1px solid var(--line); border-top: 3px solid #6f4e37;
  color: var(--ink); font-size: 0.9375rem; line-height: 1.5;
}
.appointment-extras .bring-list li::before {
  content: "✓"; position: static; display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: #6f4e37; color: #fff;
  font-size: 0.8125rem; font-weight: 600; line-height: 1;
}
/* Phones: check mark beside the text so the stacked cards stay compact */
@media (max-width: 599px) {
  .appointment-extras .bring-list { gap: 10px; }
  .appointment-extras .bring-list li { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
}
/* items spread across the full width (owner request, Oct 5): one row on desktop, wrapping on smaller screens */
.appointment-extras .bring-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }

.form {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--ink);
  padding: var(--s4) var(--s3);
}
@media (min-width: 600px) { .form { padding: var(--s5); } }

.form-dev-notice {
  margin-bottom: var(--s4);
  padding: var(--s3);
  background: #fff3c4;
  border: 1px dashed #b08a12;
  font-size: 0.875rem;
}
.form-dev-notice strong { display: block; }

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.form-head h3 { margin: 0; }
.form-head p { margin: 0; font-size: 0.8125rem; color: var(--muted); }

.form-row { display: grid; gap: 0 var(--s4); }
@media (min-width: 600px) { .two-col { grid-template-columns: 1fr 1fr; } }

.field { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
.field > label,
.field legend {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
  padding: 0;
}
.req { color: var(--error); }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.4 var(--sans); /* 16px+ prevents iOS zoom on focus */
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"] { min-width: 0; }
select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161514' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
textarea { resize: vertical; min-height: 120px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  border-color: var(--ink);
}
[aria-invalid="true"] { border-color: var(--error); }

/* Radio options styled as selectable boxes */
.option-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.option {
  position: relative;
  flex: 1 1 120px;
  cursor: pointer;
}
.option input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.option span {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 50px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-weight: 500;
  transition: border-color 0.15s, background-color 0.15s;
}
.option span::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--paper);
}
.option:hover span { border-color: var(--ink-2); }
.option input:checked + span { border-color: var(--ink); background: var(--cream); }
.option input:checked + span::before { border: 5px solid var(--ink); }
.option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.option input[aria-invalid="true"] + span { border-color: var(--error); }

/* SMS consent checkbox (optional, unchecked by default) */
.field-phone { margin-bottom: var(--s3); }
.field > .consent-label { /* sentence text, not the small-caps field label style */
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--ink-2);
  cursor: pointer;
}
.consent-label input {
  flex: none;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.consent-label input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent-privacy { margin: var(--s1) 0 0 calc(20px + var(--s3)); font-size: 0.8125rem; } /* lines up with the consent text */

.field-hint { font-size: 0.8125rem; color: var(--muted); margin: var(--s1) 0 0; }
.field-error { font-size: 0.875rem; font-weight: 500; color: var(--error); margin: var(--s1) 0 0; }
.field-error:empty { display: none; }
/* Service-based preparer filtering (Oct 7, 2026): announced change note + "not available at this office" panel */
.field-note { font-size: 0.875rem; font-weight: 500; color: var(--brown); margin: var(--s1) 0 0; }
.field-note:empty { display: none; }
.avail { margin: var(--s2) 0 0; padding: 12px 14px; background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--brown); }
.avail[hidden] { display: none; }
.avail-msg { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
.avail-btn { margin-top: 10px; min-height: 40px; }
.avail-btn[hidden] { display: none; }

.field-warning {
  display: flex;
  gap: var(--s2);
  font-size: 0.875rem;
  line-height: 1.5;
  background: var(--cream);
  border-left: 3px solid var(--ink);
  padding: var(--s2) var(--s3);
  margin: 0 0 var(--s2);
}

.form-note { font-size: 0.8125rem; color: var(--muted); margin: var(--s3) 0 0; text-align: center; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status:not(:empty) {
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--ink);
  background: var(--cream);
  font-weight: 500;
}
.form-status.is-error { border-color: var(--error); background: #fbeeee; color: var(--error); }

/* Confirmation panel: replaces the fields after a successful send */
.form.is-sent > :not(.form-confirm) { display: none; }
.form-confirm:focus { outline: none; }
.confirm-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--s3);
  border: 1px solid var(--ink); border-radius: 50%;
  font: 600 1.25rem/1 var(--sans);
}
.form-confirm h3 { font-size: 1.6rem; margin-bottom: var(--s2); }
.form-confirm > p { color: var(--ink-2); }
.confirm-summary { margin: var(--s4) 0; border-top: 1px solid var(--line); }
.confirm-summary div { display: grid; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.confirm-summary dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.confirm-summary dd { margin: 0; font-weight: 600; }
.confirm-pending { /* tag after the requested date/time: not yet confirmed */
  display: inline-block; margin-top: 4px; padding: 1px 8px;
  border: 1px solid var(--line-strong); border-radius: 99px; background: var(--cream);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap;
}
@media (min-width: 600px) { .confirm-summary div { grid-template-columns: 13rem 1fr; gap: var(--s3); } }
.confirm-note { font-size: 0.9375rem; }
@media (max-width: 480px) { .form-confirm .btn { width: 100%; } }
.form-status.is-dev { border: 1px dashed #b08a12; background: #fff3c4; color: var(--ink); }

/* ---------- Form launch states (data-form-state on #appointment) ---------- */
.appointment-unavailable { display: none; }
[data-form-state="unavailable"] .appointment-layout { display: none; }
[data-form-state="unavailable"] .appointment-unavailable { display: block; }
[data-form-state]:not([data-form-state="development"]) .form-dev-notice { display: none; }

/* Unavailable state: an editorial call-us block (same rules and type as the rest of the page, no alert box) */
.unavailable-panel { display: grid; gap: var(--s5); }
.unavailable-intro .lead { margin-bottom: var(--s2); }
.unavailable-sub { margin: var(--s4) 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.call-list { display: grid; }
.call-list li {
  display: flex;
  flex-direction: column;
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}
.call-list li:first-child { border-top-color: var(--ink); }
.call-list li:last-child { border-bottom: 1px solid var(--line); }
.call-list .contact-label { color: var(--muted); margin-bottom: var(--s2); }
.call-phone {
  align-self: flex-start;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.2;
  text-decoration: none;
}
.call-phone:hover { text-decoration: underline; }

@media (min-width: 600px) {
  .call-list { grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
  .call-list li { border-top-color: var(--ink); border-bottom: 1px solid var(--line); } /* two columns, each with its own rules */
}
@media (min-width: 1024px) {
  .unavailable-panel { grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: end; }
}

/* ---------- 7. Final CTA ---------- */
.section-dark { background: var(--ink); color: var(--paper); }
.section-dark :focus-visible { outline-color: var(--paper); }
.section-dark .kicker { color: #a9a296; }
.section-dark p { color: #d9d3c9; }
.contact-layout { display: grid; gap: var(--s5); align-items: center; }
.contact-list {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 var(--s5);
  border-top: 1px solid var(--line-strong);
}
.contact-text > p { color: var(--ink-2); }
.contact-media img { border: 1px solid var(--line-strong); }
.contact-list li { padding-top: var(--s3); }
.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s1);
}
.contact-phone {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  text-decoration: none;
}
.contact-phone:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .contact-text .btn { width: 100%; } /* matches the full-width hero and location buttons on phones */
}
.contact-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Desktop: text column sized to its content (~47%), larger photo (~53%) sitting close to the text */
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--s5); }
  .contact-media img { aspect-ratio: 4 / 3; }
}

/* ---------- 8. Footer ---------- */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: var(--s5) 0 var(--s4);
  font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: var(--s4); }
.footer-grid p { margin: 0; }
.footer-brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; } /* same as the header brand name */
.footer-since { /* same treatment as the hero longevity line */
  margin-top: var(--s1) !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.footer-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s2) !important;
}
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s3);
  font-size: 0.8125rem;
  color: var(--muted);
}
.footer-bottom::before { /* rule spans the content width, aligned with the columns above */
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--line);
}
.footer-bottom p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }

/* Social icons, bottom-left: 20px PNG logos in the footer text color, each inside a 44px tap/focus area */
.footer-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.footer-social { display: flex; gap: var(--s1); margin-left: -12px; } /* aligns the first logo with the text edge */
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius);
  transition: opacity 0.15s;
}
.footer-social a:hover { opacity: 0.7; }
.footer-social a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.footer-social img { width: 20px; height: 20px; display: block; }
.footer-bottom { align-items: center; }
.simple-footer { margin-top: var(--s6); background: var(--cream); border-top: 1px solid var(--line); padding: var(--s2) 0; font-size: 0.8125rem; color: var(--muted); }
.simple-footer .footer-bottom { margin-top: 0; padding-top: 0; }
.simple-footer .footer-bottom::before { display: none; }

@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Simple pages (thank-you, privacy, 404) ---------- */
.simple-page { padding: var(--s6) var(--gutter); max-width: 720px; }
.page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.page-bar .kicker { margin-bottom: 0; }
.simple-page h2 { font-size: 1.9rem; font-weight: 400; margin-top: var(--s5); }
.page-bar .kicker a { text-decoration: none; }

/* Client resource pages (IRS / FTB) */
.res-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: var(--s4) 0 var(--s2); }
.res-list { margin: var(--s4) 0; border-top: 1px solid var(--ink); }
.res-list a {
  display: grid;
  gap: 2px;
  padding: var(--s3) 2rem var(--s3) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  position: relative;
}
.res-list a::after { content: "↗"; position: absolute; right: 4px; top: var(--s3); color: var(--muted); }
.res-list a:hover .res-name { text-decoration: underline; }
.res-name { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; }
.res-desc { color: var(--ink-2); font-size: 0.9375rem; }
.res-url { color: var(--muted); font-size: 0.8125rem; }
.res-note { font-size: 0.875rem; color: var(--muted); }
.res-help a, .res-foot a { font-weight: 600; }

/* ---------- Optional mobile bar (disabled in HTML for now) ---------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s2);
  padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  z-index: 40;
}
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* ---------- Directions chooser: Apple Maps / Google Maps (after Lou's design) ---------- */
.map-pop {
  position: fixed; z-index: 70; width: 272px; max-width: calc(100vw - 32px);
  padding: 18px 18px 10px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(15, 13, 11, 0.28);
  font-family: var(--ui);
}
.map-pop[hidden] { display: none; }
.map-pop-k { margin: 0; font-size: 0.65625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown); }
.map-pop-addr { margin: 6px 0 10px; font-family: var(--display); font-size: 1.2rem; line-height: 1.25; }
.map-pop-links { display: flex; flex-direction: column; }
.map-pop-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 2px; border-top: 1px solid var(--line); text-decoration: none;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.2s;
}
.map-pop-links a:hover { color: var(--brown); }
.map-pop-links a:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; }

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