/* ==========================================================================
   JMC Mobile Notary — "The Certified Page" design system
   --------------------------------------------------------------------------
   A notary's product is a page that has been checked, signed and sealed.
   Warm document paper, fountain-pen ink, exact hairline rules, one seal.

   Contents
     1. Tokens (light, dark)
     2. Base
     3. Layout (wrap, sections, section heads)
     4. Components (buttons, links, labels, frame, seal, fields, index, journey)
     5. Site chrome (utility bar, header, footer, sticky bar)
     6. Page sections
     7. Motion
     8. Responsive
     9. Reduced motion

   Rules of use
     - One primary action style (.btn). Secondary is .btn.ghost.
     - Seal red (--seal) is reserved for the seal mark and required markers.
     - Small brass text only on --paper or --surface (fails AA on --tint).
     - The certificate frame (.frame) is used in at most three places per page.
     - No infinite animation (the only exception is a button's brief loading spinner).
       Motion is one-shot and disabled by reduced motion.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Colour */
  --paper: #F7F4EE;      /* page */
  --surface: #FFFFFF;    /* sheets: cards, form */
  --tint: #EFEAE0;       /* alternate band */
  --ink: #14202E;        /* text, primary action */
  --ink-2: #4A5566;      /* secondary text: 6.9:1 on paper */
  --rule: #D9D2C5;       /* hairlines, field borders */
  --rule-strong: #B9B0A0;
  --navy: #1E3A5F;       /* links, icons, focus: 10.5:1 on paper */
  --seal: #8C2F25;       /* seal mark, required markers: 7.5:1 on paper */
  --brass: #8A6420;      /* ornaments, numerals: 4.9:1 on paper */
  --ok: #2F6B4F;
  --err: #A3352A;
  --band: #14202E;       /* dark bands (utility bar, closing band) */
  --on-band: #F2EDE3;
  --on-band-2: #B7BFCA;
  --band-accent: #D9B26A;
  --btn-bg: var(--ink);
  --btn-ink: #FFFFFF;
  --btn-bg-hover: #26364A;
  --field-bg: #FBFAF7;
  --overlay: rgba(20, 32, 46, .9);

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;     /* variable, optical sizes 6–72 */
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-display: clamp(2.5rem, 1.6rem + 3.9vw, 4.75rem);   /* 40 → 76 */
  --fs-h2: clamp(2rem, 1.5rem + 2.1vw, 3.25rem);          /* 32 → 52 */
  --fs-h3: clamp(1.3125rem, 1.2rem + .45vw, 1.5625rem);   /* 21 → 25 */
  --fs-lead: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);  /* 18 → 21 */
  --fs-body: clamp(1rem, .96rem + .2vw, 1.125rem);        /* 16 → 18 */
  --fs-small: .875rem;                                    /* 14 */
  --fs-label: .75rem;                                     /* 12, uppercase labels */
  /* Line height: tight for display, open for reading */
  --lh-tight: 1.02;     /* h1 */
  --lh-heading: 1.08;   /* h2 */
  --lh-snug: 1.22;      /* h3, card titles */
  --lh-lead: 1.55;      /* lede paragraphs */
  --lh-body: 1.68;      /* running text */
  --lh-ui: 1.3;         /* buttons, labels, chips */
  /* Tracking (letter-spacing) and word spacing: tighter as text gets bigger */
  --tr-display: -.022em;
  --tr-h2: -.018em;
  --tr-h3: -.008em;
  --tr-body: -.003em;
  --tr-small: .004em;
  --tr-caps: .14em;     /* uppercase labels */
  --ws-caps: .08em;
  --tr-mono: .06em;

  /* Space (4-pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(3rem, 2.1rem + 5vw, 7rem);           /* 48 → 112 */
  --gutter: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max: 1200px;
  --max-text: 720px;

  /* Shape and depth */
  --r-field: 4px;
  --r-btn: 8px;
  --r-card: 10px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(20, 32, 46, .06), 0 12px 32px -16px rgba(20, 32, 46, .18);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t: .35s;
  --t-slow: .5s;

  color-scheme: light;
}

/* Light is the default. Dark mode is opt-in through the header toggle (data-theme="dark"). */
:root[data-theme="dark"] {
  --paper: #0F1722; --surface: #16212F; --tint: #131D29;
  --ink: #EEE8DC; --ink-2: #A9B2BF; --rule: #2A3646; --rule-strong: #3A4859;
  --navy: #9DC0EA; --seal: #E39383; --brass: #D3A85A;
  --ok: #7CC4A0; --err: #F0907F;
  --band: #0A1018; --on-band: #EEE8DC; --on-band-2: #A9B2BF; --band-accent: #D3A85A;
  --btn-bg: #EEE8DC; --btn-ink: #0F1722; --btn-bg-hover: #FFFFFF;
  --field-bg: #111A26; --overlay: rgba(8, 12, 18, .9);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -18px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  /* Kerning, standard and contextual ligatures; real optical sizes; never faux bold/italic */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
h1, h2 { font-family: var(--font-display); font-weight: 400; }
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-display); word-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-h2); word-spacing: -.01em; }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tr-h3); }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--navy); letter-spacing: -.01em; }
/* Paragraph breaks: avoid one-word last lines; Spanish words are long, so hyphenate them on narrow screens */
p, li, dd, blockquote, figcaption, summary { text-wrap: pretty; }
:lang(es) p, :lang(es) li, :lang(es) dd { hyphens: auto; -webkit-hyphens: auto; }
small { font-size: var(--fs-small); letter-spacing: var(--tr-small); }
strong, b { font-weight: 600; }
/* Links: thin underline from the font, clear of descenders */
a { text-decoration-thickness: from-font; text-underline-offset: .22em; text-decoration-skip-ink: auto; }
blockquote { hanging-punctuation: first; }
/* Figures that are read or compared: lining, equal-width digits */
input, select, textarea, kbd, .call-number, .nav-phone, .util-links, .hero-price, .svc-price, .count, .rating-score, .open-status, .next-slot, .zip-result { font-variant-numeric: lining-nums tabular-nums; }
::selection { background: color-mix(in srgb, var(--navy) 22%, transparent); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
/* On dark bands the navy ring would vanish; use the light band text colour */
.on-band :focus-visible, .call-card :focus-visible, .util :focus-visible { outline-color: var(--on-band); }
.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; }

/* 3. Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-text { max-width: calc(var(--max-text) + 2 * var(--gutter)); }
section { padding-block: var(--section-y); }
.alt { background: var(--tint); }
.lede { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -.006em; color: var(--ink-2); max-width: 52ch; }
.section-head {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-5) var(--s-7); align-items: end;
  margin-bottom: var(--s-7); padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule);
}
.section-head h2 { margin-top: var(--s-3); max-width: 18ch; }
.section-head > p { color: var(--ink-2); line-height: var(--lh-lead); max-width: 46ch; justify-self: end; }

/* 4. Components ------------------------------------------------------------ */

/* Labels: an eyebrow is a short brass rule + small caps text; .num is a reference numeral */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3); margin: 0;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--navy);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--brass); flex: 0 0 24px; }
.num, .ref { display: block; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-ui); letter-spacing: var(--tr-mono); color: var(--brass); }

/* Buttons */
/* Primary: solid ink with a soft lift. Ghost: outline that fills with ink on hover.
   Effects: brass sheen sweep (::before), press ripple from the pointer (::after,
   position set by site.js), arrow nudge, phone-icon ring, loading spinner.
   Hover effects only on devices that really hover; press feedback everywhere. */
.btn {
  --btn-fill: var(--btn-bg); --btn-fill-ink: var(--btn-ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 12px 22px; border-radius: var(--r-btn);
  border: 1.5px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: var(--lh-ui); letter-spacing: .008em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(20, 32, 46, .14), 0 6px 16px -10px rgba(20, 32, 46, .5);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) ease, background-size var(--t) var(--ease), border-color var(--t-fast) ease,
    color var(--t-fast) ease, transform var(--t-fast) var(--ease), box-shadow var(--t) ease, translate .3s var(--ease);
}
/* Sheen: a thin brass-tinted light band that crosses the button once on hover */
.btn::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 236, 196, .28) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-12deg);
}
/* Ripple: a circle that spreads from where the button was pressed */
.btn::after {
  content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); z-index: -1; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: currentColor; opacity: 0; transform: scale(0);
}
.btn.rippling::after { animation: btnRipple .6s var(--ease); }
@keyframes btnRipple { from { opacity: .22; transform: scale(0); } to { opacity: 0; transform: scale(var(--rs, 24)); } }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 1px rgba(20, 32, 46, .18); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: var(--r-btn); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn .arrow { display: inline-block; transition: transform var(--t) var(--ease); }
.btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn.ghost {
  --btn-fill: var(--ink); --btn-fill-ink: var(--paper);
  color: var(--ink); border-color: var(--ink); box-shadow: none;
  background: linear-gradient(var(--btn-fill), var(--btn-fill)) no-repeat 50% 100% / 100% 0%, transparent;
}
.btn.ghost::before { background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--brass) 22%, transparent) 50%, transparent 80%); }
.btn.sm { min-height: 40px; padding: 8px 16px; font-size: .875rem; }
/* Inverse buttons for dark bands */
.on-band .btn { background: var(--on-band); border-color: var(--on-band); color: #14202E; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6); }
.on-band .btn.ghost {
  --btn-fill: var(--on-band); --btn-fill-ink: #14202E;
  color: var(--on-band); border-color: color-mix(in srgb, var(--on-band) 45%, transparent); box-shadow: none;
  background: linear-gradient(var(--btn-fill), var(--btn-fill)) no-repeat 50% 100% / 100% 0%, transparent;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background-color: var(--btn-bg-hover); border-color: var(--btn-bg-hover); transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(20, 32, 46, .12), 0 14px 28px -14px rgba(20, 32, 46, .6);
  }
  .btn:hover::before { transform: translateX(260%) skewX(-12deg); transition: transform .8s var(--ease); }
  .btn:hover .arrow { transform: translateX(5px); }
  .btn.ghost:hover { background-size: 100% 100%; background-color: transparent; border-color: var(--btn-fill); color: var(--btn-fill-ink); transform: none; box-shadow: none; }
  .on-band .btn:hover { background-color: #FFFFFF; border-color: #FFFFFF; }
  .on-band .btn.ghost:hover { background-color: transparent; border-color: var(--btn-fill); }
  .btn:hover svg:has(use[href="#i-phone"]) { animation: phoneRing .6s ease; }
  /* Icon buttons in the header: tint and a small icon lift */
  .icon-btn:hover { background-color: color-mix(in srgb, var(--ink) 6%, transparent); }
  .icon-btn:hover svg { transform: scale(1.1); }
  .nav-theme:hover svg { transform: rotate(-20deg) scale(1.1); }
}
.btn svg:has(use[href="#i-phone"]) { transform-origin: 50% 60%; }
.icon-btn svg { transition: transform var(--t) var(--ease); }
.icon-btn:active { transform: scale(.94); }
@keyframes phoneRing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }

/* Loading: the label stays (for screen readers and layout); a spinner replaces the arrow */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .arrow { display: none; }
.btn .spin { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: .9375rem;
  color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--navy) 35%, transparent);
  transition: text-decoration-color var(--t-fast) ease;
}
.link-arrow:hover { text-decoration-color: var(--navy); }
.link-arrow .arrow { transition: transform var(--t-fast) ease; }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* Certificate frame: hairline + inset second hairline, like an engraved border */
.frame {
  border: 1px solid var(--rule-strong);
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--rule);
}

/* Seal mark (inline SVG <use href="#seal-mark">) */
.seal { display: inline-block; width: 40px; height: 40px; color: var(--seal); flex: 0 0 auto; }
.seal text { font-family: var(--font-display); }

/* Form fields */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--field-bg);
  border: 1px solid var(--rule-strong); border-radius: var(--r-field);
  min-height: 48px; padding: 11px 14px; width: 100%; min-width: 0;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234A5566' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink-2) 75%, transparent); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 22%, transparent); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field input[type="file"] { padding: 9px 12px; font-size: var(--fs-small); }
.field input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: var(--fs-small); padding: 7px 14px; margin-right: 12px;
  border-radius: var(--r-field); border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
}
.hint { font-size: var(--fs-small); color: var(--ink-2); }
.req { color: var(--seal); font-weight: 600; font-size: var(--fs-label); letter-spacing: .04em; margin-left: 6px; }
.err { color: var(--err); font-size: var(--fs-small); font-weight: 500; }
.err:empty { display: none; }

/* Index: a typographic list with hairline rows (documents, services) */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index > li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.index .tag { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-2); letter-spacing: .04em; white-space: nowrap; }

/* Journey: numbered steps joined by a rule */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); counter-reset: step; }
.journey > li { position: relative; padding-top: var(--s-6); border-top: 1px solid var(--rule-strong); counter-increment: step; }
.journey > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: -.75em; left: 0; padding-right: var(--s-3); background: var(--paper); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--brass); letter-spacing: .08em; }
.alt .journey > li::before { background: var(--tint); color: var(--navy); } /* brass fails AA on tint */

/* 5. Site chrome ----------------------------------------------------------- */

/* Skip link */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--r-btn);
  background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* Placeholder content awaiting client confirmation */
.ph { border-bottom: 1px dashed var(--seal); color: var(--seal); cursor: help; white-space: nowrap; }
.ph-long, .about-bio .ph, .review .ph { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Masthead: utility bar + header, sticky together. On phones it hides while
   scrolling down and returns on scroll up (see site.js). */
.masthead { position: sticky; top: 0; z-index: 30; transition: transform var(--t) var(--ease); }
.masthead.hide { transform: translateY(-100%); }

/* Utility bar */
.util { background: var(--band); color: var(--on-band-2); font-size: .8125rem; }
.util-inner { display: flex; justify-content: space-between; align-items: center; gap: 6px 24px; min-height: 38px; }
.util-links { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.util a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-band); text-decoration: none; font-weight: 500; white-space: nowrap; }
.util a:hover { text-decoration: underline; text-underline-offset: 3px; }
.util svg { width: 15px; height: 15px; opacity: .8; }
.util a:focus-visible { outline-color: var(--on-band); }

/* Open-now status (from the business hours, in the business's time zone) */
.open-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.open-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-band-2); flex: 0 0 8px; }
.open-status.is-open .dot { background: #4CC38A; box-shadow: 0 0 0 0 rgba(76, 195, 138, .6); animation: pulse 2.4s ease-out 3; }
.open-status.is-closed .dot { background: #E0A458; }
.util .open-status { color: var(--on-band); font-weight: 500; }
@keyframes pulse { to { box-shadow: 0 0 0 7px rgba(76, 195, 138, 0); } }

/* Rotating messages, with a pause control (WCAG 2.2.2) */
.ticker { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.ticker-list { position: relative; list-style: none; margin: 0; padding: 0; height: 20px; flex: 0 1 340px; overflow: hidden; text-align: center; }
.ticker-list li { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(100%); transition: opacity .45s ease, transform .45s var(--ease); }
.ticker-list li.is-current { opacity: 1; transform: none; }
.ticker-list li.is-leaving { opacity: 0; transform: translateY(-100%); }
html:not(.js) .ticker-list li:first-child { opacity: 1; transform: none; }
.ticker-pause { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--on-band) 30%, transparent); border-radius: 50%; background: none; color: var(--on-band-2); cursor: pointer; }
.ticker-pause:hover { color: var(--on-band); border-color: var(--on-band); }
.ticker-pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ticker-pause .i-play { display: none; fill: currentColor; stroke: none; }
.ticker-pause[aria-pressed="true"] .i-pause { display: none; }
.ticker-pause[aria-pressed="true"] .i-play { display: block; }
.ticker-pause:focus-visible { outline-color: var(--on-band); }

/* Header */
.site-header {
  position: relative;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) ease, background var(--t) ease;
}
.masthead.scrolled .site-header { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--paper) 96%, transparent); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 76px; transition: min-height var(--t) ease; }
.masthead.scrolled .nav { min-height: 62px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.brand .seal { width: 42px; height: 42px; transition: width var(--t) ease, height var(--t) ease, transform .6s var(--ease); }
.brand:hover .seal { transform: rotate(-14deg) scale(1.06); }
.masthead.scrolled .brand .seal { width: 36px; height: 36px; }
.brand-name { display: grid; line-height: 1; }
.brand-name b { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: .02em; }
.brand-name small { white-space: nowrap; margin-top: 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

/* Primary links with one sliding underline */
.nav-links { position: relative; display: flex; align-items: center; gap: var(--s-6); font-size: .9375rem; font-weight: 500; list-style: none; margin: 0; padding: 0; }
.nav-links a, .dd-btn { white-space: nowrap; text-decoration: none; color: var(--ink-2); position: relative; padding: 6px 0; transition: color var(--t-fast) ease; }
.nav-links a:hover, .nav-links a.active, .dd-btn:hover, .dd-btn.active, .dd-btn[aria-expanded="true"] { color: var(--ink); }
.nav-indicator { position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--brass); border-radius: 2px; opacity: 0; pointer-events: none; transition: left .4s var(--ease), width .4s var(--ease), opacity var(--t-fast) ease; }
.nav-indicator.on { opacity: 1; }

/* Services dropdown (disclosure pattern) */
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; font: inherit; cursor: pointer; }
.dd-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t) var(--ease); }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-panel {
  position: absolute; top: calc(100% + 16px); left: -20px; width: 340px; padding: 8px; z-index: 40;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow);
  animation: ddIn .22s var(--ease) both;
}
.dd-panel[hidden] { display: none; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* hover bridge */
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd-item { display: flex; gap: var(--s-3); align-items: flex-start; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); transition: background var(--t-fast) ease; }
.dd-item:hover, .dd-item:focus-visible { background: var(--tint); }
.dd-item strong { display: block; font-weight: 600; font-size: .9375rem; }
.dd-item small { display: block; color: var(--ink-2); font-size: .8125rem; margin-top: 2px; }
.dd-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; background: var(--tint); color: var(--navy); transition: transform var(--t) var(--ease); }
.dd-item:hover .dd-ic { transform: rotate(-8deg); }
.dd-ic svg { width: 18px; height: 18px; }
.dd-foot { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: 6px; padding: 10px 12px 6px; border-top: 1px solid var(--rule); font-size: .8125rem; }
.dd-foot a { color: var(--navy); font-weight: 600; text-decoration: none; }
.dd-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

.nav-actions { display: flex; align-items: center; gap: var(--s-4); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; max-width: 200px; overflow: hidden; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--ink); white-space: nowrap; transition: max-width .45s var(--ease), opacity var(--t) ease; }
.nav-phone svg { width: 18px; height: 18px; color: var(--navy); flex: 0 0 18px; }
.nav-phone:hover span { text-decoration: underline; text-underline-offset: 3px; }
.masthead.past-hero .nav-phone { max-width: 0; opacity: 0; margin-left: calc(-1 * var(--s-4)); }
.nav-cta { min-height: 44px; padding: 10px 18px; }
.icon-btn {
  display: none; place-items: center; width: 44px; height: 44px; border-radius: var(--r-btn);
  border: 1px solid var(--rule-strong); color: var(--ink); text-decoration: none;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn { transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, transform var(--t-fast) ease; }
.icon-btn:hover { border-color: var(--ink); }
.nav-search, .nav-theme { display: grid; cursor: pointer; background: none; font: inherit; }
/* Light/dark toggle: shows the moon in light mode, the sun in dark mode */
.theme-toggle .i-sun, .theme-toggle[aria-pressed="true"] .i-moon { display: none; }
.theme-toggle[aria-pressed="true"] .i-sun { display: block; }
.menu-toggle {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 12px;
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--r-btn); color: var(--ink);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }

/* Phone menu: full-screen sheet */
.sheet {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: var(--s-5);
  padding: 12px var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  background: var(--paper); transform: translateX(100%); transition: transform .45s var(--ease);
}
.sheet[hidden] { display: none; }
.sheet.open { transform: none; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.sheet-close { display: grid; cursor: pointer; background: none; font: inherit; }
.sheet-nav ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sheet-nav ol > li { border-bottom: 1px solid var(--rule); opacity: 0; transform: translateX(24px); transition: opacity .4s ease, transform .5s var(--ease); }
.sheet.open .sheet-nav ol > li { opacity: 1; transform: none; }
.sheet.open .sheet-nav ol > li:nth-child(2) { transition-delay: .05s; }
.sheet.open .sheet-nav ol > li:nth-child(3) { transition-delay: .1s; }
.sheet.open .sheet-nav ol > li:nth-child(4) { transition-delay: .15s; }
.sheet.open .sheet-nav ol > li:nth-child(5) { transition-delay: .2s; }
.sheet-nav ol > li > a { display: flex; align-items: baseline; gap: var(--s-4); padding: 14px 0; text-decoration: none; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.15; color: var(--ink); }
.sheet-nav .ref { font-size: var(--fs-label); color: var(--brass); min-width: 1.75rem; }
.sheet-sub { list-style: none; margin: -6px 0 12px; padding: 0 0 0 calc(1.75rem + var(--s-4)); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sheet-sub a { font-size: .9375rem; color: var(--ink-2); text-underline-offset: 3px; }
.sheet-actions { display: grid; gap: var(--s-3); }
.sheet-meta { display: grid; gap: var(--s-4); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.sheet-meta .open-status { color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
.sheet-meta .open-status .dot { background: var(--rule-strong); }
.sheet-meta .open-status.is-open .dot { background: #2E9E6A; }
.sheet-meta .open-status.is-closed .dot { background: #C9842F; }
.sheet-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
html.menu-open { overflow: hidden; }

/* Site search dialog */
.search-dialog {
  width: min(640px, calc(100vw - 2 * var(--gutter))); max-height: min(70vh, 640px); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.search-dialog[open] { display: flex; flex-direction: column; animation: ddIn .2s var(--ease) both; }
.search-dialog::backdrop { background: rgba(20, 32, 46, .45); backdrop-filter: blur(3px); }
.search-box { display: flex; align-items: center; gap: var(--s-3); padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.search-box > svg { width: 22px; height: 22px; color: var(--navy); flex: 0 0 22px; }
.search-box input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.125rem; color: var(--ink); outline: none; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-close { padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: 6px; background: none; font: inherit; font-size: .75rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.search-status { padding: 10px 16px 0; font-size: .8125rem; color: var(--ink-2); }
.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.search-results a { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.search-results a:hover, .search-results a:focus-visible, .search-results li:first-child a.first { background: var(--tint); }
.search-results strong { display: block; font-weight: 600; }
.search-results small { display: block; font-size: .8125rem; color: var(--ink-2); }
.search-results mark { background: color-mix(in srgb, var(--brass) 28%, transparent); color: inherit; border-radius: 2px; }
.search-foot { padding: 10px 16px; border-top: 1px solid var(--rule); font-size: .75rem; color: var(--ink-2); }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--rule-strong); border-radius: 4px; font-family: var(--font-mono); font-size: .75rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: var(--s-8) 0 var(--s-6); font-size: var(--fs-small); color: var(--ink-2); background: var(--surface); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-6); }
.foot-brand p { margin-top: var(--s-4); max-width: 34ch; }
.foot-brand .foot-sign { margin-top: var(--s-5); font-family: var(--font-display); font-size: 1.375rem; font-style: italic; color: var(--ink); }
.foot-h { margin: 0 0 var(--s-4); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; transition: color var(--t-fast) ease; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 24px; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: .8125rem; }
.foot-bottom a { color: var(--ink); text-underline-offset: 3px; }
.foot-legal { border: 0; }
.foot-legal summary { padding: 4px 0; min-height: 28px; align-items: center; font-family: var(--font-body); font-size: .8125rem; font-weight: 600; color: var(--ink); display: inline-flex; gap: 6px; }
.foot-legal summary::after { display: none; }
.foot-legal summary::before { content: "+"; color: var(--ink-2); }
.foot-legal[open] summary::before { content: "−"; }
.foot-legal p { padding: 6px 0 0; max-width: 48ch; }
.disclaimer { font-size: .8125rem; margin-top: var(--s-4); max-width: 90ch; }
/* Required on non-English pages in Texas (Gov't Code 406.017): conspicuous, in both languages */
.legal-notice { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--rule-strong); border-left: 4px solid var(--seal); border-radius: var(--r-field); background: var(--paper); color: var(--ink); font-size: .875rem; }
.legal-notice p + p { margin-top: var(--s-2); }
.legal-notice strong { color: var(--seal); }

/* Mobile action bar: Call + Request a quote (shown under 720px) */
.sticky-cta { display: none; }

/* 6. Page sections --------------------------------------------------------- */

/* Hero */
.hero { position: relative; padding-block: clamp(32px, 5vw, 72px) var(--section-y); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { margin: var(--s-4) 0 var(--s-4); max-width: 12ch; }
.hero h1 em { white-space: nowrap; }
.hero .lede { margin-bottom: var(--s-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-price { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-2); }
.hero-price a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }

/* "What do you need?" picker: a radio group styled as chips */
.picker { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.picker legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink-2); }
.picker-opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.picker label { position: relative; cursor: pointer; }
.picker input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.picker label span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600; color: var(--ink-2); background: var(--surface);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease, transform var(--t-fast) ease;
}
.picker label:hover span { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.picker input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.picker input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.no-js .picker, html:not(.js) .picker { display: none; }

/* Proof row */
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; list-style: none; margin: var(--s-6) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 17px; height: 17px; color: var(--navy); }
.hero-proof strong { color: var(--ink); }
.stars { display: inline-flex; gap: 1px; color: var(--brass); letter-spacing: 0; }
.proof-rating .stars { font-size: 1rem; }

/* ZIP coverage check */
.zip-check { margin-top: var(--s-5); max-width: 420px; }
.zip-check label { display: block; margin-bottom: var(--s-2); font-size: var(--fs-small); font-weight: 600; }
.zip-row { display: flex; gap: var(--s-2); }
.zip-row input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--field-bg); border: 1px solid var(--rule-strong); border-radius: var(--r-field);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.zip-row input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 22%, transparent); }
.zip-row .btn { min-height: 44px; }
.zip-result { min-height: 1.4em; margin-top: var(--s-2); font-size: var(--fs-small); }
.zip-result.ok { color: var(--ok); font-weight: 600; }
.zip-result.no { color: var(--ink-2); }
.zip-result.err { color: var(--err); }

/* Hero visual: photo of the notary with the visit summary laid over its lower edge */
.hero-visual { position: relative; margin: 0; width: 100%; max-width: 520px; justify-self: end; padding-bottom: 190px; }
.hero-photo { position: relative; width: 82%; margin-left: auto; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; background: var(--tint); }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--ease); }
.hero-visual:hover .hero-photo img { transform: scale(1.04); }
.photo-badge {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rule); border-radius: var(--r-pill); box-shadow: var(--shadow);
}
.photo-badge .seal { width: 30px; height: 30px; }
.photo-badge b { display: block; font-size: .875rem; color: var(--ink); line-height: 1.2; }
.photo-badge small { display: block; font-size: .75rem; color: var(--ink-2); }
.hero-visual .cert {
  position: absolute; left: 0; bottom: 0; width: 68%; z-index: 2; padding: clamp(20px, 2.2vw, 28px);
  transition: transform var(--t) var(--ease), box-shadow var(--t) ease;
}
.hero-visual .cert:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 8px var(--rule), 0 2px 4px rgba(20, 32, 46, .06), 0 24px 48px -20px rgba(20, 32, 46, .3); }
.cert {
  position: relative; border-radius: 2px; background: var(--surface);
  box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 8px var(--rule), var(--shadow);
}
.cert-head { display: flex; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.cert-kicker { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink-2); }
.cert-panel[hidden] { display: none; }
.cert-panel { animation: panelIn .35s var(--ease) both; }
.cert-title { margin: var(--s-4) 0 var(--s-3); font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); line-height: 1.15; }
.cert-title em { color: var(--navy); white-space: nowrap; }
.cert-fields { margin: 0; display: grid; }
.cert-fields > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); padding: 9px 0; border-bottom: 1px solid var(--rule); }
.cert-fields dt { font-size: .6875rem; font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.cert-fields dd { margin: 0; font-size: .875rem; }
/* The hero shows the two key rows; the full process is in "How a visit works" */
.cert-fields > div:nth-child(2), .cert-fields > div:nth-child(4) { display: none; }
.cert-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); margin-top: var(--s-4); }
.cert-sign { flex: 1; max-width: 220px; }
.sig-name { display: block; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); line-height: 1; color: var(--navy); white-space: nowrap; padding: 0 4px 2px; }
.sign-line { display: block; height: 1px; margin-top: 2px; background: var(--ink); }
.cert-sign span:not(.sig-name) { display: block; margin-top: 8px; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink-2); }
.cert-seal { width: 78px; height: 78px; color: var(--seal); margin: 0 -6px -6px 0; transform: rotate(-8deg); }

/* Credential strip */
.creds {
  padding-block: var(--s-5); border-block: 1px solid var(--rule);
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--brass) 7%, transparent), transparent 45%), var(--surface);
}
.creds-inner { display: flex; align-items: center; gap: var(--s-6); }
.creds-mark { display: grid; justify-items: center; gap: 6px; flex: 0 0 auto; color: var(--seal); }
.creds-mark p { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink-2); }
.creds-seal { width: 60px; height: 60px; transition: transform .8s var(--ease); }
.creds-mark:hover .creds-seal { transform: rotate(-12deg) scale(1.05); }
.js .creds-mark.reveal.in .creds-seal { animation: sealPress .55s var(--ease) .15s both; }
.creds-list { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }

/* Each credential: an icon disc, label, value and a short note. Icons are masks so they follow the theme */
.cred {
  --pad: var(--s-5); --disc: 44px;
  position: relative; display: grid; grid-template-columns: var(--disc) minmax(0, 1fr); column-gap: 14px; align-content: start;
  padding: var(--s-4) var(--pad); border-left: 1px solid var(--rule); border-radius: 0 0 var(--r-card) var(--r-card);
  background: linear-gradient(var(--brass), var(--brass)) no-repeat 0 0 / 0 2px;
  transition: background-size .5s var(--ease), background-color var(--t) ease;
}
.cred::before {
  content: ""; grid-column: 1; grid-row: 1 / span 3; width: var(--disc); height: var(--disc); border-radius: 50%;
  border: 1px solid var(--rule-strong); background: color-mix(in srgb, var(--navy) 6%, var(--surface));
  transition: background-color var(--t) ease, border-color var(--t) ease, transform var(--t) var(--ease);
}
.cred::after {
  content: ""; position: absolute; top: calc(var(--s-4) + (var(--disc) - 22px) / 2); left: calc(var(--pad) + (var(--disc) - 22px) / 2);
  width: 22px; height: 22px; background-color: var(--navy); pointer-events: none;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  transition: background-color var(--t) ease, transform var(--t) var(--ease);
}
.cred dt, .cred dd { grid-column: 2; }
.cred-commission { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3Cpath d='M8.6 14l-1.6 7 5-2.6 5 2.6-1.6-7'/%3E%3C/svg%3E"); }
.cred-cert { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.6L15.8 4.8a2 2 0 012.8 0l.6.6a2 2 0 010 2.8L8.6 18.8z M14 6.6l3.4 3.4'/%3E%3C/svg%3E"); }
.cred-insurance { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.6-3 8.6-7 10-4-1.4-7-5.4-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4.2'/%3E%3C/svg%3E"); }
.cred-screening { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.6'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.6 6.5-5.6s5.9 2 6.5 5.6'/%3E%3Cpath d='M15.5 10.5l2 2 4-4.2'/%3E%3C/svg%3E"); }
.creds-list dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink-2); }
.creds-list dd { margin: 2px 0 0; font-weight: 600; font-size: .9375rem; line-height: 1.45; }
.creds-list .cred-note { margin-top: 6px; font-family: var(--font-body); font-weight: 400; font-size: .8125rem; line-height: 1.4; color: var(--ink-2); }
.cred-note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--navy) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--t-fast) ease; }
.cred-note a:hover { text-decoration-color: currentColor; }
.cred-note a span[aria-hidden] { display: inline-block; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cred:hover { background-size: 100% 2px; background-color: color-mix(in srgb, var(--navy) 4%, transparent); }
  .cred:hover::before { background-color: var(--navy); border-color: var(--navy); transform: scale(1.06); }
  .cred:hover::after { background-color: var(--surface); transform: scale(1.06) rotate(-6deg); }
  .cred-note a:hover span[aria-hidden] { transform: translate(2px, -2px); }
}

/* Services: three equal cards. Photo with a large serif number, title, summary,
   what is included, one line of practical detail, then price and action pinned to the bottom.
   The most-requested card gets a brass top rule, a flag and a navy-tinted border. */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.svc { position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
/* Spotlight: a soft brass glow that follows the pointer (position set by site.js) */
.svc::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brass) 11%, transparent), transparent 65%);
}
.svc-feature { border-color: color-mix(in srgb, var(--navy) 40%, var(--rule)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--navy) 14%, transparent), var(--shadow); }
.svc-feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--brass), var(--band-accent), var(--brass)); }
/* Signing photo is cropped from the top: the source has an illegible stamp along its bottom edge */
.svc-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--tint); }
.svc-art picture { display: block; height: 100%; }
.svc-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.svc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(20, 32, 46, .5)); }
.svc-num {
  position: absolute; left: 18px; bottom: 10px; z-index: 1; font-family: var(--font-display); font-size: 2.75rem; font-weight: 400;
  line-height: 1; letter-spacing: -.03em; color: #F7F4EE; text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.svc-flag {
  position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px;
  border-radius: var(--r-pill); background: #E2BF7A; color: #14202E; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
  font-size: .6875rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
}
.svc-flag::before { content: "\2605"; font-size: .75rem; letter-spacing: 0; }
.svc-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); flex: 1; }
.svc-body > p { color: var(--ink-2); font-size: .9375rem; }
.svc-incl { display: grid; gap: 9px; list-style: none; margin: var(--s-1) 0 0; padding: var(--s-4) 0 0; border-top: 1px dashed var(--rule-strong); font-size: .875rem; color: var(--ink); }
.svc-incl li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; }
.svc-incl li::before {
  content: ""; width: 18px; height: 18px; margin-top: 1px; background-color: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.2' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M5.4 9.3l2.3 2.3 4.9-5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.2' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M5.4 9.3l2.3 2.3 4.9-5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.svc-meta { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--s-1); font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.svc-meta svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--navy); }
.svc-meta a { color: var(--navy); font-weight: 600; }
.svc-foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.svc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-small); color: var(--ink-2); }
.svc-from { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; }
.svc-price strong { font-family: var(--font-display); font-size: 2.125rem; font-weight: 500; line-height: 1; letter-spacing: -.025em; color: var(--ink); }
.svc-cta { width: 100%; }

/* Help bar under the cards */
.svc-help {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--brass) 6%, var(--surface));
}
.svc-help .seal { width: 46px; height: 46px; color: var(--seal); }
.svc-help p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.svc-help p strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; letter-spacing: var(--tr-h3); color: var(--ink); }
.svc-help-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.svc-help-call { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.svc-help-call svg { width: 16px; height: 16px; color: var(--navy); }
.svc-help-call:hover { text-decoration: underline; }

/* Where we meet: a single ruled strip */
.where { padding-block: var(--s-8); border-top: 1px solid var(--rule); }
.where-inner { display: grid; grid-template-columns: .8fr 2fr; gap: var(--s-7); align-items: center; }
.where-head h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin-top: var(--s-3); }
.where-list { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.where-list li { display: grid; gap: var(--s-3); padding: var(--s-2) var(--s-5); border-left: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.where-list svg { width: 26px; height: 26px; color: var(--navy); }
.where-list strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; color: var(--ink); }

/* How a visit works: journey + checklist */
.process-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-7); align-items: start; }
.journey-2 { grid-template-columns: 1fr 1fr; row-gap: var(--s-7); }
.journey h3 { margin-bottom: var(--s-2); }
.journey p { color: var(--ink-2); font-size: .9375rem; max-width: 36ch; }
.bring { padding: var(--s-6); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); }
.bring h3 { margin: var(--s-2) 0 var(--s-4); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.checklist li { display: flex; gap: 12px; font-size: .9375rem; }
/* Ticked box drawn as a mask so it takes the theme's navy in light and dark */
.checklist li::before {
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='.75' y='.75' width='16.5' height='16.5' rx='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5 9.2l2.8 2.8L13 6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 3px; background: var(--navy);
  -webkit-mask: var(--tick) center / 18px no-repeat; mask: var(--tick) center / 18px no-repeat;
}
.bring-note { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }

/* Apostille: dark band with a route reference panel */
.apostille { background: var(--band); color: var(--on-band); }
.apostille-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.apostille h2 { margin: var(--s-4) 0 var(--s-5); max-width: 16ch; }
.apostille h2 em { display: block; color: var(--band-accent); }
.apostille .eyebrow { color: var(--band-accent); }
.apostille .eyebrow::before { background: var(--band-accent); }
.apostille .lede { color: var(--on-band-2); margin-bottom: var(--s-6); }
/* Route panel: the certificate frame, drawn in light rules on the dark band */
.routes {
  padding: clamp(24px, 3.5vw, 40px); border: 1px solid color-mix(in srgb, var(--on-band) 28%, transparent); border-radius: 2px;
  box-shadow: inset 0 0 0 6px var(--band), inset 0 0 0 7px color-mix(in srgb, var(--on-band) 16%, transparent);
}
.routes .num { color: var(--band-accent); }
.routes h3 { margin: var(--s-2) 0 var(--s-4); color: var(--on-band); }
.route-list { list-style: none; margin: 0; padding: 0; }
.route-list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid color-mix(in srgb, var(--on-band) 16%, transparent); }
.route-tag { align-self: start; justify-self: start; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--band-accent) 60%, transparent); border-radius: var(--r-field); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--band-accent); }
.route-list strong { display: block; font-weight: 600; color: var(--on-band); }
.route-list p { margin-top: 4px; font-size: .9375rem; color: var(--on-band-2); }
.routes-foot { padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--on-band) 16%, transparent); font-size: var(--fs-small); color: var(--on-band-2); }
.apostille .ph { color: var(--band-accent); border-color: var(--band-accent); }

/* Documents index */
.docs-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s-8); align-items: start; }
.docs-head { position: sticky; top: 100px; }
.docs-head h2 { margin: var(--s-3) 0 var(--s-4); }
.docs-head p { color: var(--ink-2); margin-bottom: var(--s-5); max-width: 36ch; }
.docs-index .tag { text-transform: uppercase; }

/* About the notary */
#documents + #about { border-top: 1px solid var(--rule); } /* two paper sections in a row need a divider */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.portrait { margin: 0; }
.portrait-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; padding: 10px; background: var(--surface); }
.portrait-photo picture, .portrait-photo img { display: block; width: 100%; height: 100%; }
.portrait-photo img { object-fit: cover; object-position: 50% 25%; border-radius: 1px; }
.portrait figcaption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-2); }
.about-copy h2 { margin: var(--s-4) 0 var(--s-5); max-width: 16ch; }
.about-copy .lede { margin-bottom: var(--s-4); }
.about-bio { color: var(--ink-2); max-width: 60ch; }
.commitments { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.commitments li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.commitments .num { padding-top: 6px; }
.commitments h3 { margin-bottom: 4px; }
.commitments p { color: var(--ink-2); font-size: .9375rem; }

/* Reviews */
.reviews-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--s-8); align-items: start; }
.reviews-grid > *, .faq-grid > * { min-width: 0; }
.reviews-summary h2 { margin: var(--s-3) 0 var(--s-6); }
.rating { display: grid; gap: 6px; padding-top: var(--s-5); border-top: 1px solid var(--rule-strong); }
.rating-score { font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); line-height: 1; }
.rating-score small { font-size: .4em; color: var(--ink-2); margin-left: 4px; }
.rating { text-decoration: none; }
.rating .stars { font-size: 1.375rem; gap: 3px; }
.rating-meta { font-size: var(--fs-small); color: var(--ink-2); }
/* Star breakdown under the score (sample); bars grow when the summary scrolls into view */
.rating-bars { display: grid; gap: 8px; max-width: 340px; list-style: none; margin: var(--s-5) 0 0; padding: 0; font-size: .8125rem; color: var(--ink-2); text-decoration: none; }
.rating-bars li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 2.8em; align-items: center; gap: 10px; }
.rating-bars i { position: relative; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.rating-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--brass), var(--band-accent)); transform-origin: left; }
.js .reviews-summary.reveal .rating-bars i::after { transform: scaleX(0); transition: transform 1.1s var(--ease) .3s; }
.js .reviews-summary.reveal.in .rating-bars i::after { transform: none; }
.rating-bars.sample { text-decoration: none; }
.rating-bars.sample b { text-decoration: underline dotted 1px; text-decoration-color: color-mix(in srgb, var(--brass) 65%, transparent); text-underline-offset: 3px; }
.rating-bars b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Review carousel: filter chips + arrows, a snapping track of cards, dots */
.review-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--surface);
  font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.review-arrows { display: flex; gap: 8px; }
.review-arrows .icon-btn { display: grid; background: var(--surface); cursor: pointer; }
.review-arrows .icon-btn:disabled { opacity: .35; cursor: default; }
.review-track {
  display: flex; gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 6px 6px var(--s-3); margin: -6px -6px 0; scroll-padding-inline: 6px;
}
.review-track::-webkit-scrollbar { display: none; }
.review-track:focus-visible { outline-offset: 4px; border-radius: var(--r-card); }
.review {
  position: relative; flex: 0 0 calc((100% - var(--s-4)) / 2); scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-5);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
}
.review[hidden] { display: none; }
.review::before { content: "\201D"; position: absolute; top: 6px; right: 18px; font-family: var(--font-display); font-size: 5.5rem; line-height: 1; color: color-mix(in srgb, var(--brass) 22%, transparent); pointer-events: none; }
.review-stars { color: var(--brass); font-size: .9375rem; letter-spacing: 3px; }
.review blockquote { margin: 0; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.42; }
.review .ph { white-space: normal; }
.review figcaption { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.review figcaption .sample-tag { grid-column: 2; justify-self: start; margin-top: 6px; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--av, #1E3A5F); color: #F7F4EE; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.review:nth-child(6n+2) .avatar { --av: #8A6420; }
.review:nth-child(6n+3) .avatar { --av: #8C2F25; }
.review:nth-child(6n+4) .avatar { --av: #2F6B4F; }
.review:nth-child(6n+5) .avatar { --av: #4A5566; }
.review:nth-child(6n+6) .avatar { --av: #5B4A7A; }
.review figcaption strong { display: block; font-size: var(--fs-small); }
.review figcaption small { display: block; color: var(--ink-2); font-size: .8125rem; }
.review-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-2); }
.review-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--rule-strong); cursor: pointer; transition: width var(--t) var(--ease), background-color var(--t) ease; }
.review-dots button[aria-current="true"] { width: 22px; background: var(--navy); }
.review-note { margin-top: var(--s-4); font-size: .8125rem; color: var(--ink-2); }

/* FAQ: sticky heading + grouped accordions */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-8); align-items: start; }
.faq-head { position: sticky; top: 100px; }
.faq-head h2 { margin: var(--s-3) 0 var(--s-4); }
.faq-head p { color: var(--ink-2); margin-bottom: var(--s-5); max-width: 40ch; }
.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group h3 { margin-bottom: var(--s-3); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--navy); }
details { border-bottom: 1px solid var(--rule); padding: 0; }
.faq-group h3 + details { border-top: 1px solid var(--rule); }
summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: 0 0 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule-strong);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 11px 1.5px, 1.5px 11px; background-position: center; background-repeat: no-repeat;
  transition: transform var(--t) ease;
}
summary:hover::after { border-color: var(--ink); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink-2); padding-bottom: 24px; max-width: 68ch; animation: fadeDown var(--t) ease both; }

/* FAQ upgrade: contact card, search, category chips, numbered questions, open state */
.faq-ask { margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
.faq-head .faq-ask p { margin-bottom: var(--s-4); font-size: .9375rem; }
.faq-head .faq-ask .faq-ask-title { margin-bottom: 4px; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 500; letter-spacing: var(--tr-h3); color: var(--ink); }
.faq-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-4); }
.faq-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-bottom: var(--s-5); }
.faq-tools > *, .faq-tool-row > .chips, .review-tools > .chips { min-width: 0; }
.faq-search { position: relative; display: block; }
.faq-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-2); pointer-events: none; }
.faq-search input {
  width: 100%; min-height: 50px; padding: 12px 16px 12px 46px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: inherit; font-size: max(16px, 1rem);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.faq-search input::placeholder { color: color-mix(in srgb, var(--ink-2) 80%, transparent); }
.faq-search input:hover { border-color: var(--ink-2); }
.faq-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 22%, transparent); }
.faq-tool-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.faq-toggle-all { padding: 6px 0; border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--navy); cursor: pointer; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: from-font; }
.faq-count { font-size: .8125rem; color: var(--ink-2); }
.faq-count:empty { display: none; }
.faq-empty { padding: var(--s-5); border: 1px dashed var(--rule-strong); border-radius: var(--r-card); color: var(--ink-2); }
.faq-empty a { color: var(--navy); font-weight: 600; }
.faq-group[hidden], .faq details[hidden] { display: none; }
.faq { counter-reset: q; }
.faq details { counter-increment: q; transition: background-color var(--t) ease, box-shadow var(--t) ease, margin var(--t) var(--ease), padding var(--t) var(--ease); }
.faq summary { justify-content: flex-start; }
.faq summary::before { content: counter(q, decimal-leading-zero); flex: 0 0 2.4em; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-mono); color: var(--brass); }
.faq summary::after { margin-left: auto; }
.faq summary:hover { color: var(--navy); }
.faq details[open] { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 3px 0 0 var(--brass), var(--shadow); border-bottom-color: transparent; }
.faq details[open] summary::after { background-color: var(--ink); background-image: linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper)); border-color: var(--ink); }
.faq details p { padding-left: 2.4em; }
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Request a quote */
.contact-section { background: var(--tint); }
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-info h2 { margin: var(--s-4) 0 var(--s-5); max-width: 15ch; }
.contact-info h2 em { display: block; }
.contact-info .lede { margin-bottom: var(--s-6); }
.call-card { padding: var(--s-5) var(--s-6); background: var(--band); color: var(--on-band); border-radius: var(--r-card); }
.call-card .num { color: var(--band-accent); }
.call-number { display: inline-flex; align-items: center; gap: 12px; margin: var(--s-2) 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); color: var(--on-band); text-decoration: none; }
.call-number svg { width: 26px; height: 26px; color: var(--band-accent); }
.call-number:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.call-number:focus-visible { outline-color: var(--on-band); }
.call-hours { font-size: var(--fs-small); color: var(--on-band-2); }
.call-card .ph { color: var(--band-accent); border-color: var(--band-accent); }
.contact-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.contact-list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-strong); font-size: .9375rem; }
.contact-list svg { width: 20px; height: 20px; margin-top: 2px; color: var(--navy); }
.contact-list small { display: block; color: var(--ink-2); font-size: .8125rem; }
.contact-list a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }

.form { background: var(--surface); border-radius: 2px; padding: clamp(24px, 4vw, 40px); display: grid; gap: var(--s-5); box-shadow: var(--shadow); }
.form.frame { box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--rule), var(--shadow); }
.form-top { display: grid; gap: 6px; }
.form-top[hidden] { display: none; }
.form-title { font-family: var(--font-display); font-size: 1.5rem; }
.form-progress { font-size: var(--fs-small); color: var(--ink-2); }
.form-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.form-bar span { height: 3px; border-radius: 2px; background: var(--rule); transition: background var(--t) ease; }
.form-bar span:first-child, .form[data-step="2"] .form-bar span { background: var(--navy); }
.form-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-5); }
.form-step[hidden] { display: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-4); }
.file-list { font-size: .8125rem; color: var(--ink-2); font-family: var(--font-mono); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.form-foot small { color: var(--ink-2); font-size: var(--fs-small); }
.error-summary { padding: var(--s-4) var(--s-5); border: 1px solid var(--err); border-left-width: 4px; border-radius: var(--r-field); background: color-mix(in srgb, var(--err) 6%, var(--surface)); font-size: .9375rem; }
.error-summary[hidden] { display: none; }
.error-summary p { font-weight: 600; color: var(--err); }
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary a { color: var(--ink); text-underline-offset: 3px; }
.result { border: 1px solid var(--ok); border-left-width: 4px; border-radius: var(--r-field); padding: var(--s-5); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); font-size: .9375rem; }
.result[hidden] { display: none; }
.result strong { display: block; margin-bottom: var(--s-3); font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.result dl { display: grid; grid-template-columns: 6rem 1fr; gap: 6px var(--s-4); margin: 0 0 var(--s-4); }
.result dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-caps); word-spacing: var(--ws-caps); text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.result dd { margin: 0; }
.result p { color: var(--ink-2); font-size: var(--fs-small); }
.demo-note { font-size: .8125rem; color: var(--ink-2); text-align: center; }

/* Show-all controls: only used on phones, where long lists are shortened */
.more-btn { display: none; }

/* Typography details -----------------------------------------------------------
   One place for the finer text settings of each component. Display serif tracks tighter
   as it grows; small sans text opens up slightly; uppercase labels share --tr-caps. */
.eyebrow, .picker legend, .cert-kicker, .creds-list dt, .faq-group h3, .foot-h { line-height: var(--lh-ui); }
.cert-title { line-height: 1.12; letter-spacing: -.012em; }
.svc h3, .where-list strong, .journey h3, .faq summary, .form-title, .result strong { letter-spacing: var(--tr-h3); }
.svc-body > p, .journey p, .route-list p, .faq details p, .about-bio, .review-note { line-height: 1.62; }
.index .tag, .route-tag, .sample-tag { letter-spacing: .02em; }
.index li { letter-spacing: -.004em; }
.review blockquote { line-height: 1.4; letter-spacing: -.008em; }
.review figcaption small { letter-spacing: var(--tr-small); }
.rating-score { letter-spacing: -.03em; }
.call-number { letter-spacing: -.012em; }
.sheet-nav ol > li > a { letter-spacing: -.012em; }
.nav-links { letter-spacing: 0; }
.field label { letter-spacing: .004em; line-height: var(--lh-ui); }
.field input, .field select, .field textarea { font-size: max(16px, 1rem); letter-spacing: 0; } /* 16px+ stops phone browsers zooming on focus */
.foot-grid, .site-footer p { line-height: 1.6; }
.hero .lede, .hero-price { letter-spacing: -.004em; }
.hero-quote p { letter-spacing: -.006em; }
.brand-name b { letter-spacing: .015em; }
/* About: the opening paragraph starts with a serif drop cap (where the browser supports it) */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .about-copy .lede::first-letter {
    -webkit-initial-letter: 2; initial-letter: 2;
    margin-right: .12em; font-family: var(--font-display); font-weight: 500; color: var(--seal);
  }
}

/* 7. Motion ---------------------------------------------------------------- */
/* Scroll reveal: visible by default; hidden only when JS runs, until in view */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) ease, transform var(--t-slow) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .06s; }
.js .reveal.d2 { transition-delay: .12s; }
.js .reveal.d3 { transition-delay: .18s; }
.rise { animation: rise .6s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sealPress {
  0% { transform: rotate(var(--rot, 0deg)) scale(1.12); opacity: 0; }
  60% { transform: rotate(var(--rot, 0deg)) scale(.97); opacity: 1; }
  100% { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}
.seal-press { animation: sealPress .55s var(--ease) 1.5s both; }
.cert-seal { --rot: -8deg; }

/* Sample content marker: subtle, but visible enough that nothing reads as a real claim */
.sample { text-decoration: underline dotted 1px; text-decoration-color: color-mix(in srgb, var(--brass) 65%, transparent); text-underline-offset: 3px; cursor: help; }
.sample-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border: 1px dashed color-mix(in srgb, var(--brass) 70%, transparent); border-radius: var(--r-pill); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }

/* Hover effects ---------------------------------------------------------- */
.svc { transition: border-color var(--t) ease, transform var(--t) var(--ease), box-shadow var(--t) ease; }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc-art img { transition: transform 1s var(--ease); }
.svc:hover .svc-art img { transform: scale(1.05); }
.where-list li svg { transition: transform var(--t) var(--ease), color var(--t-fast) ease; }
.where-list li:hover svg { transform: translateY(-3px) scale(1.08); color: var(--seal); }
.journey > li { transition: border-color var(--t) ease; }
.journey > li:hover { border-top-color: var(--navy); }
.bring { transition: transform var(--t) var(--ease), box-shadow var(--t) ease; }
.bring:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.route-list li { transition: background var(--t-fast) ease, padding var(--t) var(--ease); }
.route-list li:hover { background: color-mix(in srgb, var(--on-band) 4%, transparent); padding-left: 8px; }
.route-list li:hover .route-tag { background: var(--band-accent); color: var(--band); }
.route-tag { transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.commitments li { transition: padding var(--t) var(--ease); }
.commitments li:hover { padding-left: 6px; }
.portrait-photo img { transition: transform 1.2s var(--ease), filter var(--t) ease; }
.portrait:hover .portrait-photo img { transform: scale(1.04); }
.review { transition: transform var(--t) var(--ease), box-shadow var(--t) ease; }
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
summary { transition: color var(--t-fast) ease; }
summary:hover { color: var(--navy); }
.call-card { transition: transform var(--t) var(--ease); }
.call-card:hover { transform: translateY(-3px); }
.foot-grid a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t) var(--ease), color var(--t-fast) ease; }
.foot-grid a:hover { background-size: 100% 1px; text-decoration: none; }

/* Entrance animation ------------------------------------------------------ */
@keyframes photoIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes certIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes badgeIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes writeOn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes starIn { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero-photo { animation: photoIn 1s cubic-bezier(.7, 0, .2, 1) .15s both; }
.photo-badge { animation: badgeIn .5s var(--ease) 1s both; }
.hero-visual .cert { animation: certIn .8s var(--ease) .55s both; }
.sig-name { animation: writeOn 1.4s cubic-bezier(.45, .05, .35, 1) 1.1s both; }
.stars i { display: inline-block; animation: starIn .4s var(--ease) both; }
.stars i:nth-child(1) { animation-delay: .7s; } .stars i:nth-child(2) { animation-delay: .78s; }
.stars i:nth-child(3) { animation-delay: .86s; } .stars i:nth-child(4) { animation-delay: .94s; }
.stars i:nth-child(5) { animation-delay: 1.02s; }
.js .reviews-summary:not(.in) .stars i { animation: none; opacity: 0; }
.seal-press { animation-delay: 2.2s; }

/* 8. Responsive ------------------------------------------------------------ */
/* Small laptops: the header phone moves to the utility bar only */
@media (min-width: 1001px) and (max-width: 1180px) {
  .nav-phone { display: none; }
  .nav-links { gap: var(--s-5); }
  :lang(es) .nav-links { gap: var(--s-4); }
}
/* Four narrow credential columns: tighter caps so long labels ("Certificación") fit */
@media (min-width: 1001px) and (max-width: 1280px) {
  .creds-list dt { letter-spacing: .06em; word-spacing: 0; }
  .cred { --pad: var(--s-4); column-gap: 12px; }
}
@media (max-width: 1000px) {
  .contact, .section-head, .apostille-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .section-head { gap: var(--s-4); }
  .section-head > p { justify-self: start; }
  .where-inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .where-list { grid-template-columns: 1fr 1fr; row-gap: var(--s-5); }
  .where-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .process-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr 1fr; row-gap: var(--s-7); }
  .routes { max-width: 640px; }
  .docs-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .docs-head { position: static; }
  .creds-inner { align-items: flex-start; }
  .creds-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--s-2); }
  .creds-list dt, .creds-list dd { overflow-wrap: anywhere; hyphens: auto; }
  .creds-list > div:nth-child(odd) { border-left: 0; --pad: 0px; }
  .about-grid, .reviews-grid, .faq-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .portrait { max-width: 420px; }
  .faq-head { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .util-mail { display: none; }
  .ticker-list { flex-basis: 260px; }
  .nav-links, .nav-phone { display: none; }
  .nav-actions { gap: var(--s-2); }
  .icon-btn { display: grid; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero h1 { max-width: 14ch; }
  .hero-visual { justify-self: stretch; max-width: 560px; padding-bottom: 0; }
  .hero-photo { width: 100%; aspect-ratio: 4 / 3; }
  .hero-photo img { object-position: 50% 18%; }
  .hero-visual .cert { position: relative; width: auto; margin: -72px 16px 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .hero-visual .cert { width: 78%; }
  .cert-fields > div { grid-template-columns: 6.5rem 1fr; }
}
@media (max-width: 720px) {
  .nav-cta, .nav-theme, .ticker, .util-phone { display: none; }
  .util-inner { min-height: 32px; }
  .util-links { gap: var(--s-4); }
  .menu-toggle { padding: 8px 11px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html { scroll-padding-top: 20px; }
  .nav { min-height: 64px; }
  .brand .seal { width: 36px; height: 36px; }
  .hero { padding-top: var(--s-6); }
  .hero h1 { margin: var(--s-4) 0; }
  .hero .lede { margin-bottom: var(--s-5); font-size: 1.0625rem; }
  /* Call is the primary action on phones */
  .hero-ctas { display: grid; grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .btn-call { order: -1; background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
  .hero-ctas .btn-call:hover { background: var(--btn-bg-hover); }
  .hero-ctas .btn-call { box-shadow: 0 6px 16px -10px rgba(20, 32, 46, .5); }
  .hero-ctas .btn:not(.btn-call) { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
  .hero-proof { gap: 6px 16px; margin-top: var(--s-5); }
  .lede-extra { display: none; } /* repeated in the call card */
  .hero { padding-top: 14px; }
  .hero h1 { margin: 12px 0; }
  .picker { margin-bottom: 16px; }
  .zip-check { max-width: none; }
  .hero-visual .cert { margin: -56px 10px 0; }
  .photo-badge { top: 10px; right: 10px; }
  .cert-fields > div { grid-template-columns: 1fr; gap: 2px; }
  .cert-seal { width: 72px; height: 72px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
  .form-grid .field { grid-column: 1 / -1; }
  .form-grid .field.half { grid-column: auto; }
  .where { padding-block: var(--s-7); }
  .where-list { grid-template-columns: 1fr 1fr; row-gap: 0; column-gap: var(--s-4); }
  .where-list li, .where-list li:nth-child(odd) { gap: var(--s-2); padding: var(--s-4) 0; border-left: 0; border-top: 1px solid var(--rule); }
  .where-list strong { font-size: 1.0625rem; margin: 0; }
  .where-list small { display: none; }
  .journey, .journey-2 { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .route-list li { grid-template-columns: 1fr; gap: var(--s-2); }
  /* Phones: a titled list. Seal + label on top, then one row per credential with its note */
  .creds { padding-block: var(--s-4) var(--s-2); }
  .creds-inner { display: block; }
  .creds-mark { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
  .creds-seal { width: 40px; height: 40px; }
  .creds-mark p { font-size: var(--fs-label); }
  .creds-mark::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 60%, transparent), transparent); }
  .creds-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .cred, .creds-list > div:nth-child(odd) {
    --pad: 0px; --disc: 40px; --row: var(--s-3);
    grid-template-columns: var(--disc) minmax(0, 1fr); column-gap: 14px; align-items: center;
    padding: var(--row) 0; border-left: 0; border-radius: 0; background: none;
  }
  .cred + .cred { border-top: 1px dashed var(--rule); }
  .cred::before { background: color-mix(in srgb, var(--navy) 9%, var(--surface)); border-color: color-mix(in srgb, var(--navy) 25%, var(--rule)); }
  .cred::after { top: calc(50% - 11px); }
  .creds-list dt { font-size: .6875rem; line-height: 1.3; }
  .creds-list dd { margin-top: 1px; line-height: 1.35; }
  .creds-list .cred-note { margin-top: 2px; font-size: .78125rem; line-height: 1.35; }
  .cred:active::before { background-color: var(--navy); }
  .cred:active::after { background-color: var(--surface); }
  .js .cred.reveal { transform: translateX(-14px); }
  .js .cred.reveal.in { transform: none; }
  .portrait-photo { aspect-ratio: 4 / 4.2; }
  .commitments li { grid-template-columns: 2.25rem 1fr; }
  .cert-fields > div:nth-child(2), .cert-fields > div:nth-child(4) { display: none; } /* covered by "How a visit works" */
  .bring-note { display: none; }
  .js #faqList:not(.show-all) .more, .js #docsList:not(.show-all) > .more { display: none; }
  .js .more-btn { display: inline-flex; width: 100%; margin-top: var(--s-5); }
  .foot-brand p:not(.foot-sign) { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
  .foot-brand { grid-column: 1 / -1; }
  .sticky-cta {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--rule);
    transform: translateY(110%); visibility: hidden; transition: transform var(--t) ease, visibility 0s linear var(--t);
  }
  .sticky-cta.show { transform: none; visibility: visible; transition: transform var(--t) ease; }
  .sticky-cta .btn { width: 100%; min-height: 48px; }
  .result dl { grid-template-columns: 1fr; gap: 0; }
  .result dd { margin-bottom: var(--s-2); }
  .contact-list li { font-size: 1rem; }
  body { padding-bottom: 84px; }
}

/* Phones: tighter section heads and certificate padding */
@media (max-width: 720px) {
  .section-head { margin-bottom: var(--s-6); padding-bottom: var(--s-5); }
  .cert { padding: 22px; }
  .cert-kicker { display: none; }
  .sticky-cta .btn { min-width: 0; padding-inline: 12px; }
}
/* Very small phones (320–380px): icon-only menu button, label kept for screen readers */
@media (max-width: 380px) {
  .menu-toggle { padding: 8px 11px; }
  .cert-seal { width: 60px; height: 60px; }
  .picker label span { padding: 7px 12px; font-size: .8125rem; }
  .nav-search { display: none; } /* still available in the menu */
  .sticky-cta { grid-template-columns: auto 1fr; }
  .sticky-cta .btn { font-size: .875rem; padding-inline: 10px; }
  .creds-list dt { letter-spacing: .06em; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand-name b { font-size: 1.25rem; }
}

/* Services responsive: tablets put the featured card full width with its photo beside the text */
@media (hover: hover) and (pointer: fine) { .svc:hover::after { opacity: 1; } }
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-feature { grid-column: 1 / -1; flex-direction: row; }
  .svc-feature .svc-art { flex: 0 0 46%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .svc-feature { flex-direction: column; }
  .svc-art, .svc-feature .svc-art { flex: none; aspect-ratio: 2.3 / 1; border-right: 0; border-bottom: 1px solid var(--rule); }
  .svc-num { font-size: 2.25rem; left: 14px; bottom: 8px; }
  .svc-flag { top: 10px; left: 10px; }
  .svc-incl { gap: 7px; padding-top: var(--s-3); }
  .svc-price strong { font-size: 1.875rem; }
  .svc-help { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); margin-top: var(--s-5); }
  .svc-help .seal { display: none; }
  /* Phones: the ticks carry the summary, so the paragraph and detail line are left out (search still reads them) */
  .svc-body > p, .svc-body > .svc-meta { display: none; }
  .svc-body { gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-4); }
  .svc-incl { margin: 0; padding-top: var(--s-3); }
  .svc-art, .svc-feature .svc-art { aspect-ratio: 2.8 / 1; }
  .svc-feature .svc-art img { object-position: center 40%; }
  .svc-foot { gap: var(--s-3); padding-top: var(--s-3); }
}

/* Reviews and FAQ on smaller screens */
@media (max-width: 1000px) {
  .reviews-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-head { display: contents; }
  .faq-head > .eyebrow, .faq-head > h2, .faq-head > p { grid-column: 1; }
  .faq-grid { row-gap: 0; }
  .faq-head > p { margin-bottom: var(--s-5); }
  .faq-col { margin-top: var(--s-2); }
  .faq-ask { order: 3; margin-top: var(--s-6); }
  .faq-grid > .faq-col { order: 2; }
}
@media (max-width: 720px) {
  .review { flex-basis: 86%; padding: var(--s-5); }
  .review-arrows { display: none; }
  .review-tools .chips, .faq-tools .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .review-tools .chips::-webkit-scrollbar, .faq-tools .chips::-webkit-scrollbar { display: none; }
  .review-tools { margin-bottom: var(--s-3); }
  .rating-bars { display: none; } /* phones: the score and stars carry it */
  .faq details[open] { margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3); }
  .faq details p { padding-left: 0; }
  .faq-ask { padding: var(--s-4); }
}

/* Where we meet, How it works, Documents -------------------------------------- */
/* Where we meet: a short intro and a ZIP shortcut beside the photo cards */
.where-lede { margin: var(--s-4) 0; max-width: 34ch; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.where-photo picture { transition: transform var(--t) var(--ease), box-shadow var(--t) ease; }
.where-list li:hover .where-photo picture { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 32, 46, .08), 0 22px 40px -20px rgba(20, 32, 46, .45); }
.where-list li:hover strong { color: var(--navy); }
.where-list strong { transition: color var(--t-fast) ease; }

/* How it works: a connected timeline. The brass line draws across when it scrolls into view */
.timeline { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--s-7); }
.timeline::before {
  content: ""; position: absolute; top: 28px; left: 28px; right: calc((100% - 3 * var(--s-5)) / 4 - 28px); height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--band-accent) 50%, var(--brass)); transform-origin: left;
}
.js .timeline.reveal::before { transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; }
.js .timeline.reveal.in::before { transform: none; }
.timeline > li { padding-top: 0; border-top: 0; }
.timeline > li::before { content: none; }
.tl-icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-4);
  border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--surface); color: var(--navy);
  box-shadow: 0 0 0 6px var(--tint); transition: background-color var(--t) ease, color var(--t) ease, transform var(--t) var(--ease), border-color var(--t) ease;
}
.tl-icon svg { width: 24px; height: 24px; }
.timeline > li:last-child .tl-icon { color: var(--seal); }
.timeline > li:last-child .tl-icon svg { width: 34px; height: 34px; }
.tl-num { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-mono); color: var(--navy); }
.timeline h3 { margin-bottom: var(--s-2); }
.timeline p { color: var(--ink-2); font-size: .9375rem; }
.timeline .tl-time {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3); padding: 4px 11px 4px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--navy) 8%, var(--surface)); color: var(--ink); font-size: .8125rem; font-weight: 500; line-height: 1.35;
}
.tl-time svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--navy); }
.timeline > li:hover .tl-icon { background: var(--navy); border-color: var(--navy); color: var(--paper); transform: scale(1.06); }
.js .timeline.reveal > li { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s var(--ease); }
.js .timeline.reveal.in > li { opacity: 1; transform: none; }
.js .timeline.reveal.in > li:nth-child(2) { transition-delay: .15s; }
.js .timeline.reveal.in > li:nth-child(3) { transition-delay: .3s; }
.js .timeline.reveal.in > li:nth-child(4) { transition-delay: .45s; }

/* What to have ready: one wide card, heading and action on the left, four tiles on the right */
.bring { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: center; padding: var(--s-6); }
.bring h3 { margin: var(--s-2) 0 var(--s-3); }
.bring .bring-note { margin: 0 0 var(--s-4); padding: 0; border: 0; max-width: 40ch; }
.bring .checklist { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.bring .checklist li { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-field); background: var(--paper); line-height: 1.45; }

/* Documents: filter chips; each row is a link that starts a quote for that document */
.docs-tools { margin-bottom: var(--s-4); }
.docs-grid > *, .docs-tools > .chips { min-width: 0; }
.chip-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 9%, transparent); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-n { background: color-mix(in srgb, var(--paper) 22%, transparent); }
.docs-index > li { display: block; padding: 0; }
.docs-index > li[hidden] { display: none; }
.doc-link {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; padding: 11px 10px 11px 6px;
  border-radius: var(--r-btn); color: var(--ink); text-decoration: none; transition: background-color var(--t-fast) ease;
}
.doc-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--navy) 8%, var(--surface)); color: var(--navy); transition: background-color var(--t) ease, color var(--t) ease; }
.doc-ico svg { width: 18px; height: 18px; }
.doc-name { font-size: 1.0625rem; line-height: 1.35; }
.docs-index .tag { padding: 3px 10px; border-radius: var(--r-pill); font-size: .6875rem; text-transform: uppercase; }
.tag-notary { color: var(--navy); background: color-mix(in srgb, var(--navy) 9%, transparent); }
.tag-apostille { color: var(--brass); background: color-mix(in srgb, var(--brass) 13%, transparent); }
.tag-both { color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--navy) 11%, transparent), color-mix(in srgb, var(--brass) 16%, transparent)); }
.doc-go { color: var(--navy); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast) ease, transform var(--t) var(--ease); }
.doc-link:hover, .doc-link:focus-visible { background: color-mix(in srgb, var(--navy) 5%, transparent); }
.doc-link:hover .doc-ico, .doc-link:focus-visible .doc-ico { background: var(--navy); color: var(--paper); }
.doc-link:hover .doc-go, .doc-link:focus-visible .doc-go { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .docs-grid { grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
  .timeline::before { display: none; }
  .bring { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}
@media (max-width: 720px) {
  /* Vertical timeline: icons on a line down the left */
  .timeline { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); margin-bottom: var(--s-6); }
  /* the line runs between icons only, so it stops at the last step */
  .timeline > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .timeline > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: calc(-1 * var(--s-5)); width: 2px; background: linear-gradient(180deg, var(--brass), var(--band-accent)); }
  .timeline > li > * { grid-column: 2; }
  .timeline > li > .tl-icon { grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; margin: 0; }
  .tl-icon svg { width: 20px; height: 20px; }
  .timeline > li:last-child .tl-icon svg { width: 28px; height: 28px; }
  .timeline .tl-time { justify-self: start; margin-top: var(--s-2); }
  .bring { padding: var(--s-5); }
  .bring .checklist { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .bring .checklist li { padding: 12px 14px; }
  .bring .bring-head .btn { display: none; } /* the sticky bar already offers "Request a quote" */
  .docs-tools .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .docs-tools .chips::-webkit-scrollbar { display: none; }
  .doc-link { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 10px 4px; }
  .doc-ico { width: 32px; height: 32px; }
  .doc-name { font-size: 1rem; }
  .doc-go { display: none; }
}

/* Section photos --------------------------------------------------------------
   Free Unsplash photos (credits in docs/placeholders.md). Each sits in a rounded frame,
   zooms slightly on hover, and loads lazily. */

/* Where we meet: photo cards with the place icon as a badge */
.where-list { gap: var(--s-5) var(--s-4); }
.where-list li, .where-list li:nth-child(odd) { display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; }
.where-photo { position: relative; margin-bottom: 26px; }
.where-photo picture { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--tint); box-shadow: var(--shadow); }
.where-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.where-list .where-photo svg {
  position: absolute; left: 12px; bottom: -20px; width: 42px; height: 42px; padding: 10px; box-sizing: border-box;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); color: var(--navy);
}
.where-list li:hover .where-photo img { transform: scale(1.06); }
.where-list li:hover .where-photo svg { transform: translateY(-3px) rotate(-6deg); color: var(--seal); }

/* Apostille band: a faint stamped-passport photo behind the text */
.apostille { position: relative; isolation: isolate; overflow: hidden; }
.apostille::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/apostille-bg-1600.jpg") center / cover no-repeat;
  background-image: image-set(url("../img/apostille-bg-1600.webp") type("image/webp"), url("../img/apostille-bg-1600.jpg") type("image/jpeg"));
  opacity: .14; filter: grayscale(.4) contrast(1.1);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 90%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 90%);
}

/* Documents: a slightly tilted photo with the seal pressed on its corner */
.docs-photo { position: relative; margin: var(--s-6) 14px 14px 0; max-width: 400px; }
.docs-photo picture { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); transform: rotate(-1.5deg); transition: transform var(--t-slow) var(--ease); background: var(--tint); }
.docs-photo img { width: 100%; height: 100%; object-fit: cover; }
.docs-photo .seal { position: absolute; right: -14px; bottom: -14px; width: 70px; height: 70px; padding: 4px; border-radius: 50%; background: var(--paper); color: var(--seal); box-shadow: var(--shadow); transform: rotate(-12deg); transition: transform .8s var(--ease); }
.docs-photo:hover picture { transform: rotate(0deg) scale(1.01); }
.docs-photo:hover .seal { transform: rotate(8deg) scale(1.05); }

@media (max-width: 1000px) {
  .docs-photo { max-width: 520px; }
}
/* The documents column only sticks when it fits in the window with its photo */
@media (max-height: 820px) { .docs-head { position: static; } }
@media (max-width: 720px) {
  .apostille::before { background-image: image-set(url("../img/apostille-bg-900.webp") type("image/webp"), url("../img/apostille-bg-900.jpg") type("image/jpeg")); opacity: .12; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .3) 70%); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .3) 70%); }
  .where-list { gap: var(--s-5) var(--s-3); }
  .where-list li, .where-list li:nth-child(odd) { padding: 0; border: 0; }
  .where-photo { margin-bottom: 22px; }
  .where-list .where-photo svg { width: 36px; height: 36px; padding: 8px; left: 8px; bottom: -16px; }
  .docs-photo { margin: var(--s-5) 10px 10px 0; max-width: none; }
  .docs-photo picture { aspect-ratio: 2.1 / 1; }
  .docs-photo .seal { width: 56px; height: 56px; right: -10px; bottom: -10px; }
}

/* Hero on phones ------------------------------------------------------------
   Image strip above the headline (the large photo is hidden, so it is not shown twice),
   shorter intro, the picker as a one-row segmented control with a sliding highlight,
   and a swipeable visit summary with dots. Price line flips when the choice changes. */
.hero-strip, .cert-dots { display: none; }
#heroPrice.flip { display: inline-block; animation: priceFlip .45s var(--ease); }
@keyframes priceFlip { from { opacity: 0; transform: perspective(400px) rotateX(-70deg); transform-origin: 50% 0; } to { opacity: 1; transform: none; } }
@keyframes stripIn { from { clip-path: inset(0 0 100% 0 round var(--r-card)); } to { clip-path: inset(0 0 0 0 round var(--r-card)); } }
@keyframes stripZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes panelNext { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes panelPrev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .hero-strip {
    display: block; position: relative; height: 108px; margin-bottom: var(--s-3); border-radius: var(--r-card); overflow: hidden;
    background: var(--tint); box-shadow: var(--shadow); animation: stripIn .9s cubic-bezier(.7, 0, .2, 1) .05s both;
  }
  .hero-strip picture, .hero-strip img { display: block; width: 100%; height: 100%; }
  .hero-strip img { object-fit: cover; object-position: 50% 19%; animation: stripZoom 1.6s var(--ease) .1s both; }
  .hero-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(20, 32, 46, .4), transparent 60%); pointer-events: none; }
  .strip-badge {
    position: absolute; right: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule); border-radius: var(--r-pill); animation: badgeIn .5s var(--ease) .8s both;
  }
  .strip-badge .seal { width: 22px; height: 22px; color: var(--seal); }
  .strip-badge b { display: block; font-size: .8125rem; line-height: 1.2; color: var(--ink); }
  .strip-badge small { display: none; }
  .hero .eyebrow { font-size: .6875rem; }

  /* Shorter intro: keep services and area, drop the list of places */
  .lede-place { display: none; }
  .lede-area::after { content: "."; }
  .hero .lede { margin-bottom: var(--s-4); }

  /* One-row segmented picker */
  .picker-opts {
    position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 4px;
    border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--surface);
  }
  .picker-opts::before {
    content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px;
    background: var(--ink); box-shadow: 0 4px 12px -6px rgba(20, 32, 46, .6);
    transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .4s var(--ease);
  }
  .picker label { display: grid; }
  .picker label span, .picker input:checked + span {
    position: relative; justify-content: center; min-height: 44px; padding: 6px 6px; border: 0; border-radius: 10px;
    background: transparent; text-align: center; font-size: .8125rem; line-height: 1.2; white-space: normal;
    transition: color var(--t) ease, transform var(--t-fast) ease;
  }
  .picker input:checked + span { color: var(--paper); }
  .picker label:hover span { transform: none; border-color: transparent; }
  .picker input:not(:checked) + span:hover { color: var(--ink); }
  .picker label:active span { transform: scale(.95); }
  .picker input:focus-visible + span { outline-offset: -2px; }

  /* Visit summary without the photo; swipe or tap a dot to change */
  .hero-photo { display: none; }
  .hero-visual .cert, .hero-visual .cert:hover { margin: 0; transform: none; touch-action: pan-y; }
  .cert-dots { display: inline-flex; gap: 6px; align-items: center; }
  .cert-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); cursor: pointer; transition: width var(--t) var(--ease), background-color var(--t) ease; }
  .cert-dots i.on { width: 20px; border-radius: 4px; background: var(--navy); }
  .cert[data-dir="next"] .cert-panel { animation-name: panelNext; }
  .cert[data-dir="prev"] .cert-panel { animation-name: panelPrev; }
}
@media (max-width: 380px) {
  .picker label span, .picker input:checked + span { font-size: .75rem; padding-inline: 4px; }
  .hero-strip { height: 76px; margin-bottom: var(--s-2); }
  .strip-badge { bottom: 8px; padding-block: 4px; }
  .hero .picker legend { margin-bottom: 6px; }
}

/* Hero background -------------------------------------------------------------
   Banknote-style guilloche rosettes in brass (assets/brand/guilloche.svg, drawn as a
   mask so it follows the theme), a warm glow and a fine paper grain. */
.hero { isolation: isolate; --gl-opacity: .2; }
:root[data-theme="dark"] .hero { --gl-opacity: .14; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--brass); opacity: var(--gl-opacity);
  -webkit-mask: url("../brand/guilloche.svg") calc(100% + 190px) 42% / 760px 760px no-repeat, url("../brand/guilloche.svg") -150px calc(100% + 170px) / 400px 400px no-repeat;
  mask: url("../brand/guilloche.svg") calc(100% + 190px) 42% / 760px 760px no-repeat, url("../brand/guilloche.svg") -150px calc(100% + 170px) / 400px 400px no-repeat;
  animation: guillocheIn 1.8s var(--ease) .1s both;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60% 70% at 82% 35%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%),
    radial-gradient(45% 55% at 0% 100%, color-mix(in srgb, var(--navy) 9%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, var(--paper)), var(--paper) 85%);
}
@keyframes guillocheIn { from { opacity: 0; transform: rotate(-6deg) scale(1.04); } to { opacity: var(--gl-opacity); transform: none; } }
@media (max-width: 900px) {
  .hero::before {
    -webkit-mask: url("../brand/guilloche.svg") calc(100% + 230px) -170px / 560px 560px no-repeat;
    mask: url("../brand/guilloche.svg") calc(100% + 230px) -170px / 560px 560px no-repeat;
  }
  .hero { --gl-opacity: .16; }
}

/* Hero extras -------------------------------------------------------------------
   Changing place word, next-opening chip, one-line review, mouse depth, seal stamp. */
.hero h1 { max-width: none; }
.hero h1 .rot { display: block; white-space: nowrap; }
/* Two lines from 600px up: "The notary who comes to" / place word. The first line is
   about 10.3× the font size wide, so the size follows the column width (cqi). Phones keep
   three lines: "The notary" / "who comes to" / place word. */
.h1-a { display: block; }
@media (min-width: 600px) {
  .hero-copy { container-type: inline-size; }
  .hero h1 { font-size: min(4.75rem, 9.2cqi); white-space: nowrap; }
  .h1-a { display: inline; }
}
.rot-word { display: inline-block; transition: opacity .3s ease, transform .3s var(--ease), filter .3s ease; }
.rot-word.out { opacity: 0; transform: translateY(-.35em); filter: blur(6px); }
.rot-word.in { animation: rotIn .45s var(--ease); }
@keyframes rotIn { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.next-slot {
  position: absolute; top: 68px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill); background: rgba(20, 32, 46, .74); color: #F7F4EE;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); animation: badgeIn .5s var(--ease) 1.2s both; cursor: help;
}
.next-slot[hidden] { display: none; }
.next-slot i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #5FD39A; }
.next-slot i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #5FD39A; animation: slotPulse 1.6s ease-out 1.6s 3; }
@keyframes slotPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }

.hero-quote { margin: var(--s-4) 0 0; max-width: 46ch; transition: opacity .35s ease, transform .35s var(--ease); }
.hero-quote.swap { opacity: 0; transform: translateY(6px); }
.hero-quote blockquote { margin: 0; position: relative; padding-left: 26px; }
.hero-quote blockquote::before { content: "\201C"; position: absolute; left: 0; top: -10px; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--brass); }
.hero-quote p { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.hero-quote figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-left: 26px; font-size: var(--fs-small); color: var(--ink-2); }
.hero-quote figcaption strong { order: -1; color: var(--ink); font-weight: 600; }
.hero-quote figcaption strong::before { content: "\2014\00A0"; color: var(--ink-2); font-weight: 400; }
.hero-quote .sample-tag { margin-top: 0; }

.hero-photo { transition: translate .7s var(--ease); }
.hero-visual .cert { transition: transform var(--t) var(--ease), box-shadow var(--t) ease, translate .7s var(--ease); }
.hero::before { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -14px); transition: translate .9s var(--ease); }

.btn-stamp {
  position: absolute; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 1; pointer-events: none;
  color: var(--band-accent); animation: stampPress .5s cubic-bezier(.3, 1.4, .5, 1) both, stampFade .35s ease .8s forwards;
}
@keyframes stampPress { from { opacity: 0; transform: scale(2.4) rotate(-40deg); } 70% { opacity: 1; transform: scale(.9) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(-12deg); } }
@keyframes stampFade { to { opacity: 0; } }

@media (max-width: 720px) {
  .next-slot { top: 8px; right: 8px; padding: 4px 10px; font-size: .6875rem; }
  .hero-quote p { font-size: 1rem; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 2.25rem; }
}

/* Hero fits the screen --------------------------------------------------------
   Desktop and laptop (two-column hero): header + hero fill exactly one screen.
   Type and spacing scale with the window height; the picture column is capped to it.
   --mast-h is the header height, set by site.js. */
@media (min-width: 901px) {
  .hero {
    --fit-gap: clamp(6px, calc(2.4vh - 8px), 22px);
    display: flex; align-items: center; box-sizing: border-box;
    min-height: calc(100vh - var(--mast-h, 115px)); min-height: calc(100svh - var(--mast-h, 115px));
    padding-block: clamp(10px, calc(4vh - 14px), 40px);
  }
  .hero-grid { width: 100%; }
  .hero h1 { font-size: min(4.75rem, 7.4vh, 9.2cqi); margin: var(--fit-gap) 0; }
  .hero .lede { margin-bottom: var(--fit-gap); }
  .picker { margin-bottom: var(--fit-gap); }
  .hero-proof { margin-top: var(--fit-gap); padding-top: var(--fit-gap); }
  .hero-quote { margin-top: var(--fit-gap); }
  .zip-check { margin-top: var(--fit-gap); }

  /* Picture column: never taller than the space under the header */
  .hero-visual { padding-bottom: 0; height: min(723px, calc(100svh - var(--mast-h, 115px) - 2 * clamp(10px, calc(4vh - 14px), 40px))); display: flex; flex-direction: column; }
  .hero-photo { aspect-ratio: auto; flex: 1; min-height: 0; margin-bottom: clamp(110px, 20vh, 190px); }
}
/* Shorter laptop screens: tighten the left column */
@media (min-width: 901px) and (max-height: 960px) {
  .lede-extra { display: none; }
  .hero .lede { font-size: 1.0625rem; }
  .picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-proof li:nth-child(3) { display: none; } /* NNA: repeated in the credentials strip below */
  .hero-quote p { font-size: .9375rem; line-height: 1.4; }
  .hero-quote figcaption { margin-top: 2px; }
  .hero-quote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* full quote in Reviews */
  .hero-price { margin-top: 8px; font-size: .8125rem; }
  .zip-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-4); max-width: 520px; }
  .zip-check label { margin: 0; }
  .zip-result { grid-column: 1 / -1; min-height: 0; }
  .zip-result:empty { display: none; }
}
@media (min-width: 901px) and (max-height: 800px), (min-width: 901px) and (max-width: 1100px) {
  .lede-place { display: none; }
  .lede-area::after { content: "."; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .hero-quote figcaption .sample-tag { display: none; } /* still marked by the dotted name and the Reviews section */
  .hero-ctas .btn { min-height: 44px; }
}
/* Narrow two-column screens (e.g. landscape tablets): keep chips, buttons and ratings on one line each */
@media (min-width: 901px) and (max-width: 1100px) {
  .picker-opts { flex-wrap: nowrap; gap: 6px; }
  .picker label span { padding: 6px 10px; font-size: .78125rem; white-space: nowrap; }
  .hero-ctas { flex-wrap: nowrap; gap: 8px; }
  .hero-ctas .btn { padding-inline: 14px; font-size: .875rem; }
  .hero-proof li:nth-child(n+2) { display: none; } /* commission and NNA: in the credentials strip below */
}

/* 9. Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}