/* ==========================================================================
   Desfundare Canalizare Suceava - design system v3 "command center"
   Mobile-first. Dark technical top band, light content, HUD accents.
   Font: Archivo variable (self-hosted).
   ========================================================================== */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('../fonts/archivo-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* ink & text */
    --ink: #0c1d2e;
    --ink-soft: #40566b;
    --ink-muted: #52677b;

    /* dark surfaces */
    --navy-1000: #050e1a;
    --navy-950: #061423;
    --navy-900: #081b2e;
    --navy-800: #0d2740;
    --navy-700: #143656;

    /* brand */
    --blue: #0b6e8c;
    --blue-deep: #085469;
    --blue-wash: #e3f3f7;
    --cyan: #3fd6ec;
    --cyan-soft: #9ae9f5;

    /* action */
    --amber: #ffb020;
    --amber-strong: #f39c09;
    --amber-wash: #fff4dd;

    /* semantic */
    --green: #15803d;
    --green-bright: #35e08a;
    --green-wash: #e7f6ec;
    --red: #b42318;
    --red-wash: #fdecea;

    /* light surfaces */
    --surface: #ffffff;
    --surface-2: #f2f6f9;
    --surface-3: #e9f0f5;
    --line: #dbe5ec;
    --line-strong: #b9c9d6;

    /* on dark */
    --dark-text: #c6d6e2;
    --dark-muted: #8ba4b8;
    --dark-line: #1c3a57;
    --dark-hairline: rgba(198, 214, 226, .14);

    /* elevation */
    --shadow-xs: 0 1px 2px rgba(6, 20, 35, .07);
    --shadow-sm: 0 4px 14px rgba(6, 20, 35, .08);
    --shadow-md: 0 14px 34px rgba(6, 20, 35, .13);
    --shadow-lg: 0 24px 60px rgba(6, 20, 35, .2);

    /* shape */
    --radius-sm: .75rem;
    --radius-btn: .9rem;
    --radius: 1.25rem;
    --radius-lg: 1.75rem;
    --radius-pill: 999px;

    /* layout */
    --container: 73rem;
    --header-h: 5.4rem;
    --mobile-bar-h: 4.6rem;

    /* type */
    --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --stretch-head: 97%;
    --stretch-wide: 112%;

    /* motion */
    --t-fast: 150ms cubic-bezier(.3, .7, .4, 1);
    --t-med: 240ms cubic-bezier(.3, .7, .4, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 20rem;
    color: var(--ink);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    font-variation-settings: 'wdth' 100;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
    body {
        font-size: 1.0625rem;
    }
}

@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
    }
}

body.menu-open,
body.modal-open {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

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

svg.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

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

button,
select,
summary,
a {
    cursor: pointer;
    touch-action: manipulation;
}

a {
    color: var(--blue);
    text-decoration-thickness: .075em;
    text-underline-offset: .18em;
    transition: color var(--t-fast);
}

::placeholder {
    color: var(--ink-muted);
    opacity: 1;
}

a:hover {
    color: var(--blue-deep);
}

:focus-visible {
    outline: 3px solid var(--amber-strong);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    color: #fff;
    background: var(--blue-deep);
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: var(--ink);
    font-weight: 700;
    font-stretch: var(--stretch-head);
    line-height: 1.12;
    letter-spacing: -.015em;
    text-wrap: balance;
}

h1 {
    margin-bottom: 1.1rem;
    font-size: clamp(1.9rem, 5.2vw + .5rem, 3.3rem);
    font-weight: 750;
}

h2 {
    margin-bottom: .9rem;
    font-size: clamp(1.45rem, 3vw + .5rem, 2.4rem);
}

h3 {
    margin-bottom: .55rem;
    font-size: 1.17rem;
    line-height: 1.3;
}

h4 {
    margin-bottom: .45rem;
    font-size: 1.02rem;
}

p {
    margin: 0 0 1rem;
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

address {
    font-style: normal;
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.1rem;
}

@media (min-width: 640px) {
    .container {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-inline: 2rem;
    }
}

.content-narrow {
    max-width: 46rem;
    margin-inline: auto;
}

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

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: .7rem 1.2rem;
    color: var(--ink);
    background: var(--amber);
    border-radius: 0 0 var(--radius-btn) var(--radius-btn);
    text-decoration: none;
    font-weight: 700;
}

.skip-link:focus-visible {
    top: 0;
    color: var(--ink);
}

.anchor-target {
    display: block;
    position: relative;
    top: calc(-1 * var(--header-h) - 1rem);
    height: 0;
    visibility: hidden;
}

.eyebrow {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .85rem;
    color: var(--blue);
    font-size: .76rem;
    font-weight: 700;
    font-stretch: var(--stretch-wide);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: '';
    width: 1.1rem;
    height: .22rem;
    border-radius: 2px;
    background: var(--amber);
    align-self: center;
    flex: none;
}

.section-heading.centered .eyebrow {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .65rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-btn);
    font-weight: 680;
    font-size: .98rem;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn:active {
    transform: translateY(1px) scale(.99);
}

.header-phone,
.mobile-cta a {
    white-space: nowrap;
}

.btn svg.icon {
    width: 1.2em;
    height: 1.2em;
}

.btn-large {
    min-height: 3.5rem;
    padding: .8rem 1.9rem;
    font-size: 1.04rem;
}

.btn-primary {
    color: var(--ink);
    background: var(--amber);
    box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
    color: var(--ink);
    background: var(--amber-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.btn-secondary {
    color: #fff;
    background: var(--navy-800);
}

.btn-secondary:hover {
    color: #fff;
    background: var(--navy-700);
}

.btn-outline {
    color: var(--ink);
    background: transparent;
    border-color: var(--line-strong);
}

.btn-outline:hover {
    color: var(--ink);
    border-color: var(--ink-soft);
    background: var(--surface-2);
}

.link-button {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-underline-offset: .18em;
}

.link-button:hover {
    color: var(--cyan-soft);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    font-weight: 680;
    text-decoration: none;
    color: var(--blue);
}

.text-link:hover {
    color: var(--blue-deep);
    text-decoration: underline;
}

.text-link svg.icon,
.text-link span[aria-hidden] {
    transition: transform var(--t-fast);
}

.text-link:hover svg.icon,
.text-link:hover span[aria-hidden] {
    transform: translateX(3px);
}

.inline-actions,
.hero-actions,
.final-cta-actions,
.status-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
}

/* --------------------------------------------------------------------------
   5. Header & navigation (dark band)
   -------------------------------------------------------------------------- */

/* floating pill navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    color: var(--ink);
    background: transparent;
    pointer-events: none;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 3.9rem;
    margin-block: .75rem;
    padding-inline: 1rem .5rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
    transition: box-shadow var(--t-med);
}

.site-header.is-scrolled .header-inner {
    box-shadow: var(--shadow-md);
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-right: auto;
    text-decoration: none;
    color: var(--ink);
    min-height: 2.75rem;
}

.brand:hover {
    color: var(--ink);
}

/* typographic mark: amber tile with pipe-elbow corner */
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    background: var(--amber);
    color: var(--ink);
    font-weight: 870;
    font-size: 1.08rem;
    font-stretch: var(--stretch-head);
    letter-spacing: -.03em;
    border-radius: .6rem .6rem .6rem .15rem;
    box-shadow: inset 0 -3px 0 rgba(6, 20, 35, .28);
}

/* non stop status chip */
.header-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.4rem;
    padding: .3rem .85rem;
    background: var(--green-wash);
    border: 1px solid #bfe5cc;
    border-radius: var(--radius-pill);
    color: #116232;
    text-decoration: none;
    font-size: .7rem;
    font-weight: 720;
    font-stretch: var(--stretch-wide);
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-status:hover {
    color: #0b4a25;
    border-color: var(--green);
}

@media (max-width: 719px) {
    .header-status {
        display: none;
    }
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-text strong {
    font-size: 1.02rem;
    font-weight: 790;
    font-stretch: var(--stretch-head);
    letter-spacing: -.015em;
}


/* hamburger */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: .6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    order: 3;
}

.nav-toggle span[aria-hidden] {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--ink);
    transition: transform var(--t-med), opacity var(--t-fast);
}

.nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-child(3) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
}

/* mobile nav panel */
.site-nav {
    position: absolute;
    top: 100%;
    left: .75rem;
    right: .75rem;
    display: none;
    margin-top: .5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-height: calc(100dvh - var(--header-h) - 1rem);
    overflow-y: auto;
    pointer-events: auto;
}

.site-nav.is-open {
    display: block;
}

/* no-JS fallback: keep navigation reachable */
html.no-js .site-nav {
    position: static;
    display: block;
    box-shadow: none;
    max-height: none;
}

html.no-js .nav-toggle {
    display: none;
}

.site-nav ul {
    margin: 0;
    padding: .6rem 1.1rem 1rem;
    list-style: none;
}

.site-nav a {
    display: flex;
    align-items: center;
    min-height: 3.1rem;
    padding: .35rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 640;
    font-size: 1.05rem;
    text-decoration: none;
}

.site-nav a:hover {
    background: var(--surface-2);
    color: var(--blue-deep);
}

.site-nav a[aria-current="page"] {
    color: var(--blue-deep);
    background: var(--blue-wash);
}

.header-phone {
    order: 2;
    min-height: 2.75rem;
    padding: .5rem .95rem;
    font-size: .82rem;
}

@media (max-width: 519px) {
    .header-phone {
        width: 2.75rem;
        padding: 0;
        gap: 0;
    }

    .header-phone .header-phone-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

@media (min-width: 1024px) {
    .nav-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        display: block;
        margin-top: 0;
        background: none;
        border: 0;
        box-shadow: none;
        max-height: none;
        overflow: visible;
        order: 1;
    }

    .site-nav ul {
        display: flex;
        align-items: center;
        gap: .1rem;
        padding: 0;
    }

    .site-nav a {
        min-height: 2.6rem;
        padding: .3rem .8rem;
        font-size: .95rem;
        white-space: nowrap;
    }

    .site-nav a[aria-current="page"] {
        color: var(--blue-deep);
        background: var(--blue-wash);
        border-radius: var(--radius-pill);
    }

    .site-nav a {
        border-radius: var(--radius-pill);
    }

    .header-phone {
        order: 2;
        margin-left: .4rem;
    }
}

/* pulsing status dot */
.status-dot {
    position: relative;
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--green-bright);
    flex: none;
}

.status-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(53, 224, 138, .55);
    animation: dc-pulse 2.2s ease-out infinite;
}

@keyframes dc-pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    70%,
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   7. Breadcrumbs (dark strip, continues the band)
   -------------------------------------------------------------------------- */

.breadcrumbs {
    background: var(--surface-2);
    box-shadow: 0 0 0 100vmax var(--surface-2);
    clip-path: inset(0 -100vmax);
    padding-block: .55rem;
    font-size: .84rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    color: var(--ink-muted);
}

.breadcrumbs li + li::before {
    content: '';
    width: .38rem;
    height: .38rem;
    margin-inline: .5rem .4rem;
    border-top: 1.5px solid var(--line-strong);
    border-right: 1.5px solid var(--line-strong);
    transform: rotate(45deg);
    flex: none;
}

.breadcrumbs a {
    color: var(--ink-muted);
    text-decoration: none;
    min-height: 2.2rem;
    display: inline-flex;
    align-items: center;
}

.breadcrumbs a:hover {
    color: var(--blue-deep);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--ink-soft);
    font-weight: 620;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Hero (dark, typographic, technical grid backdrop)
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    color: var(--ink-soft);
    background:
        radial-gradient(46rem 26rem at 90% -15%, rgba(255, 176, 32, .13) 0%, transparent 55%),
        radial-gradient(40rem 24rem at -10% 110%, rgba(11, 110, 140, .1) 0%, transparent 60%),
        linear-gradient(180deg, #eef7fa 0%, var(--surface) 96%);
}

/* blueprint grid */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(11, 110, 140, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 110, 140, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80rem 40rem at 70% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(80rem 40rem at 70% 0%, #000 30%, transparent 75%);
    pointer-events: none;
}

.hero h1 {
    color: var(--ink);
}

/* friendly marker highlight for the key phrase */
.hl {
    font-style: normal;
    background: linear-gradient(transparent 58%, rgba(255, 176, 32, .5) 58%, rgba(255, 176, 32, .5) 94%, transparent 94%);
}

.hero .eyebrow {
    color: var(--blue);
}

.hero-grid {
    position: relative;
    display: grid;
    gap: 2.2rem;
    padding-block: 2.6rem 2.8rem;
}

.hero-copy {
    max-width: 40rem;
}

.hero-lead {
    color: var(--ink-soft);
    font-size: 1.08rem;
    line-height: 1.62;
    margin-bottom: 1.5rem;
}

.hero-actions {
    margin-bottom: 1.3rem;
}

/* trust strip: horizontal, friendly */
.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.6rem;
    margin: 1.4rem 0 0;
    padding: .9rem 0 0;
    border-top: 1px dashed var(--line-strong);
    list-style: none;
    color: var(--ink-soft);
    font-weight: 570;
    font-size: .92rem;
}

.hero-points li {
    display: flex;
    align-items: baseline;
    gap: .55rem;
}

.hero-points li::before {
    content: '';
    width: .4rem;
    height: .7rem;
    margin-top: .1rem;
    border-right: 2.5px solid var(--green);
    border-bottom: 2.5px solid var(--green);
    transform: rotate(40deg);
    flex: none;
}

/* big phone row */
.hero-phone-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.5rem 0 1.3rem;
}

.hero-phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    flex: none;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.hero-phone-icon svg.icon {
    width: 1.45rem;
    height: 1.45rem;
}

.hero-phone-row small {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink-muted);
    font-size: .8rem;
    font-weight: 570;
}

.hero-phone-number {
    display: inline-block;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.6vw + .5rem, 1.95rem);
    font-weight: 830;
    font-stretch: var(--stretch-head);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    line-height: 1.2;
}

.hero-phone-number:hover {
    color: var(--blue-deep);
}

/* triage: big option buttons with icon tiles */
.hero-triage {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.hero-triage a {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    flex: 1 1 15rem;
    min-height: 3.6rem;
    padding: .7rem 1.1rem;
    background: var(--surface);
    border: 2px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.hero-triage a:hover {
    border-color: var(--blue);
    background: var(--blue-wash);
    transform: translateY(-1px);
}

.triage-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: .7rem;
    background: var(--amber);
    color: var(--ink);
}

.triage-tile svg.icon {
    width: 1.3rem;
    height: 1.3rem;
}

.hero-triage a > svg.icon {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    flex: none;
}

/* hero photo */
.hero-photo {
    position: relative;
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 34rem;
    margin: 0;
}

.hero-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.hero-photo figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1rem;
    background: rgba(255, 255, 255, .95);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 660;
}

/* quick request: floating white card overlapping the hero */
.quick-band {
    position: relative;
    z-index: 2;
    margin-top: -2.6rem;
    padding-block: 0 .6rem;
    background: none;
}

.quick-band .quick-form {
    padding: 1.5rem 1.6rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.quick-band h2 {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: 1.1rem;
    color: var(--ink);
    font-size: 1.12rem;
    letter-spacing: -.01em;
}

.quick-band h2::before {
    content: '';
    width: 1.1rem;
    height: .22rem;
    border-radius: 2px;
    background: var(--amber);
    align-self: center;
    flex: none;
}

.quick-form-grid {
    display: grid;
    gap: .9rem;
}

@media (min-width: 640px) {
    .quick-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .quick-form-grid {
        grid-template-columns: 1.1fr 1.1fr 1fr 1.25fr auto;
        align-items: end;
    }
}

.quick-form .field {
    margin: 0;
}

.quick-form .field label {
    color: var(--ink);
    font-size: .85rem;
    margin-bottom: .35rem;
}

.quick-form .field input,
.quick-form .field select {
    min-height: 3rem;
}

.quick-form-grid > .btn {
    min-height: 3rem;
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .quick-form-grid > .btn {
        grid-column: 1 / -1;
    }
}

.quick-form[aria-busy="true"] .btn {
    opacity: .65;
    pointer-events: none;
}

.quick-form-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 2rem;
    margin-top: 1rem;
}

.quick-form-meta .checkbox-field {
    margin: 0;
    max-width: 44rem;
}

.quick-form-meta .checkbox-field label {
    color: var(--ink-soft);
    font-size: .82rem;
}

.quick-form-alt {
    margin: 0;
    color: var(--ink-muted);
    font-size: .85rem;
}

.quick-form-alt a {
    font-weight: 680;
}

/* locality ticker */
.hero-ticker {
    position: relative;
    border-top: 1px solid var(--line);
    overflow: hidden;
}

.hero-ticker-track {
    display: flex;
    width: max-content;
    padding-block: .7rem;
    animation: dc-ticker 60s linear infinite;
}

.hero-ticker-track span {
    display: inline-flex;
    align-items: center;
    color: var(--ink-muted);
    font-size: .76rem;
    font-weight: 640;
    font-stretch: var(--stretch-wide);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-ticker-track span::after {
    content: '';
    width: .32rem;
    height: .32rem;
    margin-inline: 1.4rem;
    background: var(--amber);
    transform: rotate(45deg);
    flex: none;
}

@keyframes dc-ticker {
    to {
        transform: translateX(-50%);
    }
}

/* hero variants: kill stock illustrations, keep typographic focus */
.hero-media {
    display: contents;
}

.hero-media > img {
    display: none;
}

.urgent-note {
    display: inline-block;
    margin-top: 1.2rem;
    padding: .6rem .95rem;
    background: var(--amber-wash);
    border: 1px solid #f3ddb0;
    border-radius: var(--radius-btn);
    color: #7a5410;
    font-size: .9rem;
}

.urgent-note strong {
    color: #5f3f06;
}

.locality-badge {
    justify-self: start;
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    padding: .6rem 1.05rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-xs);
    color: var(--ink-soft);
}

.locality-badge span[aria-hidden],
.badge-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--amber);
    font-size: 0;
    overflow: hidden;
    flex: none;
}

.locality-badge strong {
    display: block;
    color: var(--ink);
    font-weight: 760;
    line-height: 1.1;
}

.locality-badge small {
    color: var(--ink-muted);
    font-size: .75rem;
}

.hero-compact .hero-grid {
    padding-block: 2.2rem 2.4rem;
}

/* --------------------------------------------------------------------------
   8a. Drenched hero (homepage): petrol water wash, boxed highlight
   -------------------------------------------------------------------------- */

.hero-home {
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
    padding-bottom: 3.4rem;
    color: #d7e8ef;
    background:
        radial-gradient(50rem 30rem at 88% -10%, rgba(63, 214, 236, .16) 0%, transparent 55%),
        radial-gradient(40rem 26rem at -12% 108%, rgba(255, 176, 32, .1) 0%, transparent 55%),
        linear-gradient(158deg, var(--navy-800) 0%, var(--blue-deep) 55%, var(--blue) 115%);
}

.hero-home::before {
    background:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
}

.hero-home h1 {
    color: #fff;
}

.hero-home .hl {
    background: var(--surface);
    color: var(--ink);
    padding-inline: .18em;
    border-radius: .14em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hero-home .eyebrow {
    color: var(--cyan-soft);
}

.hero-home .hero-lead {
    color: #d7e8ef;
}

.hero-home .hero-phone-row small {
    color: #b9d5e0;
}

.hero-home .hero-phone-number {
    color: #fff;
}

.hero-home .hero-phone-number:hover {
    color: var(--cyan-soft);
}

.hero-home .hero-triage a {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.hero-home .hero-triage a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
    transform: translateY(-1px);
}

.hero-home .hero-points {
    color: #d7e8ef;
    border-top-color: rgba(255, 255, 255, .28);
}

.hero-home .hero-points li::before {
    border-color: var(--green-bright);
}

.hero-home .hero-photo img {
    box-shadow: var(--shadow-lg);
}

.hero-home .hero-ticker {
    border-top-color: rgba(255, 255, 255, .16);
}

.hero-home .hero-ticker-track span {
    color: #b9d5e0;
}

.hero-home .hero-ticker-track span::after {
    background: var(--amber);
}

@media (min-width: 900px) {
    .hero-grid {
        align-items: center;
        gap: 3rem;
        padding-block: 3.8rem 4rem;
    }

    /* two columns only when the hero photo is present */
    .hero-grid:has(.hero-photo) {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        align-items: center;
    }

    .hero-copy {
        max-width: 46rem;
    }
}

@media (max-width: 899px) {
    .hero-photo {
        max-width: 30rem;
        justify-self: start;
    }

    .hero-photo img {
        aspect-ratio: 16 / 10;
    }
}

/* --------------------------------------------------------------------------
   8b. Doc layout: readable content column + sticky action rail
   -------------------------------------------------------------------------- */

.page-body {
    display: grid;
    gap: 2.5rem;
    align-items: start;
    padding-block: 2.6rem 3.4rem;
}

@media (min-width: 1024px) {
    .page-body {
        grid-template-columns: minmax(0, 1fr) 19.5rem;
        gap: 4.5rem;
    }
}

.page-main {
    max-width: 46rem;
}

.block {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--line);
}

.block:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.block > h2::before {
    content: '';
    display: block;
    width: 2rem;
    height: .24rem;
    margin-bottom: .8rem;
    border-radius: 2px;
    background: var(--amber);
}

.page-main > .block p {
    color: var(--ink-soft);
}

.page-main .check-list {
    margin-top: .3rem;
}

.page-main .chip-list {
    margin-top: .5rem;
}

/* compact technical cards inside the content column */
.page-main .grid.cards {
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem 1rem;
    margin-top: .75rem;
}

@media (min-width: 640px) {
    .page-main .grid.cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.page-main .card {
    padding: .9rem 1.1rem;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.page-main .card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line-strong);
}

.page-main .card h3 {
    font-size: 1.02rem;
    margin-bottom: .2rem;
}

.page-main .card p {
    font-size: .92rem;
}

/* keep process vertical inside the content column */
@media (min-width: 1024px) {
    .page-main .process-list {
        flex-direction: column;
        gap: 0;
    }

    .page-main .process-list li {
        flex-direction: row;
        gap: 1.2rem;
        padding-bottom: 1.9rem;
    }

    .page-main .process-list li:last-child {
        padding-bottom: 0;
    }

    .page-main .process-list li::before {
        left: 1.55rem;
        right: auto;
        top: 3rem;
        bottom: .3rem;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
    }

    .page-main .process-list li > span {
        justify-content: center;
    }
}

.page-main .warning-card {
    margin-top: 1rem;
}

/* action rail */
.page-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .page-aside {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
    }
}

.sidebar-card.aside-cta {
    background: var(--navy-900);
    border-color: var(--dark-line);
    color: var(--dark-text);
}

.sidebar-card.aside-cta h2 {
    color: var(--dark-muted);
}

.aside-cta strong {
    display: block;
    margin-bottom: .35rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 780;
    font-stretch: var(--stretch-head);
    letter-spacing: -.01em;
}

.aside-cta p {
    font-size: .88rem;
    margin-bottom: .9rem;
}

.aside-cta .btn {
    width: 100%;
}

.aside-cta .aside-phone {
    display: block;
    margin-bottom: .9rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 740;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.aside-cta .aside-phone:hover {
    color: var(--cyan);
}

/* --------------------------------------------------------------------------
   9. Sections
   -------------------------------------------------------------------------- */

.section {
    padding-block: 3.5rem;
}

@media (min-width: 900px) {
    .section {
        padding-block: 5.5rem;
    }
}

.section-alt {
    background: var(--surface-2);
}

.section-heading {
    max-width: 44rem;
    margin-bottom: 2.5rem;
}

.section-heading.centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading p:not(.eyebrow) {
    color: var(--ink-soft);
}

.heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    max-width: none;
}

.heading-row > div {
    max-width: 44rem;
}

.section-action {
    margin-top: 1.8rem;
    text-align: center;
}

/* tinted emphasis section (former dark) */
.section-dark {
    position: relative;
    color: var(--ink-soft);
    background:
        radial-gradient(40rem 26rem at -10% 0%, rgba(255, 176, 32, .09) 0%, transparent 60%),
        linear-gradient(180deg, #e6f2f7, #eef7fa);
    overflow: hidden;
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--ink);
}

.section-dark .eyebrow {
    color: var(--blue);
}

.section-dark a:not(.btn) {
    color: var(--blue-deep);
}

.section-dark a:not(.btn):hover {
    color: var(--blue);
}

/* --------------------------------------------------------------------------
   10. Grids & cards (HUD ticks, bento signs)
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 640px) {
    .grid {
        gap: 1.5rem;
    }

    .cards,
    .problem-grid,
    .six-signs,
    .sign-grid,
    .advantages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {

    .cards,
    .problem-grid,
    .sign-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* bento layout for the six warning signs */
    .six-signs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .six-signs .card:nth-child(1),
    .six-signs .card:nth-child(6) {
        grid-column: span 2;
    }
}

.card {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.35rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.card p {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 0;
}

.card h3 {
    margin-bottom: .35rem;
}

.card-icon {
    display: inline-flex;
    align-items: center;
    margin-bottom: .9rem;
    color: var(--blue);
}

.card-icon svg.icon {
    width: 1.6rem;
    height: 1.6rem;
}

.section-dark .card-icon {
    color: var(--blue);
}

.section-dark .card {
    background: var(--surface);
    border-color: #d3e5ee;
}

/* advantages: airy definition list, not a card grid */
.advantages-grid {
    gap: 1.6rem 2.5rem;
}

@media (min-width: 1024px) {
    .advantages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 56rem;
    }
}

.advantages-grid .card {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.advantages-grid .card:hover {
    transform: none;
    box-shadow: none;
}

.advantages-grid .card h3 {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.advantages-grid .card h3::before {
    content: '';
    width: 1.1rem;
    height: .22rem;
    border-radius: 2px;
    background: var(--amber);
    align-self: center;
    flex: none;
}

/* 404 link cards */
a.card {
    text-decoration: none;
    color: var(--ink);
    gap: .25rem;
}

a.card strong {
    font-weight: 720;
}

a.card span {
    color: var(--ink-muted);
    font-size: .9rem;
}

a.card:hover {
    border-color: var(--blue);
}

/* service cards */
.service-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* two-tone service duo: deep water block + pale tint block */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5rem 1.4rem;
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.service-grid .service-card:nth-child(odd) {
    color: #d7e8ef;
    background: linear-gradient(160deg, var(--navy-800) 0%, var(--blue-deep) 70%, var(--blue) 130%);
}

.service-grid .service-card:nth-child(odd) h3 {
    color: #fff;
}

.service-grid .service-card:nth-child(odd) p:not(.service-label) {
    color: #d7e8ef;
}

.service-grid .service-card:nth-child(odd) .check-list li {
    color: #d7e8ef;
}

.service-grid .service-card:nth-child(odd) .check-list li::before {
    border-color: var(--green-bright);
}

.service-grid .service-card:nth-child(even) {
    color: var(--ink);
    background: linear-gradient(170deg, #e3f3f7, #eef7fa);
}

.service-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - .5rem);
}

.service-card .btn {
    align-self: flex-start;
    margin-top: .4rem;
}

@media (min-width: 640px) {
    .service-card {
        padding: 2.1rem 2rem;
    }
}

.service-label {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .28rem .85rem;
    background: rgba(255, 255, 255, .92);
    color: var(--blue-deep);
    border-radius: var(--radius-pill);
    font-size: .74rem;
    font-weight: 720;
    font-stretch: var(--stretch-wide);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-grid .service-card:nth-child(even) .service-label {
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.service-grid .service-card:nth-child(odd) .text-link {
    color: #9ae9f5;
}

.service-grid .service-card:nth-child(odd) .text-link:hover {
    color: #fff;
}

/* check list */
.check-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    color: var(--ink-soft);
}

.check-list li::before {
    content: '';
    width: .42rem;
    height: .74rem;
    margin-top: .05rem;
    border-right: 2.5px solid var(--green);
    border-bottom: 2.5px solid var(--green);
    transform: rotate(40deg);
    flex: none;
}

.section-dark .check-list li {
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   11. Split & content layouts
   -------------------------------------------------------------------------- */

.split-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 900px) {
    .split-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
    }
}

.split-copy p {
    color: var(--ink-soft);
}

.split-copy .inline-actions {
    margin-top: 1.3rem;
}

.two-column-content {
    display: grid;
    gap: 2.2rem;
}

@media (min-width: 900px) {
    .two-column-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
    }
}

.two-column-content article > p,
.two-column-content div > p {
    color: var(--ink-soft);
}

.content-grid-with-aside {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 900px) {
    .content-grid-with-aside {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

.content-grid-with-aside article p {
    color: var(--ink-soft);
}

.info-card {
    padding: 1.5rem 1.4rem;
    background: linear-gradient(170deg, #e3f3f7, #eef7fa);
    border: 0;
    border-radius: var(--radius);
}

.info-card h2 {
    font-size: 1.15rem;
    margin-bottom: .9rem;
}

.info-card .check-list {
    margin: 0;
}

.info-card .btn,
.info-card .text-link {
    margin-top: 1rem;
}

/* factor list (cost) */
.cost-grid {
    align-items: start;
}

.factor-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    counter-reset: dcfactor;
}

.factor-list article {
    counter-increment: dcfactor;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.1rem;
    align-items: start;
    padding: 1.05rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast);
}

.factor-list article:hover {
    border-color: var(--line-strong);
}

.factor-list article::before {
    content: counter(dcfactor, decimal-leading-zero);
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 1.5rem;
    font-weight: 830;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--amber-strong);
}

.factor-list h3 {
    font-size: 1rem;
    margin-bottom: .2rem;
}

.factor-list p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .93rem;
}

/* warning card */
.warning-card {
    padding: 1.4rem 1.4rem;
    background: var(--amber-wash);
    border: 1px solid #f3ddb0;
    border-radius: var(--radius);
    color: #5f3f06;
}

.warning-card strong {
    display: block;
    margin-bottom: .7rem;
    font-size: .92rem;
    font-weight: 760;
    font-stretch: var(--stretch-wide);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.warning-card ul {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}


.highlight-card {
    padding: 1.5rem 1.4rem;
    background: var(--blue-wash);
    border: 1px solid #c8e6ee;
    border-radius: var(--radius);
}

/* number list */
.number-list {
    counter-reset: dc-number;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.number-list li {
    counter-increment: dc-number;
    position: relative;
    padding-left: 3rem;
    color: var(--ink-soft);
}

.number-list li::before {
    content: counter(dc-number, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .1rem;
    font-size: 1.4rem;
    font-weight: 830;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--amber-strong);
}

.number-list strong {
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   12. Process timeline (outlined numerals)
   -------------------------------------------------------------------------- */

.process-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.process-list li {
    position: relative;
    display: flex;
    gap: 1.2rem;
    padding-bottom: 1.9rem;
}

.process-list li:last-child {
    padding-bottom: 0;
}

.process-list li::before {
    content: '';
    position: absolute;
    left: 1.55rem;
    top: 3rem;
    bottom: .3rem;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
}

.process-list li:last-child::before {
    display: none;
}

.process-list li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    height: 2.6rem;
    flex: none;
    font-size: 2.1rem;
    font-weight: 850;
    font-stretch: var(--stretch-head);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.8px var(--amber-strong);
    z-index: 1;
}

.process-list h3 {
    margin-bottom: .25rem;
    font-size: 1.08rem;
}

.process-list p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .95rem;
}


@media (min-width: 1024px) {
    .process-list {
        flex-direction: row;
        align-items: stretch;
        gap: 1.4rem;
        max-width: none;
    }

    .process-list li {
        flex: 1;
        flex-direction: column;
        gap: .9rem;
        padding-bottom: 0;
    }

    .process-list li::before {
        left: 3.8rem;
        right: -1.4rem;
        top: 1.3rem;
        bottom: auto;
        width: auto;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
    }

    .process-list li > span {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   13. Emergency & urgency blocks
   -------------------------------------------------------------------------- */

/* urgency line: full-bleed petrol band, phone number as the centerpiece */
.emergency-section {
    padding-block: 4rem;
    color: #d7e8ef;
    text-align: center;
    background:
        radial-gradient(46rem 26rem at 85% -20%, rgba(63, 214, 236, .14) 0%, transparent 55%),
        linear-gradient(158deg, var(--navy-800) 0%, var(--blue-deep) 60%, var(--blue) 120%);
}

.emergency-section h2 {
    color: #fff;
    margin-bottom: .6rem;
}

.urgent-inner {
    max-width: 52rem;
    margin-inline: auto;
    padding-inline: 1.1rem;
}

.urgent-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .4rem 1rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.urgent-phone {
    display: block;
    margin: .4rem 0 1.4rem;
    color: #fff;
    font-size: clamp(2.4rem, 5vw + 1rem, 4.2rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-decoration: none;
    transition: color var(--t-fast);
}

.urgent-phone:hover {
    color: var(--cyan-soft);
}

.urgent-btn {
    box-shadow: 0 10px 30px rgba(255, 176, 32, .35);
}

.urgent-btn:hover {
    box-shadow: 0 14px 38px rgba(255, 176, 32, .45);
}

.emergency-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 900px) {
    .emergency-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

.emergency-call-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1.8rem 1.7rem;
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.emergency-call-card strong {
    font-size: 1.2rem;
    font-weight: 780;
    font-stretch: var(--stretch-head);
    letter-spacing: -.01em;
}

.emergency-call-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

.emergency-call-card .btn {
    margin-top: .6rem;
    align-self: stretch;
}

.pulse-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--red-wash);
    color: var(--red);
    font-weight: 800;
    font-size: 1.3rem;
}

.risk-section .split-grid {
    align-items: start;
}

/* --------------------------------------------------------------------------
   14. Localities
   -------------------------------------------------------------------------- */

.locality-link-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.locality-link-card {
    position: relative;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}

.locality-link-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-xs);
    transform: translateY(-2px);
}

.locality-link-card h3 {
    margin-bottom: .5rem;
    font-size: 1.05rem;
}

.locality-link-card a {
    display: flex;
    align-items: center;
    min-height: 2.4rem;
    color: var(--blue);
    font-size: .92rem;
    font-weight: 620;
    text-decoration: none;
}

.locality-link-card a:hover {
    color: var(--blue-deep);
    text-decoration: underline;
}

/* directory */
.filter-box {
    max-width: 32rem;
    margin-bottom: 1.8rem;
}

.filter-box label {
    display: block;
    margin-bottom: .45rem;
    font-weight: 660;
    font-size: .95rem;
}

.search-input {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1rem;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-btn);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.search-input:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(11, 110, 140, .15);
}

.search-input span[aria-hidden],
.search-input svg.icon {
    color: var(--ink-muted);
    flex: none;
}

.search-input input {
    flex: 1;
    min-height: 3.1rem;
    border: 0;
    background: none;
    font-size: 1rem;
}

.search-input input:focus {
    outline: none;
}

.filter-status {
    margin: .5rem 0 0;
    color: var(--ink-muted);
    font-size: .85rem;
}

.locality-group {
    margin-bottom: 2rem;
}

.locality-group h3 {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    font-stretch: var(--stretch-wide);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-soft);
}

.locality-group h3::before {
    content: '';
    width: 1.1rem;
    height: .22rem;
    border-radius: 2px;
    background: var(--amber);
    align-self: center;
    flex: none;
}

.locality-card-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.locality-directory-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.15rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--t-med), box-shadow var(--t-med);
}

.locality-directory-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-xs);
}

.locality-directory-card h4 {
    margin-bottom: .25rem;
    font-size: 1.05rem;
}

.locality-directory-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: .88rem;
}

.locality-services {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
}

.locality-services a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: .25rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    color: var(--blue-deep);
    font-size: .85rem;
    font-weight: 640;
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.locality-services a:hover {
    background: var(--blue-wash);
    border-color: var(--blue);
}

.no-results {
    max-width: 30rem;
    margin: 2rem auto 0;
    padding: 1.8rem 1.5rem;
    text-align: center;
    background: var(--surface);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.no-results p {
    color: var(--ink-soft);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.chip-list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .4rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn);
    color: var(--ink);
    font-weight: 620;
    font-size: .92rem;
    text-decoration: none;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.chip-list a:hover {
    border-color: var(--blue);
    background: var(--blue-wash);
    color: var(--blue-deep);
}

.nearby-links {
    display: flex;
    flex-direction: column;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.nearby-links a {
    display: flex;
    align-items: center;
    min-height: 2.6rem;
    color: var(--blue);
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.nearby-links li:last-child a {
    border-bottom: 0;
}

.nearby-links a:hover {
    color: var(--blue-deep);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   15. Blog & articles
   -------------------------------------------------------------------------- */

.article-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .article-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.4rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.article-card h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.35;
}

.article-card h3 a {
    color: var(--ink);
    text-decoration: none;
}

.article-card h3 a:hover {
    color: var(--blue-deep);
    text-decoration: underline;
}

.article-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .93rem;
}

.article-card .text-link {
    margin-top: auto;
}

.article-category {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin: 0;
    padding: .2rem .7rem;
    background: var(--blue-wash);
    color: var(--blue-deep);
    border: 1px solid #c8e6ee;
    border-radius: var(--radius-sm);
    font-size: .72rem;
    font-weight: 720;
    font-stretch: var(--stretch-wide);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    color: var(--ink-muted);
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}

/* featured article */
.featured-article-section {
    padding-bottom: 1rem;
}

.featured-article {
    display: grid;
    gap: 1.6rem;
    padding: 1.6rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {
    .featured-article {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: center;
        padding: 2.4rem 2.2rem;
    }
}

.featured-article h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.featured-article h2 a {
    color: var(--ink);
    text-decoration: none;
}

.featured-article h2 a:hover {
    color: var(--blue-deep);
}

.featured-article-copy > p {
    color: var(--ink-soft);
}

.featured-article-copy .article-meta {
    margin-bottom: 1.1rem;
}

.featured-article-media img {
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

@media (max-width: 899px) {
    .featured-article-media {
        display: none;
    }
}

/* blog post page */
.article-header {
    padding: 2.4rem 0 1.6rem;
    color: var(--ink-soft);
    background:
        radial-gradient(40rem 20rem at 80% -20%, rgba(255, 176, 32, .12) 0%, transparent 60%),
        linear-gradient(180deg, #eef7fa, var(--surface));
}

.article-header h1 {
    color: var(--ink);
    font-size: clamp(1.75rem, 4.5vw + .4rem, 2.7rem);
}

.article-excerpt {
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.article-header .article-category {
    margin-bottom: 1rem;
}

.article-featured-media {
    margin: 1.5rem auto;
}

.article-featured-media img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

.article-layout {
    display: grid;
    gap: 2.5rem;
    padding-block: 1.5rem 3rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr) 18rem;
        gap: 4rem;
    }
}

.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .article-sidebar {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
    }
}

.sidebar-card {
    padding: 1.25rem 1.2rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.sidebar-card h2 {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .78rem;
    font-stretch: var(--stretch-wide);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-muted);
    margin-bottom: .7rem;
}

.sidebar-card h2::before {
    content: '';
    width: 1rem;
    height: .22rem;
    border-radius: 2px;
    background: var(--amber);
    align-self: center;
    flex: none;
}

.sidebar-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.sidebar-card li a {
    display: flex;
    align-items: center;
    min-height: 2.6rem;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}

.sidebar-card li a:hover {
    text-decoration: underline;
}

.sidebar-card .btn {
    margin-top: .4rem;
    width: 100%;
}

.article-cta {
    margin-top: 2.5rem;
    padding: 1.6rem 1.5rem;
    background: var(--blue-wash);
    border: 1px solid #c8e6ee;
    border-radius: var(--radius-lg);
}

.article-cta h2 {
    font-size: 1.3rem;
}

.article-faq {
    margin-top: 2.5rem;
}

.article-faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: .6rem;
    background: var(--surface);
}

.article-faq summary {
    padding: .9rem 1.1rem;
    font-weight: 680;
}

.article-faq details p {
    padding: 0 1.1rem .9rem;
    color: var(--ink-soft);
}

/* prose (editorial content) */
.prose {
    font-size: 1.03rem;
    line-height: 1.72;
}

.prose h2 {
    margin-top: 2.4rem;
    font-size: 1.55rem;
}

.prose h3 {
    margin-top: 1.8rem;
    font-size: 1.2rem;
}

.prose p {
    color: var(--ink-soft);
}

.prose ul,
.prose ol {
    color: var(--ink-soft);
    padding-left: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.prose li::marker {
    color: var(--amber-strong);
    font-weight: 700;
}

.prose a {
    font-weight: 620;
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.3rem;
    background: var(--amber-wash);
    border-radius: var(--radius-sm);
    color: #5f3f06;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.prose th,
.prose td {
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    text-align: left;
}

.prose th {
    background: var(--surface-2);
    font-weight: 700;
}

.empty-state {
    max-width: 30rem;
    margin-inline: auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.empty-state p {
    color: var(--ink-soft);
}

.newsletter-alternative .split-grid {
    align-items: center;
}

.newsletter-alternative p {
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--t-fast);
}

.faq-item[open] {
    border-color: var(--blue);
    box-shadow: var(--shadow-xs);
}

.faq-item summary {
    position: relative;
    display: block;
    padding: 1.05rem 3.2rem 1.05rem 1.25rem;
    font-weight: 690;
    line-height: 1.4;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: .65rem;
    height: .65rem;
    margin-top: -.5rem;
    border-right: 2.5px solid var(--blue);
    border-bottom: 2.5px solid var(--blue);
    transform: rotate(45deg);
    transition: transform var(--t-med);
}

.faq-item[open] summary::after {
    transform: rotate(225deg);
    margin-top: -.1rem;
}

.faq-item summary:hover {
    color: var(--blue-deep);
}

.faq-answer {
    padding: 0 1.25rem 1.15rem;
    color: var(--ink-soft);
}

.faq-answer p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   17. Contact & forms
   -------------------------------------------------------------------------- */

.contact-section {
    background:
        linear-gradient(rgba(11, 110, 140, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 110, 140, .05) 1px, transparent 1px),
        var(--surface-3);
    background-size: 44px 44px, 44px 44px, auto;
}

.contact-panel {
    display: grid;
    gap: 2rem;
    padding: 1.6rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
    .contact-panel {
        padding: 2.2rem 2rem;
    }
}

@media (min-width: 1024px) {
    .contact-panel {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: 3.5rem;
        padding: 3rem 2.8rem;
    }
}

.contact-panel-copy > p {
    color: var(--ink-soft);
}

.contact-panel-copy .btn {
    margin-top: 1rem;
}

.form-grid {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-full {
        grid-column: 1 / -1;
    }
}

.field label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 660;
    font-size: .93rem;
}

.field .optional {
    color: var(--ink-muted);
    font-weight: 500;
    font-size: .8rem;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
    width: 100%;
    min-height: 3.1rem;
    padding: .65rem .95rem;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

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

.field select {
    appearance: none;
    padding-right: 2.6rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
        linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 50%, calc(100% - .9rem) 50%;
    background-size: .36rem .36rem;
    background-repeat: no-repeat;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(11, 110, 140, .16);
}

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

.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .15);
}

.field-help {
    margin: .4rem 0 0;
    color: var(--ink-muted);
    font-size: .84rem;
}

.field-error {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: .4rem 0 0;
    color: var(--red);
    font-size: .87rem;
    font-weight: 620;
}

.field-error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex: none;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    transform: translateY(.1rem);
}

.checkbox-field {
    margin-top: 1.1rem;
}

.checkbox-field label {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-weight: 480;
    font-size: .92rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    flex: none;
    accent-color: var(--blue);
    cursor: pointer;
}

.contact-form > .btn {
    width: 100%;
    margin-top: 1.3rem;
}

@media (min-width: 640px) {
    .contact-form > .btn {
        width: auto;
        min-width: 16rem;
    }
}

.contact-form[aria-busy="true"] > .btn {
    opacity: .65;
    pointer-events: none;
}

.form-required {
    margin-top: .8rem;
    color: var(--ink-muted);
    font-size: .82rem;
}

.hp-field {
    position: absolute !important;
    left: -6000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status:empty {
    display: none;
}

.alert {
    padding: .9rem 1.1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    margin-bottom: 1.1rem;
}

.alert-error {
    background: var(--red-wash);
    border: 1px solid #f2c4bf;
    color: var(--red);
}

/* contact page cards */
.contact-detail-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .contact-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .contact-detail-grid {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.contact-detail-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.5rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.contact-detail-card > span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    margin-bottom: .6rem;
    color: var(--blue);
    font-weight: 800;
}

.contact-detail-card > span[aria-hidden] svg.icon {
    width: 1.4rem;
    height: 1.4rem;
}

.contact-detail-card p {
    color: var(--ink-soft);
    font-size: .92rem;
}

.contact-detail-card a {
    font-weight: 680;
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    word-break: break-word;
}

.company-details {
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.company-details > div {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) 1.2fr;
    gap: 1rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
}

.company-details > div:nth-child(odd) {
    background: var(--surface-2);
}

.company-details > div:last-child {
    border-bottom: 0;
}

.company-details dt {
    color: var(--ink-muted);
    font-weight: 620;
}

.company-details dd {
    margin: 0;
    color: var(--ink);
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   18. Final CTA
   -------------------------------------------------------------------------- */

.final-cta {
    position: relative;
    color: var(--ink-soft);
    background:
        linear-gradient(rgba(11, 110, 140, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 110, 140, .05) 1px, transparent 1px),
        radial-gradient(42rem 26rem at 100% 0%, rgba(255, 176, 32, .18) 0%, transparent 55%),
        linear-gradient(180deg, #fff6e3, #fdf8ee);
    background-size: 44px 44px, 44px 44px, auto, auto;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: repeating-linear-gradient(-45deg, var(--amber) 0 12px, transparent 12px 24px);
    pointer-events: none;
}

.final-cta h2 {
    color: var(--ink);
}

.final-cta .eyebrow {
    color: var(--blue);
}

.final-cta-inner {
    display: grid;
    gap: 1.8rem;
    align-items: center;
}

@media (min-width: 900px) {
    .final-cta-inner {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 3rem;
    }

    .final-cta-actions {
        justify-content: flex-end;
    }
}

.final-cta .btn-outline {
    color: var(--ink);
    border-color: #e3cf9e;
}

.final-cta .btn-outline:hover {
    border-color: var(--ink-soft);
    background: rgba(255, 255, 255, .6);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    color: var(--dark-text);
    background: var(--navy-900);
    border-top: 4px solid var(--amber);
    padding-top: 3rem;
    font-size: .95rem;
}

.footer-grid {
    display: grid;
    gap: 2.2rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: 3rem;
    }
}

.site-footer h2 {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 1rem;
    color: #fff;
    font-size: .8rem;
    font-stretch: var(--stretch-wide);
    font-weight: 720;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.site-footer nav h2::before,
.site-footer section:not(.footer-brand) h2::before {
    content: '';
    width: 1rem;
    height: .22rem;
    border-radius: 2px;
    background: var(--amber);
    align-self: center;
    flex: none;
}

.footer-brand h2 {
    font-size: 1.15rem;
    letter-spacing: -.01em;
    text-transform: none;
    font-stretch: var(--stretch-head);
}

.footer-brand .brand-mark {
    margin-bottom: .9rem;
}

.footer-brand p {
    font-size: .92rem;
}

.footer-emergency strong {
    display: inline-block;
    padding: .45rem .9rem;
    background: rgba(255, 176, 32, .12);
    border: 1px solid rgba(255, 176, 32, .3);
    border-radius: var(--radius-sm);
    color: #ffd894;
    font-size: .87rem;
    font-weight: 650;
}

.site-footer nav ul,
.site-footer address {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer nav li a,
.site-footer address a {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    color: var(--dark-text);
    text-decoration: none;
}

.site-footer nav li a:hover,
.site-footer address a:hover {
    color: var(--cyan);
    text-decoration: underline;
}

.site-footer address p {
    margin-bottom: .3rem;
    font-size: .9rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1.5rem;
    padding-block: 1.3rem;
    border-top: 1px solid var(--dark-line);
    font-size: .84rem;
}

.footer-bottom p {
    margin: 0;
    color: var(--dark-muted);
}

.footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem 1.2rem;
}

.footer-bottom a,
.footer-bottom .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    color: var(--dark-muted);
    text-decoration: none;
    font-size: .84rem;
}

.footer-bottom a:hover,
.footer-bottom .link-button:hover {
    color: var(--cyan);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   20. Mobile CTA bar
   -------------------------------------------------------------------------- */

.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    gap: .55rem;
    padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(6, 20, 35, .08);
}

.mobile-cta a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 3.1rem;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-fast), background var(--t-fast);
}

.mobile-cta a:active {
    transform: scale(.97);
}

.mobile-cta svg.icon {
    width: 1.2rem;
    height: 1.2rem;
}

.mobile-cta-call {
    color: var(--ink);
    background: var(--amber);
    flex: 1.25;
}

.mobile-cta-call:hover {
    color: var(--ink);
    background: var(--amber-strong);
}

.mobile-cta-quote {
    color: #fff;
    background: var(--navy-800);
}

.mobile-cta-quote:hover {
    color: #fff;
    background: var(--navy-800);
}

.mobile-cta-whatsapp {
    color: #fff;
    background: #17864a;
    flex: 0 0 3.1rem;
}

.mobile-cta-whatsapp:hover {
    color: #fff;
    background: #116b3a;
}

.mobile-cta-whatsapp span:not([aria-hidden]) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

@media (min-width: 1024px) {
    .mobile-cta {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   21. Cookie banner & preferences
   -------------------------------------------------------------------------- */

.cookie-banner {
    position: fixed;
    left: .8rem;
    right: .8rem;
    bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + .7rem);
    z-index: 110;
    max-width: 46rem;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
    .cookie-banner {
        bottom: 1.2rem;
    }
}

.cookie-banner-inner {
    padding: 1.3rem 1.3rem 1.2rem;
}

.cookie-banner h2 {
    font-size: 1.05rem;
    margin-bottom: .4rem;
}

.cookie-banner p {
    color: var(--ink-soft);
    font-size: .88rem;
    margin-bottom: .9rem;
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.cookie-actions .btn {
    min-height: 2.75rem;
    padding: .45rem 1.15rem;
    font-size: .8rem;
}

.cookie-preferences {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    background: rgba(5, 14, 26, .62);
}

@media (min-width: 640px) {
    .cookie-preferences {
        align-items: center;
    }
}

.cookie-preferences-panel {
    position: relative;
    width: 100%;
    max-width: 34rem;
    max-height: min(85dvh, 40rem);
    overflow-y: auto;
    padding: 1.7rem 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.cookie-preferences-panel h2 {
    font-size: 1.25rem;
    padding-right: 2.5rem;
}

.cookie-preferences-panel > p {
    color: var(--ink-soft);
    font-size: .92rem;
}

.dialog-close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 1.3rem;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}

.dialog-close:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.consent-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
}

.consent-category > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.consent-category strong {
    font-weight: 700;
}

.consent-category span {
    color: var(--ink-muted);
    font-size: .85rem;
}

.consent-category + .cookie-actions {
    margin-top: 1.2rem;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .84rem;
    color: var(--ink-muted);
    cursor: pointer;
    flex: none;
}

.switch input[type="checkbox"] {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: var(--green);
    cursor: pointer;
}

.switch input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

/* toggle variant injected by consent.js */
.switch input:has(+ .switch-ui) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.switch-ui {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.7rem;
    background: var(--line-strong);
    border-radius: var(--radius-pill);
    transition: background var(--t-med);
    flex: none;
}

.switch-ui::after {
    content: '';
    position: absolute;
    top: .18rem;
    left: .2rem;
    width: 1.34rem;
    height: 1.34rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-med);
}

.switch input:checked + .switch-ui {
    background: var(--green);
}

.switch input:checked + .switch-ui::after {
    transform: translateX(1.26rem);
}

.switch input:focus-visible + .switch-ui {
    outline: 3px solid var(--amber-strong);
    outline-offset: 2px;
}

.switch input:disabled + .switch-ui {
    opacity: .6;
}

/* --------------------------------------------------------------------------
   22. Status pages (thank you / 404)
   -------------------------------------------------------------------------- */

.status-page {
    text-align: center;
    padding-block: 3.5rem 4rem;
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    margin-bottom: 1.3rem;
    border-radius: 50%;
    font-size: 1.9rem;
    font-weight: 800;
}

.status-icon.success {
    background: var(--green-wash);
    color: var(--green);
    border: 2px solid #bfe5cc;
}

.status-icon svg.icon {
    width: 2rem;
    height: 2rem;
}

.status-page .eyebrow {
    justify-content: center;
}

.status-lead {
    max-width: 36rem;
    margin-inline: auto;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.status-notice {
    max-width: 34rem;
    margin: 2rem auto;
    padding: 1.6rem 1.5rem;
    text-align: center;
    background: var(--amber-wash);
    border: 1px solid #f3ddb0;
    border-radius: var(--radius-lg);
}

.status-notice h2 {
    font-size: 1.2rem;
}

.status-notice p {
    color: #6b4c10;
    font-size: .95rem;
}

.status-notice .btn {
    margin-top: .4rem;
}

.status-actions {
    justify-content: center;
    margin-top: 1.5rem;
}

.privacy-note {
    margin-top: 2rem;
    color: var(--ink-muted);
    font-size: .84rem;
}

.error-code {
    margin: 0 0 .5rem;
    font-size: clamp(4.5rem, 18vw, 8rem);
    font-weight: 860;
    font-stretch: var(--stretch-head);
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 2.5px var(--line-strong);
}

.status-link-grid {
    display: grid;
    gap: .9rem;
    margin: 2rem 0;
    text-align: left;
}

@media (min-width: 640px) {
    .status-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   23. Legal pages
   -------------------------------------------------------------------------- */

.legal-header {
    padding: 2.4rem 0 1.8rem;
    color: var(--ink-soft);
    background:
        radial-gradient(40rem 20rem at 80% -20%, rgba(255, 176, 32, .12) 0%, transparent 60%),
        linear-gradient(180deg, #eef7fa, var(--surface));
}

.legal-header h1 {
    color: var(--ink);
}

.legal-header .eyebrow {
    color: var(--blue);
}

.legal-header p:not(.eyebrow) {
    color: var(--ink-soft);
}

.legal-page {
    padding-top: 1.5rem;
}

.legal-layout {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .legal-layout {
        grid-template-columns: 17rem minmax(0, 1fr);
        gap: 4rem;
    }
}

.legal-toc {
    padding: 1.3rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

@media (min-width: 1024px) {
    .legal-toc {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
    }
}

.legal-toc h2 {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .78rem;
    font-stretch: var(--stretch-wide);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .7rem;
}

.legal-toc h2::before {
    content: '';
    width: 1rem;
    height: .22rem;
    border-radius: 2px;
    background: var(--amber);
    align-self: center;
    flex: none;
}

.legal-toc ol {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    font-size: .92rem;
}

.legal-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    text-decoration: none;
    font-weight: 580;
}

.legal-toc a:hover {
    text-decoration: underline;
}

.legal-content section {
    margin-bottom: 2.2rem;
}

.legal-content h2 {
    font-size: 1.35rem;
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.legal-table-wrap {
    overflow-x: auto;
    margin: 1.2rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.legal-table-wrap table {
    min-width: 34rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   24. Motion preferences & misc
   -------------------------------------------------------------------------- */

.intro-section {
    padding-top: 2.4rem;
}

.problem-strip {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .hero-ticker-track {
        animation: none;
        flex-wrap: wrap;
        width: auto;
    }
}

@media print {

    .site-header,
    .emergency-banner,
    .mobile-cta,
    .cookie-banner,
    .cookie-preferences,
    .final-cta,
    .hero-ticker,
    .skip-link {
        display: none !important;
    }

    body {
        padding-bottom: 0;
    }

    .hero,
    .article-header,
    .legal-header {
        color: #000;
        background: none;
    }
}