/* The Notary Way — site styles, focus pass 2026-10-09.
   New immutable version of tnw-conversion-20261009.css; that file and tnw-20261009.css stay
   byte-identical for cached and rollback pages.

   WHY (owner, phone screenshot 2026-10-09): "way way way too much ... going on", "do not understand
   clear separate sections", "every section I should be able to focus without being distracted by the
   next section", "especially the main hero". The previous pass answered separation with heavier edges
   and padding around the same stack; the screenshot proved that legible, bordered groups still compete.
   This version changes priority and grouping, not only edges:
   - one quiet header row; below 1024px the four destinations sit behind an accessible Menu disclosure;
   - the hero carries one message: the H1, its short explanation and one photograph. Price, hours and
     languages moved to a "Price, hours and booking" group in a later section; contact actions live in
     the persistent bar, so the opening has one action group, not two;
   - every band is one topic: its own surface, one section rule, generous but bounded space and at most
     one soft panel inside, so the band edge is the strongest line in view and the next topic waits;
   - the persistent Call / Text / More bar keeps every method and draft but drops the rims and outlines.
   Removing these choices brings back the rejected first screen (four nav tiles, a framed fact/button card
   under the lead, a second button cluster in the bar). checks/focus_guard.py guards the structure.

   Host Grotesk 1.002 © The Host Grotesk Project Authors — SIL Open Font License 1.1,
   see /assets/host-grotesk-OFL-20261009.txt. Self-hosted: the site CSP allows font-src 'self' only. */

@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/host-grotesk-latin-1002-20261009.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/host-grotesk-latin-ext-1002-20261009.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arial resized to Host Grotesk's measured body-text width and exact vertical metrics
   (UPM 1000, ascender 1015, descender 315; overrides = metric / size-adjust) so the
   font-display swap moves text as little as possible. Tuned in Chrome against real strings. */
@font-face {
  font-family: "Host Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.4%;
  ascent-override: 98.16%;
  descent-override: 30.46%;
  line-gap-override: 0%;
}

:root {
  /* Split-complementary scheme taken from the TNW monogram: dominant cool forest, a thin warm
     clay accent, on a warm low-saturation paper field. Text pairs are chosen for near-opposite
     lightness: ink on paper 15.3:1, secondary 9.4:1, cream on forest 11.5:1. */
  --paper: #fbf8f1;
  --paper-deep: #f3eee2;
  --card: #fffdf8;
  --sage: #e5ece4;
  --sage-deep: #d7e1d8;
  --ink: #0f241d;
  --ink-soft: #33473f;
  --forest: #0f3d2e;
  --forest-hover: #1c5240;
  --forest-deep: #082419;
  --clay: #c24a22;
  --clay-ink: #9b3a16;
  --clay-soft: #f2a582;
  --error-ink: #8f3410;
  --cream: #fff8ec;
  --cream-soft: #dfe8e2;
  --border: #5f776c;
  --rule: #c3cec6;
  /* WHY: quiet functional line for chrome and list dividers (≈2.7:1 on paper) — visible without
     competing with the section rule, which stays the one strong line between topics. */
  --line: #8fa197;
  --glyph-light: #ffffff;
  --glyph-dark: #02100b;

  --font: "Host Grotesk", "Host Grotesk Fallback", Arial, sans-serif;
  --text-small: 1rem;
  --text-body: clamp(1.125rem, 1.07rem + .22vw, 1.1875rem);
  --text-lead: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --text-h1: clamp(2.25rem, 1.6rem + 2.9vw, 4.25rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --text-h3: clamp(1.25rem, 1.17rem + .35vw, 1.4375rem);

  --wrap: 1180px;
  --gutter: clamp(18px, 4.6vw, 48px);
  --radius: 22px;
  --radius-s: 14px;
  /* Bar: 50px targets + 7px padding each side. */
  --bar-h: 64px;
  /* WHY: one rule per topic boundary (forest on paper ≈11:1). Inner frames were removed instead of
     thickening this edge again; the old 3px edge plus framed children read as "too much". */
  --section-edge: 2px solid var(--forest);
  --measure: 40rem;
  --shadow: 0 1px 0 rgba(8, 36, 25, .07), 0 22px 44px -26px rgba(8, 36, 25, .42);

  /* Owner's standing readability preference: a fine contrasting contour around every glyph.
     Painted under the fill (paint-order) so letter interiors stay open; dark surfaces swap
     --glyph-edge to a near-black green. Width scales with type role. */
  --glyph-w: .55px;
  --glyph-edge: var(--glyph-light);
}

*, *::before, *::after { box-sizing: border-box; }
* {
  -webkit-text-stroke-width: var(--glyph-w);
  -webkit-text-stroke-color: var(--glyph-edge);
  paint-order: stroke fill;
}
svg, svg * { paint-order: normal; -webkit-text-stroke-width: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 20px;
  /* Keyboard focus and in-page jumps must never land under the fixed bar (WCAG 2.2 focus not obscured). */
  scroll-padding-bottom: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px));
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  font-kerning: normal;
  /* Keep the last lines of every page clear of the fixed booking bar. */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
img { display: block; max-width: 100%; height: auto; }
/* Author display rules (grid/flex) would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; color: inherit; text-wrap: balance; --glyph-w: .9px; }
h1 { font-size: var(--text-h1); line-height: 1.04; letter-spacing: -.032em; font-weight: 730; --glyph-w: 1.3px; }
h2 { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -.024em; font-weight: 690; }
h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -.012em; font-weight: 660; }
p { margin: 0; }
p + p { margin-top: .9em; }
p, li, dt, dd, blockquote { text-wrap: pretty; }
strong { font-weight: 690; }
ul, ol { margin: 0; }
/* Underline colour is always explicit: with -webkit-text-stroke present, Chrome paints a
   currentColor decoration in the stroke colour, which made link underlines vanish. */
a {
  color: var(--forest); text-decoration-thickness: 2px; text-underline-offset: .2em;
  --link-line: var(--forest); text-decoration-color: var(--link-line);
}
a:hover { color: var(--forest-hover); --link-line: var(--clay); }
/* Focus rings sit outside the control, so their colour follows the surface around it:
   clay on light surfaces (4.6:1 on paper), cream on dark ones. */
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
.section-dark :focus-visible, .site-footer :focus-visible, .book-bar :focus-visible { outline-color: var(--cream); }
.section-dark .price-card :focus-visible, .section-dark .cost-part :focus-visible,
.book-bar .book-bar-panel :focus-visible { outline-color: var(--clay); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute; left: 12px; top: -120px; z-index: 60;
  background: var(--forest); color: var(--cream); --glyph-edge: var(--glyph-dark);
  padding: 12px 18px; border-radius: 12px; font-weight: 680; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Paired breakpoints use N.98px upper bounds: at fractional layout widths (zoom, non-integer device
   pixel ratios) a 1023px/1024px pair leaves a gap where neither rule applies and the header and
   bar disagree (observed at 1024px in a 2.13-DPR reflow frame). */
/* ---------- Header ---------- */
/* WHY: the header is chrome, not a topic. One quiet row (brand, language, Menu) replaces the brand
   row plus two rows of equal-weight navigation tiles that filled the top of the owner's phone screen.
   Every destination and the language switch remain: Español/English stays visible in the row, the
   four pages are one tap away in the Menu disclosure (native <details>, works without JavaScript),
   and the footer repeats them. From 1024px the same four links sit inline as quiet text links. */
.masthead { position: relative; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead-inner { display: flex; align-items: center; gap: 8px; min-height: 64px; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text { display: grid; line-height: 1.15; }
.brand-name { font-size: 1rem; font-weight: 720; letter-spacing: -.01em; white-space: nowrap; }
.brand-tag { display: none; font-size: 1rem; font-weight: 520; color: var(--ink-soft); }
.masthead-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.lang-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 10px;
  font-size: 1rem; font-weight: 640; color: var(--forest); text-decoration: none; white-space: nowrap;
}
.lang-link .icon { display: none; color: var(--forest); }
.lang-link:hover { background: var(--sage); color: var(--forest); }
.primary-nav { display: none; }

.site-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 12px; border: 1.5px solid var(--forest); border-radius: 12px;
  background: var(--card); color: var(--forest); font-size: 1rem; font-weight: 660; white-space: nowrap;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary .icon { width: 20px; height: 20px; stroke-width: 2.1; }
.site-menu .icon-close { display: none; }
.site-menu > summary:hover { background: var(--sage); }
.site-menu[open] > summary { background: var(--forest); color: var(--cream); --glyph-edge: var(--glyph-dark); }
.site-menu[open] .icon-open { display: none; }
.site-menu[open] .icon-close { display: block; }
/* The panel hangs from the header (the positioned ancestor), full width, over the page — no layout
   shift. Escape, an outside tap or choosing a link closes it (tnw-focus-20261009.js). */
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--paper); border-bottom: 2px solid var(--forest);
  box-shadow: 0 30px 48px -30px rgba(8, 36, 25, .55);
  padding: 4px var(--gutter) 16px;
}
.menu-panel ul { list-style: none; padding: 0; margin: 0 auto; max-width: 40rem; }
.menu-panel li + li { border-top: 1px solid var(--rule); }
.menu-panel a {
  display: flex; align-items: center; min-height: 56px; padding: 6px 8px;
  font-size: 1.1875rem; font-weight: 620; color: var(--ink); text-decoration: none;
}
.menu-panel a:hover { background: var(--sage); color: var(--forest); }
.menu-panel a[aria-current] { color: var(--forest); font-weight: 730; box-shadow: inset 4px 0 0 var(--clay); padding-left: 18px; }
/* WHY: an icon-only menu made the next step less explicit for the older/impatient audience.
   Keep the word Menu/Menú at narrow widths; its redundant icon can yield space instead.
   Below 350px the decorative seal yields space too, keeping brand and language text apart. */
@media (max-width: 379px) {
  .site-menu > summary { padding: 0 11px; }
  .site-menu > summary .icon { display: none; }
}
@media (max-width: 349.98px) { .brand-mark { display: none; } }
@media (min-width: 520px) {
  .masthead-inner { gap: 12px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { font-size: 1.125rem; }
  .lang-link .icon { display: inline-block; }
}
@media (min-width: 1024px) {
  .masthead-inner { min-height: 84px; gap: clamp(14px, 2vw, 26px); }
  .brand { gap: 12px; }
  .brand-mark { width: 48px; height: 48px; }
  .brand-name { font-size: 1.25rem; }
  .brand-tag { display: block; }
  .primary-nav { display: block; }
  .primary-nav ul { display: flex; gap: 4px; list-style: none; padding: 0; }
  .primary-nav a {
    display: block; padding: 10px 13px; border-radius: 10px;
    color: var(--ink); font-size: 1.0625rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .primary-nav a:hover { background: var(--sage); color: var(--ink); }
  /* Current page: forest text on a clay underline — orientation without a filled pill that competes
     with the page headline. */
  .primary-nav a[aria-current] {
    color: var(--forest); font-weight: 700;
    text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 3px; text-underline-offset: .5em;
  }
  .site-menu { display: none; }
}
@media (min-width: 1024px) and (max-width: 1100px) {
  .primary-nav a { padding-inline: 10px; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 18px; border-radius: var(--radius-s);
  border: 2px solid var(--forest); font-size: 1.125rem; font-weight: 690; line-height: 1.2;
  text-decoration: none; text-align: center;
}
.btn-primary {
  background: var(--forest); color: var(--cream); --glyph-edge: var(--glyph-dark);
  min-height: 62px; font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.btn-primary:hover { background: var(--forest-hover); color: var(--cream); }
.btn-secondary { background: var(--card); color: var(--forest); }
.btn-secondary:hover { background: var(--sage); color: var(--forest); }
.btn-label { min-width: 0; }
/* inline-block + balance keeps the arrow beside the last words when the link wraps. */
.text-link { display: inline-block; font-weight: 650; text-wrap: balance; }
.text-link .icon { display: inline-block; width: 1.1em; height: 1.1em; margin-left: .35em; vertical-align: -.2em; }
.tel, .footer-phone { white-space: nowrap; }

/* ---------- Hero ---------- */
/* WHY: the rejected hero stacked a long headline, a framed price/hours/language list and three buttons
   above the persistent three-button bar. It now says one thing — the H1 and its short explanation —
   and closes on one photograph, so the next topic stays below the first phone screen. Do not return a
   button cluster or fact badges here: two equal action groups in one view was the defect. */
/* The closing space plus the 16:10 media keeps the next band's heading below the first phone screen
   (measured 390×764 reflow) without a viewport-height hero. */
.hero { padding-block: clamp(28px, 4.6vw, 72px) clamp(64px, 8vw, 104px); }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.lead { margin-top: 18px; font-size: var(--text-lead); line-height: 1.5; color: var(--ink-soft); max-width: 34em; }
.hero-media {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 58%;
  border-radius: var(--radius); background: var(--paper-deep);
}
/* Online pages: the line illustration is cropped only in its empty side field (cover, 5:4), so the whole
   drawing shows larger and the hero ends below the first phone screen like the photo hero (measured
   390×764: the forest cost band's heading had peeked above the bar at 16:10 contain). */
.hero-media-art { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 52%; background: #eeeae0; }
/* Preserve a readable hero measure on wider screens so the next topic does not
   compete with the opening. No fixed viewport height or scroll locking. */
@media (min-width: 440px) { .hero-copy h1 { max-width: 15ch; } }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero-media { max-width: 720px; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); }
  .hero-copy h1 { max-width: 15ch; }
  .hero-media { aspect-ratio: 5 / 4; }
}

/* ---------- Sections ---------- */
/* WHY (owner): "clear separate sections" and "every section I should be able to focus without being
   distracted by the next section". Each band is one topic on its own surface; light bands begin at the
   single section rule. Inside a band, space and type carry the grouping with at most one soft panel,
   so the band boundary is the strongest line in view. Padding is generous but bounded: no
   viewport-height bands, no scroll snapping, nothing hidden to make a band short. */
.section { padding-block: clamp(56px, 8vw, 112px); }
.section, .notice-band { border-top: var(--section-edge); }
.section-dark { border-top: 0; }
.section-paper { background: var(--paper); }
.section-deep { background: var(--paper-deep); }
.section-card { background: var(--card); }
.section-sage { background: var(--sage); }
.section-dark { background: var(--forest); color: var(--cream); --glyph-edge: var(--glyph-dark); }
.section-dark a { color: var(--cream); --link-line: var(--cream); }
.section-dark a:hover { color: var(--cream); --link-line: var(--clay-soft); }
.section-head { max-width: 46rem; margin-bottom: clamp(26px, 3.4vw, 44px); }
/* The clay start mark is the quiet entry of every topic (same motif as the guide questions). */
.section-head h2::before {
  content: ""; display: block; width: 46px; height: 5px; border-radius: 3px;
  background: var(--clay); margin-bottom: 18px;
}
.section-dark .section-head h2::before { background: var(--clay-soft); }
.section-head p { margin-top: 14px; font-size: var(--text-lead); color: var(--ink-soft); }
.section-dark .section-head p { color: var(--cream-soft); }
.kicker { font-size: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--clay-ink); margin-bottom: 10px; }

/* ---------- Service area + Price, hours and booking ---------- */
/* WHY: the facts that crowded the hero card (travel price with its act-fee qualifier, hours, appointment
   languages) keep their own heading and gain the phone number, next to where Liz travels — one topic:
   "can Liz come to me, when, and what does travel cost". The fee table follows as its own band. */
.area-grid { display: grid; gap: 32px 56px; }
@media (min-width: 900px) {
  .area-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
  .area-grid > .area-fork { grid-column: 1 / -1; }
}
.area-lead { font-size: var(--text-lead); line-height: 1.5; color: var(--ink); max-width: 30em; }
.zip-list { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.zip-list li {
  font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  padding: 6px 14px; border-radius: 999px; background: var(--card);
}
.zip-list li.zip-label {
  flex-basis: 100%; padding: 0; border-radius: 0; background: none;
  font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--ink-soft);
}
.glance { background: var(--card); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); }
.glance > h3 { font-size: var(--text-h3); }
.facts { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.fact-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--sage); color: var(--forest); display: grid; place-items: center; }
.fact-icon .icon { width: 22px; height: 22px; }
.section-sage .facts-band .fact-icon { background: var(--card); }
.facts p { line-height: 1.35; }
.facts strong { font-size: 1.1875rem; }
/* inline-block: a detail that doesn't fit moves to its own line whole ("hora central", not
   "hora / central"), and still wraps inside itself when even a full line is too narrow. */
.facts .fact-detail { color: var(--ink-soft); display: inline-block; }
.fact-call a { font-size: 1.1875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.area-fork, .hero-aside { font-size: 1.0625rem; }
.area-fork a, .hero-aside a { font-weight: 650; }
.area-fork { margin-top: 4px; }
/* Online pages: the same group is its own band after "how it works". */
.facts-band { max-width: 54rem; }
@media (min-width: 760px) { .facts-band { grid-template-columns: 1fr 1fr; gap: 18px 32px; } }
.glance-band .area-fork { margin-top: 28px; }

/* ---------- Steps and preparation ---------- */
/* WHY: steps were three bordered cards beside a bordered checklist card — four frames competing.
   Now the numbered steps read in order without frames, then one soft panel holds "Have these ready"
   underneath, so the band has one sequence and one practical takeaway. */
.steps-layout { display: grid; gap: clamp(32px, 4vw, 48px); }
.steps { list-style: none; padding: 0; display: grid; gap: 26px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 16px; }
.steps li::before {
  content: counter(step); grid-row: span 2; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3125rem; font-weight: 760;
  background: var(--forest); color: var(--cream); --glyph-edge: var(--glyph-dark);
}
.steps h3 { align-self: end; }
.steps p { color: var(--ink-soft); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
  .steps li::before { grid-row: auto; margin-bottom: 8px; }
}
.ready-card { background: var(--sage); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.ready-card h3 { font-size: var(--text-h3); }
.checklist { list-style: none; padding: 0; margin: 16px 0 18px; display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.checklist li::before {
  content: ""; width: 30px; height: 30px; border-radius: 50%; margin-top: 1px;
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5' fill='none' stroke='%23fff8ec' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.checklist small { display: block; color: var(--ink-soft); font-size: 1rem; margin-top: 2px; }
@media (min-width: 900px) {
  .ready-card { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 10px 48px; align-items: start; }
  .ready-card > h3 { grid-column: 1; grid-row: 1; }
  .ready-card > .checklist { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .ready-card > .text-link { grid-column: 1; grid-row: 2; align-self: start; }
}
.recipient-note {
  margin-top: 28px; padding: 16px 20px; border-left: 5px solid var(--clay); background: var(--paper-deep);
  border-radius: 0 14px 14px 0; max-width: 54rem;
}

/* ---------- Prices (dark band) ---------- */
/* WHY: prices keep the forest band (identity, and one unmistakable topic edge); the cards lose their
   double rings — on forest a cream card is already its own plane. Every amount keeps its act-fee
   qualifier beside it. */
.price-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.price-card {
  background: var(--card); color: var(--ink); --glyph-edge: var(--glyph-light);
  border-radius: var(--radius); padding: 26px 26px 24px;
}
.price-card a { color: var(--forest); --link-line: var(--forest); }
.price-card a:hover { color: var(--forest-hover); --link-line: var(--clay); }
.price-card h3 { display: flex; align-items: center; gap: 12px; }
.price-card h3 .icon { color: var(--clay-ink); width: 26px; height: 26px; }
.price-list { margin: 14px 0 0; }
.price-list div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.price-list dt { font-size: 1.1875rem; font-weight: 560; }
.price-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.price-amount { display: block; font-size: 2rem; line-height: 1.05; font-weight: 740; letter-spacing: -.02em; --glyph-w: .9px; }
.price-plus { display: block; font-size: 1rem; color: var(--ink-soft); white-space: nowrap; }
.price-big { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.price-big .price-amount { font-size: 2.75rem; }
.price-big .price-per { font-size: 1.125rem; font-weight: 600; }
.price-note { margin-top: 14px; color: var(--ink-soft); }
.price-card .text-link { margin-top: 16px; }
.price-total { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 1.125rem; }
.price-total strong { display: inline-flex; align-items: center; gap: 10px; }
.price-total .icon { color: var(--clay-ink); width: 24px; height: 24px; }
.section-dark .price-total .icon { color: var(--clay-soft); }

/* Online cost answer: two parts, read left to right. */
.cost-grid { display: grid; gap: 14px; margin-top: 4px; max-width: 54rem; }
@media (min-width: 760px) { .cost-grid { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.cost-part { background: var(--card); color: var(--ink); --glyph-edge: var(--glyph-light); border-radius: 20px; padding: 22px 22px 20px; }
.cost-part .price-amount { font-size: 2.5rem; }
.cost-part p { margin-top: 8px; color: var(--ink-soft); }
.cost-plus { display: grid; place-items: center; font-size: 2rem; font-weight: 760; color: var(--clay-ink); }
.section-dark .cost-plus { color: var(--clay-soft); }
.cost-word { font-size: 1.75rem; font-weight: 720; line-height: 1.15; letter-spacing: -.015em; }
.cost-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }

/* ---------- Spanish legal notice and statutory fees ---------- */
/* Required by Tex. Gov't Code §406.017 on Spanish advertising: the bilingual notice in letters of
   conspicuous size and the fees. Each stays fully visible in its own band — never collapsed. */
.notice-band { padding-block: clamp(56px, 8vw, 112px); }
.legal-notice {
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 36px); max-width: 64rem;
}
.legal-notice h2 { font-size: clamp(1.375rem, 1.25rem + .5vw, 1.625rem); display: flex; align-items: center; gap: 12px; }
.legal-notice h2 .icon { color: var(--clay-ink); width: 28px; height: 28px; }
.notice-languages { margin-top: 16px; display: grid; gap: 14px; }
@media (min-width: 900px) { .notice-languages { grid-template-columns: 1fr 1fr; gap: 28px; } }
.notice-languages p { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.42; font-weight: 720; letter-spacing: .01em; --glyph-w: .7px; }
.notice-languages p + p { margin-top: 0; }
.notice-details { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.fee-schedule {
  background: var(--card); color: var(--ink); --glyph-edge: var(--glyph-light);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); border: 2px solid var(--border); max-width: 64rem;
}
.fee-schedule a { color: var(--forest); --link-line: var(--forest); }
.fee-schedule a:hover { color: var(--forest-hover); --link-line: var(--clay); }
.fee-schedule h2, .fee-schedule h3 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: 1.25; letter-spacing: -.012em; font-weight: 660; }
.fee-schedule > p { margin-top: 10px; color: var(--ink-soft); }
/* Required disclosure: the table must never lose a column. It fits at 360px; if it ever
   cannot, the wrapper scrolls instead of hiding the amounts. */
.fee-table-wrap { margin-top: 18px; border: 2px solid var(--border); border-radius: 16px; overflow-x: auto; }
.fee-table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.fee-table caption { text-align: left; font-weight: 690; padding: 14px 16px; background: var(--sage); border-bottom: 2px solid var(--border); }
.fee-table th { text-align: left; padding: 12px 16px; background: var(--forest); color: var(--cream); --glyph-edge: var(--glyph-dark); font-size: 1rem; font-weight: 680; }
.fee-table th:last-child, .fee-table td:last-child { text-align: right; }
.fee-table td { padding: 12px 16px; border-top: 1px solid var(--rule); vertical-align: top; }
.fee-table tbody tr:nth-child(even) { background: #f3f6f2; }
.fee-table td:last-child { white-space: nowrap; font-size: 1.1875rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.fee-table td span[lang="en"] { display: block; margin-top: 3px; font-size: 1rem; color: var(--ink-soft); }
.fee-sources { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 640px) { .fee-sources { display: block; line-height: 1.7; } }
@media (max-width: 480px) {
  .fee-schedule { padding: 18px 14px; }
  .fee-table th, .fee-table td { padding: 10px 10px; }
  .fee-table caption { padding: 12px 10px; }
}

/* ---------- About Liz ---------- */
.about-grid { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 960px) { .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; } }
.about-copy h2 { margin-bottom: 18px; }
.about-copy p { color: var(--ink-soft); max-width: var(--measure); }
/* Deeper clay preserves strong text contrast on the warm about band. */
.about-copy .kicker { color: #86300f; }
/* Liz's own words close the band as its quiet exit. */
.about-quote {
  margin: 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--clay);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem); line-height: 1.25; font-weight: 620;
  letter-spacing: -.016em; color: var(--forest); --glyph-w: 1px;
}
.about-quote p { margin: 0; }

/* ---------- Questions ---------- */
/* FAQ — stable geometry: the summary keeps the same box open or closed. */
.faq-list { border-top: 2px solid var(--border); max-width: 54rem; }
.faq-list details { border-bottom: 2px solid var(--border); }
.faq-list summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 36px;
  gap: 18px; align-items: center; padding: 20px 2px; font-size: 1.25rem; font-weight: 660; line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--forest);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230f3d2e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.faq-list details[open] > summary::after {
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' stroke='%23fff8ec' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.faq-list summary:hover { color: var(--forest-hover); }
.faq-answer { padding: 0 54px 24px 2px; max-width: 44rem; color: var(--ink-soft); }
.faq-answer a { font-weight: 650; }
@media (max-width: 480px) { .faq-answer { padding-right: 8px; } }
.faq-sources { margin-top: 24px; font-size: 1rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 640px) { .faq-sources { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* Related / onward links: quiet cards; the arrow and words carry the affordance. */
.onward { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 12px; max-width: 54rem; }
@media (min-width: 760px) { .onward { grid-template-columns: 1fr 1fr; } }
.onward-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card);
  color: var(--ink); text-decoration: none;
}
.onward-link:hover { border-color: var(--forest); background: var(--paper); color: var(--ink); }
.onward-link strong { display: block; font-size: 1.125rem; }
.onward-link span { color: var(--ink-soft); font-size: 1rem; }
.onward-link .icon { color: var(--forest); }

/* ---------- Contact page ---------- */
/* WHY: three framed cards — one forest with a double ring — read as three competing pitches. They are
   now one panel with three rows (same links, labels and hints); Call keeps its priority through a
   filled forest icon and first position rather than a louder frame. */
.contact-grid {
  display: grid; margin-top: clamp(26px, 3.4vw, 40px); max-width: 64rem;
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius);
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center;
  padding: 18px 20px; color: var(--ink); text-decoration: none;
}
.contact-card + .contact-card { border-top: 1px solid var(--line); }
.contact-card:first-child { border-radius: 20px 20px 0 0; }
.contact-card:last-child { border-radius: 0 0 20px 20px; }
.contact-card:hover { background: var(--sage); color: var(--ink); }
.contact-card .contact-icon {
  grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sage); color: var(--forest); display: grid; place-items: center;
}
.contact-card .contact-icon .icon { width: 26px; height: 26px; }
.contact-card-primary .contact-icon { background: var(--forest); color: var(--cream); }
.contact-label { font-size: 1.3125rem; font-weight: 740; letter-spacing: -.015em; }
.contact-card-primary .contact-label { color: var(--forest); }
.contact-value { font-size: 1.1875rem; font-weight: 640; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contact-hint { margin-top: 4px; color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 900px) {
  .contact-card { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 24px 24px 22px; }
  .contact-card .contact-icon { grid-row: auto; margin-bottom: 10px; }
  .contact-card + .contact-card { border-top: 0; border-left: 1px solid var(--line); }
  .contact-card:first-child { border-radius: 20px 0 0 20px; }
  .contact-card:last-child { border-radius: 0 20px 20px 0; }
  .contact-label { font-size: 1.5rem; }
}
.tell-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .tell-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }
.tell-art { width: 100%; max-width: 420px; border-radius: 18px; }
@media (max-width: 959.98px) { .tell-art { max-width: 240px; } }
.confirm-line { margin-top: 6px; display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.confirm-line .icon { color: var(--clay-ink); width: 26px; height: 26px; margin-top: 1px; }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; max-width: 46rem; }
.info-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.info-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--sage); color: var(--forest); display: grid; place-items: center; }
.info-icon .icon { width: 22px; height: 22px; }
.info-list p { font-size: var(--text-lead); line-height: 1.5; padding-top: 6px; }

/* ---------- Guides index ---------- */
.page-hero { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.page-hero .lead { max-width: 36em; }
.page-hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } }
.page-hero-art { width: 100%; max-width: 320px; border-radius: 18px; justify-self: end; }
@media (max-width: 899.98px) { .page-hero-art { max-width: 200px; justify-self: start; } }
/* WHY: the guide list is the one band after the page hero; a sage surface (instead of near-paper card)
   makes its edge obvious without changing the CMS renderer's markup (class stays section-card). */
.section.guide-list { background: var(--sage); }
.guide-grid { display: grid; gap: 22px; }
@media (min-width: 860px) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-card {
  position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: clip;
}
.guide-card:hover { border-color: var(--forest); box-shadow: var(--shadow); }
.guide-card:focus-within { border-color: var(--forest); }
.guide-card img { width: 100%; aspect-ratio: 720 / 400; object-fit: cover; background: #eeeae0; }
.guide-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.guide-card h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.012em; }
.guide-card h2 a { color: var(--ink); text-decoration: none; }
/* The headline link covers the whole card, so wrapped title lines leave no dead gaps. */
.guide-card h2 a::after { content: ""; position: absolute; inset: 0; }
.guide-card h2 a:focus-visible { outline: none; }
.guide-card:has(a:focus-visible) { outline: 3px solid var(--clay); outline-offset: 3px; }
.guide-card p { color: var(--ink-soft); }
.guide-card-cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 680; color: var(--forest); }
@media (max-width: 859.98px) {
  /* Drawings are orientation, not information: keep them whole but short on phones. */
  .guide-card img { aspect-ratio: 3 / 1; object-fit: contain; }
}
.booking-line { margin-top: clamp(32px, 4vw, 48px); padding: 20px 22px; background: var(--card); border-radius: 18px; max-width: 54rem; }

/* ---------- Guide article ---------- */
.guide { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.guide-inner { width: min(100% - 2 * var(--gutter), 44rem); margin-inline: auto; }
.crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 640; text-decoration: none; }
.crumb .icon { transform: scaleX(-1); }
.guide h1 { margin-top: 14px; font-size: clamp(2.125rem, 1.5rem + 2.3vw, 3.375rem); --glyph-w: 1.1px; }
.deck { margin-top: 16px; font-size: var(--text-lead); color: var(--ink-soft); line-height: 1.5; }
.byline { margin-top: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 480px) { .byline [aria-hidden="true"] { display: none; } .byline > span { flex-basis: 100%; } }
.quick-answer { margin-top: 30px; display: grid; gap: 16px; align-items: center; background: var(--sage); border-radius: 20px; padding: 22px 24px; }
@media (min-width: 720px) { .quick-answer { grid-template-columns: minmax(0, 1fr) 190px; } }
@media (max-width: 719.98px) { .quick-answer img { max-width: 160px; } }
.quick-label { font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--forest); }
.quick-answer .checklist { margin: 12px 0 0; }
.quick-answer img { width: 100%; max-width: 220px; border-radius: 12px; }
/* Each guide question is its own group: a clay start mark and room above, no box around paragraphs.
   Applies to backend-rendered CMS guides too (pure CSS, no CMS change). */
.guide-body section { margin-top: 52px; }
.guide-body section:first-child { margin-top: 42px; }
.guide-body h2 { font-size: clamp(1.5rem, 1.32rem + .7vw, 1.875rem); }
.guide-body h2::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--clay); margin-bottom: 14px; }
.guide-body p { margin-top: 12px; }
/* The appointment line leads on its own; the two service links follow as a quieter second line
   (renderer markup: div.next-step > p.next-step-main + p). One soft panel, no ring. */
.next-step { margin-top: 52px; padding: 22px 24px; background: var(--sage); border-radius: 20px; }
.next-step .next-step-main { margin-top: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.next-step .next-step-main a { text-underline-offset: .18em; }
.next-step .next-step-main + p { margin-top: 10px; color: var(--ink-soft); }
.legal-aside { margin-top: 26px; padding: 16px 20px; border-left: 5px solid var(--clay); background: var(--paper-deep); border-radius: 0 14px 14px 0; }
.guide-links { margin-top: 52px; padding-top: 30px; border-top: 2px solid var(--border); display: grid; gap: 26px; }
@media (min-width: 720px) { .guide-links { grid-template-columns: 1fr 1fr; } }
.guide-links h2 { font-size: 1.25rem; }
.guide-links ul { margin-top: 12px; padding-left: 1.15em; display: grid; gap: 10px; }

/* ---------- Footer ---------- */
/* The page's exit: contact, explore and the legal line on forest-deep. No light band precedes it with
   a dark surface any more (Spanish fee bands are light), so the old cream/clay rim is not needed. */
.site-footer { background: var(--forest-deep); color: var(--cream); --glyph-edge: var(--glyph-dark); padding-block: clamp(48px, 6vw, 72px) 28px; }
.site-footer a { color: var(--cream); --link-line: var(--cream); }
.site-footer a:hover { color: var(--cream); --link-line: var(--clay-soft); }
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.footer-kicker { font-size: 1.125rem; font-weight: 640; color: var(--cream-soft); }
.footer-phone {
  display: inline-block; margin-top: 6px; font-size: clamp(1.875rem, 1.55rem + 1.3vw, 2.625rem); line-height: 1.05;
  font-weight: 750; letter-spacing: -.02em; text-decoration: none; font-variant-numeric: tabular-nums; --glyph-w: 1.1px;
}
.footer-phone:hover { text-decoration: underline; }
.footer-ways { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 1.0625rem; }
.footer-ways a { display: inline-flex; align-items: center; gap: 8px; font-weight: 620; overflow-wrap: anywhere; }
.footer-hours { margin-top: 16px; color: var(--cream-soft); }
.footer-hours span { display: block; }
@media (max-width: 899.98px) { .footer-nav { padding-top: 28px; border-top: 1px solid rgba(255, 248, 236, .3); } }
.footer-label { font-size: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--clay-soft); }
.footer-nav ul { list-style: none; padding: 0; margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 36px; }
.footer-nav a { font-size: 1.0625rem; font-weight: 560; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 248, 236, .3);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 28px; font-size: 1rem; color: var(--cream-soft);
}
.footer-legal p + p { margin-top: 0; }

/* ---------- Persistent bar (every page) ---------- */
/* WHY (owner): Call and Text stay one tap away on every page with Email and contact details in the
   same panel, but the shell must be "restrained, comfortable and easy". The rims, gradient and three
   outlined boxes made the bar a second loud action cluster under the hero card. Now: one solid forest
   strip, one filled Call button, Text and More as clear icon+label actions divided by a thin line.
   Every method, label, editable draft and tracking hook is unchanged (CSS only). */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  color: var(--cream); --glyph-edge: var(--glyph-dark);
  background: var(--forest);
  box-shadow: 0 -1px 0 var(--forest-deep), 0 -14px 30px -20px rgba(8, 36, 25, .6);
  padding: 7px max(10px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
}
.book-bar-inner { width: min(100%, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: 6px; }
.book-bar-label { margin: 0 auto 0 0; font-size: 1.1875rem; font-weight: 680; letter-spacing: -.005em; white-space: nowrap; --glyph-w: .7px; }
.bar-action, .bar-more > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 6px 18px; border-radius: 12px;
  font-size: 1.125rem; font-weight: 660; line-height: 1.15;
  text-decoration: none; white-space: nowrap; color: var(--cream);
}
.bar-action .icon, .bar-more > summary .icon { width: 21px; height: 21px; stroke-width: 2.1; }
/* Call is the quickest answer (contact page: "For the quickest response"): the one filled button,
   forest on cream ≈ 11:1. */
.bar-call { background: var(--cream); color: var(--forest); --glyph-edge: var(--glyph-light); font-weight: 720; font-variant-numeric: tabular-nums; }
.bar-call:hover { background: #ffffff; color: var(--forest); }
.bar-number { font-weight: 640; padding-left: 12px; border-left: 2px solid rgba(15, 61, 46, .3); }
.bar-sms, .bar-more > summary { background: transparent; color: var(--cream); }
.bar-more > summary { box-shadow: inset 1px 0 0 rgba(255, 248, 236, .28); border-radius: 0 12px 12px 0; }
/* Hover tint capped at 11% so cream text keeps ≥7:1. */
.bar-sms:hover, .bar-more > summary:hover { background: rgba(255, 248, 236, .11); color: var(--cream); }
.bar-more > summary { list-style: none; cursor: pointer; }
.bar-more > summary::-webkit-details-marker { display: none; }
.bar-more > summary .icon { stroke-width: 2.4; }
.bar-more[open] > summary { background: var(--cream); color: var(--forest); --glyph-edge: var(--glyph-light); box-shadow: none; border-radius: 12px; }
.bar-more[open] > summary .icon { transform: rotate(45deg); }
.bar-short { display: none; }
.book-bar :focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; border-radius: 14px; }
/* The panel is positioned against the fixed bar (details stays unpositioned on purpose). */
.book-bar-panel {
  position: absolute; right: max(12px, calc((100% - var(--wrap)) / 2)); bottom: calc(100% + 14px);
  width: min(480px, calc(100% - 24px)); max-height: calc(100vh - var(--bar-h) - 48px); overflow-y: auto;
  background: var(--card); color: var(--ink); --glyph-edge: var(--glyph-light);
  border: 2px solid var(--forest); border-radius: var(--radius); padding: 20px 20px 18px;
  box-shadow: 0 36px 70px -26px rgba(8, 36, 25, .7);
  white-space: normal;
}
.book-bar-title { font-size: 1.25rem; font-weight: 720; margin-bottom: 14px; }
.book-option {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none;
}
.book-option + .book-option { margin-top: 10px; }
.book-option:hover { background: var(--sage); border-color: var(--forest); color: var(--ink); }
.book-option .book-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--forest); color: var(--cream); display: grid; place-items: center; }
.book-option .book-icon .icon { width: 24px; height: 24px; }
.book-option strong { display: block; font-size: 1.1875rem; line-height: 1.2; }
.book-option span { display: block; font-size: 1.0625rem; color: var(--ink-soft); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.book-option span.tel { display: inline; }
.book-bar-note { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); }
/* Width tiers keep every label whole (no clipping, no wrap), measured in EN and ES: the "Book your
   appointment" words need ≥1024px beside the three actions; the number needs ≥900px; the long
   "Email & details" label ≥760px; phones use short labels. Hidden words stay in the accessible name. */
@media (max-width: 1023.98px) {
  .book-bar-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .bar-action, .bar-more > summary { flex: 1 1 auto; }
}
@media (max-width: 899.98px) {
  .bar-number { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 759.98px) {
  .bar-more .bar-long { display: none; }
  .bar-more .bar-short { display: inline; }
}
@media (max-width: 640px) {
  .book-bar-inner { gap: 4px; }
  .bar-action, .bar-more > summary { min-height: 50px; padding: 6px 10px; gap: 8px; font-size: 1.125rem; }
  .bar-action { flex: 1 1 0; min-width: 0; }
  .bar-more > summary { flex: 0 1 auto; }
  .bar-long { display: none; }
  .bar-short { display: inline; }
  .book-bar-panel { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); bottom: calc(100% + 12px); padding: 16px 14px 14px; }
}
@media (max-width: 374px) {
  .book-bar { padding-inline: 8px; }
  .book-bar-inner { gap: 2px; }
  .bar-action, .bar-more > summary { padding-inline: 7px; gap: 6px; font-size: 1.0625rem; }
  .bar-action .icon, .bar-more > summary .icon { width: 20px; height: 20px; }
}

/* ---------- Appointment request form (held; contact pages only when activated) ---------- */
/* WHY kept: the owner-deferred request form (held-form-ready, tnw-appointments-20261009.js) styles
   against these rules. No current page contains a form; the rules are inert until it is activated. */
.request-grid { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 960px) { .request-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; } }
.request-intro .section-head { margin-bottom: 0; }
.request-alt { margin-top: 20px; font-size: 1.125rem; }
.request-alt a { font-weight: 680; }
.request-panel {
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow);
}
.request-form { display: grid; gap: 22px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { font-size: 1.1875rem; font-weight: 690; line-height: 1.3; padding: 0; }
.field > legend { margin-bottom: 6px; }
.field-hint { font-size: 1rem; color: var(--ink-soft); }
.request-form input[type="text"], .request-form input[type="tel"] {
  width: 100%; min-height: 56px; margin: 2px 0 0; padding: 12px 16px;
  font: inherit; font-size: 1.1875rem; line-height: 1.3; color: var(--ink); background: #ffffff;
  border: 2px solid var(--border); border-radius: 12px; -webkit-text-stroke-width: 0;
}
.request-form input[type="text"]:hover, .request-form input[type="tel"]:hover { border-color: var(--forest); }
.request-form input[type="text"]:focus-visible, .request-form input[type="tel"]:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-color: var(--forest); }
.field.is-invalid input[type="text"], .field.is-invalid input[type="tel"] { border-color: var(--error-ink); box-shadow: inset 0 0 0 1px var(--error-ink); }
.field-error { display: flex; gap: 10px; align-items: flex-start; font-size: 1.0625rem; font-weight: 650; line-height: 1.4; color: var(--error-ink); }
.field-error::before {
  content: "!"; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; background: var(--error-ink); color: #ffffff;
  font-size: .9375rem; font-weight: 800; line-height: 1; -webkit-text-stroke-width: 0;
}
/* One choice per row: three side-by-side boxes broke "Online notarization" over two lines. */
.choice-list { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px;
  border: 2px solid var(--border); border-radius: 12px; background: #ffffff; cursor: pointer;
  font-size: 1.125rem; font-weight: 620; line-height: 1.25;
}
.choice input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--forest); }
.choice:hover { border-color: var(--forest); }
.choice:has(input:checked) { border-color: var(--forest); background: var(--sage); box-shadow: inset 0 0 0 1px var(--forest); }
.choice:has(input:focus-visible) { outline: 3px solid var(--clay); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.field.is-invalid .choice { border-color: var(--error-ink); }
/* Honeypot for bots: off-screen, unfocusable, hidden from assistive technology. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.request-submit { width: 100%; }
@media (max-width: 480px) { .request-submit { font-size: 1.125rem; padding-inline: 12px; } }
.request-form[aria-busy="true"] .request-submit { cursor: progress; }
.request-submit:disabled { background: var(--forest-hover); }
.form-status {
  padding: 14px 16px; border-radius: 12px; border-left: 5px solid var(--forest); background: var(--sage);
  font-size: 1.0625rem; font-weight: 620; line-height: 1.45;
}
.form-status:empty { display: none; }
.form-status.is-error { background: #fbede5; border-left-color: var(--error-ink); }
.form-status:focus { outline: none; }
.request-fineprint { font-size: 1rem; color: var(--ink-soft); }
.request-success { display: grid; gap: 12px; }
.request-success:focus { outline: none; }
.request-success h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.375rem, 1.25rem + .5vw, 1.625rem); }
.request-success h3 .icon { width: 30px; height: 30px; color: var(--forest); }

/* ---------- Motion, forced colours, print ---------- */
/* WHY: only tints that keep text and surface far apart are animated. The Menu and More toggles swap
   light/dark polarity when opened, so a colour transition would pass through equal luminance and leave
   the label briefly unreadable (caught frozen mid-transition in a background-tab capture); they switch
   instantly and only their icon moves. */
@media (min-width: 0) and (prefers-reduced-motion: no-preference) {
  .btn, .primary-nav a, .lang-link, .menu-panel a, .book-option, .contact-card, .guide-card, .onward-link,
  .faq-list summary, .bar-action, .choice, .request-form input[type="text"], .request-form input[type="tel"] { transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
  /* WHY: these two disclosures reverse text/background polarity when opened. Tweening both
     produced a visibly unreadable gray-on-gray Menu/More label between readable endpoints.
     Switch the reading colors together; retain border/shadow polish and icon rotation. */
  .site-menu > summary, .bar-more > summary { transition: border-color .16s ease, box-shadow .16s ease; }
  .bar-more > summary .icon { transition: transform .2s ease; }
}
@media (forced-colors: active) {
  * { -webkit-text-stroke-width: 0; }
  .book-bar { border-top: 3px solid CanvasText; }
  .bar-action, .bar-more > summary, .site-menu > summary, .choice, .request-form input { border: 2px solid CanvasText; }
  .menu-panel { border: 2px solid CanvasText; }
}
@media print {
  .book-bar, .skip-link, .primary-nav, .masthead-tools { display: none !important; }
  body { padding-bottom: 0; }
  * { -webkit-text-stroke-width: 0; }
}