/*
 * Golden Gazzy public website styles.
 * Palette: one gold scale led by the brand gold, the logo's
 * deep green, and warm cream and sage tints. Gold is used for fills, markers
 * and accents; on white, only the deep gold (--gold-deep, large text) and
 * --gold-text (small text) are dark enough for lettering.
 */

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/outfit-600-latin.woff2") format("woff2");
}

:root {
    /* Neutrals: warm near-black and warm greys, so text and lines sit comfortably with gold. */
    --ink: #1c1b16;
    --muted: #5c5a50;
    --line: #e6e0d2;
    --field: #77736a;
    --white: #fff;

    /* Brand green: the logo's deep green for headings, links, outlines and the footer. */
    --green: #0b5d35;
    --green-dark: #08482a;
    --sage: #ecf1ea;

    /* Brand gold: one gold scale for buttons, markers, accents and tints. */
    --gold: #e0a526;
    --gold-hover: #cd961a;
    --gold-deep: #a67a00;
    --gold-text: #8f6a00;
    --gold-soft: #f2cf6b;
    --gold-tint: #f3e2ae;
    --cream: #fbf4e2;
    --cream-soft: #fdfaf2;

    --error: #b42318;
    --error-bg: #fbefec;

    --font-heading: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --header-h: 56px;
    --gutter: 16px;
    --radius: 16px;
    --radius-sm: 10px;
}

@media (min-width: 640px) {
    :root { --gutter: 24px; --header-h: 72px; }
}

@media (min-width: 1024px) {
    :root { --gutter: 32px; --header-h: 80px; }
}

/* Base */

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

[hidden] { display: none !important; }

::selection { background: var(--gold-soft); color: var(--ink); }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
}

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

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--green);
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
p, li { max-width: 65ch; }

a {
    color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover { color: var(--ink); }

/* A button that reads as a link: Log out is a form post, shown beside ordinary links. */
.link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-button:hover { color: var(--ink); }
.site-footer .link-button:hover { color: var(--gold-soft); }

/* Links with an arrow underline their words only, never the arrow. */
.link-text {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}

main:focus { outline: none; }

.container {
    width: 100%;
    max-width: calc(1200px + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }

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

.skip-link {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus { top: 8px; }

.placeholder {
    padding: 0 0.2em;
    border-radius: 3px;
    border-bottom: 2px dashed var(--gold-deep);
    background: var(--cream);
    color: var(--ink);
}

.tag {
    display: inline-block;
    padding: 1px 10px;
    border: 1px solid var(--gold-tint);
    border-radius: 999px;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0 1.5em;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.button--primary {
    background: var(--gold);
    border-color: var(--green);
    color: var(--ink);
}

.button--primary:hover {
    background: var(--gold-hover);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(28, 27, 22, 0.18);
}

.button--secondary {
    background: transparent;
    border-color: var(--green);
    color: var(--green);
}

.button--secondary:hover { background: var(--cream); color: var(--green); }

.button--large { min-height: 56px; padding: 0 2em; font-size: 1.125rem; }

.button--header { min-height: 44px; padding: 0 1.1em; font-size: 1rem; white-space: nowrap; }

.button--header[aria-current="page"] { background: var(--cream); }

.button:active { transform: translateY(0); box-shadow: none; }

.button:disabled,
.button:disabled:hover { cursor: progress; opacity: 0.75; transform: none; box-shadow: none; }

.closing .button--primary { border-color: var(--gold); }

.closing :focus-visible,
.service-card--feature :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold-soft); }

/* Header and menu */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(28, 27, 22, 0.1); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
}

.logo { display: block; flex: none; border-radius: 6px; }

/* The owner asked for a larger logo: it stands taller than the 44 px header
   buttons, and the header grows from 640 px to give it room. On phones it takes
   the space the buttons leave, up to 176 px, and never drops below 144 px. */
.logo img { width: 176px; height: auto; }

@media (min-width: 480px) {
    .logo img { width: 200px; }
}

@media (min-width: 640px) {
    .logo img { width: 260px; }
}

@media (min-width: 1024px) {
    .logo img { width: 310px; }
}

.site-header__actions { display: flex; align-items: center; gap: 10px; }

/* The phone line joins the header once there is room beside the quote button. */
.site-header__phone { display: none; }

@media (min-width: 768px) {
    .site-header__phone {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        margin-right: 6px;
        padding: 0 6px;
        color: var(--green);
        font-family: var(--font-heading);
        font-size: 1.0625rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .site-header__phone:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
    .site-header__phone svg { flex: none; color: var(--gold-deep); }
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 2px solid var(--green);
    border-radius: 999px;
    background: var(--white);
    color: var(--green);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle:hover { background: var(--cream); }

.no-js .menu-toggle { display: none; }

.menu-toggle__icon {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
}

.menu-toggle__icon span,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon span { top: 6px; }
.menu-toggle__icon::after { top: 12px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 479px) {
    .site-header__inner { gap: 8px; }
    .site-header__actions { flex: none; gap: 8px; }
    .logo { flex: 0 1 176px; min-width: 144px; }
    .logo img { width: 100%; }
    .button--header { padding: 0 0.85em; font-size: 0.9375rem; }
    .menu-toggle { width: 44px; padding: 0; }
    .menu-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.menu-overlay {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 44;
    background: rgba(28, 27, 22, 0.4);
}

.site-menu {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    z-index: 45;
    width: 100%;
    padding: 8px var(--gutter) 32px;
    overflow-y: auto;
    background: var(--white);
    box-shadow: -12px 0 32px rgba(28, 27, 22, 0.12);
}

@media (min-width: 640px) {
    .site-menu { width: 360px; padding-inline: 32px; border-left: 1px solid var(--line); }
}

@media (prefers-reduced-motion: no-preference) {
    .site-menu:not([hidden]) { animation: menu-in 0.16s ease-out; }
    .menu-overlay:not([hidden]) { animation: fade-in 0.16s ease-out; }
}

@keyframes menu-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

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

.site-menu__links { margin: 0; padding: 0; list-style: none; }

.site-menu__links a {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    justify-content: space-between;
    padding-inline: 10px;
    margin-inline: -10px;
    border-radius: var(--radius-sm);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.site-menu__links a::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
}

.site-menu__links a:hover { color: var(--green); background: var(--cream); }

.site-menu__links a[aria-current="page"] {
    color: var(--green);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* The current page is a marker, not a destination, so it gets no chevron. */
.site-menu__links a[aria-current="page"]::after { display: none; }

/* Shown only to a logged-in admin: a compact way into the admin area,
   deliberately smaller than the public links above it. */
.site-menu__admin {
    margin-top: 16px;
    padding: 12px 14px 14px;
    border: 1px solid var(--gold-tint);
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.site-menu__admin-title {
    margin: 0 0 10px;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-menu__admin-user { color: var(--muted); font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Two by two at every width, so a new-enquiries count never pushes a link onto its own row. */
.site-menu__admin-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-menu__admin-links form { margin: 0; }

.site-menu__admin-links a,
.site-menu__admin-links button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--green);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.site-menu__admin-links a:hover,
.site-menu__admin-links button:hover { border-color: var(--green); color: var(--green-dark); }

/* Log out is the quiet one of the four. */
.site-menu__admin-links button { background: none; color: var(--muted); }

.site-menu__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 700;
}

.site-menu__phone { padding: 20px 0; border-bottom: 1px solid var(--line); }

.site-menu__privacy {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* Phone line */

.phone-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0;
}

.phone-line__label { width: 100%; color: var(--muted); font-size: 0.9375rem; }

.phone-line__number {
    color: var(--green);
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

a.phone-line__number { display: inline-flex; align-items: center; min-height: 44px; }

/* Hero: a bright, undimmed photo with a
   "light spill" glow, and the copy on a frosted white panel. Phones show the
   photo above a white sheet; from 768 px the panel floats over the photo. */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    overflow: hidden;
    background: var(--cream);
    color: var(--ink);
    isolation: isolate;
}

.hero__media {
    position: relative;
    z-index: -1;
    flex: 1 1 auto;
    min-height: clamp(190px, 32svh, 420px);
}

.hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

/* Warm sunlight spilling in from the top right of the hero. */
.hero__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(70% 55% at 88% 0%, rgba(224, 165, 38, 0.30) 0, rgba(224, 165, 38, 0) 62%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-top: -28px;
    padding: 22px var(--gutter) 20px;
    border-radius: 28px 28px 0 0;
    background: var(--white);
    box-shadow: 0 -16px 40px rgba(28, 27, 22, 0.14);
}

/* Entrance: the photo eases in, the panel arrives and
   settles, then its contents follow in a quick cascade. Phones: the white
   sheet rises from below. From 768 px: the frosted panel slides in from the
   left. Transform and opacity only; the reduced-motion rule at the end of
   this file cancels every animation. */
@media (prefers-reduced-motion: no-preference) {
    .hero__media img { animation: hero-photo-in 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
    .hero__inner { animation: hero-sheet-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both; }

    .hero__eyebrow,
    .hero h1,
    .hero__lead,
    .hero__points,
    .hero__actions { animation: rise-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

    .hero__eyebrow { animation-delay: 0.35s; }
    .hero h1 { animation-delay: 0.45s; }
    .hero__lead { animation-delay: 0.55s; }
    .hero__points { animation-delay: 0.65s; }
    .hero__actions { animation-delay: 0.75s; }
    .hero__cue { animation: fade-in 0.6s ease 1.1s both; }
}

@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-photo-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes hero-sheet-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes hero-panel-in { from { opacity: 0; transform: translate3d(-64px, 0, 0) scale(0.98); } to { opacity: 1; transform: none; } }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 6px 14px 6px 11px;
    border-radius: 999px;
    background: var(--cream);
    color: var(--green);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
}

.hero__eyebrow .bee { margin-left: -2px; }

.hero h1 {
    max-width: 12ch;
    margin-bottom: 0.35em;
    color: var(--green);
    font-size: clamp(2.125rem, 3.4vw + 1.25rem, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

/* A marker stripe under the key word. */
.hero__highlight {
    display: inline-block;
    max-width: 100%;
    padding: 0 0.08em;
    margin: 0 -0.08em;
    border-radius: 0.12em;
    color: var(--ink);
    background: linear-gradient(to top, var(--gold) 0 0.3em, transparent 0.3em);
}

.hero__lead {
    max-width: 34rem;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 1.0625rem;
}

.hero__points {
    display: none;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.hero__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: none;
    font-size: 0.9375rem;
    font-weight: 600;
}

.hero__points li::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6.5-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.hero__actions .button { padding-inline: 1.3em; }

.hero__call-full { display: none; }

.hero__cue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 10px;
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
}

.hero__cue-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--green);
    border-radius: 50%;
    color: var(--green);
    font-size: 1.125rem;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.hero__cue:hover .hero__cue-icon { background: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
    .hero__cue-icon { animation: cue-bob 2.2s ease-in-out infinite; }
}

@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (min-width: 640px) {
    .hero__points { display: flex; }
    .hero__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
    .hero__actions .button { padding-inline: 1.8em; }
    .hero__call-short { display: none; }
    .hero__call-full { display: inline; }
}

@media (min-width: 768px) {
    .hero { flex-direction: row; align-items: stretch; }

    .hero__media { position: absolute; inset: 0; flex: none; min-height: 0; }
    .hero__media img { object-position: 76% 40%; }

    .hero__wash {
        background:
            radial-gradient(60% 60% at 86% 4%, rgba(224, 165, 38, 0.32) 0, rgba(224, 165, 38, 0) 60%),
            linear-gradient(to right, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0) 55%),
            linear-gradient(to top, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0) 150px);
    }

    .hero__inner {
        display: flex;
        align-items: center;
        max-width: calc(1200px + 2 * var(--gutter));
        margin-top: 0;
        padding: 56px var(--gutter) 120px;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .hero__panel {
        max-width: 580px;
        padding: 36px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 30px 80px rgba(28, 27, 22, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    }

    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .hero__panel {
            background: rgba(255, 255, 255, 0.74);
            -webkit-backdrop-filter: blur(22px) saturate(1.25);
            backdrop-filter: blur(22px) saturate(1.25);
        }
    }

    /* On wide screens the panel itself slides in; the inner wrapper stays put. */
    @media (prefers-reduced-motion: no-preference) {
        .hero__inner { animation: none; }
        .hero__panel { animation: hero-panel-in 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both; }
    }

    .hero__cue { position: absolute; left: var(--gutter); bottom: 32px; margin: 0; }

    .hero__cue-icon {
        width: 44px;
        height: 44px;
        border: 0;
        background: var(--white);
        box-shadow: 0 6px 18px rgba(28, 27, 22, 0.18);
    }

}

@media (min-width: 1024px) {
    .hero__inner { padding-block: 72px 128px; }
    .hero__panel { max-width: 640px; padding: 44px; }
    .hero__lead { font-size: 1.1875rem; }
}

/* Sections */

.section { padding-block: 64px; }

@media (min-width: 1024px) {
    .section { padding-block: 112px; }
}

.section-head { max-width: 42rem; margin-bottom: 32px; }

.section-head h2::before,
.about h2::before {
    content: "";
    display: block;
    width: 44px;
    height: 6px;
    margin-bottom: 18px;
    border-radius: 3px;
    background: var(--gold);
}
.section-head p { color: var(--muted); font-size: 1.125rem; }

@media (min-width: 1024px) {
    .section-head { margin-bottom: 48px; }
}

/* Services */

.service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-grid + .service-grid { margin-top: 16px; }

@media (min-width: 640px) {
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .service-grid + .service-grid { margin-top: 24px; }
}

/* Standard cards: three per row on desktop, below the two feature cards. */
@media (min-width: 1024px) {
    .service-grid--standard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 6px solid var(--gold);
    border-radius: var(--radius);
    background: var(--white);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* The link's overlay makes the whole card tappable; the visible link text stays for screen readers. */
.service-card__link::after { content: ""; position: absolute; inset: 0; }

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--green);
    box-shadow: 0 12px 28px rgba(28, 27, 22, 0.12);
}

.service-card__link span[aria-hidden] { transition: transform 0.18s ease; }
.service-card:hover .service-card__link span[aria-hidden] { transform: translateX(4px); }

.service-card__title { margin-bottom: 0.4em; color: var(--ink); }
.service-card__text { flex: 1; color: var(--muted); }

.service-card__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: 44px;
    font-weight: 700;
    text-decoration: none;
}

.service-card--feature {
    padding: 32px;
    border-color: var(--green);
    border-top-color: var(--gold);
    background: var(--green);
    color: var(--white);
}

@media (min-width: 1024px) {
    .service-card--feature { padding: 40px; min-height: 248px; }
}

.service-card--feature::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 165, 38, 0.26) 0, rgba(224, 165, 38, 0) 70%);
    pointer-events: none;
}

.service-card--feature .service-card__title { color: var(--white); font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); }
.service-card--feature .service-card__text { color: rgba(255, 255, 255, 0.92); font-size: 1.125rem; }
.service-card--feature .service-card__link { color: var(--gold-soft); }
.service-card--feature .service-card__link:hover { color: var(--white); }

.service-card--feature:hover,
.service-card--feature:focus-within { border-color: var(--green-dark); box-shadow: 0 12px 28px rgba(8, 72, 42, 0.28); }

/* How it works */

.section--steps { background: var(--cream); }

/* The next action, straight after the three steps. */
.section-cta { max-width: none; margin: 40px 0 0; }

.flight { position: relative; padding-top: 64px; }

.steps {
    position: relative;
    display: grid;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps::before {
    content: "";
    position: absolute;
    top: -28px;
    bottom: 28px;
    left: 27px;
    border-left: 3px dotted var(--gold);
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    align-content: start;
}

.step__number {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
}

.step__body { padding-top: 10px; }
.step__title { margin-bottom: 0.3em; color: var(--ink); }
.step p { margin: 0; }

.flight__bee {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: auto;
}

@media (min-width: 768px) {
    .flight { padding-top: 0; }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .steps::before {
        top: 27px;
        bottom: auto;
        left: 28px;
        right: calc((100% - 64px) / 3 - 28px);
        border-left: 0;
        border-top: 3px dotted var(--gold);
    }
    .step { grid-template-columns: 1fr; gap: 20px; }
    .step__body { padding-top: 0; }
    .flight__bee { top: -8px; left: calc((100% - 64px) / 2 + 48px); }
}

.steps--compact { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.steps--compact::before { top: 20px; bottom: 20px; left: 19px; right: auto; border-top: 0; border-left: 3px dotted var(--gold); }
.steps--compact .step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.steps--compact .step__number { width: 40px; height: 40px; font-size: 1.125rem; }
.steps--compact .step__body { padding-top: 6px; }
.steps--compact .step__title { font-size: 1.0625rem; }
.steps--compact p { font-size: 0.9375rem; color: var(--muted); }

/* A completed step (quote confirmation): a tick instead of a number. */
.step--done .step__number { border-color: var(--green); background: var(--green); color: var(--white); }
.step--done .step__title { color: var(--muted); }

/* About */

.about { display: grid; gap: 32px; align-items: center; }

@media (min-width: 1024px) {
    .about { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; }
}

.about__text p { font-size: 1.125rem; }

.about__art {
    overflow: hidden;
    border-radius: 24px;
    background: var(--sage);
}

.about__art img { width: 100%; height: auto; }

/* FAQs */

.section--faqs { background: var(--cream-soft); }

.faq-list { border-top: 1px solid var(--line); }

.faq { border-bottom: 1px solid var(--line); }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 14px 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

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

.faq summary::after {
    content: "+";
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--green);
    border-radius: 50%;
    color: var(--green);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.faq[open] summary::after { transform: rotate(45deg); background: var(--gold); }
.faq summary:hover { color: var(--green); }

@media (min-width: 1024px) {
    .faq summary { min-height: 72px; padding: 18px 0; font-size: 1.375rem; }
    .faq summary::after { width: 36px; height: 36px; }
}
.faq summary:focus-visible { outline-offset: -3px; border-radius: 6px; }
.faq__body { overflow: hidden; }
.faq p { margin: 0 0 20px; padding-right: 48px; }

/* While the script is closing an answer, the icon turns back at once. */
.faq.is-closing summary::after { transform: none; background: transparent; }

@media (prefers-reduced-motion: no-preference) {
    .faq[open] p { animation: fade-in 0.2s ease-out; }
}

.faq-more { margin: 24px 0 0; color: var(--muted); }

/* Closing band */

.closing {
    position: relative;
    padding-block: 64px;
    overflow: hidden;
    background: var(--green);
    color: var(--white);
    text-align: center;
}

.closing::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 640px;
    height: 640px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 165, 38, 0.16) 0, rgba(224, 165, 38, 0) 68%);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .closing { padding-block: 96px; }
}

.closing__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.closing__bee { margin-bottom: 16px; }
.closing h2 { color: var(--white); }
.closing p { font-size: 1.125rem; }
.closing__alt { margin: 20px 0 0; color: rgba(255, 255, 255, 0.92); }
.closing__alt a { color: var(--gold-soft); }
.closing__alt a:hover { color: var(--white); }

/* Footer */

.site-footer {
    padding-top: 48px;
    border-top: 4px solid var(--gold);
    background: var(--green-dark);
    color: var(--white);
}

.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--gold-soft); }

.site-footer__grid { display: grid; gap: 32px; }

@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

.site-footer__brand p { margin: 0 0 4px; }
.site-footer__name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; }
.site-footer__small { color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; }

.site-footer__legal { margin-top: 24px; color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; }
.site-footer__legal p { margin: 0; }
.site-footer__legal p + p { margin-top: 8px; }

.site-footer__nav ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__nav li { break-inside: avoid; }
.site-footer__nav form { margin: 0; }

.site-footer .phone-line__label { color: rgba(255, 255, 255, 0.82); }
.site-footer .phone-line__number { color: var(--white); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 40px;
    padding-block: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
}

.site-footer__bottom p { margin: 0; }
.site-footer .placeholder { border-bottom-color: var(--gold); background: rgba(224, 165, 38, 0.16); color: var(--gold-soft); }

.site-footer__signoff { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

.bee { display: inline-block; height: auto; flex: none; }
.bee--tiny { width: 26px; }
.bee--small { width: 34px; }
.bee--medium { width: 64px; }
.bee--large { width: 104px; }

/* Page intro */

.page-intro {
    padding-block: 40px 24px;
    background: linear-gradient(to bottom, var(--cream), var(--white));
}

@media (min-width: 1024px) {
    .page-intro { padding-block: 64px 32px; }
}

.page-intro h1 { margin-bottom: 0.25em; }
.page-intro__lead { margin: 0; font-size: 1.1875rem; }

/* Forms */

.form-layout { display: grid; gap: 48px; padding-block: 16px 72px; }

@media (min-width: 1024px) {
    .form-layout { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 64px; align-items: start; }
    .form-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

.form fieldset { min-width: 0; margin: 0 0 32px; padding: 0; border: 0; }

.form__legend {
    margin-bottom: 4px;
    padding: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
}

.form__group > .form__legend { margin-bottom: 16px; }

/* A smaller legend for a pair of fields inside a form that already has a heading. */
.form__group > .form__legend--sub { margin-bottom: 2px; color: var(--ink); font-size: 1.125rem; }
.form__group--reach > .field__hint { margin-bottom: 16px; }
.form__group--reach > .field:last-child { margin-bottom: 0; }

.field { margin-bottom: 24px; }

/* Direct children only: the service tiles are labels inside .field too and keep their own flex layout. */
.field > label { display: block; margin-bottom: 4px; font-weight: 600; }

.field__hint { margin: 0 0 6px; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }

.field__error { margin: 0 0 8px; color: var(--error); font-weight: 700; }

.field--error { padding-left: 14px; border-left: 4px solid var(--error); }

.optional { color: var(--muted); font-weight: 400; }

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form input[type="password"],
.form textarea {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 2px solid var(--field);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

.form textarea { min-height: 128px; resize: vertical; }

.form input:hover,
.form textarea:hover { border-color: var(--ink); }

.form input:focus,
.form textarea:focus {
    border-color: var(--green);
    outline: 3px solid var(--green);
    outline-offset: 2px;
}

.field--error input,
.field--error textarea { border-color: var(--error); }

.input--short { max-width: 12rem; }
.input--medium { max-width: 20rem; }
.input--postcode { text-transform: uppercase; }

.tiles__grid { display: grid; gap: 12px; }

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

.tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 16px;
    border: 2px solid var(--field);
    border-radius: 12px;
    background: var(--white);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.tile:hover { border-color: var(--green); background: var(--cream-soft); }

.tile input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.tile__box {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--white);
}

.tile input:checked + .tile__box { border-color: var(--green); background: var(--green); }

@media (prefers-reduced-motion: no-preference) {
    .tile input:checked + .tile__box { animation: tick-pop 0.2s ease-out; }
}

@keyframes tick-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.tile input:checked + .tile__box::after {
    content: "";
    width: 12px;
    height: 7px;
    margin-top: -3px;
    border-bottom: 3px solid var(--white);
    border-left: 3px solid var(--white);
    transform: rotate(-45deg);
}

.tile:has(input:checked) {
    border-color: var(--green);
    background: var(--cream);
    box-shadow: inset 0 0 0 1px var(--green);
}

.tile:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }

.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__privacy { color: var(--muted); font-size: 0.9375rem; }

.button--submit { width: 100%; }

@media (min-width: 640px) {
    .button--submit { width: auto; min-width: 240px; }
}

.error-summary {
    margin-bottom: 32px;
    padding: 20px 24px;
    border: 3px solid var(--error);
    border-radius: 12px;
    background: var(--white);
}

.error-summary:focus { outline: 3px solid var(--green); outline-offset: 3px; }
.error-summary__title { margin-bottom: 0.5em; color: var(--error); font-size: 1.25rem; }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: var(--error); font-weight: 600; }

.notice {
    margin-bottom: 24px;
    padding: 16px 20px;
    border-left: 6px solid var(--green);
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.notice p { margin: 0; }
.notice--error { border-left-color: var(--error); background: var(--error-bg); }

.aside-card {
    padding: 28px;
    border-radius: var(--radius);
    background: var(--cream);
}

.aside-card__title { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; }

.aside-card__phone { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gold-tint); }

/* Confirmation */

.confirmation { padding-block: 56px 96px; }
.confirmation__bee { margin-bottom: 24px; }
.confirmation__lead { font-size: 1.1875rem; }
.confirmation__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 28px; }

.summary-card {
    margin: 28px 0 32px;
    padding: 24px;
    border-radius: var(--radius);
    background: var(--cream);
}

.summary-card__title { font-size: 1.25rem; color: var(--ink); }
.summary-list { margin: 0 0 12px; }
.summary-list div { margin-bottom: 12px; }
.summary-list dt { color: var(--muted); font-size: 0.9375rem; font-weight: 600; }
.summary-list dd { margin: 0; font-size: 1.125rem; font-weight: 600; }
.summary-card__note { margin: 0; color: var(--muted); }

.summary-card--steps { background: var(--cream-soft); }
.summary-card--steps .summary-card__title { margin-bottom: 20px; }
.summary-card--steps .steps--compact::before { border-left-color: var(--line); }

/* Contact */

.contact-layout { display: grid; gap: 40px; padding-block: 16px 72px; }

@media (min-width: 1024px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
}

.call-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 56px;
    padding: 24px 28px;
    border: 2px solid var(--green);
    border-radius: var(--radius);
    background: var(--cream);
    text-decoration: none;
}

.call-block--link:hover { background: var(--gold-tint); }

.call-block__label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }

.call-block__number {
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 5vw + 0.75rem, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}

.call-block--link .call-block__number { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }

.contact-layout__route { margin-top: 24px; font-size: 1.125rem; }

.contact-layout__form h2 { font-size: 1.75rem; }

/* Login and account pages */

.login-layout { padding-block: 16px 72px; }
.login-layout .form { max-width: 28rem; }
.login-layout__note { margin-top: 24px; color: var(--muted); font-size: 0.9375rem; }

.password { position: relative; max-width: 20rem; }
.password input { padding-right: 80px; }

.password__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--cream);
    color: var(--green);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(-50%);
}

.password__toggle:hover { background: var(--line); }

/* Maintenance page: a complete page on its
   own, shown instead of the website while maintenance mode is on. */

.page-maintenance { background: var(--cream-soft); }

.maintenance {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(60% 50% at 92% 0%, rgba(224, 165, 38, 0.30) 0, rgba(224, 165, 38, 0) 62%),
        radial-gradient(50% 40% at 0% 100%, rgba(11, 93, 53, 0.09) 0, rgba(11, 93, 53, 0) 70%);
}

.maintenance-bar + .maintenance { min-height: calc(100vh - 44px); min-height: calc(100svh - 44px); }

.maintenance__header { display: flex; justify-content: center; padding: 28px var(--gutter) 0; }
.maintenance__logo { width: 250px; }

.maintenance__main { display: grid; flex: 1; place-items: center; padding: 28px var(--gutter) 40px; }

.maintenance__card {
    width: 100%;
    max-width: 41rem;
    padding: 32px 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 18px 48px rgba(28, 27, 22, 0.08);
}

.maintenance__art { display: flex; align-items: center; gap: 4px; margin: 0 0 20px; }
.maintenance__trail { flex: 0 1 168px; min-width: 0; height: auto; }
.maintenance__bee { margin-top: -6px; }

.maintenance__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 3px 14px;
    border: 1px solid var(--gold-tint);
    border-radius: 999px;
    background: var(--cream);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.maintenance h1 { margin-bottom: 0.45em; font-size: clamp(2rem, 4vw + 1rem, 3rem); }
.maintenance__lead { margin-bottom: 24px; font-size: 1.1875rem; }
.maintenance__call { margin-bottom: 24px; }
.maintenance__thanks { margin: 0; color: var(--muted); }

.maintenance__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 24px;
    padding: 0 var(--gutter) 20px;
    color: var(--muted);
    font-size: 0.875rem;
}

.maintenance__footer p { margin: 0; }
.maintenance__footer a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (min-width: 640px) {
    .maintenance__header { padding-top: 36px; }
    .maintenance__logo { width: 340px; }
    .maintenance__card { padding: 48px 56px; }
}

@media (prefers-reduced-motion: no-preference) {
    .maintenance__bee { animation: maintenance-hover 3.2s ease-in-out infinite; }
}

@keyframes maintenance-hover {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}

/* A slim bar above the page: the admin preview of the maintenance page, and the
   website as seen by a logged-in admin while it is closed to visitors. */
.maintenance-bar { padding: 10px var(--gutter); background: var(--green); color: var(--white); font-size: 0.9375rem; text-align: center; }
.maintenance-bar p { max-width: none; margin: 0; }
.maintenance-bar a { color: var(--gold-soft); font-weight: 600; white-space: nowrap; }
.maintenance-bar a:hover { color: var(--white); }
.maintenance-bar :focus-visible { outline-color: var(--gold-soft); }

/* Privacy */

.prose { padding-bottom: 72px; }
.prose h2 { margin-top: 1.6em; font-size: 1.5rem; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: 0.5em; }

.in-short {
    margin: 8px 0 16px;
    padding: 24px 28px;
    border-radius: var(--radius);
    background: var(--cream);
}

.in-short h2 { margin-top: 0; font-size: 1.25rem; color: var(--ink); }
.in-short ul { margin: 0; }

/* Motion */

/* Scroll reveal. Blocks marked data-reveal slide into place the first time they
   enter the view (sideways for "left"/"right", upwards otherwise). The hidden
   start state applies only once the script has confirmed support
   (html.reveal-ready) and motion is allowed, so nothing is ever hidden without
   JavaScript, under reduced motion, in print or for keyboard focus. */

.section, .page-intro, .form-layout, .confirmation { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
    .reveal-ready [data-reveal] {
        opacity: 0;
        transform: translate3d(0, 36px, 0);
        transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: opacity, transform;
    }

    .reveal-ready [data-reveal="left"] { transform: translate3d(clamp(-120px, -14vw, -56px), 0, 0); }
    .reveal-ready [data-reveal="right"] { transform: translate3d(clamp(56px, 14vw, 120px), 0, 0); }

    .reveal-ready [data-reveal].is-visible,
    .reveal-ready [data-reveal]:focus-within {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    .reveal-ready [data-reveal]:focus-within { transition: none; }

    /* Keep card feedback working after the entrance transform has finished. */
    .reveal-ready .service-card.is-visible:hover,
    .reveal-ready .service-card[data-reveal]:focus-within {
        transform: translateY(-3px);
    }
}

@media print {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}