/* ==========================================================================
   Addison Notary: base, layout and components
   Depends on tokens.css. Mobile-first; no framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute must win over any component display rule (.field is
   flex, .checkbox is flex), or script-toggled controls never disappear. */
[hidden] { display: none !important; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Keeps a focused element clear of the sticky header and the mobile CTA bar:
       WCAG 2.2 SC 2.4.11 "Focus Not Obscured". */
    scroll-padding-top: 5.5rem;
    scroll-padding-bottom: var(--sticky-cta-height);
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    font-optical-sizing: auto;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    /* `clip` rather than `hidden`: `overflow-x: hidden` on body silently makes
       the element a scroll container, which breaks `position: sticky` on the
       header in some browsers. `clip` trims stray overflow without that side
       effect. The real fix for overflow is min-width:0 on the flex children
       above. This is the safety net, not the mechanism. */
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
}

img, svg, video, canvas, picture {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--color-selection-bg); color: var(--color-text-strong); }

/* Single, offset focus ring. Offsetting puts the indicator on the page
   background rather than on a component fill, so one colour passes SC 1.4.11
   on every surface, including directly on the green button. */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--color-heading);
    text-wrap: balance;
}
h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-heading);
    text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--text-h3); line-height: 1.20; letter-spacing: -0.01em; }
h4 { font-size: var(--text-h4); line-height: 1.30; letter-spacing: -0.005em; }
h5 { font-size: var(--text-h5); line-height: 1.35; }
h6 { font-size: var(--text-h6); line-height: 1.40; letter-spacing: 0.01em; font-weight: 700; }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

a {
    color: var(--color-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--color-brand-hover); }

/* Links inside running copy keep an underline; colour alone would fail
   WCAG 1.4.1, which matters doubly here because brand green sits close to
   success green. */
.prose a, p a, li a { text-decoration: underline; }

strong, b { font-weight: 600; color: var(--color-text-strong); }

small { font-size: var(--text-small); }

ul, ol { padding-left: 1.35em; }
li + li { margin-top: var(--space-2); }

blockquote {
    border-left: 3px solid var(--color-accent-rule);
    padding-left: var(--space-5);
    font-family: var(--font-serif);
    font-size: 1.15em;
    line-height: 1.5;
    color: var(--color-text-strong);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-7);
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* Numerics: statutory fees, phone numbers and commission numbers all line up. */
.tnum, table, .fee-table, .phone-number {
    font-variant-numeric: tabular-nums;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.eyebrow--on-dark { color: var(--brass-300); }

.lead {
    font-size: var(--text-lead);
    line-height: 1.6;
    color: var(--color-text);
    max-width: var(--measure);
}

/* Breathing room in page headers: eyebrow, then title, then intro. Low
   specificity (:where) so any component that sets its own margin wins. */
:where(.eyebrow) + :where(h1, h2) { margin-top: var(--space-3); }
:where(h1) + :where(p, .lead) { margin-top: var(--space-5); }
:where(h2) + :where(.lead) { margin-top: var(--space-3); }
:where(.lead) + :where(.lead) { margin-top: var(--space-4); }

.measure { max-width: var(--measure); }

.text-muted  { color: var(--color-text-muted); }
.text-brand  { color: var(--color-brand); }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.section--alt   { background: var(--color-bg-alt); }
.section--muted { background: var(--color-bg-muted); }
.section--brand {
    background: var(--color-surface-brand);
    border-block: 1px solid var(--color-border);
}
.section--dark {
    background: var(--green-900);
    color: #E9F0EC;
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: #FFFFFF; }
.section--dark .text-muted { color: #B6C7BF; }
.section--dark a { color: #8AD3AF; }

.section-head {
    max-width: 44rem;
    margin-bottom: var(--space-8);
}
.section-head--center {
    margin-inline: auto;
    text-align: center;
}
.section-head > * + * { margin-top: var(--space-3); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-skip);
    padding: var(--space-3) var(--space-5);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-weight: 600;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--color-on-brand); }

/* --------------------------------------------------------------------------
   4. Buttons
   Minimum target 48×48 (WCAG 2.2 SC 2.5.8 floor is 24; 48 is the design target).
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-button);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    background: var(--color-brand);
    color: var(--color-on-brand);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
    background: var(--color-brand-hover);
    color: var(--color-on-brand);
    box-shadow: var(--shadow);
}

.btn--secondary {
    background: transparent;
    color: var(--color-brand);
    border-color: var(--color-brand);
}
.btn--secondary:hover {
    background: var(--color-surface-brand);
    color: var(--color-brand);
}

.btn--ink {
    background: var(--ink-800);
    color: #FFFFFF;
}
.btn--ink:hover { background: var(--ink-900); color: #FFFFFF; }

.btn--ghost {
    background: transparent;
    color: var(--color-text-strong);
    border-color: var(--color-border-strong);
}
.btn--ghost:hover { background: var(--color-bg-muted); color: var(--color-text-strong); }

.btn--on-dark {
    background: #FFFFFF;
    color: var(--green-800);
}
.btn--on-dark:hover { background: var(--green-50); color: var(--green-900); }

.btn--outline-on-dark {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.55);
}
.btn--outline-on-dark:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.btn--lg { min-height: 56px; padding-inline: var(--space-7); font-size: 1.0625rem; }
.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-small); }
.btn--block { display: flex; width: 100%; }

.btn .icon { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */
/* The header carries more across its width than any content row does: brand,
   five nav items, the language toggle and the CTA. Giving it the wide container
   buys the ~220px that stops the nav compressing into the wordmark, while page
   content keeps the 1180px measure that is comfortable to read. */
.site-header .container { max-width: var(--container-wide); }

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}
@supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--color-bg); }
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 4.5rem;
    /* Without min-width:0 a flex child refuses to shrink below its content
       width, so the header pushes the whole document wider than the viewport
       and every page gets a horizontal scrollbar. */
    min-width: 0;
}

/* The one flexible element in the header row. Above 400px its wordmark is
   nowrap, so flex-shrink is 0 and it keeps its natural width; below 400px the
   override further down lets it shrink and the wordmark reflows to the stacked
   "ADDISON / NOTARY" lockup rather than overflowing onto the nav. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    min-width: 0;
}
.brand-lockup:hover { color: inherit; }

.brand-lockup__mark {
    width: 2.125rem;
    height: 2.125rem;
    color: var(--color-brand);
    flex-shrink: 0;
}

.brand-lockup__words {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}
/* Below 400px the horizontal lockup cannot fit beside the language toggle and
   the menu button without pushing the page wider than the viewport, which would
   fail WCAG 1.4.10 Reflow. Rather than shrink the type into illegibility, the
   wordmark is allowed to wrap onto two lines, which is the stacked lockup, an
   approved variant in docs/BRAND-GUIDE.md §2.6. */
/* The wordmark is set exactly like the page headings (Source Serif 4, bold,
   sentence case, slight negative tracking) so the logo and the site read as
   one typeface. It was previously tracked-out small capitals, which made the
   same font look like a different one. */
.brand-lockup__name {
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--color-text-strong);
}

/* Below 400px the lockup is the one thing allowed to give. flex-shrink:1 plus
   min-width:0 lets the flex algorithm squeeze it, and because the name is NOT
   nowrap at this size it reflows to "ADDISON" / "NOTARY", the stacked lockup,
   instead of overflowing. Without the shrink it would simply take its
   max-content width and push the page wider than a 320px viewport. */
@media (max-width: 399.98px) {
    .brand-lockup       { flex-shrink: 1; min-width: 0; }
    .brand-lockup__words{ min-width: 0; }
    /* min-width:0 here too: a flex item defaults to min-width:auto, which
       resolves to min-content and stops the wordmark reflowing to two lines. */
    .brand-lockup__name { min-width: 0; }
    .brand-lockup__mark { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }

    /* Trim the two header controls just enough to clear a 320px viewport.
       44px is still the WCAG 2.1 AAA target size (SC 2.5.5) and comfortably
       above the 24px AA floor in 2.2 SC 2.5.8, so nothing becomes hard to hit. */
    .header-bar   { gap: var(--space-2); }
    .icon-button  { width: 44px; height: 44px; }
    .lang-toggle__item {
        min-width: 2.125rem;
        padding-inline: var(--space-2);
        font-size: 0.75rem;
    }
}

@media (min-width: 400px) {
    .brand-lockup__name {
        font-size: 1.25rem;
        white-space: nowrap;
    }
}
@media (min-width: 640px) {
    .brand-lockup__name { font-size: 1.4375rem; }
}
.brand-lockup__name em {
    font-style: normal;
    color: var(--color-brand);
}

/* The tagline is 28 characters. On a 390px phone it alone is wider than the
   space left after the mark, the language toggle and the menu button, which is
   what was forcing the horizontal overflow. The brand name carries the meaning
   on its own at that size. */
.brand-lockup__tag { display: none; }

@media (min-width: 560px) {
    .brand-lockup__tag {
        display: block;
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-top: 0.22em;
        white-space: nowrap;
    }
}

.primary-nav { display: none; }

/* 1200px, not 1024px. At 1024 the five nav items, the language toggle, the
   phone number and the CTA together measure wider than the container, so the
   CTA overflowed off the right edge of the page. */
@media (min-width: 1200px) {
    .primary-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        /* The nav is the one element allowed to absorb the leftover space, so
           the brand and the actions keep their natural widths and the nav
           centres in whatever is left. min-width:0 lets it shrink rather than
           push the actions off the edge. */
        flex: 1 1 auto;
        min-width: 0;
    }
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    /* Tighter horizontal padding between 1200 and 1400, where the nav is
       competing hardest for room; it relaxes at 1400 (see below). */
    padding: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease);
}
@media (min-width: 1400px) {
    .nav-link { padding: var(--space-2) var(--space-3); }
}

.nav-link:hover { color: var(--color-brand); background: var(--color-bg-muted); }
.nav-link[aria-current="page"],
.nav-link.is-active {
    color: var(--color-brand);
    font-weight: 600;
}

/* Dropdown: CSS-only on hover, JS-toggled on focus/keyboard. */
.nav-item { position: relative; }

.nav-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 17rem;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease),
                visibility var(--duration-fast);
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-menu li + li { margin-top: 0; }
.nav-menu a {
    display: block;
    padding: var(--space-3);
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.nav-menu a:hover { background: var(--color-surface-brand); color: var(--color-brand); }
.nav-menu a small { display: block; color: var(--color-text-muted); font-size: 0.8125rem; margin-top: 0.1rem; }

/* Does NOT shrink. Its children (the language toggle and the menu button) have
   fixed minimum sizes for touch-target reasons, so shrinking this box only made
   them spill out of it; the parent narrowed while the children kept their
   width. The brand lockup is the element that gives instead: its wordmark can
   reflow to two lines, so it can genuinely absorb the pressure. */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* The phone number is intentionally absent from the header: see the comment
   in app/Views/partials/header.php. It lives in the hero, the footer NAP, the
   mobile sticky bar and the schema.org markup instead. */

.header-cta { display: none; }
@media (min-width: 900px) {
    .header-cta {
        display: inline-flex;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-strong);
    cursor: pointer;
}
.icon-button:hover { background: var(--color-bg-muted); }

.nav-toggle { display: inline-flex; flex-shrink: 0; }
@media (min-width: 1200px) { .nav-toggle { display: none; } }

/* Compact EN | ES segmented toggle.
   Both languages are always visible, so a Spanish-speaking visitor can see that
   a Spanish version exists without having to read the English label that would
   otherwise be pointing at it. */
.lang-toggle {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-surface);
}

.lang-toggle__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 40px;
    padding-inline: var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}
.lang-toggle__item + .lang-toggle__item { border-left: 1px solid var(--color-border); }

a.lang-toggle__item:hover {
    background: var(--color-surface-brand);
    color: var(--color-brand);
}
a.lang-toggle__item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    border-radius: 0;
}

.lang-toggle__item.is-active {
    background: var(--color-brand);
    color: var(--color-on-brand);
    cursor: default;
}

/* Mobile drawer */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: none;
    background: var(--color-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__inner { padding: var(--space-4) var(--gutter) var(--space-10); }
.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem;
    margin-bottom: var(--space-4);
}
.mobile-nav__list { list-style: none; padding: 0; }
.mobile-nav__list li + li { margin-top: 0; border-top: 1px solid var(--color-border); }
.mobile-nav__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: var(--space-3) 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-text-strong);
    text-decoration: none;
}
.mobile-nav__list a:hover { color: var(--color-brand); }
.mobile-nav__sub { list-style: none; padding: 0 0 var(--space-3) var(--space-4); }
.mobile-nav__sub a { min-height: 48px; font-size: 0.9375rem; color: var(--color-text); font-weight: 400; }

/* --------------------------------------------------------------------------
   6. Announcement banner
   -------------------------------------------------------------------------- */
.announce {
    background: var(--green-800);
    color: #E9F0EC;
    font-size: var(--text-small);
    text-align: center;
    padding: var(--space-2) var(--gutter);
}
.announce a { color: #B6E5CC; font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--green-900);
    color: #E9F0EC;
    isolation: isolate;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
/* Two-stop scrim: keeps text at >7:1 over any photograph while leaving the
   right side of the image visible on wide screens. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(105deg,
            rgba(12, 46, 32, 0.96) 0%,
            rgba(12, 46, 32, 0.90) 42%,
            rgba(12, 46, 32, 0.62) 72%,
            rgba(12, 46, 32, 0.48) 100%);
}
.hero__inner {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
    max-width: 46rem;
}
.hero__inner > * + * { margin-top: var(--space-5); }

.hero h1 {
    font-size: var(--text-display);
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: #FFFFFF;
}
.hero__sub {
    font-size: var(--text-lead);
    line-height: 1.6;
    color: #D6E4DD;
    max-width: 38rem;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.hero__areas {
    font-size: var(--text-small);
    color: #B6C7BF;
    max-width: 42rem;
}
.hero__areas a { color: #B6E5CC; }

.hero--compact .hero__inner { padding-block: clamp(2.5rem, 1.5rem + 5vw, 4.5rem); }
.hero--compact h1 { font-size: var(--text-h1); }

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */
.trust-strip {
    background: var(--green-800);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-block: var(--space-4);
}
.trust-strip__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-6);
    list-style: none;
    padding: 0;
    margin: 0;
}
.trust-strip__list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-small);
    font-weight: 500;
    color: #D6E4DD;
}
.trust-strip__list .icon { color: var(--brass-300); flex-shrink: 0; }
.trust-strip__list a { color: #D6E4DD; text-decoration: underline; text-underline-offset: 0.2em; }
.trust-strip__list a:hover { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}
.card > * + * { margin-top: var(--space-3); }

.card--link:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.card--link:focus-within {
    border-color: var(--color-brand);
    box-shadow: var(--shadow);
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    background: var(--color-surface-brand);
    color: var(--color-brand);
    flex-shrink: 0;
}
.card__title {
    font-family: var(--font-sans);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
}
.card__title a {
    color: var(--color-heading);
    text-decoration: none;
}
.card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.card--link { position: relative; }
.card__body { color: var(--color-text-muted); font-size: 0.9375rem; }
.card__price {
    font-weight: 600;
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
}
.card__more {
    margin-top: auto;
    padding-top: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-brand);
}

.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__figure { margin: 0; }
.card--flush .card__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card--flush .card__content { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card--flush .card__content > * + * { margin-top: var(--space-3); }

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-small);
    color: var(--color-text-muted);
}
.card-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* --------------------------------------------------------------------------
   10. Steps ("how it works")
   -------------------------------------------------------------------------- */
.steps {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-6);
    counter-reset: step;
}
@media (min-width: 900px) {
    .steps--3 { grid-template-columns: repeat(3, 1fr); }
    .steps--4 { grid-template-columns: repeat(4, 1fr); }
}
.steps li {
    position: relative;
    margin: 0;
    padding-left: 3.75rem;
    counter-increment: step;
}
@media (min-width: 900px) {
    .steps li { padding-left: 0; padding-top: 4rem; }
}
.steps li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Connecting rule on desktop: decorative, so it is aria-hidden by omission. */
@media (min-width: 900px) {
    .steps li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.375rem;
        left: 3.25rem;
        right: -1.5rem;
        height: 1px;
        background: var(--color-border);
    }
}
.steps h3 { font-family: var(--font-sans); font-size: 1.125rem; margin-bottom: var(--space-2); }
.steps p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form { max-width: 42rem; }
.form > * + * { margin-top: var(--space-5); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-strong);
    line-height: 1.35;
}
.field__label .req {
    color: var(--error);
    margin-left: 0.15em;
}
.field__hint {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    line-height: 1.45;
}

.input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 1; }

.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }

.input:focus, .select:focus, .textarea:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.textarea { min-height: 8rem; resize: vertical; }

.select {
    appearance: none;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378857E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 1.15rem;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--error);
    background: var(--error-tint);
}

/* Errors sit directly below the field, never in a top banner, and they state
   the requirement rather than the violation (WCAG SC 3.3.3). */
.field__error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--error);
    line-height: 1.45;
}
.field__error .icon { flex-shrink: 0; margin-top: 0.1em; width: 16px; height: 16px; }

.checkbox, .radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-2) 0;
    cursor: pointer;
}
.checkbox input, .radio input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.22rem;
    accent-color: var(--color-brand);
    flex-shrink: 0;
    cursor: pointer;
}
.checkbox span, .radio span { font-size: 0.9375rem; line-height: 1.5; }

.choice-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-4);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease);
}
.choice:hover { border-color: var(--color-brand); background: var(--color-surface-brand); }
.choice:has(input:checked) {
    border-color: var(--color-brand);
    background: var(--color-surface-brand);
    box-shadow: inset 0 0 0 1px var(--color-brand);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice input { margin-top: 0.15rem; accent-color: var(--color-brand); flex-shrink: 0; }
.choice__text { display: flex; flex-direction: column; gap: 0.15rem; }
.choice__title { font-weight: 600; font-size: 0.9375rem; color: var(--color-text-strong); }
.choice__note  { font-size: var(--text-small); color: var(--color-text-muted); line-height: 1.45; }

.fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
.fieldset > legend {
    padding: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-strong);
    margin-bottom: var(--space-2);
}

.form-section {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.form-section:first-child { padding-top: 0; border-top: 0; }
.form-section > * + * { margin-top: var(--space-5); }

.form-row {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 640px) {
    .form-row--2 { grid-template-columns: 1fr 1fr; }

    /* Side-by-side fields share one set of rows (label, control, hint, error)
       through subgrid, so the two boxes line up even when only one field has
       a hint or its label wraps to two lines. Every paired field keeps that
       order in the markup: label, control, then hint and error below. */
    @supports (grid-template-rows: subgrid) {
        .form-row--2 { row-gap: var(--space-5); }
        .form-row--2 > .field {
            display: grid;
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: var(--space-2);
            align-content: start;
        }
        .form-row--2 > .field > .field__label { align-self: end; }
    }
}

/* A legend normally sits on top of the fieldset border. Floated to full width
   it lays out like any other heading, so section rules and spacing line up. */
.fieldset > legend { float: left; width: 100%; }
.fieldset > legend + * { clear: both; }

/* Number box with minus and plus buttons: nothing to type, nothing to mistype. */
.stepper { display: flex; align-items: stretch; gap: var(--space-2); }
.stepper__input { text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__btn {
    flex: 0 0 48px;
    min-height: 48px;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-brand);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius);
    cursor: pointer;
}
.stepper__btn:hover { border-color: var(--color-brand); background: var(--color-surface-brand); }
.stepper__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Honeypot: hidden from sighted users AND from screen readers, because a real
   person should never be offered this field at all. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. Alerts & badges
   -------------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    border-left: 4px solid;
    font-size: 0.9375rem;
    line-height: 1.55;
}
.alert .icon { flex-shrink: 0; margin-top: 0.1em; }
.alert strong { display: block; margin-bottom: 0.15rem; }
.alert--success { background: var(--success-tint); border-color: var(--success); color: var(--color-text); }
.alert--success .icon { color: var(--success); }
.alert--warning { background: var(--warning-tint); border-color: var(--warning); color: var(--color-text); }
.alert--warning .icon { color: var(--warning); }
.alert--error   { background: var(--error-tint);   border-color: var(--error);   color: var(--color-text); }
.alert--error .icon { color: var(--error); }
.alert--info    { background: var(--info-tint);    border-color: var(--info);    color: var(--color-text); }
.alert--info .icon { color: var(--info); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    color: var(--color-text-strong);
    /* Deliberately NOT nowrap. Most badges are one or two words and will never
       wrap anyway, but the pricing badges carry a whole sentence, and the
       Spanish rendering ("Nuestra tarifa, no es una tarifa fijada por el
       Estado") is 336px, which pushed the page past a 320px viewport. */
    max-width: 100%;
    text-wrap: pretty;
}
.badge--brand   { background: var(--color-surface-brand); color: var(--color-brand); }
.badge--success { background: var(--success-tint); color: var(--success); }
.badge--warning { background: var(--warning-tint); color: var(--warning); }
.badge--error   { background: var(--error-tint);   color: var(--error); }
.badge--info    { background: var(--info-tint);    color: var(--info); }
.badge--accent  { background: #FBF3E2; color: var(--brass-700); }
.badge .icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   13. Prose (article bodies, legal pages)
   -------------------------------------------------------------------------- */
.prose {
    max-width: var(--measure);
    font-size: var(--text-lead);
    line-height: 1.7;
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-9); font-size: var(--text-h3); }
.prose h3 { margin-top: var(--space-7); font-size: var(--text-h4); font-family: var(--font-sans); }
.prose h4 { margin-top: var(--space-6); font-size: 1.125rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-6); }
.prose figure { margin-block: var(--space-6); }
.prose figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-small);
    color: var(--color-text-muted);
    text-align: center;
}
/* Wrapped by site.js into a focusable scroll region. The CSS here has to work
   BOTH before that script runs and if it never runs at all, so the table itself
   carries the wrapping rules rather than relying on the wrapper. */
.table-scroll-region {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: var(--space-6);
    max-width: 100%;
}
.table-scroll-region:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.table-scroll-region > table { margin-block: 0; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin-block: var(--space-6);
    /* Long unbroken strings (statute references, URLs) must not set an
       un-shrinkable minimum width for the whole page. */
    overflow-wrap: break-word;
}
.prose th, .prose td { overflow-wrap: break-word; }

@media (max-width: 560px) {
    .prose table { font-size: 0.875rem; }
    .prose th, .prose td { padding: var(--space-2) var(--space-3); }
}
.prose th, .prose td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.prose th {
    font-weight: 600;
    color: var(--color-text-strong);
    background: var(--color-bg-muted);
}
.prose blockquote { margin-block: var(--space-6); }

/* A callout used inside articles for statutory citations. */
.prose .callout,
.callout {
    padding: var(--space-5);
    background: var(--color-surface-brand);
    border-left: 4px solid var(--color-brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1rem;
    line-height: 1.6;
}
.callout > * + * { margin-top: var(--space-3); }
.callout__label {
    display: block;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: var(--space-2);
}
.callout--warning { background: var(--warning-tint); border-color: var(--warning); }
.callout--warning .callout__label { color: var(--warning); }

/* --------------------------------------------------------------------------
   14. Tables (fee schedule, service areas)
   -------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}
.table th, .table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.table thead th {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-bg-alt); }
.table td.num, .table th.num { text-align: right; }

/* --------------------------------------------------------------------------
   15. FAQ / accordion
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--color-border); }
.faq details {
    border-bottom: 1px solid var(--color-border);
}
.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 56px;
    padding: var(--space-4) 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-strong);
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-brand); }
.faq summary .icon {
    flex-shrink: 0;
    margin-top: 0.1em;
    color: var(--color-brand);
    transition: transform var(--duration) var(--ease);
}
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq__answer {
    padding-bottom: var(--space-5);
    max-width: var(--measure);
    color: var(--color-text);
}
.faq__answer > * + * { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   16. Sticky mobile CTA
   Thin bar (~10-15% of viewport), never a content-blocking overlay. Google
   demotes intrusive interstitials but permits a reasonable, dismissible banner.
   -------------------------------------------------------------------------- */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 18px rgba(12, 46, 32, 0.1);
    transform: translateY(110%);
    transition: transform var(--duration) var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn {
    min-height: 52px;
    /* A grid column is a fixed track; without min-width:0 the button refuses to
       shrink below its label and overflows the bar. */
    min-width: 0;
    padding-inline: var(--space-3);
}
.sticky-cta .btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 1200px) { .sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   17. Breadcrumbs & pagination
   -------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    padding-block: var(--space-4);
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
}
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--color-border-strong); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-brand); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text-strong); font-weight: 500; }

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding-inline: var(--space-3);
    font-size: 0.9375rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.pagination a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pagination [aria-current="page"] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--green-900);
    color: #C6D6CE;
    padding-block: var(--space-9) var(--space-6);
    font-size: 0.9375rem;
}
.site-footer h2, .site-footer h3 { color: #FFFFFF; }
.site-footer a { color: #C6D6CE; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.footer-grid {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.footer-col > * + * { margin-top: var(--space-3); }
.footer-col h3 {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-300);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li + li { margin-top: var(--space-2); }
.footer-col a { display: inline-block; min-height: 32px; line-height: 2; }

.footer-nap address {
    font-style: normal;
    line-height: 1.7;
}
.footer-nap .brand-lockup__mark { color: #8AD3AF; }
.footer-nap .brand-lockup__name { color: #FFFFFF; }
.footer-nap .brand-lockup__name em { color: #8AD3AF; }
.footer-nap .brand-lockup__tag  { color: #8FA79C; }

.footer-credential {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: var(--text-small);
    line-height: 1.5;
}
.footer-credential .icon { color: var(--brass-300); flex-shrink: 0; margin-top: 0.15em; width: 16px; height: 16px; }

.footer-bottom {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-small);
    color: #9FB3A9;
}
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
}
.footer-legal-links li { margin: 0; }

/* The Texas Government Code § 406.017 notice. Required in conspicuous
   lettering on any advertising in a language other than English, alongside the
   fee schedule. Rendered site-wide so no page can ship without it. */
.legal-notice {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: 1.6;
    color: #DCE8E2;
}
.legal-notice > * + * { margin-top: var(--space-3); }
.legal-notice strong {
    display: block;
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.01em;
    /* "Conspicuous lettering": set larger than surrounding footer text. */
    font-size: 1rem;
}
.legal-notice [lang="es"] { color: #DCE8E2; }
.legal-notice a { color: #B6E5CC; text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 32px; height: 32px; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.flow > * + * { margin-top: var(--space-4); }

.split {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}
@media (min-width: 900px) {
    .split { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
    .split--media-first > :first-child { order: 1; }
}
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.cta-panel {
    padding: clamp(2rem, 1rem + 4vw, 3.5rem);
    background: var(--green-800);
    color: #E9F0EC;
    border-radius: var(--radius-lg);
    text-align: center;
}
.cta-panel > * + * { margin-top: var(--space-4); }
.cta-panel h2 { color: #FFFFFF; }
.cta-panel p { color: #C6D6CE; max-width: 44rem; margin-inline: auto; }
.cta-panel .cluster { justify-content: center; }

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
}
.chip-list li { margin: 0; }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    text-decoration: none;
}
.chip:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-surface-brand);
}
.chip[aria-current="page"], .chip.is-active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
    font-weight: 600;
}

/* Print: strip chrome, keep the content and the compliance notice. */
/* ==========================================================================
   Pricing: typical-total cards, plain-language fee table, calculator
   ========================================================================== */
.price-card { display: flex; flex-direction: column; }
.price-card__label {
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.price-card__amount {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-strong);
}

.fee-table__name { font-weight: 400; }
.fee-table__plain {
    display: block;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--color-text-strong);
}
.fee-table__explain { display: block; margin-top: 0.2rem; }
.fee-table__legal {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--text-small);
    color: var(--color-text-muted);
}
.fee-table__amount { font-size: 1.125rem; }

.fee-calc { padding: var(--space-6); }
.fee-calc__title { margin: 0; }
.fee-calc__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    margin-top: var(--space-5);
    align-items: start;
}
.fee-calc__inputs > * + * { margin-top: var(--space-5); }
.fee-calc__result {
    position: sticky;
    top: 6rem; /* clears the sticky header */
    padding: var(--space-5);
    border: 1.5px solid var(--color-brand);
    border-radius: var(--radius);
    background: var(--color-surface-brand);
}
.fee-calc__result > * + * { margin-top: var(--space-4); }
.fee-calc__result-label {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--color-text-strong);
}
.fee-calc__table th { font-weight: 500; }
.fee-calc__tag { color: var(--color-text-muted); font-weight: 400; }
.fee-calc__tag--state { color: var(--color-brand); }
.fee-calc__total th,
.fee-calc__total td {
    font-weight: 700;
    font-size: 1.125rem;
    border-top: 2px solid var(--color-text-strong);
}
.fee-calc__note { font-size: var(--text-small); color: var(--color-text-muted); }
.fee-calc__split th, .fee-calc__split td { font-size: var(--text-small); color: var(--color-text-strong); }
.fee-calc__note--strong { color: var(--color-text-strong); font-weight: 600; }
.fee-calc__group-label { margin-bottom: var(--space-3); font-size: 1.0625rem; }
.fee-calc .fieldset > .checkbox { min-height: 44px; }
.fee-calc__quote { width: 100%; font-family: var(--font-mono); font-size: var(--text-small); }

/* ==========================================================================
   "Before you book" panel: the important rules, impossible to miss
   ========================================================================== */
.prepare {
    padding: var(--space-6);
    border: 2px solid var(--warning);
    border-left-width: 8px;
    border-radius: var(--radius);
    background: var(--warning-tint);
}
.prepare__heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-h4, 1.375rem);
    color: var(--color-text-strong);
}
.prepare__heading .icon { color: var(--warning); flex-shrink: 0; }
.prepare__list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}
.prepare__item {
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-border-strong);
}
.prepare__item strong {
    display: block;
    font-size: 1.0625rem;
    color: var(--color-text-strong);
}
.prepare__item--strong { border-left-color: var(--warning); }
.prepare__item--strong strong { font-size: 1.1875rem; }

/* "What a Texas notary cannot do" cards. The first one, about not drafting
   or filling in documents, is the one people most often get wrong. */
.limits__lead { grid-column: 1 / -1; border-left: 6px solid var(--warning); }
.limits__lead .card__title { font-size: 1.25rem; }

/* "What we do NOT do" headings in service bodies: the NOT is emphasised. */
.prose h2 strong { color: var(--warning); }

@media print {
    .site-header, .sticky-cta, .mobile-nav, .announce,
    .hero__media, .hero__scrim, .btn, .pagination { display: none !important; }
    body { background: #FFFFFF; color: #000000; font-size: 11pt; }
    .hero, .section--dark, .site-footer { background: #FFFFFF !important; color: #000000 !important; }
    .hero h1, .site-footer h3 { color: #000000 !important; }
    .legal-notice { border: 1px solid #000000; color: #000000; background: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* On a phone the estimate table needs its width more than its padding. */
@media (max-width: 480px) {
    .fee-calc { padding: var(--space-4); }
    .fee-calc__result { padding: var(--space-3); }
    .fee-calc__table th, .fee-calc__table td { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* Reference number on the thank-you page: easy to read aloud on the phone. */
.reference { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.reference__label { font-weight: 600; }
.reference__code { font-family: var(--font-mono); font-size: 1.125rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.fieldset.reach > * + * { margin-top: var(--space-3); }

/* A button whose label is an email address may break inside the address on a
   narrow phone rather than push the page sideways. */
.btn--wrap { white-space: normal; overflow-wrap: anywhere; text-align: left; max-width: 100%; }