/* ==========================================================================
   Fast Junk Removal Experts — design system
   Mobile-first. One stylesheet, no framework, no build step.
   ========================================================================== */

:root {
    /* Brand */
    --green:        #16A34A;   /* accents, borders, icons */
    --green-dark:   #12833C;   /* 4.85:1 with white — safe for button text */
    --green-darker: #0E6B31;
    --green-light:  #E9F7EF;
    --navy:         #0F172A;
    --navy-soft:    #1E293B;
    --orange:       #F97316;
    --orange-dark:  #E2620B;

    /* Neutrals */
    --white:        #FFFFFF;
    --gray-50:      #F8FAFC;
    --gray-100:     #F1F5F9;
    --gray-200:     #E2E8F0;
    --gray-300:     #CBD5E1;
    --gray-500:     #64748B;
    --gray-600:     #475569;
    --gray-700:     #334155;

    /* Semantic */
    --text:         var(--navy);
    --text-muted:   var(--gray-600);
    --surface:      var(--white);
    --surface-alt:  var(--gray-50);
    --border:       var(--gray-200);

    /* Type scale */
    --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
    --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
    --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 1.85rem);
    --step-3:  clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
    --step-4:  clamp(2.1rem, 1.6rem + 2.5vw, 3.4rem);

    /* Space + shape */
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 10px 20px -8px rgba(15, 23, 42, 0.12);

    /* Mobile CTA bar height, reserved so nothing hides behind it */
    --mobile-cta-h: 68px;
}

/* --------------------------------------------------------------- Baseline */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    padding-bottom: var(--mobile-cta-h);
}

h1, h2, h3, h4 {
    margin: 0 0 0.6em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

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

a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

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

ul, ol { margin: 0 0 1.2em; padding-inline-start: 1.3em; }
li { margin-bottom: 0.4em; }

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

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--navy);
    color: var(--white);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
}
.skip-link:focus {
    inset-inline-start: 0.5rem;
    top: 0.5rem;
}

/* ---------------------------------------------------------------- Layout */

.container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }

.section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--band { background: var(--surface-alt); border-block: 1px solid var(--border); }
.section--center { text-align: center; }

.section__lede {
    max-width: 62ch;
    color: var(--text-muted);
    font-size: var(--step-1);
    margin-bottom: 2rem;
}

.subhead {
    margin-top: 2.5rem;
    font-size: var(--step-1);
}

.layout { padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }

.layout--sidebar { display: grid; gap: 2.5rem; }

@media (min-width: 62rem) {
    .layout--sidebar {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: start;
        gap: 3.5rem;
    }
    .layout__aside { position: sticky; top: 5.5rem; }
}

.prose > * + * { margin-top: 1.1em; }
.prose { font-size: var(--step-1); color: var(--gray-700); }
.prose--article h2 { margin-top: 2em; font-size: var(--step-2); color: var(--navy); }

.lede { font-size: var(--step-1); color: var(--text-muted); }
.note {
    font-size: var(--step--1);
    color: var(--text-muted);
    border-inline-start: 3px solid var(--green);
    padding-inline-start: 0.9rem;
}

/* ---------------------------------------------------------------- Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--navy);
    margin-inline-end: auto;
}
.brand__mark { display: flex; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; }
.brand__sub { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gray-500); }

.site-header__actions { display: none; gap: 0.5rem; }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 10px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.nav-toggle__bar {
    display: block;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------ Navigation */

/* Mobile: the panel is collapsed by default and opened by the toggle.
   Without JavaScript the [hidden] attribute is never applied, so the nav
   simply renders as a visible list — navigation still works. */
.primary-nav { width: 100%; }
.primary-nav[data-collapsed="true"] { display: none; }

.primary-nav__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.primary-nav__link {
    display: block;
    padding: 0.7rem 0.25rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-100);
}
.primary-nav__link.is-current { color: var(--green-dark); }

.nav-panel__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem 0.9rem;
}
.nav-panel__list a {
    display: block;
    padding: 0.4rem 0;
    color: var(--gray-600);
    text-decoration: none;
    font-size: var(--step--1);
}
.nav-panel__list a:hover { color: var(--green-dark); }
.nav-panel__all a { font-weight: 600; color: var(--green-dark); }

.primary-nav__item--cta { margin-top: 0.75rem; }

@media (min-width: 64rem) {
    .nav-toggle { display: none; }
    .site-header__actions { display: flex; }
    .primary-nav { width: auto; }
    .primary-nav[data-collapsed="true"] { display: block; }

    .primary-nav__list {
        flex-direction: row;
        align-items: center;
        gap: 0.15rem;
        padding: 0;
    }
    .primary-nav__link {
        padding: 0.5rem 0.7rem;
        border-bottom: 0;
        border-radius: var(--radius);
        font-size: 0.94rem;
    }
    .primary-nav__link:hover { background: var(--gray-100); }

    .primary-nav__item { position: relative; }
    .has-panel > .nav-panel {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        min-width: 15rem;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        padding: 0.5rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    }
    .has-panel:hover > .nav-panel,
    .has-panel:focus-within > .nav-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav-panel__list { padding: 0; }
    .nav-panel__list a { padding: 0.45rem 0.6rem; border-radius: 6px; }
    .nav-panel__list a:hover { background: var(--green-light); }
    .primary-nav__item--cta { display: none; } /* header CTA covers this on desktop */
}

/* --------------------------------------------------------------- Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-weight: 650;
    font-size: 0.97rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

/* White on --green is only 3.3:1 and white on --orange only 2.8:1, both below
   the 4.5:1 needed for normal-size text. The brand colours are kept exactly as
   specified and the TEXT colour is what changes: white on the darker green
   (4.85:1) and navy on orange (6.5:1). */
.btn--primary { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.btn--primary:hover { background: var(--green-darker); border-color: var(--green-darker); color: var(--white); }

.btn--accent { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.btn--accent:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--navy); }

.btn--outline { background: transparent; border-color: var(--gray-300); color: var(--navy); }
.btn--outline:hover { border-color: var(--navy); background: var(--gray-100); color: var(--navy); }

.btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--navy); padding-inline: 0.6rem; }
.btn--ghost:hover { background: var(--gray-100); color: var(--navy); }

.btn--link {
    background: none; border-color: transparent;
    color: var(--green-dark); text-decoration: underline; padding: 0.4rem;
}

.btn--sm { padding: 0.5rem 0.85rem; font-size: 0.88rem; }
.btn--lg { padding: 0.9rem 1.5rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; margin-bottom: 0.5rem; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 650;
    text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform 0.15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ Hero */

/* Inner-page hero. Light, to match the homepage design language. */
.hero {
    background: linear-gradient(165deg, #F2F9F4 0%, #EAF5EC 55%, #F8FAFC 100%);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
}
.hero__inner { display: grid; }
.hero__copy { max-width: 46rem; }

.hero__eyebrow {
    display: inline-block;
    margin: 0 0 0.9rem;
    padding: 0.35rem 0.8rem;
    background: var(--white);
    border: 1px solid #BBE7C8;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-dark);
}

.hero__title { color: var(--navy); margin-bottom: 0.5em; }

.hero__lede {
    font-size: var(--step-1);
    color: var(--text-muted);
    max-width: 58ch;
    margin-bottom: 1.75rem;
}

.hero__aside { font-size: var(--step--1); color: var(--text-muted); }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.hero--compact { padding-block: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
.hero--article { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

.article__meta { font-size: var(--step--1); color: var(--gray-500); margin: 0; }

/* Trust strip */
.trust-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
}
.trust-strip__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--gray-700);
}
.trust-strip__icon { color: var(--green-dark); flex: none; }

/* ----------------------------------------------------------------- Cards */

.cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
    .cards--service, .cards--area { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cards--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cards--article { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
    position: relative;
    margin: 0;
    padding: 1.35rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card__title { font-size: var(--step-1); margin-bottom: 0.4rem; }
.card__title a { color: var(--navy); text-decoration: none; }
.card__title a::after {
    /* Whole-card click target without nesting interactive elements. */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.card:hover .card__title a { color: var(--green-dark); }

.card__text { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.card__meta { margin: 0 0 0.35rem; font-size: 0.78rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.06em; }
.card__cue { display: block; margin-top: 0.9rem; color: var(--green-dark); font-weight: 700; }

.section--band .card { background: var(--white); }

/* Pills */
.pill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.pill-list li { margin: 0; }
.pill {
    display: inline-block;
    padding: 0.5rem 0.95rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    transition: all 0.15s ease;
}
.pill:hover { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }

/* --------------------------------------------------------------- Feature */

.feature-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.feature__title {
    font-size: var(--step-1);
    padding-top: 0.9rem;
    border-top: 3px solid var(--green);
}
.feature p { color: var(--text-muted); margin: 0; }

/* ----------------------------------------------------------------- Lists */

.list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.list li { margin-bottom: 0.55em; }

.list--check li {
    position: relative;
    padding-inline-start: 1.7rem;
}
.list--check li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.55em;
    width: 0.7rem;
    height: 0.4rem;
    border-inline-start: 2.5px solid var(--green);
    border-bottom: 2.5px solid var(--green);
    transform: rotate(-45deg);
}

.list--grid { display: grid; gap: 0.4rem 1.5rem; }
@media (min-width: 40rem) { .list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.list--grid li { position: relative; padding-inline-start: 1.1rem; }
.list--grid li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 0.7em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--orange);
}

.list--tight li { margin-bottom: 0.3em; padding-inline-start: 1.1rem; position: relative; }
.list--tight li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 0.7em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.list--links li { margin-bottom: 0.45em; }
.list--ordered { list-style: decimal; padding-inline-start: 1.3em; }
.list--ordered li { margin-bottom: 0.7em; }

/* ----------------------------------------------------------------- Steps */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.steps__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-dark);
    font-weight: 800;
    font-size: 0.95rem;
}
.steps__title { font-size: var(--step-1); margin-bottom: 0.25rem; }
.steps__item p { color: var(--text-muted); margin-bottom: 0.5rem; }

@media (min-width: 62rem) {
    .steps--horizontal {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
    .steps--horizontal .steps__item { flex-direction: column; gap: 0.75rem; margin-bottom: 0; }
}

.steps--detailed .steps__title { font-size: var(--step-2); }

/* -------------------------------------------------------------- Callouts */

.callout {
    margin: 1.5rem 0;
    padding: 1.15rem 1.35rem;
    border-radius: var(--radius);
    border-inline-start: 4px solid var(--green);
    background: var(--green-light);
}
.callout h3 { font-size: var(--step-0); margin-bottom: 0.5rem; }
.callout p { font-size: var(--step--1); color: var(--gray-700); }
.callout ul { margin-bottom: 0; font-size: var(--step--1); color: var(--gray-700); }
.callout--warn { border-left-color: var(--orange); background: #FFF7ED; }
.callout--info { border-left-color: var(--navy); background: var(--gray-50); }

/* ------------------------------------------------------------------- FAQ */

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
    padding: 1rem 2rem 1rem 0;
    font-weight: 650;
    font-size: var(--step-0);
    cursor: pointer;
    list-style: none;
    position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    position: absolute;
    inset-inline-end: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--green);
    line-height: 1;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:hover { color: var(--green-dark); }
.faq__a { padding: 0 2rem 1.1rem 0; color: var(--text-muted); }

/* -------------------------------------------------------------- Sidecard */

.sidecard {
    padding: 1.5rem;
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius-lg);
}
.sidecard__title { font-size: var(--step-1); color: var(--white); }
.sidecard__text { font-size: var(--step--1); color: #CBD5E1; margin-bottom: 1.1rem; }
.sidecard__hours {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: #94A3B8;
    text-align: center;
}
.sidecard .btn--outline { border-color: rgba(255,255,255,0.35); color: var(--white); }
.sidecard .btn--outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.sidecard .btn--link { color: #86EFAC; }

.sidecard--toc { background: var(--gray-50); color: var(--navy); border: 1px solid var(--border); }
.sidecard--toc .sidecard__title { color: var(--navy); font-size: var(--step-0); }
.toc { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.toc li { margin-bottom: 0.4rem; }
.toc a { font-size: var(--step--1); color: var(--gray-600); text-decoration: none; }
.toc a:hover { color: var(--green-dark); text-decoration: underline; }

/* -------------------------------------------------------------- CTA band */

.cta-band {
    background: linear-gradient(150deg, var(--navy) 0%, #143020 100%);
    color: var(--white);
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.cta-band__inner { display: grid; gap: 1.75rem; }
@media (min-width: 56rem) {
    .cta-band__inner { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; }
}
.cta-band__title { color: var(--white); font-size: var(--step-2); margin-bottom: 0.4em; }
.cta-band__text { color: #CBD5E1; margin: 0; }
.cta-band__actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.cta-band__alt { margin: 0.25rem 0 0; font-size: var(--step--1); color: #94A3B8; }
.cta-band__alt a { color: #86EFAC; }

/* ----------------------------------------------------------------- Forms */

.form { max-width: 40rem; margin-bottom: 3rem; }
.form__group {
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}
.form__legend {
    padding: 0;
    margin-bottom: 0.9rem;
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--navy);
}

.field { margin-bottom: 1.1rem; }
.field__label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.94rem; }
.field__optional { font-weight: 400; color: var(--gray-500); }
.req { color: var(--orange); }

.field__input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 1rem; /* 16px minimum stops iOS zooming on focus */
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field__input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
    outline: none;
}
.field__input--area { resize: vertical; min-height: 7rem; }

select.field__input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px;
    padding-inline-end: 2.4rem;
}

.field--check { display: flex; align-items: flex-start; gap: 0.6rem; }
.field--check input { margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--green); }
.field--check label { font-size: 0.94rem; }

.field--error .field__input { border-color: #DC2626; }
.field__error { margin: 0.35rem 0 0; font-size: 0.86rem; color: #B91C1C; font-weight: 600; }
.field__hint { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--gray-500); }

.form__actions { margin-top: 2rem; }
.form__privacy { margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--gray-500); }

.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.75rem;
}
.alert--error { background: #FEF2F2; border-inline-start: 4px solid #DC2626; }
.alert__title { font-size: var(--step-0); margin-bottom: 0.3rem; color: #991B1B; }
.alert p { margin: 0; font-size: 0.94rem; color: #7F1D1D; }

/* The honeypot must be unreachable rather than merely invisible. */
.hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------- Misc content */

.thanks { text-align: center; padding-block: 1.5rem; }
.thanks__icon { margin-bottom: 1rem; }
.thanks__lede { font-size: var(--step-1); color: var(--text-muted); max-width: 45ch; margin-inline: auto; }
.thanks__next {
    margin: 2.5rem auto;
    max-width: 34rem;
    text-align: start;
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.thanks__next h2 { font-size: var(--step-1); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.5rem; }
.thanks__back { font-size: var(--step--1); color: var(--text-muted); }

.error-code {
    font-size: clamp(3rem, 2rem + 6vw, 5.5rem);
    font-weight: 800;
    color: var(--gray-200);
    line-height: 1;
    margin: 0 0 0.5rem;
}
.error-cols { display: grid; gap: 2rem; margin-block: 2rem; }
@media (min-width: 40rem) { .error-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.error-cols h2 { font-size: var(--step-1); }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.contact-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.contact-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    display: flex;
    flex-direction: column;
}
.contact-card__title { font-size: var(--step-1); }
.contact-card p { font-size: var(--step--1); color: var(--text-muted); flex: 1; }
.contact-card__meta { margin-top: 0.5rem; font-size: 0.82rem; color: var(--gray-500); flex: none; }

.article-related {
    margin-block: 3rem;
    padding: 1.75rem;
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.article-related h2 { font-size: var(--step-1); }
.article-related h3 { font-size: var(--step-0); }
.article-related__cols { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .article-related__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----------------------------------------------------------- Breadcrumbs */

.breadcrumbs { padding-block: 0.85rem; border-bottom: 1px solid var(--border); background: var(--white); }
.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.breadcrumbs__item { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs__item a { color: var(--gray-500); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--green-dark); text-decoration: underline; }
.breadcrumbs__item [aria-current] { color: var(--navy); font-weight: 600; }
.breadcrumbs__sep { color: var(--gray-300); }

/* ---------------------------------------------------------------- Footer */

.site-footer { background: var(--navy); color: #CBD5E1; padding-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.site-footer__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; } }

.site-footer__name { font-size: var(--step-1); font-weight: 800; color: var(--white); margin-bottom: 0.5rem; }
.site-footer__blurb { font-size: var(--step--1); max-width: 34ch; }
.site-footer__heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--white); margin-bottom: 0.9rem; }

.site-footer__links, .site-footer__contact, .site-footer__social, .site-footer__legal {
    list-style: none; margin: 0; padding: 0;
}
.site-footer__links li, .site-footer__contact li { margin-bottom: 0.5rem; font-size: var(--step--1); }
.site-footer a { color: #CBD5E1; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__contact { margin-top: 1.1rem; }
.site-footer__contact a { font-weight: 600; color: var(--white); }
.site-footer__hours { color: #94A3B8; }
.site-footer__address address { font-style: normal; color: #CBD5E1; }
.site-footer__hours-note { display: block; font-size: 0.78rem; opacity: 0.8; }
.address { font-style: normal; }
.site-footer__social { display: flex; gap: 1rem; margin-top: 0.9rem; font-size: var(--step--1); }

.site-footer__bar {
    margin-top: 2.5rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.82rem;
}
.site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }
.site-footer__bar p { margin: 0; }
.site-footer__legal { display: flex; gap: 1.25rem; }

/* ------------------------------------------------------------ Mobile CTA */

/**
 * Two floating pills rather than a segmented strip.
 *
 * The old bar was three flat cells divided by hairlines, which read as a
 * browser toolbar rather than as part of the site. This lifts the actions off
 * the bottom edge, gives each a filled pill with a glyph in its own translucent
 * badge, and states what the tap does on a second line — so the bar looks like
 * the rest of the design instead of like chrome bolted underneath it.
 */
.mobile-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 -6px 24px -8px rgba(15, 23, 42, 0.18);
}

.mobile-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--white);
    /* A single flat fill looks printed on; the gradient plus the inner
       highlight is what gives the pill a surface. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 12px -4px rgba(15, 23, 42, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mobile-cta__btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 6px -3px rgba(15, 23, 42, 0.35);
}

.mobile-cta__btn--call { background: linear-gradient(180deg, #1B2A46 0%, var(--navy) 100%); }
/* WhatsApp's own green, so the button is recognised before it is read. */
.mobile-cta__btn--wa   { background: linear-gradient(180deg, #29C765 0%, #1DA851 100%); }

.mobile-cta__icon {
    display: grid;
    place-items: center;
    width: 2rem; height: 2rem;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}
.mobile-cta__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mobile-cta__label { font-size: 0.87rem; font-weight: 750; letter-spacing: -0.01em; }
.mobile-cta__sub {
    font-size: 0.66rem;
    font-weight: 500;
    opacity: 0.82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Below this the number and "Send photos" crowd the glyph, so drop to the
   label alone rather than letting the pills wrap. */
@media (max-width: 22.5rem) {
    .mobile-cta__sub { display: none; }
    .mobile-cta__label { font-size: 0.92rem; }
}

@media (min-width: 64rem) {
    .mobile-cta { display: none; }
    body { padding-bottom: 0; }
}

/* ------------------------------------------------------------ Preferences */

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

@media print {
    .site-header, .mobile-cta, .cta-band, .site-footer, .breadcrumbs, .layout__aside { display: none; }
    body { padding-bottom: 0; color: #000; }
    .hero { background: none; color: #000; padding-block: 1rem; }
    .hero__title, .hero__lede { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   HOMEPAGE DESIGN SYSTEM
   Components introduced by the supplied homepage design. Shared pieces
   (topbar, header CTA, footer) apply site-wide so inner pages stay coherent.
   ========================================================================== */

/* ---------------------------------------------------------------- Topbar */

.topbar {
    /* --green-darker, not --green-dark: #E6F6EC on the lighter green measured
       4.32:1, below AA for text this small. */
    background: var(--green-darker);
    color: var(--white);
    font-size: 0.79rem;
}
.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    min-height: 2.4rem;
    padding-block: 0.4rem;
}
.topbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topbar__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 600;
}
.topbar__tick { color: #86EFAC; flex: none; }

.topbar__social { display: flex; align-items: center; gap: 0.6rem; }
.topbar__social-label { opacity: 0.85; }
.topbar__social-list { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.topbar__social-list li { margin: 0; }
.topbar__social-list a {
    display: grid;
    place-items: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}
.topbar__social-list a:hover { background: rgba(255, 255, 255, 0.3); color: var(--white); }

/* Desktop: the static row of three from the reference. The extra claims and
   the whole second pass exist only for the phone marquee below. */
.topbar__rail { min-width: 0; }
.topbar__item--extra,
.topbar__item--dupe { display: none; }
.topbar__phone { display: none; }

/**
 * Phone: the bar scrolls instead of being cut off.
 *
 * Three claims cannot sit side by side at this width, so the previous rule
 * simply hid everything past the second one — the bar showed one and a half
 * claims and looked truncated. It now runs as a continuous left-to-right
 * marquee carrying every claim, with the number pinned beside it.
 *
 * The number is here because .header-cta is desktop-only, so without it the
 * phone number does not appear anywhere above the fold on a phone.
 */
@media (max-width: 63.99rem) {
    .topbar__social { display: none; }

    .topbar__inner {
        flex-wrap: nowrap;
        gap: 0.75rem;
        justify-content: flex-start;
    }

    .topbar__rail {
        flex: 1 1 auto;
        overflow: hidden;
        /* Fade both ends so claims enter and leave rather than being clipped. */
        -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }

    .topbar__item--extra,
    .topbar__item--dupe { display: flex; }

    .topbar__list {
        flex-wrap: nowrap;
        width: max-content;
        /* Spacing as a right margin rather than as a gap: the loop translates
           by exactly -50%, which only lands seamlessly when every item —
           including the last of each pass — carries its own trailing space. A
           column-gap would leave the two passes half a gap out of step. */
        gap: 0;
        animation: topbar-marquee 26s linear infinite;
    }
    .topbar__item { margin-inline-end: 1.6rem; white-space: nowrap; }

    .topbar__phone {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex: none;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        color: var(--white);
        font-weight: 700;
        font-size: 0.76rem;
        white-space: nowrap;
        text-decoration: none;
    }
    .topbar__phone:hover, .topbar__phone:focus-visible { background: rgba(255, 255, 255, 0.3); color: var(--white); }
}

/* On the narrowest phones the number leaves the rail barely a word wide, so
   both sides give a little. */
@media (max-width: 22.5rem) {
    .topbar { font-size: 0.72rem; }
    .topbar__phone { font-size: 0.7rem; padding: 0.18rem 0.45rem; }
    .topbar__item { margin-inline-end: 1.2rem; }
}

@keyframes topbar-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* The blanket reduced-motion reset flattens every animation to 0.01ms, which
   would leave the marquee parked mid-loop with claims cut in half. Slow it
   right down instead, as with the services slider. */
@media (max-width: 63.99rem) and (prefers-reduced-motion: reduce) {
    .topbar__list {
        animation-duration: 90s !important;
        animation-iteration-count: infinite !important;
        animation-name: topbar-marquee !important;
    }
}

/* ------------------------------------------------------------ Header CTA */

/* Constrain by height so any logo aspect ratio fits the header band. */
.brand__logo { display: block; height: 53px; width: auto; }
@media (max-width: 25rem) { .brand__logo { height: 44px; } }
.brand__name { display: block; }
.brand__name em { font-style: normal; color: var(--green-dark); }

.header-cta {
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem 0.55rem 0.6rem;
    background: var(--green-dark);
    border-radius: 999px;
    color: var(--white);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.header-cta:hover { background: var(--green-darker); color: var(--white); }
.header-cta__icon {
    display: grid;
    place-items: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex: none;
}
.header-cta__text { display: flex; flex-direction: column; line-height: 1.15; }
.header-cta__label { font-size: 0.68rem; opacity: 0.9; }
.header-cta__number { font-size: 0.94rem; font-weight: 750; white-space: nowrap; }

@media (min-width: 64rem) { .header-cta { display: inline-flex; } }

/* ------------------------------------------------------- Shared bits (v2) */

/* Green text sits on white AND on the pale green/blue section tints, where
   --green-dark measures 4.33-4.38:1 — just under AA. --green-darker clears AA
   on every background this design uses. */
.accent { color: var(--green-darker); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding: 0.32rem 0.8rem;
    background: var(--green-light);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--green-darker);
}

.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.1rem;
    padding: 0.4rem 0.9rem;
    background: var(--white);
    border: 1px solid #BBE7C8;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--green-darker);
    box-shadow: var(--shadow-sm);
}

.section-head {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.25rem;
}
.section-head__title { margin-bottom: 0.35em; font-size: var(--step-3); }
.section-head__lede { margin: 0; color: var(--text-muted); max-width: 52ch; }

@media (min-width: 56rem) {
    .section-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 2rem;
    }
}

.icon { display: block; }

.btn--white { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--gray-100); border-color: var(--gray-100); color: var(--navy); }

.btn--outline-dark { background: var(--white); border-color: var(--gray-300); color: var(--navy); }
.btn--outline-dark:hover { background: var(--white); border-color: var(--navy); color: var(--navy); }

.btn__icon { display: inline-grid; place-items: center; }

/* ------------------------------------------------------------------ Hero */

.hero-v2 {
    position: relative;
    background: linear-gradient(165deg, #F4FAF6 0%, #EAF5EC 60%, #F8FAFC 100%);
    padding-block: clamp(2rem, 1.2rem + 4vw, 4rem);
    overflow: hidden;
}
.hero-v2__inner { display: grid; gap: 2.5rem; align-items: center; }

.hero-v2__title {
    margin-bottom: 0.45em;
    font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--navy);
}
.hero-v2__title-accent { display: block; color: var(--green-darker); }

.hero-v2__lede {
    max-width: 44ch;
    margin-bottom: 1.75rem;
    font-size: var(--step-1);
    color: var(--text-muted);
}

.hero-v2__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }

.hero-v2__proof { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.hero-v2__proof-count, .hero-v2__proof-rating { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.hero-v2__proof-count strong { color: var(--navy); font-size: 1.05rem; }
.hero-v2__note { margin: 0; font-size: var(--step--1); color: var(--text-muted); max-width: 46ch; }

.hero-v2__media { position: relative; }
.hero-v2__media img, .hero-illus {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.hero-v2__chip {
    position: absolute;
    top: 6%;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.7rem 1rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.hero-v2__chip-value { font-size: 1.4rem; font-weight: 800; color: var(--green-darker); line-height: 1; }
.hero-v2__chip-label { font-size: 0.7rem; color: var(--text-muted); line-height: 1.25; margin-top: 0.2rem; }

@media (min-width: 56rem) {
    .hero-v2__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; }
}

/* ---------------------------------------------- Hero with a background photo

   The supplied photograph is the background of the whole section, with the
   copy sitting on top of it. A scrim is layered over the image so the text
   keeps its contrast: dark navy on a bare photo is not reliably readable, and
   the left of this image has a textured pile of furniture in it.

   The scrim is white rather than black because the design's type is dark. It
   is strongest on the left, where the words are, and clears by the middle so
   the truck and crew on the right stay visible.
   -------------------------------------------------------------------------- */

.hero-v2--photo {
    background-color: #EAF5EC;
    /* Mobile first: the smaller file. Swapped for the full-resolution one at
       the desktop breakpoint below. */
    background-image: var(--hero-bg-sm, var(--hero-bg));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 70% center;
}

.hero-v2--photo .hero-v2__inner {
    display: block;           /* single column: the photo is no longer a column */
    position: relative;
    z-index: 1;
}

.hero-v2--photo .hero-v2__copy {
    max-width: 34rem;
}

/**
 * Mobile first.
 *
 * `cover` on a phone-shaped box scaled the 1.87:1 photograph until only a
 * slice of the truck's flank was in frame, and the wash that keeps the
 * headline readable then sat over the whole height at 0.93 — so the picture
 * read as a smudge behind the text rather than as a photograph.
 *
 * Anchoring it to the bottom edge and sizing it by width instead gives the
 * photo a band of its own beneath the buttons. The wash is heavy over the
 * copy and clears completely before the band starts, so the truck and crew
 * are actually visible.
 */
.hero-v2--photo {
    position: relative;
    min-height: 26rem;
    display: flex;
    align-items: center;

    /**
     * The whole photograph, at full width, in a band of its own.
     *
     * Anything above 100% crops it — at 175% the truck's cab ran off the left
     * edge and only one of the two crew was in frame. Sizing it to 100% of the
     * section shows every part of the picture; the band is then exactly as tall
     * as the photograph's own aspect ratio makes it (1408x752, so 53.4% of the
     * width), and the reserved padding matches.
     */
    --hero-band: 53.5vw;
    /* Sized by the band's height rather than by width, so the band is always
       filled edge to edge. Sizing by width leaves a sliver of bare section
       colour above the picture wherever a scrollbar makes vw wider than the
       section; sizing by height instead trims a fraction of a percent off the
       sides, which is invisible. */
    background-size: auto var(--hero-band);
    background-position: center bottom;
    padding-bottom: var(--hero-band);
}

/**
 * The wash covers only the copy, never the band.
 *
 * Stopping the scrim short of the photo — rather than fading it out at some
 * percentage of the hero's height — is what keeps this correct at every width.
 * The hero grows and shrinks with the copy, so a percentage stop that cleared
 * the picture on a phone sat right across it on a tablet. Ending the element
 * where the band begins ties the two together whatever the copy does.
 */
.hero-v2--photo::before {
    content: "";
    position: absolute;
    inset: 0 0 var(--hero-band) 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.95) calc(100% - 7rem),
        rgba(255, 255, 255, 0.55) calc(100% - 2.5rem),
        rgba(255, 255, 255, 0) 100%
    );
}

@media (min-width: 56rem) {
    /* Wide enough for the copy to occupy the left half only, so the scrim runs
       left-to-right and the right half of the photograph is left alone. */
    .hero-v2--photo {
        min-height: 34rem;
        background-image: var(--hero-bg);
        background-size: cover;
        background-position: right center;
        /* Back to the section's own rhythm: the photo fills the frame here, so
           it needs no band of its own, and the scrim runs the full height. */
        --hero-band: 0px;
        padding-bottom: clamp(2rem, 1.2rem + 4vw, 4rem);
    }
    .hero-v2--photo::before {
        inset: 0;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.95) 30%,
            rgba(255, 255, 255, 0.82) 47%,
            rgba(255, 255, 255, 0.30) 61%,
            rgba(255, 255, 255, 0) 74%
        );
    }
}

@media (min-width: 80rem) {
    .hero-v2--photo { min-height: 38rem; }
}

/* Years-of-experience line, shown inline when the photo replaces the chip. */
.hero-v2__years {
    margin: 1rem 0 0;
    font-size: var(--step--1);
    color: var(--text-muted);
}
.hero-v2__years strong { color: var(--green-darker); font-size: 1.05rem; }

/* ---------------------------------------------------------- Feature strip */

.strip { padding-block: 0; }

/* The raised card. The list inside it is a grid here and a marquee on a phone,
   so the card carries the surface and the list carries only the layout. */
.strip__card {
    /* Clear of the hero on a phone. The card only laps over the hero once the
       Google badge has moved out of the flow and onto the photograph, which
       happens at 56rem; below that the two cards were touching edge to edge. */
    margin: 1.25rem 0 0;
    padding: 1.4rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 2;
}
.strip__rail { min-width: 0; }
.strip__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.strip__item { display: flex; align-items: center; gap: 0.65rem; margin: 0; }
/* The second pass exists only for the phone marquee. Declared after
   .strip__item, not before it: both are single-class selectors, so source
   order is what decides which display wins. */
.strip__item--dupe { display: none; }
.strip__icon {
    display: grid;
    place-items: center;
    width: 2.4rem; height: 2.4rem;
    flex: none;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-darker);
}
.strip__text { display: flex; flex-direction: column; line-height: 1.25; }
.strip__text strong { font-size: 0.9rem; color: var(--navy); }
.strip__text span { font-size: 0.8rem; color: var(--text-muted); }

/* From here the Google badge is absolutely positioned over the photo, so the
   card can lift onto the hero as the design has it. */
@media (min-width: 56rem) { .strip__card { margin-top: -2.5rem; } }

/**
 * Phone: the five items run past instead of stacking.
 *
 * `auto-fit` gave one column at this width, so the card grew into a tall
 * five-row block that pushed the services section most of a screen down. As a
 * marquee it stays one row tall and still shows everything.
 */
@media (max-width: 47.99rem) {
    .strip__rail {
        overflow: hidden;
        /* The mask sits on the rail, not the card — on the card it would fade
           the border and the shadow along with the contents. */
        -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }

    .strip__list {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        /* Spacing as a right margin, not a gap: the loop translates by exactly
           -50%, which only closes seamlessly when the last item of each pass
           carries its trailing space too. */
        gap: 0;
        animation: strip-marquee 34s linear infinite;
    }
    .strip__item { flex: none; margin-inline-end: 2rem; white-space: nowrap; }
    .strip__item--dupe { display: flex; }
}

@keyframes strip-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* As with the other marquees: the blanket reduced-motion reset would park the
   track mid-loop with an item cut in half, so slow it rather than stop it. */
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
    .strip__list {
        animation-duration: 120s !important;
        animation-iteration-count: infinite !important;
        animation-name: strip-marquee !important;
    }
}

/* -------------------------------------------------------------- Services */

.svc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 34rem) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .svc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }

.svc-card {
    position: relative;
    margin: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.svc-card:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* The badge overhangs the bottom edge of the image, so the media block itself
   must not clip. The inner wrapper does the cropping instead. */
.svc-card__media { position: relative; }
.svc-card__img { aspect-ratio: 4 / 3; background: var(--gray-100); overflow: hidden; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card__placeholder {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    background: linear-gradient(150deg, var(--green-light), var(--gray-100));
    color: var(--green-dark);
}
.svc-card__placeholder .icon { width: 40px; height: 40px; }

/* Anchored to the image, not to a percentage of the card: card heights vary
   with the length of the text, and a percentage put the badge on the copy. */
.svc-card__badge {
    position: absolute;
    bottom: -1.35rem;
    inset-inline-start: 1rem;
    display: grid;
    place-items: center;
    width: 2.7rem; height: 2.7rem;
    border-radius: 50%;
    background: var(--green-dark);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}
.svc-card__badge .icon { width: 18px; height: 18px; }

.svc-card__body { padding: 2.1rem 1.1rem 1.25rem; }
.svc-card__title { margin-bottom: 0.35rem; font-size: 1.02rem; line-height: 1.25; }
.svc-card__title a { color: var(--navy); text-decoration: none; }
.svc-card__title a::after { content: ""; position: absolute; inset: 0; }
.svc-card:hover .svc-card__title a { color: var(--green-dark); }
.svc-card__text { margin: 0; font-size: 0.84rem; color: var(--text-muted); }

/* --------------------------------------------------------- How it works */

.process {
    background: linear-gradient(180deg, #EDF6EF 0%, #E6F3EA 100%);
    padding-block: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
}
.process__inner { display: grid; gap: 1.25rem; align-items: end; }
.process__media { align-self: end; }
.process__media img { display: block; width: 100%; height: auto; }
/* Transparent cut-out: let it overhang the section padding so the figure
   stands on the floor of the band instead of floating in a box. */
@media (min-width: 62rem) {
    .process__media { margin-bottom: clamp(-2.75rem, -2.2vw, -1.75rem); }
}

@media (min-width: 62rem) {
    .process__inner { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
}

.steps-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 44rem) { .steps-v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.steps-v2__item {
    position: relative;
    margin: 0;
    padding: 1.5rem 1.15rem 1.25rem;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.steps-v2__num {
    position: absolute;
    top: 0.7rem; right: 1rem;
    font-size: 2.1rem;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.07);
    line-height: 1;
}
.steps-v2__icon {
    display: grid;
    place-items: center;
    width: 3rem; height: 3rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-darker);
}
.steps-v2__icon .icon { width: 22px; height: 22px; }
.steps-v2__title { margin-bottom: 0.3rem; font-size: 1rem; }
.steps-v2__item p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* ------------------------------------------------------------ Why choose */

/* Two columns only when there is actually a graphic to sit in the second one,
   otherwise the section renders with a large empty half. */
.why__inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
    .why__inner--media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; }
}
.why__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 1.25rem 1rem;
    list-style: none;
    margin: 1.75rem 0;
    padding: 0;
}
.stats__item { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; }
.stats__icon {
    display: grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius);
    background: var(--green-light);
    color: var(--green-darker);
}
.stats__icon .icon { width: 20px; height: 20px; }
.stats__value { font-size: 1.5rem; font-weight: 800; color: var(--green-darker); line-height: 1.1; }
.stats__label { font-size: 0.76rem; color: var(--text-muted); line-height: 1.3; margin-top: 0.15rem; }

.why__points { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .why__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why__point h3 { font-size: 1rem; margin-bottom: 0.25rem; padding-top: 0.75rem; border-top: 3px solid var(--green); }
.why__point p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }

/* ---------------------------------------------------------- Service areas */

.areas {
    background: linear-gradient(180deg, #EAF3FB 0%, #F4FAF6 100%);
    padding-block: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
    text-align: center;
}

/* With the supplied skyline photo behind it. The image is anchored to the
   bottom and a light gradient is laid over the top half, so the headline and
   pills keep their contrast instead of competing with the buildings. */
.areas--photo {
    position: relative;
    background-image:
        linear-gradient(180deg, #EAF3FB 0%, rgba(234, 243, 251, 0.96) 38%, rgba(240, 247, 250, 0.62) 58%, rgba(244, 250, 246, 0.12) 82%, rgba(244, 250, 246, 0) 100%),
        var(--areas-bg-sm, var(--areas-bg));
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: cover, 100% auto;
    /* Enough beneath the pills for the skyline to read as a horizon, without
       leaving the section over-tall. */
    padding-bottom: clamp(3.5rem, 2rem + 6vw, 6rem);
}

@media (min-width: 48rem) {
    /* Full-resolution panorama only where the width justifies the bytes. */
    .areas--photo {
        background-image:
            linear-gradient(180deg, #EAF3FB 0%, rgba(234, 243, 251, 0.96) 38%, rgba(240, 247, 250, 0.62) 58%, rgba(244, 250, 246, 0.12) 82%, rgba(244, 250, 246, 0) 100%),
            var(--areas-bg);
    }
}

@media (max-width: 47.99rem) {
    /* On narrow screens the panorama is too wide to read as a skyline, and it
       pushes the pills down. Scale it up and keep it as a subtle base. */
    .areas--photo { background-size: cover, 180% auto; }
}
.areas__title { font-size: var(--step-3); margin-bottom: 0.3em; }
.areas__lede { margin: 0 auto 1.35rem; color: var(--text-muted); max-width: 44ch; }
.areas__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}
.areas__pills li { margin: 0; }
.areas__more { margin: 0; }

.area-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.15rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--navy);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.15s ease;
}
.area-pill:hover { border-color: var(--green); color: var(--green-dark); transform: translateY(-2px); }
.area-pill__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); flex: none; }

/* -------------------------------------------------------------- Callband */

.callband { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.callband__inner {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: linear-gradient(120deg, var(--green-dark) 0%, #157A38 60%, #0E6B31 100%);
    border-radius: var(--radius-lg);
    color: var(--white);
}
@media (min-width: 56rem) {
    .callband__inner { grid-template-columns: minmax(0, 1.3fr) auto; gap: 2.5rem; }
}
.callband__title { color: var(--white); font-size: var(--step-2); margin-bottom: 0.35em; }
.callband__text { margin: 0; color: #DCFCE7; max-width: 46ch; }
.callband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.callband__phone {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 1.35rem;
    background: var(--white);
    border-radius: var(--radius);
    text-decoration: none;
    line-height: 1.2;
}
.callband__phone-label { font-size: 0.72rem; color: var(--text-muted); }
.callband__phone-number { font-size: 1.12rem; font-weight: 800; color: var(--green-darker); white-space: nowrap; }
.callband__phone:hover .callband__phone-number { color: var(--green-darker); }

/* ------------------------------------------------------------ Footer (v2) */

.site-footer__name .accent { color: #86EFAC; }
.site-footer__name-sub { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #94A3B8; }
.site-footer__logo { display: block; height: 85px; width: auto; margin-bottom: 1rem; }

.site-footer__contact { list-style: none; margin: 0; padding: 0; }
.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-size: var(--step--1);
}
.site-footer__ci { color: var(--green); flex: none; margin-top: 0.1rem; }
.site-footer__ci .icon { width: 17px; height: 17px; }
.site-footer__contact address { font-style: normal; }

.site-footer__social { display: flex; gap: 0.5rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.site-footer__social li { margin: 0; }
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}
.site-footer__social a:hover { background: var(--green-dark); color: var(--white); }

@media (min-width: 64rem) {
    .site-footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.3fr; }
}

/* ---------------------------------------------------------------- To top */

.to-top {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: calc(var(--mobile-cta-h) + 1rem);
    z-index: 55;
    display: grid;
    place-items: center;
    width: 2.75rem; height: 2.75rem;
    background: var(--green-dark);
    color: var(--white);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    font-size: 1.1rem;
    cursor: pointer;
}
.to-top:hover { background: var(--green-darker); }
@media (min-width: 64rem) { .to-top { bottom: 1.5rem; } }

/* ------------------------------------------------- Hero proof badges (art)

   Supplied as artwork rather than composed from data, so they are placed the
   way the design shows them: the customer strip under the buttons on the left,
   the Google card sitting bottom-right over the photograph.
   -------------------------------------------------------------------------- */

.hero-v2__proof-img { margin: 0.25rem 0 0; }
.hero-v2__proof-img img {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: auto;
}

.hero-v2__google {
    margin-top: 1.5rem;
    padding: 0.85rem 1.15rem;
    /* Solid, not translucent: the badge PNG has a transparent interior (its
       own white card was removed with the checkerboard), so anything less than
       opaque lets the photograph bleed through the card. */
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    width: fit-content;
}
.hero-v2__google img {
    display: block;
    width: 100%;
    max-width: 13.5rem;
    height: auto;
}

@media (min-width: 56rem) {
    .hero-v2__proof-img img { max-width: 22rem; }

    /* Over the photo, clear of the copy column. */
    .hero-v2--photo .hero-v2__google {
        position: absolute;
        inset-inline-end: max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter)));
        bottom: 2rem;
        margin-top: 0;
        z-index: 2;
    }
    .hero-v2--photo .hero-v2__google img { max-width: 15rem; }
}

/* ------------------------------------------ "Why Dubai Trusts" (to artwork)

   Laid out to the supplied reference: heading over a single row of five stats
   on the left, the award graphic on the right.
   -------------------------------------------------------------------------- */

/* Tighter than the default .section rhythm, to the supplied reference. */
.why { padding-block: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); }

.why__title {
    font-size: var(--step-3);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

/* Five across from the tablet breakpoint up, as in the reference. Below that
   they run as a marquee instead — see .stats-rail further down. */
.stats--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.75rem;
    margin-top: 0;
}
@media (min-width: 30rem) { .stats--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .stats--row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The second pass exists only for the phone marquee. */
.stats__item--dupe { display: none; }

/* Bare icon, no tile and no circle behind it — the reference has the glyph
   sitting directly on the page. */
.stats--row .stats__icon {
    width: 2.1rem;
    height: 2.1rem;
    background: none;
    border: 0;
    border-radius: 0;
    margin-bottom: 0.6rem;
    color: var(--green-darker);
}
.stats--row .stats__icon .icon {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}
.stats--row .stats__item:hover .stats__icon { box-shadow: none; }

/* Black, like the labels beneath them. Green on green-tinted stock read as a
   second accent competing with the heading; the figures carry more weight in
   black and leave the icons as the only colour in the row. */
.stats--row .stats__value {
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    letter-spacing: -0.02em;
    color: var(--navy);
}

/**
 * Labels in black, and reserved for two lines.
 *
 * The captions are naturally one or two lines depending on wording, which left
 * the row sitting on a ragged baseline. Constraining the width wraps the short
 * ones and the min-height holds the space, so all five align whatever they say.
 */
.stats--row .stats__label {
    /* Narrow enough that every caption wraps to two lines — "Years of
       experience" and "Available for you" would otherwise sit on one and the
       row would read unevenly. min-height holds the space either way. */
    max-width: 5.6rem;
    color: var(--navy);
    min-height: 2.6em;
}

.why .stats { margin: 1.4rem 0 0; }

/**
 * Phone: the five figures run as a marquee rather than wrapping.
 *
 * At this width the grid broke into 3 + 2, which left the last row half empty
 * and pushed the section a long way down the page. Running them past instead
 * keeps the block one row tall and shows all five without scrolling.
 *
 * Desktop is untouched: above 48rem the rail is inert and the grid applies.
 */
@media (max-width: 47.99rem) {
    /* Grid items default to min-width:auto, so without this the max-content
       track inside the rail widens .why__copy and the whole section scrolls
       sideways instead of the rail masking it. */
    .why__inner, .why__copy { min-width: 0; }

    .stats-rail {
        max-width: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
                mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    }

    .why .stats--row {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        /* Spacing as a right margin, not a gap: the loop translates by exactly
           -50%, which only lands seamlessly when the last item of each pass
           carries its own trailing space too. */
        gap: 0;
        margin: 1.4rem 0 0;
        animation: stats-marquee 30s linear infinite;
    }

    .stats--row .stats__item {
        flex: 0 0 6.5rem;
        margin-inline-end: 1.25rem;
    }
    .stats__item--dupe { display: flex; }

    /* The reveal stagger fires per item; across ten of them on a moving track
       it reads as flicker, so the row simply appears. */
    .js-reveal .stats--row > * { opacity: 1; transform: none; transition: none; }
}

@keyframes stats-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* As with the services slider: the blanket reduced-motion reset would park the
   track mid-loop with a figure cut in half, so slow it rather than stop it. */
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
    .why .stats--row {
        animation-duration: 100s !important;
        animation-iteration-count: infinite !important;
        animation-name: stats-marquee !important;
    }
}

/* The artwork is a transparent cut-out, so it needs no card and no radius — it
   sits directly on the section. The one mask is a short fade on the bottom
   edge, where the ground was cropped away, so it settles into the page rather
   than ending on a hard line. */
.why__media img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

@media (min-width: 62rem) {
    .why__inner--media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 2rem; }
}

/* Announcement bar to the supplied reference: per-item icons on the left,
   brand marks on the right. */
.topbar__icon { display: flex; flex: none; color: #86EFAC; }
.topbar__icon .icon { width: 14px; height: 14px; stroke-width: 2; }
.topbar__social-list a .icon { width: 15px; height: 15px; stroke-width: 1.6; }
.topbar__social-list a {
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(255, 255, 255, 0.14);
}
.topbar__social-list a:hover { background: rgba(255, 255, 255, 0.32); }

/* ==========================================================================
   SERVICES SLIDER
   A continuous left-to-right marquee. The track holds the list twice and is
   translated by exactly -50%, so the duplicate arrives where the original
   started and the loop has no visible seam.

   Duplicated cards carry aria-hidden and tabindex="-1" in the markup, so a
   screen reader hears each service once and tabbing does not land on a copy.
   ========================================================================== */

.svc-slider {
    position: relative;
    overflow: hidden;
    /* Fade the edges so cards enter and leave rather than being cut off. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.svc-slider__track {
    display: flex;
    /* Spacing as a right margin on the cards rather than as a column-gap.
       The loop translates by exactly -50%, which is one full pass *including*
       its trailing space — with a gap the last card of a pass has none, so the
       two passes sat half a gap out of step and the loop visibly jumped. */
    gap: 0;
    width: max-content;
    margin: 0;
    padding: 0.5rem 0 1.25rem;
    list-style: none;
    animation: svc-marquee 60s linear infinite;
}

/* Pause where someone is reading, or tabbing through. */
.svc-slider:hover .svc-slider__track,
.svc-slider:focus-within .svc-slider__track {
    animation-play-state: paused;
}

.svc-slider .svc-card {
    flex: 0 0 clamp(15rem, 40vw, 17.5rem);
    margin: 0 1rem 0 0;
}

@keyframes svc-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.svc-slider__hint { margin: 0.5rem 0 0; }

/**
 * Reduced motion.
 *
 * The earlier version stopped the marquee entirely here, which on a machine
 * with Windows animation effects switched off left a bare scrollbar where the
 * slider should be — it read as broken rather than as a considered fallback.
 *
 * The slider now keeps moving, but far slower, and there is an explicit pause
 * control beside it. WCAG 2.2.2 asks that auto-moving content can be paused,
 * not that it never moves; a visible pause button satisfies that for everyone,
 * including people who never match this media query.
 */
@media (prefers-reduced-motion: reduce) {
    /* !important is needed to beat the blanket reduced-motion reset further up
       this file, which flattens every animation to 0.01ms. The slider is the
       one deliberate exception, and it has a pause button to justify it. */
    .svc-slider__track {
        animation-duration: 150s !important;
        animation-iteration-count: infinite !important;
        animation-name: svc-marquee !important;
    }
}

/* Paused by the button, by hover, or by keyboard focus. */
.svc-slider.is-paused .svc-slider__track { animation-play-state: paused; }

.svc-slider__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 0.25rem;
}

.svc-slider__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--navy);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.svc-slider__toggle:hover { border-color: var(--green); background: var(--green-light); }
.svc-slider__toggle-icon { color: var(--green-darker); line-height: 1; }

/* ==========================================================================
   3D
   Depth applied with restraint: a slight perspective tilt on hover, and a
   lift on the stat tiles. Transform-only, so it runs on the compositor and
   costs nothing on scroll, and every bit of it is disabled under
   prefers-reduced-motion.
   ========================================================================== */

.tilt {
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@media (hover: hover) and (min-width: 48rem) {
    .svc-grid, .svc-slider__track, .review-grid, .project-grid, .cards {
        perspective: 1200px;
    }

    .tilt:hover {
        transform: translate3d(0, -6px, 0) rotateX(3deg) rotateY(-3deg);
        box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35);
    }

    /* The image inside lifts slightly further, which reads as parallax. */
    .tilt .svc-card__img,
    .tilt .project-card__media {
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .tilt:hover .svc-card__img,
    .tilt:hover .project-card__media {
        transform: translate3d(0, -4px, 0) scale(1.03);
    }

    /* Stat tiles get depth without rotation — they sit in a row, and rotating
       a row of five looks like a fairground. */
    .stats__item { transition: transform 0.3s ease; }
    .stats__item:hover { transform: translate3d(0, -5px, 0); }
    .stats__item:hover .stats__icon {
        box-shadow: 0 10px 22px -10px rgba(14, 107, 49, 0.55);
    }

    .steps-v2__item {
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .steps-v2__item:hover {
        transform: translate3d(0, -6px, 0);
        box-shadow: var(--shadow-md);
    }

    .area-pill { transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
}

@media (prefers-reduced-motion: reduce) {
    .tilt, .tilt:hover,
    .stats__item, .stats__item:hover,
    .steps-v2__item, .steps-v2__item:hover {
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */

.review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 44rem) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review-card {
    margin: 0;
    padding: 1.4rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.review-card__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.review-card__avatar {
    display: grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    flex: none;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-darker);
    font-weight: 800;
}
.review-card__name { margin: 0; font-weight: 700; color: var(--navy); }
.review-card__meta { margin: 0; font-size: 0.8rem; color: var(--gray-500); }
.review-card__stars { margin: 0 0 0.6rem; }
.review-card__text { margin: 0; color: var(--text-muted); }
.review-card__service { margin: 0.9rem 0 0; font-size: 0.82rem; }

.star { color: var(--gray-300); font-size: 1.05rem; letter-spacing: 0.05em; }
.star--on { color: #F5A623; }

/* Star picker. Laid out in reverse so the CSS sibling selector can light up
   the chosen star and everything before it, with no JavaScript. */
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-input label {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--gray-300);
    cursor: pointer;
    padding: 0 0.1rem;
    transition: color 0.12s ease, transform 0.12s ease;
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label { color: #F5A623; }
.rating-input label:hover { transform: scale(1.12); }
.rating-input input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }

.alert--ok { background: var(--green-light); border-inline-start: 4px solid var(--green-dark); }
.alert--ok .alert__title { color: var(--green-darker); }
.alert--ok p { color: var(--gray-700); }

.empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--gray-50);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}
.empty-state__title { margin: 0 0 0.4rem; font-size: var(--step-1); font-weight: 700; color: var(--navy); }

/* ==========================================================================
   PROJECTS
   ========================================================================== */

.project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 42rem) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.project-card {
    position: relative;
    margin: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.project-card__media { aspect-ratio: 4 / 3; background: var(--gray-100); overflow: hidden; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card__placeholder {
    display: grid; place-items: center; width: 100%; height: 100%;
    background: linear-gradient(150deg, var(--green-light), var(--gray-100));
    color: var(--green-darker);
}
.project-card__placeholder .icon { width: 42px; height: 42px; }

.project-card__body { padding: 1.25rem; }
.project-card__tag {
    display: inline-block;
    margin: 0 0 0.5rem;
    padding: 0.2rem 0.6rem;
    background: var(--green-light);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--green-darker);
}
.project-card__title { margin-bottom: 0.4rem; font-size: var(--step-1); }
.project-card__title a { color: var(--navy); text-decoration: none; }
.project-card__title a::after { content: ""; position: absolute; inset: 0; }
.project-card:hover .project-card__title a { color: var(--green-darker); }
.project-card__text { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.project-card__service { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--gray-500); }

.project-hero { margin: 0 0 1.75rem; }
.project-hero img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

.project-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin: 0 0 2rem;
    padding: 1.1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.project-facts__item { margin: 0; }
.project-facts dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-500); }
.project-facts dd { margin: 0.15rem 0 0; font-weight: 650; color: var(--navy); }
.project-back { margin: 2rem 0 0; }

/* ==========================================================================
   ADMIN DASHBOARD
   Plain and dense on purpose — it is a tool, not a landing page.
   ========================================================================== */

.page--admin { padding-block: 1.5rem 3rem; }

.admin-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1.1rem;
    margin-bottom: 1.75rem;
    background: var(--navy);
    border-radius: var(--radius);
    color: var(--white);
}
.admin-bar__brand { font-weight: 800; color: var(--white); text-decoration: none; }
.admin-bar__links { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0; padding: 0; margin-inline-end: auto; }
.admin-bar__links a { color: #CBD5E1; text-decoration: none; font-size: 0.92rem; }
.admin-bar__links a:hover, .admin-bar__links a.is-current { color: var(--white); }
.admin-bar__out { margin: 0; }
.admin-bar .btn--outline { border-color: rgba(255,255,255,0.35); color: var(--white); }
.admin-bar .btn--outline:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.admin-h1 { font-size: var(--step-2); margin-bottom: 1.25rem; }
.admin-lead { color: var(--text-muted); max-width: 70ch; margin-bottom: 1.5rem; font-size: var(--step--1); }
.admin-lead code { background: var(--gray-100); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; }

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}
.admin-tile {
    margin: 0;
    padding: 1.25rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}
.admin-tile--flag { border-color: var(--orange); }
.admin-tile__value { display: block; font-size: 2rem; font-weight: 800; color: var(--green-darker); line-height: 1; }
.admin-tile__label { display: block; margin: 0.3rem 0 0.9rem; font-size: 0.82rem; color: var(--text-muted); }

.admin-note { padding: 1.5rem; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.admin-note h2 { font-size: var(--step-1); }

.admin-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 66rem) { .admin-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }

.admin-panel {
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.admin-panel__title { font-size: var(--step-1); margin-bottom: 1.1rem; }
.admin-empty { color: var(--text-muted); font-style: italic; margin: 0; }

.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
}
.admin-list__item:last-child { border-bottom: 0; }
.admin-list__item--stack { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.admin-review__head { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: flex-start; }
.admin-review__text { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.admin-review__stars { margin-inline-start: 0.35rem; }

.admin-list__thumb { flex: none; width: 72px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--gray-100); }
.admin-list__thumb--none { display: grid; place-items: center; color: var(--gray-300); }
.admin-list__body { flex: 1; min-width: 0; }
.admin-list__title { margin: 0; font-weight: 650; color: var(--navy); }
.admin-list__meta { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--gray-500); }
.admin-list__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.admin-list__actions form { margin: 0; }

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge--on  { background: var(--green-light); color: var(--green-darker); }
.badge--off { background: var(--gray-100); color: var(--gray-600); }

.btn--danger { background: transparent; border-color: #FCA5A5; color: #B91C1C; }
.btn--danger:hover { background: #FEF2F2; border-color: #DC2626; color: #991B1B; }

.admin-thumb { display: block; margin-top: 0.6rem; border-radius: 6px; border: 1px solid var(--border); }

.admin-card {
    max-width: 24rem;
    margin: 3rem auto;
    padding: 2rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.admin-card__title { font-size: var(--step-2); margin-bottom: 0.25rem; }
.admin-card__sub { color: var(--text-muted); font-size: var(--step--1); margin-bottom: 1.5rem; }
.admin-card__foot { margin: 1.25rem 0 0; text-align: center; font-size: var(--step--1); }

/* ==========================================================================
   PREMIUM MOTION
   Restraint is what makes motion read as expensive. Everything here is short,
   subtle and driven by transform/opacity only, so it runs on the compositor
   and never causes layout work while scrolling.

   Every effect is switched off under prefers-reduced-motion, except the
   services marquee, which has its own pause button instead.
   ========================================================================== */

/* ------------------------------------------------------------ scroll reveal

   Elements start slightly low and transparent, then settle as they enter view.
   The class is added by the IntersectionObserver in main.js, and .js-reveal is
   only put on <html> once that script runs — so with no JavaScript everything
   is simply visible, never stuck invisible. */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}

.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Children stagger, so a row of cards arrives as a sequence rather than a
   block. The delays are small — anything longer feels sluggish. */
.js-reveal [data-reveal-group] > * {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}
.js-reveal [data-reveal-group].is-visible > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js-reveal [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js-reveal [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js-reveal [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js-reveal [data-reveal-group].is-visible > *:nth-child(n+6) { transition-delay: 340ms; }

/* ------------------------------------------------------------ counting up

   The stat figures count from zero when the row scrolls into view. The final
   value is in the markup, so it is correct before, during and after — the
   script only animates toward what is already there. */
.stats__value { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- button polish */

.btn { position: relative; overflow: hidden; }

/* A soft sheen that crosses the button on hover. Purely decorative, and it
   sits behind the label rather than over it. */
.btn--primary::after,
.btn--accent::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.btn--primary:hover::after,
.btn--accent:hover::after { transform: translateX(120%); }

.btn--primary, .btn--accent {
    box-shadow: 0 4px 14px -6px rgba(14, 107, 49, 0.5);
}
.btn--accent { box-shadow: 0 4px 14px -6px rgba(226, 98, 11, 0.5); }
.btn--primary:hover, .btn--accent:hover { transform: translateY(-1px); }

/* --------------------------------------------------------- link underline */

/* Underline grows from the left rather than appearing all at once. */
.prose a:not(.btn),
.section a:not(.btn):not(.link-arrow):not(.card__title a) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
}
.prose a:not(.btn):hover,
.section a:not(.btn):not(.link-arrow):not(.card__title a):hover {
    background-size: 100% 1px;
}

/* ------------------------------------------------------------ header lift */

/* The header gains a shadow once the page has scrolled, so it separates from
   the content instead of sitting flat on it. */
.site-header {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.site-header.is-stuck {
    box-shadow: 0 6px 24px -14px rgba(15, 23, 42, 0.4);
    background: rgba(255, 255, 255, 0.98);
}

/* ------------------------------------------------------- hero entrance */

.hero-v2__copy > * { animation: hero-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.hero-v2__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-v2__copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero-v2__copy > *:nth-child(3) { animation-delay: 0.25s; }
.hero-v2__copy > *:nth-child(4) { animation-delay: 0.35s; }
.hero-v2__copy > *:nth-child(5) { animation-delay: 0.45s; }

@keyframes hero-in {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to   { opacity: 1; transform: none; }
}

/* The Google badge drifts in a beat later, so it reads as a separate layer. */
.hero-v2__google { animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards; }

/* --------------------------------------------------------- trophy float */

/* A slow, small vertical drift. Large enough to notice, small enough that it
   never competes with the text beside it. */
.why__media img { animation: gentle-float 7s ease-in-out infinite; }

@keyframes gentle-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -9px, 0); }
}

/* ------------------------------------------------------ icon micro-motion */

.strip__item:hover .strip__icon,
.steps-v2__item:hover .steps-v2__icon {
    transform: scale(1.08) rotate(-4deg);
}
.strip__icon, .steps-v2__icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* ------------------------------------------------------------ CTA band */

/* A very slow drift across the gradient, so the band feels alive rather than
   printed. 18s is long enough that it is never distracting. */
.callband__inner, .cta-band {
    background-size: 160% 160%;
    animation: slow-pan 18s ease-in-out infinite;
}

@keyframes slow-pan {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal],
    .js-reveal [data-reveal-group] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .hero-v2__copy > *,
    .hero-v2__google,
    .why__media img,
    .callband__inner,
    .cta-band {
        animation: none !important;
    }
    .btn--primary::after, .btn--accent::after { display: none; }
    .strip__icon, .steps-v2__icon { transition: none; }
}

/* Step icons supplied as artwork rather than drawn.
   The circle grows a little to give the illustration room, and the image is
   centred inside it with object-fit so differing aspect ratios all sit right. */
.steps-v2__icon--art {
    width: 3.4rem;
    height: 3.4rem;
    background: var(--green-light);
    padding: 0.45rem;
}
.steps-v2__icon--art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Service cards carrying artwork (services hub). The card keeps its padding
   for the text, so the image sits in its own block above it. */
.card--service { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.card--service .card__media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, var(--green-light), var(--gray-100));
    overflow: hidden;
}
.card--service .card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card--service .card__media-icon {
    display: grid; place-items: center; width: 100%; height: 100%;
    color: var(--green-darker);
}
.card--service .card__media-icon .icon { width: 44px; height: 44px; }
.card--service .card__body { padding: 1.25rem 1.35rem 0.5rem; flex: 1; }
.card--service .card__cue { padding: 0 1.35rem 1.25rem; margin-top: 0; }

/* ==========================================================================
   COOKIE CONSENT

   A bar, not a modal. It does not trap focus, does not dim the page and does
   not block anything — the site is entirely usable if it is ignored, which is
   both better for the visitor and safer under Google's landing-page policies
   than an interstitial that covers the content an ad click paid for.

   Decline and Accept are the same size and sit next to each other. Making one
   harder to reach than the other is what turns a consent notice into a dark
   pattern, and it is the first thing a regulator looks at.
   ========================================================================== */

.consent {
    position: fixed;
    left: 0; right: 0;
    /* Above the mobile action bar, never over it — that bar is the primary
       conversion path and must stay tappable while this is open. */
    bottom: var(--mobile-cta-h);
    z-index: 70;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 30px -10px rgba(15, 23, 42, 0.28);
    animation: consent-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 64rem) { .consent { bottom: 0; } }

@keyframes consent-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}

.consent__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 2rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem var(--gutter);
}
.consent__copy { flex: 1 1 22rem; min-width: 0; }
.consent__title { margin: 0 0 0.15rem; font-weight: 750; color: var(--navy); font-size: 0.95rem; }
.consent__text { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--text-muted); }
.consent__text a { color: var(--green-darker); }

.consent__actions { display: flex; gap: 0.6rem; flex: none; }
/* Equal weight, equal size: neither choice is nudged. */
.consent__btn { min-width: 7.5rem; justify-content: center; }

@media (max-width: 34rem) {
    .consent__actions { width: 100%; }
    .consent__btn { flex: 1 1 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .consent { animation: none; }
}

@media print { .consent { display: none; } }

/* ==========================================================================
   RIGHT-TO-LEFT

   Most of the layout needs nothing here: it is flexbox and grid, which follow
   the document direction on their own, and every physical offset in this file
   has been written as a logical property so it flips with the text.

   What is left is the handful of things direction cannot infer — animations
   that move along an axis, and gradients aimed at a specific edge.
   ========================================================================== */

/**
 * Marquees.
 *
 * In RTL a flex row lays out from the right, so the duplicate pass sits to the
 * LEFT of the original. Translating negatively would march the content off the
 * left edge and leave a growing gap on the right; the loop has to run the
 * other way. It also reads correctly: content entering from the left and
 * leaving to the right is the RTL equivalent of the LTR marquee.
 */
@keyframes svc-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
}
@keyframes topbar-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
}
@keyframes stats-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
}
@keyframes strip-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
}

[dir="rtl"] .svc-slider__track { animation-name: svc-marquee-rtl; }
[dir="rtl"] .topbar__list      { animation-name: topbar-marquee-rtl; }
[dir="rtl"] .why .stats--row   { animation-name: stats-marquee-rtl; }
[dir="rtl"] .strip__list       { animation-name: strip-marquee-rtl; }

/* The reduced-motion rules re-assert animation-name with !important, so the
   RTL variants have to do the same to survive there. */
@media (prefers-reduced-motion: reduce) {
    [dir="rtl"] .svc-slider__track { animation-name: svc-marquee-rtl !important; }
}
@media (max-width: 63.99rem) and (prefers-reduced-motion: reduce) {
    [dir="rtl"] .topbar__list { animation-name: topbar-marquee-rtl !important; }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
    [dir="rtl"] .why .stats--row { animation-name: stats-marquee-rtl !important; }
    [dir="rtl"] .strip__list     { animation-name: strip-marquee-rtl !important; }
}

/**
 * Desktop hero.
 *
 * The copy sits on the right in Arabic, so the photograph belongs on the left
 * and the scrim has to wash from the right instead. Without this the headline
 * would sit directly on top of the truck.
 */
@media (min-width: 56rem) {
    [dir="rtl"] .hero-v2--photo { background-position: left center; }
    [dir="rtl"] .hero-v2--photo::before {
        background: linear-gradient(
            270deg,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.95) 30%,
            rgba(255, 255, 255, 0.82) 47%,
            rgba(255, 255, 255, 0.30) 61%,
            rgba(255, 255, 255, 0) 74%
        );
    }
}

/**
 * Latin runs inside Arabic text.
 *
 * A phone number, "WhatsApp", "24/7" or a Google rating is a left-to-right run
 * inside a right-to-left paragraph. The bidi algorithm mostly handles this, but
 * it reorders leading and trailing punctuation — which is how "+971 54 335
 * 5327" ends up rendering as "5327 335 54 971+". Isolating them fixes it.
 */
[dir="rtl"] .header-cta__number,
[dir="rtl"] .topbar__phone,
[dir="rtl"] .mobile-cta__sub,
[dir="rtl"] .sidecard__phone,
[dir="rtl"] [dir="ltr"] {
    unicode-bidi: isolate;
}

/* The arrow glyphs in link and button labels point the wrong way in Arabic. */
[dir="rtl"] .link-arrow::after,
[dir="rtl"] .btn span[aria-hidden="true"] { transform: scaleX(-1); display: inline-block; }

/**
 * Arabic type.
 *
 * The brand's Latin face has no Arabic coverage, so Arabic would fall back to
 * whatever the device happens to have. Naming the system Arabic faces first
 * gives a deliberate, well-hinted result on every platform, and the slightly
 * larger line height is what Arabic script needs to stay legible — its
 * ascenders and descenders are taller than Latin's.
 */
[lang="ar"], [lang="ar-AE"], [dir="rtl"] {
    font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
    line-height: 1.85;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
    line-height: 1.45;
    /* Arabic has no ascender/descender rhythm for a tight tracking to tighten,
       and negative letter-spacing breaks the joins between letters. */
    letter-spacing: 0;
}

/* ------------------------------------------------------- Language switch */

.lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; }
.lang-switch__globe { display: flex; flex: none; }

@media (min-width: 64rem) {
    /* Set apart from the section links: it changes the whole site, not the page. */
    .primary-nav__item--lang { margin-inline-start: 0.4rem; }
    .primary-nav__item--lang .primary-nav__link {
        padding-inline: 0.7rem;
        border: 1px solid var(--border);
        border-radius: 999px;
    }
    .primary-nav__item--lang .primary-nav__link:hover { border-color: var(--green); }
}