@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700;800&family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   המרכז לשירותי הובלות ארצי — "The Independent Route Desk"
   Chart paper · lifted paper cards · one burnt-orange route line.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Semantic colour tokens */
    --color-primary:     #173453;
    --color-on-primary:  #FBF8F3;
    --color-secondary:   #0E7490;
    --color-accent:      #C2410C;
    --color-background:  #EDE7DD;
    --color-foreground:  #101F33;
    --color-muted:       #E2DACD;
    --color-border:      #D6CCBB;
    --color-destructive: #B91C1C;
    --color-ring:        #C2410C;

    /* Motif-required additions */
    --color-surface:          #FBF8F3;   /* card paper — lighter than bg */
    --color-muted-foreground: #4A5A6E;   /* secondary text — 5.3:1 on sand */
    --color-accent-ink:       #9A3412;   /* accent text at body size — 5.95:1 */
    --color-secondary-ink:    #0A5A6E;   /* link text — 6.33:1 */

    /* Derived — states & the single gradient's cool stop */
    --color-band-teal:        #DBE5E7;
    --color-primary-hover:    #1E4269;
    --color-accent-hover:     #A93809;
    --color-secondary-hover:  #0A5A6E;
    --color-border-strong:    #C4B7A2;
    --color-on-primary-muted: rgba(251, 248, 243, .78);  /* 7.9:1 on navy */
    --color-on-primary-line:  rgba(251, 248, 243, .18);
    --color-on-primary-track: rgba(251, 248, 243, .35);
    --color-on-primary-wash:  rgba(251, 248, 243, .10);

    /* Composites */
    --glass-fill:       rgba(251, 248, 243, .72);
    --glass-border:     rgba(251, 248, 243, .55);
    --scrim-navy:       linear-gradient(rgba(16, 31, 51, .55), rgba(16, 31, 51, .25));
    --ring-glow:        rgba(194, 65, 12, .18);
    --destructive-glow: rgba(185, 28, 28, .15);
    --shine-band:       linear-gradient(100deg, transparent 0, rgba(255, 255, 255, .5) 44%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .5) 56%, transparent 100%);

    /* THE single gradient language: sand → faint teal, always grained. */
    --gradient-band: linear-gradient(165deg, var(--color-background) 0%, var(--color-muted) 42%, var(--color-band-teal) 100%);
    --grain-tile: 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='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Type */
    --font-display: 'Frank Ruhl Libre', 'David Libre', 'Times New Roman', Georgia, serif;
    --font-body: 'IBM Plex Sans Hebrew', 'Segoe UI', system-ui, -apple-system, 'Arial Hebrew', Arial, sans-serif;
    --measure: 68ch;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radius — 8 controls · 12 cards & images · 16 hero/glass panels */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Depth — navy-tinted, never pure black */
    --shadow-sm: 0 1px 2px rgba(16, 31, 51, .06);
    --shadow-md: 0 4px 12px rgba(16, 31, 51, .08), 0 1px 3px rgba(16, 31, 51, .06);
    --shadow-lg: 0 12px 32px rgba(16, 31, 51, .12);

    /* Motion — Standard tier */
    --ease-entrance: cubic-bezier(.215, .61, .355, 1);  /* ≈ power2.out */
    --ease-hover: cubic-bezier(.45, 0, .55, 1);         /* ≈ power1.inOut */
    --dur-entrance: 380ms;
    --dur-hover: 200ms;

    --container: 1140px;
    --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;              /* safety net, not a layout fix */
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 1.0625rem;            /* 17px base */
    font-weight: 400;
    line-height: 1.75;               /* Hebrew needs generous leading */
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; border-radius: var(--radius-md); }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--color-foreground);
    text-wrap: balance;
}

h1 { font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.15; }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.25; }
h3 { font-weight: 700; font-size: 1.375rem; line-height: 1.35; }
h4 { font-weight: 700; font-size: 1.125rem; line-height: 1.4; }

p { margin: 0; }
p + p { margin-block-start: var(--space-4); }

ul, ol { margin: 0; padding: 0; }

a {
    color: var(--color-secondary-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur-hover) var(--ease-hover);
}
a:hover { color: var(--color-accent-ink); }

:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent); color: var(--color-on-primary); }

[hidden] { display: none !important; }

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

/* The skip link is the one .visually-hidden element that must surface: on
   keyboard focus it has to become a real, visible control. Status regions
   (<p class="visually-hidden" role="status">) are not focusable, so scoping
   to anchors keeps them silent. */
a.visually-hidden:focus {
    position: fixed;
    top: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: 70;
    width: auto; height: auto;
    margin: 0;
    padding: 12px 18px;
    overflow: visible;
    clip: auto;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.section { padding-block: var(--space-9); }
.section--seam { border-top: 1px solid var(--color-border); }
.section--tight { padding-block: var(--space-8); }

.section__head { max-width: var(--measure); margin-block-end: var(--space-7); }
.section__head > h2 { margin-block-start: var(--space-3); }
.section__head > .lead { margin-block-start: var(--space-4); }

main:focus { outline: none; }

[id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

/* --------------------------------------------------------------------------
   4. TYPE HELPERS
   -------------------------------------------------------------------------- */
.lead {
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
    max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose h2 { margin-block: var(--space-7) var(--space-4); }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { margin-block: var(--space-6) var(--space-3); }
.prose p + p { margin-block-start: var(--space-4); }
.prose ul { margin-block: var(--space-4); padding-inline-start: var(--space-5); }
.prose li { margin-block-end: var(--space-2); }
.prose li::marker { color: var(--color-accent); }

.muted { color: var(--color-muted-foreground); }

/* Eyebrow — ruled by the route line (::before renders at the RTL start) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .06em;
    color: var(--color-accent-ink);
}
.eyebrow::before {
    content: "";
    flex: none;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
}

/* --------------------------------------------------------------------------
   5. THE ROUTE LINE — the brand's one gesture
   -------------------------------------------------------------------------- */
.route-mark {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.route-mark__line {
    position: absolute;
    inset-inline: -.05em;
    bottom: -.22em;
    width: calc(100% + .1em);
    height: .3em;
    overflow: visible;
    pointer-events: none;
    color: var(--color-accent);
}

/* Drawn right→left (reading direction) on hero load only. */
.hero .route-mark__line {
    transform-origin: right center;
    animation: route-draw 720ms var(--ease-entrance) 320ms both;
}
@keyframes route-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    transition: background-color var(--dur-hover) var(--ease-hover),
                border-color var(--dur-hover) var(--ease-hover),
                color var(--dur-hover) var(--ease-hover),
                transform var(--dur-hover) var(--ease-hover),
                box-shadow var(--dur-hover) var(--ease-hover);
}
.btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
.btn__icon { flex: none; width: 18px; height: 18px; }

/* CTA — orange fill, the one that carries the shine sweep */
.btn--cta { background: var(--color-accent); color: var(--color-on-primary); }
.btn--cta:hover { background: var(--color-accent-hover); color: var(--color-on-primary); }

/* Tertiary — ghost, 1px border */
.btn--ghost {
    background: transparent;
    color: var(--color-foreground);
    border-color: var(--color-border-strong);
}
.btn--ghost:hover { background: var(--color-muted); color: var(--color-foreground); border-color: var(--color-foreground); box-shadow: var(--shadow-md); }

/* Ghost on a dark surface */
.btn--ghost-light { background: transparent; color: var(--color-on-primary); border-color: var(--color-on-primary-line); }
.btn--ghost-light:hover { background: var(--color-on-primary-wash); color: var(--color-on-primary); border-color: var(--color-on-primary-muted); }

.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .62; pointer-events: none; }

/* --- Button Shine Sweep — hover only. Idle shine reads as hard-sell. --- */
.btn--cta::after,
.btn--primary-sheen::after {
    content: "";
    position: absolute;
    inset-block: -25%;
    inset-inline-start: 0;
    width: 55%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    background: var(--shine-band);
    transform: translateX(-200%) skewX(-22deg);
}
.btn--cta:hover::after,
.btn--primary-sheen:hover::after {
    animation: shine-sweep 900ms cubic-bezier(.25, .6, .3, 1);
}
@keyframes shine-sweep {
    to { transform: translateX(320%) skewX(-22deg); }
}

/* --------------------------------------------------------------------------
   7. CARDS & GRAIN
   -------------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

.grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: var(--grain-tile);
    background-size: 180px 180px;
}

/* --------------------------------------------------------------------------
   8. HEADER — Frosted Glass (narrowed to the header alone)
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);           /* opaque fallback */
    border-block-end: 1px solid var(--color-border);
    transition: box-shadow var(--dur-hover) var(--ease-hover);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
        background: var(--glass-fill);
        border-block-end-color: var(--glass-border);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
                backdrop-filter: blur(14px) saturate(1.1);
    }
}
.site-header.is-scrolled { box-shadow: var(--shadow-lg); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-h);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-end: auto;
    color: var(--color-foreground);
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-hover);
}
.wordmark:hover { color: var(--color-accent-ink); }
.wordmark__mark { flex: none; width: 26px; height: 26px; color: var(--color-accent); }
.wordmark__text { display: flex; flex-direction: column; line-height: 1.15; }
.wordmark__text b { font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; }
.wordmark__text i {
    font-style: normal;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--color-muted-foreground);
}

.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav__list { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.site-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-foreground);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.site-nav__list a:hover { background: var(--color-muted); color: var(--color-accent-ink); }
.site-nav__list a[aria-current="page"] { color: var(--color-accent-ink); font-weight: 600; }

.site-nav__cta { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover);
}
.nav-toggle:hover { background: var(--color-muted); border-color: var(--color-foreground); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --------------------------------------------------------------------------
   9. HERO — parallax photo + navy scrim + grain + RTL reveal mask
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    min-height: 620px;
    padding-block: var(--space-9);
    color: var(--color-on-primary);
}
.hero--compact { min-height: 460px; padding-block: var(--space-8); }

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-attachment: fixed;    /* parallax */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero--home   .hero__media { background-image: url('_uploads/ai_ffc93a829499a05d.jpg'); }
.hero--about  .hero__media { background-image: url('_uploads/ai_41d5c04e09071b34.jpg'); }
.hero--quote  .hero__media { background-image: url('_uploads/ai_cdca144aaa8e54b4.jpg'); }
.hero--funnel .hero__media { background-image: url('_uploads/ai_3a2a6b4d79583a23.jpg'); }

.hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim-navy); }
.hero__grain { z-index: 2; opacity: .32; mix-blend-mode: overlay; }

/* Image Reveal Mask — navy curtain exits LEFT, so the photo is unveiled
   right→left (Hebrew reading direction). Its leading edge IS the route line.
   Base state is REVEALED: if the animation never runs, the photo is simply there. */
.hero__curtain {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: var(--color-primary);
    transform: translateX(-101%);
    animation: hero-unveil 1s cubic-bezier(.76, 0, .24, 1) 120ms both;
}
.hero__curtain::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 2px;
    background: var(--color-accent);
}
@keyframes hero-unveil {
    from { transform: translateX(0); }
    to   { transform: translateX(-101%); }
}

.hero__inner { position: relative; z-index: 4; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.hero h1 { color: var(--color-on-primary); }
.hero .eyebrow { color: var(--color-on-primary-muted); }
.hero__lead {
    max-width: 54ch;
    margin-block-start: var(--space-5);
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-on-primary-muted);
}
.hero__copy > h1 { margin-block-start: var(--space-4); }

/* Glassmorphism — hero consult card ONLY. Never entrance-animated: it holds
   the primary CTA and must be readable from first paint. */
.consult-card {
    padding: var(--space-6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);          /* opaque fallback */
    box-shadow: var(--shadow-lg);
    color: var(--color-foreground);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .consult-card {
        background: var(--glass-fill);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
                backdrop-filter: blur(14px) saturate(1.1);
    }
}
.consult-card h2 { font-size: 1.5rem; }
.consult-card p { margin-block: var(--space-3) var(--space-5); color: var(--color-muted-foreground); font-size: 1rem; }
.consult-card__actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   10. PAGE HEAD — grainy gradient band (no photo)
   -------------------------------------------------------------------------- */
.page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-8);
    background: var(--gradient-band);
    border-block-end: 1px solid var(--color-border);
}
.page-head__grain { opacity: .16; mix-blend-mode: multiply; }
.page-head__inner { position: relative; z-index: 3; }
.page-head h1 { margin-block-start: var(--space-4); }
.page-head .lead { margin-block-start: var(--space-4); }

/* --------------------------------------------------------------------------
   11. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.trust-item__icon {
    width: 30px; height: 30px;
    margin-block-end: var(--space-3);
    color: var(--color-accent);
}
.trust-item h3 { font-size: 1.1875rem; }
.trust-item p { margin-block-start: var(--space-2); color: var(--color-muted-foreground); font-size: .9375rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   12. BENTO GRIDS
   -------------------------------------------------------------------------- */
.bento {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(4, 1fr);
}

/* Move-type spine — apartment anchors 2x2; the intercity route is the widest
   card in the box, because it is the longest journey. */
.bento--types {
    grid-template-rows: minmax(180px, auto) minmax(180px, auto) minmax(148px, auto);
    grid-template-areas:
        "apt apt   office  comm"
        "apt apt   storage heavy"
        "inter inter inter inter";
}
.bento__apt     { grid-area: apt; }
.bento__office  { grid-area: office; }
.bento__comm    { grid-area: comm; }
.bento__storage { grid-area: storage; }
.bento__heavy   { grid-area: heavy; }
.bento__inter   { grid-area: inter; }

/* Guides — the pricing guide anchors 2x2 */
.bento--guides {
    grid-template-rows: repeat(2, minmax(186px, auto));
    grid-template-areas:
        "price price vet  ins"
        "price price pack time";
}
.bento__price { grid-area: price; }
.bento__vet   { grid-area: vet; }
.bento__ins   { grid-area: ins; }
.bento__pack  { grid-area: pack; }
.bento__time  { grid-area: time; }

.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--color-foreground);
    text-decoration: none;
    transition: transform var(--dur-hover) var(--ease-hover),
                box-shadow var(--dur-hover) var(--ease-hover),
                border-color var(--dur-hover) var(--ease-hover);
}
a.bento-card { cursor: pointer; }
a.bento-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-strong);
    color: var(--color-foreground);
}
.bento-card__icon { flex: none; width: 28px; height: 28px; color: var(--color-accent); }
.bento-card h3 { font-size: 1.25rem; }
.bento-card p { color: var(--color-muted-foreground); font-size: .9375rem; line-height: 1.65; }
.bento-card__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    color: var(--color-accent-ink);
    font-size: .875rem;
    font-weight: 600;
}
.bento-card__go svg { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease-hover); }
a.bento-card:hover .bento-card__go svg { transform: translateX(-4px); }  /* RTL: forward = left */

/* The 2x2 anchors read first — larger type, no extra styling needed */
.bento-card--anchor { justify-content: space-between; }
.bento-card--anchor h3 { font-size: 1.625rem; }
.bento-card--anchor p { font-size: 1rem; }
.bento-card--anchor .bento-card__icon { width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   13. STEPS — connected by the route line
   -------------------------------------------------------------------------- */
.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.steps__route {
    position: absolute;
    top: 8px;
    inset-inline: 14%;
    width: 72%;
    height: 32px;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
    color: var(--color-accent);
    opacity: .55;
}
.step { position: relative; z-index: 1; text-align: center; }
.step__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-block-end: var(--space-4);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-pill);
    background: var(--color-background);
    color: var(--color-accent-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1;
}
.step h3 { font-size: 1.1875rem; }
.step p { margin-block-start: var(--space-3); color: var(--color-muted-foreground); font-size: .9375rem; line-height: 1.65; }

/* On the navy band */
.band--navy .step__badge { background: var(--color-primary); border-color: var(--color-accent); color: var(--color-on-primary); }
.band--navy .step h3 { color: var(--color-on-primary); }
.band--navy .step p { color: var(--color-on-primary-muted); }

/* --------------------------------------------------------------------------
   14. NAVY BAND — the independence narrative
   -------------------------------------------------------------------------- */
.band--navy {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.band--navy h2, .band--navy h3 { color: var(--color-on-primary); }
.band--navy p { color: var(--color-on-primary-muted); }
.band--navy .eyebrow { color: var(--color-on-primary-muted); }
.band--navy .lead { color: var(--color-on-primary-muted); }
.band--navy a:not(.btn) { color: var(--color-on-primary); }

.band__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-8); align-items: start; }
.band__points { display: grid; gap: var(--space-4); list-style: none; }
.band__points li { display: flex; gap: var(--space-3); align-items: flex-start; }
.band__points svg { flex: none; width: 20px; height: 20px; margin-block-start: 5px; color: var(--color-accent); }

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band__inner { max-width: 640px; margin-inline: auto; }
.cta-band p:not(.eyebrow) { margin-block: var(--space-4) var(--space-6); color: var(--color-muted-foreground); font-size: 1.125rem; }
.cta-band .eyebrow { justify-content: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.band--navy.cta-band p { color: var(--color-on-primary-muted); }

/* --------------------------------------------------------------------------
   16. FAQ — accordion, chips
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-hover),
                color var(--dur-hover) var(--ease-hover),
                border-color var(--dur-hover) var(--ease-hover);
}
.chip:hover { background: var(--color-muted); border-color: var(--color-foreground); }
.chip[aria-pressed="true"] {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-primary);
    font-weight: 600;
}

.faq-group { margin-block-start: var(--space-7); }
.faq-group > h2 { font-size: 1.5rem; margin-block-end: var(--space-4); }
.faq-list { border-block-start: 1px solid var(--color-border); }

.faq-item { border-block-end: 1px solid var(--color-border); }
.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding-block: var(--space-4);
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--color-foreground);
    transition: color var(--dur-hover) var(--ease-hover);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--color-accent-ink); }
.faq-item__chev {
    flex: none;
    width: 20px; height: 20px;
    color: var(--color-accent);
    transition: transform var(--dur-hover) var(--ease-hover);
}
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item__body {
    max-width: var(--measure);
    padding-block-end: var(--space-5);
    color: var(--color-muted-foreground);
}

/* --------------------------------------------------------------------------
   17. TWO-COLUMN CONTRAST (about: do / don't)
   -------------------------------------------------------------------------- */
.contrast { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.contrast__col { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.contrast__col--do { border-block-start: 3px solid var(--color-secondary); }
.contrast__col--dont { border-block-start: 3px solid var(--color-accent); }
.contrast__col h3 { font-size: 1.25rem; margin-block-end: var(--space-4); }
.contrast__list { display: grid; gap: var(--space-3); list-style: none; }
.contrast__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: .9375rem; line-height: 1.65; }
.contrast__list svg { flex: none; width: 19px; height: 19px; margin-block-start: 5px; }
.contrast__col--do svg { color: var(--color-secondary); }
.contrast__col--dont svg { color: var(--color-accent); }

/* Coverage note — the second accent carries reach */
.note-teal {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-secondary);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.note-teal h2, .note-teal h3 { display: flex; align-items: center; gap: var(--space-3); font-size: 1.1875rem; }
.note-teal h2 svg, .note-teal h3 svg { flex: none; width: 22px; height: 22px; color: var(--color-secondary); }
.note-teal p { margin-block-start: var(--space-3); color: var(--color-muted-foreground); max-width: var(--measure); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

.principle__icon { width: 28px; height: 28px; margin-block-end: var(--space-3); color: var(--color-accent); }
.principle h3 { font-size: 1.1875rem; }
.principle p { margin-block-start: var(--space-2); color: var(--color-muted-foreground); font-size: .9375rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   18. FORMS — Micro-Interactions live here
   -------------------------------------------------------------------------- */
.form-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.field { display: block; margin-block-end: var(--space-5); border: 0; padding: 0; min-width: 0; }
.field__label {
    display: block;
    padding: 0;                 /* also serves <legend> inside fieldset.field */
    margin-block-end: var(--space-2);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-foreground);
}
.field__label .req { color: var(--color-accent-ink); }
.field__hint {
    display: block;
    margin-block-end: var(--space-3);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--color-muted-foreground);
}
.field__error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--color-destructive);
}
.field__error svg { flex: none; width: 15px; height: 15px; }

.input, .select, .textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 180ms var(--ease-hover), box-shadow 180ms var(--ease-hover), background-color 180ms var(--ease-hover);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.65; }
/* Opacity stays 1: --color-muted-foreground is picked for 5.7:1 on the input
   fill, and any fade drops it under AA (Firefox's ::placeholder default is .54). */
.input::placeholder, .textarea::placeholder { color: var(--color-muted-foreground); opacity: 1; }

.input:hover, .select:hover, .textarea:hover { border-color: var(--color-foreground); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--ring-glow);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--color-destructive); }
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus { box-shadow: 0 0 0 3px var(--destructive-glow); }

/* Latin/numeric content stays LTR inside the RTL run, right-aligned to the form */
.input--ltr { direction: ltr; text-align: right; }

.select {
    appearance: none;
    padding-inline-end: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 18px;
}

.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

/* Radio cards — tappable, scannable move-type picker */
.radio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.radio-card { position: relative; display: block; cursor: pointer; }
.radio-card input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; margin: 0;         /* stays focusable — never display:none */
}
.radio-card__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 92px;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-background);
    text-align: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    transition: border-color 180ms var(--ease-hover), background-color 180ms var(--ease-hover),
                box-shadow 180ms var(--ease-hover), color 180ms var(--ease-hover);
}
.radio-card__face svg { width: 22px; height: 22px; color: var(--color-muted-foreground); transition: color 180ms var(--ease-hover); }
.radio-card:hover .radio-card__face { border-color: var(--color-foreground); background: var(--color-surface); }
.radio-card input:checked ~ .radio-card__face {
    border-color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: 0 0 0 2px var(--ring-glow);
    font-weight: 600;
}
.radio-card input:checked ~ .radio-card__face svg { color: var(--color-accent); }
.radio-card input:focus-visible ~ .radio-card__face { outline: 2px solid var(--color-ring); outline-offset: 2px; }
fieldset.is-invalid .radio-card__face { border-color: var(--color-destructive); }

/* Consent checkbox — the tick draws itself (stroke-dashoffset) */
.check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.check input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; margin: 0;
}
.check__box {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    margin-block-start: 3px;
    border: 2px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-background);
    transition: background-color 220ms var(--ease-hover), border-color 220ms var(--ease-hover);
}
.check__box svg {
    width: 14px; height: 12px;
    fill: none;
    stroke: var(--color-on-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 320ms ease 50ms;
}
.check:hover .check__box { border-color: var(--color-foreground); }
.check input:checked ~ .check__box { background: var(--color-accent); border-color: var(--color-accent); }
.check input:checked ~ .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible ~ .check__box { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.check__text { font-size: .9375rem; line-height: 1.6; color: var(--color-muted-foreground); }
.check.is-invalid .check__box { border-color: var(--color-destructive); }

/* Submit state */
.form__actions { display: flex; gap: var(--space-3); align-items: center; margin-block-start: var(--space-6); }
.spinner {
    width: 17px; height: 17px;
    border: 2px solid var(--color-on-primary-track);
    border-block-start-color: var(--color-on-primary);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Success / error panels */
.form-result { padding: var(--space-6); border-radius: var(--radius-md); text-align: center; }
.form-result--ok { border: 1px solid var(--color-border); background: var(--color-background); }
.form-result--err {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-block-start: var(--space-4);
    padding: var(--space-4);
    text-align: start;
    border: 1px solid var(--color-destructive);
    border-radius: var(--radius-sm);
    background: var(--color-background);
    color: var(--color-destructive);
    font-size: .9375rem;
    font-weight: 500;
}
.form-result--err svg { flex: none; width: 19px; height: 19px; margin-block-start: 3px; }

.form-result__mark {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto var(--space-4);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-pill);
}
.form-result__mark svg { width: 26px; height: 26px; fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw-tick 520ms var(--ease-entrance) 120ms forwards; }
@keyframes draw-tick { to { stroke-dashoffset: 0; } }
.form-result--ok h3 { font-size: 1.5rem; }
.form-result--ok p { max-width: 46ch; margin: var(--space-3) auto 0; color: var(--color-muted-foreground); }

/* --------------------------------------------------------------------------
   19. QUOTE — 3-step flow with an orange route progress line
   -------------------------------------------------------------------------- */
.qsteps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-block-end: var(--space-6);
    list-style: none;
}
.qsteps__track {
    position: absolute;
    top: 15px;
    inset-inline: 16%;
    height: 2px;
    border-radius: 2px;
    background: var(--color-border-strong);
}
.qsteps__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--color-accent);
    transition: width var(--dur-entrance) var(--ease-entrance);
}
.qstep { position: relative; z-index: 1; text-align: center; }
.qstep__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted-foreground);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 260ms var(--ease-hover), border-color 260ms var(--ease-hover), color 260ms var(--ease-hover);
}
.qstep__label {
    display: block;
    margin-block-start: var(--space-2);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-muted-foreground);
}
.qstep.is-done .qstep__dot { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-primary); }
.qstep.is-active .qstep__dot { border-color: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 4px var(--ring-glow); }
.qstep.is-active .qstep__label { color: var(--color-foreground); font-weight: 600; }

/* Multi-step containers: inactive steps MUST be hidden */
.quote-step { display: none; }
.quote-step.active { display: block; }
.quote-step__title { font-size: 1.25rem; margin-block-end: var(--space-5); }

/* --------------------------------------------------------------------------
   20. FUNNEL — minimal header + inline segmented entry
   -------------------------------------------------------------------------- */
.site-header--minimal .site-nav__list { display: none; }
.site-header--minimal .nav-toggle { display: none !important; }

.segmented__label {
    margin-block-end: var(--space-4);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-primary);
}
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); max-width: 720px; }
.segmented__opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 96px;
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-foreground);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-hover) var(--ease-hover),
                box-shadow var(--dur-hover) var(--ease-hover),
                border-color var(--dur-hover) var(--ease-hover),
                background-color var(--dur-hover) var(--ease-hover);
}
.segmented__opt svg { width: 24px; height: 24px; color: var(--color-accent); }
.segmented__opt:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
    color: var(--color-foreground);
}
.segmented__opt.is-active { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-lg); }
.segmented__note { margin-block-start: var(--space-4); font-size: .875rem; color: var(--color-on-primary-muted); }
/* This note sits at the foot of the hero, where the scrim thins to .25 — the
   global --color-secondary-ink link colour is unreadable there. Paper is the
   scrim's calibrated foreground; the underline still marks it as a link. */
.segmented__note a { color: var(--color-on-primary); }
.segmented__note a:hover { color: var(--color-on-primary-muted); }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    padding-block: var(--space-8) var(--space-5);
    background: var(--color-primary);
    color: var(--color-on-primary-muted);
    font-size: .9375rem;
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
.site-footer__about p { margin-block-start: var(--space-3); max-width: 44ch; color: var(--color-on-primary-muted); font-size: .875rem; line-height: 1.7; }
.site-footer .wordmark { color: var(--color-on-primary); margin-inline-end: 0; }
.site-footer .wordmark:hover { color: var(--color-on-primary); }
.site-footer .wordmark__text i { color: var(--color-on-primary-muted); }
.site-footer h3 { font-size: 1rem; color: var(--color-on-primary); margin-block-end: var(--space-3); }
.site-footer__links { display: grid; gap: var(--space-1); list-style: none; }
.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--color-on-primary-muted);
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-hover);
}
.site-footer__links a:hover { color: var(--color-on-primary); text-decoration: underline; }
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-on-primary-line);
    font-size: .8125rem;
}
/* Inline links on the bottom line sit on navy, where the global
   --color-secondary-ink is 1.6:1. .footer-signature keeps its own colour. */
.site-footer__bottom p:not(.footer-signature) a { color: var(--color-on-primary); }
.site-footer__bottom p:not(.footer-signature) a:hover { color: var(--color-on-primary-muted); }

.site-footer--compact { padding-block: var(--space-6) var(--space-5); }
.site-footer--compact .site-footer__bottom { margin-block-start: 0; padding-block-start: 0; border: 0; }

.footer-signature {
    width: 100%;
    margin-block-start: var(--space-4);
    font-size: .75rem;
    text-align: center;
    color: var(--color-on-primary-muted);
}
.footer-signature a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.footer-signature a:hover { color: var(--color-on-primary); }

/* --------------------------------------------------------------------------
   22. SCROLL PROGRESS — RTL-aware (fills right → left)
   -------------------------------------------------------------------------- */
.progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 60;
    height: 3px;
    pointer-events: none;
    background: transparent;
}
.progress__fill {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right center;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   23. REVEAL BASELINE — visible by default. GSAP animates FROM hidden, so a
   missing/failed script leaves every card simply present.
   -------------------------------------------------------------------------- */
[data-reveal-item] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .container { padding-inline: var(--space-6); }
}

@media (max-width: 980px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
    .band__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .site-footer__about { grid-column: 1 / -1; }
}

/* Tablet — rewrite the area maps, never re-order the DOM */
@media (max-width: 880px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento--types {
        grid-template-rows: repeat(4, minmax(168px, auto));
        grid-template-areas:
            "apt     apt"
            "office  comm"
            "storage heavy"
            "inter   inter";
    }
    .bento--guides {
        grid-template-rows: repeat(3, minmax(168px, auto));
        grid-template-areas:
            "price price"
            "vet   ins"
            "pack  time";
    }
    .segmented { grid-template-columns: repeat(2, 1fr); }
    .radio-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
    .nav-toggle { display: inline-flex; }
    .site-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        z-index: 49;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-5) var(--space-5);
        background: var(--color-surface);
        border-block-end: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
    }
    .site-nav.is-open { display: flex; }
    .site-header__inner { position: relative; }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
    .site-nav__list a { min-height: 48px; padding-inline: var(--space-4); }
    .site-nav__cta { width: 100%; margin-block-start: var(--space-2); }
}

@media (max-width: 760px) {
    .section { padding-block: var(--space-8); }
    .section--tight { padding-block: var(--space-7); }
    .contrast { grid-template-columns: 1fr; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .field-row > .field { margin-block-end: var(--space-5); }

    /* Steps stack; the route line turns vertical, still connecting the badges */
    .steps { grid-template-columns: 1fr; gap: var(--space-6); }
    .steps__route { display: none; }
    .steps::before {
        content: "";
        position: absolute;
        inset-inline-start: 21px;
        top: 22px;
        bottom: 22px;
        width: 2px;
        border-radius: 2px;
        background: var(--color-accent);
        opacity: .4;
    }
    .step { text-align: start; padding-inline-start: 64px; }
    .step__badge { position: absolute; inset-inline-start: 0; top: 0; margin-block-end: 0; }
    .step > h3 { padding-block-start: var(--space-2); }
}

@media (max-width: 640px) {
    .hero { min-height: 0; padding-block: var(--space-7) var(--space-6); }
    .hero--compact { min-height: 0; padding-block: var(--space-7) var(--space-6); }
    .hero__media { background-attachment: scroll; }   /* iOS cannot paint fixed backgrounds */
    .hero__lead { font-size: 1.125rem; margin-block-start: var(--space-4); }
    .consult-card { padding: var(--space-5); }
    .lead { font-size: 1.125rem; }
    .form-card { padding: var(--space-5); }
    .form__actions { flex-direction: column; align-items: stretch; }  /* primary stays on top */
    .form__actions .btn { width: 100%; }
    .cta-band__actions .btn { width: 100%; }
    .qstep__label { font-size: .75rem; }
    .site-footer__bottom { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
    /* Phone: drop every placement, cards flow in DOM order */
    .bento { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; grid-auto-rows: auto; }
    .bento > * { grid-area: auto; }
    .bento-card--anchor h3 { font-size: 1.375rem; }

    /* Stay 2-up (not stacked) so the funnel's H1 + lead + segmented entry
       still clear the first 90vh on a small phone. */
    .segmented { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .segmented__opt { min-height: 84px; padding: var(--space-3) var(--space-2); font-size: .8125rem; }
    .segmented__opt svg { width: 21px; height: 21px; }

    .radio-cards { grid-template-columns: 1fr; }
    .radio-card__face { flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: 56px; padding-inline: var(--space-4); text-align: start; }
    .trust-strip { grid-template-columns: 1fr; gap: var(--space-6); }
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* --------------------------------------------------------------------------
   25. REDUCED MOTION
   Entrances collapse to short opacity fades (handled in script.js);
   shine sweep, parallax and mask reveals are disabled outright.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* Mask reveal off — the photo is simply present */
    .hero__curtain { animation: none; transform: translateX(-101%); }

    /* Parallax off */
    .hero__media { background-attachment: scroll; }

    /* Shine sweep off */
    .btn--cta::after, .btn--primary-sheen::after { display: none; }

    /* Route underline static */
    .hero .route-mark__line { animation: none; transform: none; }

    /* Lift & nudge off — state changes still read */
    .btn:hover, a.bento-card:hover, .segmented__opt:hover { transform: none; }
    a.bento-card:hover .bento-card__go svg { transform: none; }

    .form-result__mark svg { animation: none; stroke-dashoffset: 0; }
    .spinner { animation-duration: 1.4s; }
}