:root {
    --color-primary: #e30a17;
    --color-primary-dark: #af0812;
    --color-primary-light: #ec3f3a;
    --color-dark: #171717;
    --color-text: #1a1a1a;
    --color-text-light: #5c5c5c;
    --color-surface: #eceaea;
    --color-band-dark: #414141;
    --color-border: #e2e2e2;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 10px;
    --radius-lg: 18px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
    --container-width: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.65;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
::selection { background: var(--color-primary); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: var(--color-text);
}
h1 { font-size: clamp(2rem, 5vw, 2.85rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Buttons */
.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
    padding: 0.85em 1.9em;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(227, 10, 23, 0.28);
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn-dark { background: var(--color-dark); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-outline { background: transparent; border-color: #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--color-primary); }

/* Header */
.site-header {
    background: #fff;
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled { border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    max-width: var(--container-width);
    margin: 0 auto;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-logo img { height: 58px; width: auto; }
.header-contact { text-align: right; font-size: 0.95rem; }
.header-contact a { color: var(--color-text); text-decoration: none; display: block; }
.header-contact a:hover { color: var(--color-primary); }
.header-nav-row { border-top: 1px solid var(--color-border); }
.main-nav .container { display: flex; justify-content: center; }
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.75rem;
    margin: 0;
    padding: 0.75rem 0;
    flex-wrap: wrap;
    justify-content: center;
}
.main-nav a {
    position: relative;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.2s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--color-primary); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
    .main-nav .container { display: block; }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow);
    }
    .main-nav.is-open { display: block; }
    .main-nav ul { flex-direction: column; gap: 0; padding: 1rem 1.25rem; }
    .main-nav li { border-bottom: 1px solid var(--color-border); }
    .main-nav a { display: block; padding: 0.85em 0; }
    .nav-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
        color: var(--color-text);
    }
    .header-contact { display: none; }
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        url('/assets/images/hero-pattern.svg'),
        linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 45%, var(--color-primary-dark) 100%);
    background-repeat: repeat, no-repeat;
    background-size: 220px 220px, 220% 220%;
    background-position: 0 0, 0% 50%;
    animation: heroGradientShift 16s ease-in-out infinite;
    color: #fff;
    padding: 4.5rem 0;
    text-align: center;
}
.hero::before, .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}
.hero::before { width: 340px; height: 340px; background: rgba(23, 23, 23, 0.2); top: -140px; right: -60px; }
.hero::after { width: 280px; height: 280px; background: rgba(255, 255, 255, 0.14); bottom: -130px; left: -70px; }
.hero .container { position: relative; }
@keyframes heroGradientShift {
    0%, 100% { background-position: 0 0, 0% 50%; }
    50% { background-position: 0 0, 100% 50%; }
}
.hero.has-photo {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), var(--hero-photo);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: none;
}
.hero.has-photo::before, .hero.has-photo::after { display: none; }
.hero h1 { color: #fff; }
.hero .lead { font-size: 1.15rem; max-width: 42em; margin: 0 auto 1.5rem; opacity: 0.95; }
.hero-eyebrow {
    display: inline-block;
    /* Red tag, as on combidoctor.co.uk */
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.5em 1em;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Sub-page hero — grey diagonal band with a red icon badge and dark heading.
   This matches combidoctor.co.uk, the sister site, which uses exactly two header
   types: a full-bleed photo hero on landing pages and this grey band everywhere
   else. An earlier pass made these red, which was consistent with itself but
   diverged from the sister site. */
.hero-sm {
    background: var(--color-surface);
    padding: 2.75rem 0 4.5rem;
    text-align: left;
    animation: none;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.hero-sm .container { display: flex; align-items: center; gap: 1.25rem; position: relative; flex-wrap: wrap; }
.hero-sm h1 { margin: 0; color: var(--color-text); font-size: clamp(1.5rem, 3vw, 2rem); }
.hero-sm p, .hero-sm .lead { color: var(--color-text-light); opacity: 1; }
.hero-sm .icon-badge { flex-shrink: 0; }

/* Sections */
.section { padding: 3.5rem 0; position: relative; }
.section-alt { background: var(--color-surface); }
.section-diagonal {
    background: var(--color-surface);
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    padding: 5rem 0;
    margin: -2rem 0;
}
.section-title { text-align: center; max-width: 42em; margin-left: auto; margin-right: auto; }
.section-title p { color: var(--color-text-light); }

/* Icons */
.icon-svg { width: 34px; height: 34px; color: #fff; flex-shrink: 0; }
.icon-badge {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    transition: transform 0.3s var(--ease);
    flex-shrink: 0;
}

/* Why-us reasons */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.75rem;
    margin: 2.5rem 0 1.5rem;
}
.reason-card {
    text-align: center;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.reason-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.reason-card:hover .icon-badge { transform: scale(1.08); }
.reason-card h3 { margin-bottom: 0.3em; }
.reason-card p { color: var(--color-text-light); font-size: 0.95rem; }

/* Step process */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
    text-align: center;
}
.step-card { position: relative; }
.step-icon-wrap {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease);
}
.step-card:hover .step-icon-wrap { transform: scale(1.08); }
.step-icon-wrap .icon-svg { width: 34px; height: 34px; margin: 0; }
.step-number {
    position: absolute; top: -6px; right: calc(50% - 44px);
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--color-dark); color: #fff;
    font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
}
.step-card h3 { margin-bottom: 0.3em; }
.step-card p { color: var(--color-text-light); font-size: 0.95rem; }

/* Services page feature rows */
.service-features { display: flex; flex-direction: column; gap: 1.75rem; }
.service-feature {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.5rem;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-feature-icon {
    width: 140px; height: 140px; border-radius: 50%;
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    transition: transform 0.3s var(--ease);
}
.service-feature:hover .service-feature-icon { transform: scale(1.05); }
.service-feature-icon img { width: 64px; height: 64px; filter: brightness(0) invert(1); }
.service-feature-number {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: rgba(227, 10, 23, 0.1);
    border-radius: 999px;
    padding: 0.3em 0.9em;
    margin-bottom: 0.75rem;
}

/* Cards grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
    margin-top: 2.5rem;
}
.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover .icon-badge { transform: scale(1.08); }
.card img.icon { width: 32px; height: 32px; margin: 0 auto; filter: brightness(0) invert(1); }

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    margin-top: 2.5rem;
}
.pricing-card {
    background: var(--color-surface);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card.is-selected { border-color: var(--color-primary); background: #fff; box-shadow: var(--shadow-lg); }
.pricing-card .tier-name { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--color-text); }
.pricing-card .tier-tagline { color: var(--color-text-light); font-size: 0.9rem; min-height: 2.6em; }
.pricing-card .tier-price { font-size: 1.9rem; font-weight: 700; font-family: var(--font-heading); margin: 0.5rem 0 0; }
.pricing-card .tier-price small { font-size: 0.95rem; font-weight: 400; color: var(--color-text-light); }
.pricing-card ul { list-style: none; padding: 0; margin: 1rem 0; text-align: left; flex-grow: 1; }
.pricing-card li { padding: 0.4em 0; border-bottom: 1px solid var(--color-border); }
.pricing-card li::before { content: "\2713"; color: var(--color-primary); font-weight: 700; margin-right: 0.5em; }
.pricing-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pricing-card label { cursor: pointer; display: block; }

/* Calculator */
.calculator {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 640px;
    margin: 2.5rem auto 0;
    box-shadow: var(--shadow-sm);
}
/* Any component rule that sets `display` beats the browser default for the
   hidden attribute, so hidden elements would still show. Make it stick. */
[hidden] { display: none !important; }

.calculator-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75em 0; border-bottom: 1px solid var(--color-border); }
.calculator-row:last-of-type { border-bottom: none; }
.toggle-group { display: flex; border: 2px solid var(--color-border); border-radius: 999px; overflow: hidden; }
.toggle-group button {
    font-family: var(--font-heading); font-weight: 600; border: none; background: #fff; padding: 0.6em 1.2em; cursor: pointer; font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.toggle-group button.is-active { background: var(--color-primary); color: #fff; }
.calculator-total { text-align: center; margin: 1.5rem 0; }
.calculator-total .amount { font-size: 2.5rem; font-weight: 700; font-family: var(--font-heading); color: var(--color-primary); transition: opacity 0.15s ease; }

/* FAQ accordion */
.faq-list { max-width: 760px; margin: 2.5rem auto 0; }
.faq-item { border-bottom: 1px solid var(--color-border); transition: background 0.2s ease; border-radius: var(--radius); }
.faq-item:hover { background: rgba(227, 10, 23, 0.03); }
.faq-question {
    width: 100%; text-align: left; background: none; border: none; padding: 1.1em 0.5em; font-family: var(--font-heading);
    font-weight: 600; font-size: 1.1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--color-text);
}
.faq-question::after {
    content: "+"; font-size: 1.5rem; color: var(--color-primary); flex-shrink: 0; line-height: 1;
    transition: transform 0.3s var(--ease);
}
.faq-item.is-open .faq-question::after { transform: rotate(135deg); }
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.35s var(--ease);
    color: var(--color-text-light);
}
.faq-answer > p { overflow: hidden; margin: 0; padding: 0 0.5em; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > p { padding-bottom: 1.25em; }

/* Forms */
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.35em; font-family: var(--font-heading); font-size: 0.9rem; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: 0.7em 0.9em; border: 1px solid #ccc; border-radius: var(--radius);
    font-family: var(--font-body); font-size: 1rem;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-success { background: #eaf6ec; border: 1px solid #b7dfc0; color: #2d6a34; padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.form-error { background: #fdeaea; border: 1px solid #f0b8b8; color: #a12e2e; padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; }

/* Floating card overlapping a photo hero (used if real photos are supplied later) */
.hero-floating-card {
    position: relative;
    z-index: 5;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    max-width: 420px;
    margin: -4.5rem 0 2.5rem auto;
}
@media (max-width: 760px) { .hero-floating-card { margin: -2.5rem auto 2rem; } }

/* Footer */
.site-footer { background: #fff; color: var(--color-text); padding: 3rem 0 1.5rem; border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } }
.footer-grid a { color: var(--color-text); text-decoration: none; }
.footer-grid a:hover { color: var(--color-primary); }
.footer-nav-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: 0.9rem; color: var(--color-text-light); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.footer-legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal-links a { color: var(--color-text-light); }
.social-icon { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--color-dark); align-items: center; justify-content: center; color: #fff; text-decoration: none; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.title-underline { width: 64px; height: 4px; background: var(--color-primary); border-radius: 2px; margin: 0.75rem 0 1.25rem; }

/* Quote wizard */
.wizard { max-width: 760px; margin: 0 auto; }
.wizard-progress {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px;
    margin-bottom: 2rem;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.wizard-progress-step {
    flex: 1;
    text-align: center;
    padding: 0.6em 0.5em;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-light);
    transition: background 0.2s ease, color 0.2s ease;
}
.wizard-progress-step.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 4px 12px rgba(227, 10, 23, 0.35); }
.wizard-progress-step.is-done { color: var(--color-primary); }
.wizard-panel {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
}
.wizard-question { text-align: center; margin-bottom: 2rem; }
.wizard-question .hl { color: var(--color-primary); }
.wizard-screen { display: none; }
.wizard-screen.is-active { display: block; animation: wizardStepIn 0.4s var(--ease); }
@keyframes wizardStepIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.wizard-options { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.wizard-option-card {
    flex: 1 1 200px;
    max-width: 260px;
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.25rem;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.wizard-option-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: var(--shadow); }
.wizard-option-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(227, 10, 23, 0.15), var(--shadow); transform: translateY(-4px); }
.wizard-option-card .icon-svg { width: 56px; height: 56px; color: var(--color-text); margin: 0 auto 1rem; transition: color 0.15s ease; }
.wizard-option-card:hover .icon-svg, .wizard-option-card.is-selected .icon-svg { color: var(--color-primary); }
.wizard-option-card .option-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; }
.wizard-option-card .option-sub { color: var(--color-text-light); font-size: 0.9rem; margin-top: 0.3em; }
.wizard-option-card .option-price { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; margin-top: 0.5em; color: var(--color-primary); }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.wizard-back { background: none; border: none; color: var(--color-text-light); font-family: var(--font-heading); font-weight: 600; cursor: pointer; padding: 0.5em 0; }
.wizard-back:hover { color: var(--color-primary); }
.wizard-postcode { max-width: 320px; margin: 0 auto; }
.wizard-warning {
    display: none;
    max-width: 520px;
    margin: 1.5rem auto 0;
    background: rgba(23, 23, 23, 0.06);
    border: 1px solid rgba(23, 23, 23, 0.18);
    color: #4a4a4a;
    border-radius: var(--radius);
    padding: 0.9em 1.1em;
    font-size: 0.9rem;
    text-align: left;
}
.wizard-warning.is-visible { display: block; animation: wizardStepIn 0.3s var(--ease); }

/* Legal content */
.legal-nav { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 2.5rem; }
.legal-section { margin-bottom: 3rem; }
.legal-section h2 { text-align: left; }
.legal-section h3 { margin-top: 1.5em; text-align: left; }

/* Confirmation step between the quote wizard and the GoCardless hosted page */
.confirm-wrap { max-width: 44em; }
.confirm-intro { color: var(--color-text-light); margin-bottom: 2.5rem; }

.confirm-panel,
.confirm-note {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.confirm-note { background: var(--color-surface); box-shadow: none; margin-top: 1.5rem; }
.confirm-note p:last-child { margin: 0; color: var(--color-text-light); }

.confirm-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 0.75rem;
    padding-bottom: 1.5rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
.confirm-head h2 { margin: 0; text-align: left; }
.confirm-head p { margin: 0.25rem 0 0; color: var(--color-text-light); }
.confirm-price { text-align: right; margin-left: auto; }
.confirm-price .amount {
    display: block; font-family: var(--font-heading); font-weight: 700;
    font-size: 2.25rem; line-height: 1; color: var(--color-primary);
}
.confirm-price .period { color: var(--color-text-light); font-size: 0.9rem; }

.confirm-details { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; margin: 0; }
.confirm-details dt { color: var(--color-text-light); }
.confirm-details dd { margin: 0; }

.confirm-subhead { font-weight: 600; margin: 0 0 0.75rem; }
.confirm-panel .confirm-subhead { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }

.confirm-features { list-style: none; padding: 0; margin: 0; text-align: left; }
.confirm-features li { padding: 0.4em 0; border-bottom: 1px solid var(--color-border); }
.confirm-features li:last-child { border-bottom: none; }
.confirm-features li::before { content: "\2713"; color: var(--color-primary); font-weight: 700; margin-right: 0.5em; }

.confirm-actions { margin-top: 2rem; }
.confirm-actions .btn { font-size: 1.05rem; padding: 0.95em 2.2em; }
.confirm-back { margin-top: 1.25rem; }
.confirm-back a { color: var(--color-text-light); }
.confirm-help { margin-top: 1.5rem; color: var(--color-text-light); font-size: 0.9rem; }

@media (max-width: 560px) {
    .confirm-price { text-align: left; margin-left: 0; }
    .confirm-details { grid-template-columns: 1fr; gap: 0.15rem 0; }
    .confirm-details dd { margin-bottom: 0.75rem; }
}

/* Waiting state shown while the GoCardless Direct Debit popup is open */
.confirm-waiting {
    margin-top: 2rem;
    padding: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.confirm-waiting p { color: var(--color-text-light); }
.confirm-waiting .confirm-subhead { color: var(--color-text); }

/* Recent Jobs photo grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.photo-tile {
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.photo-tile:hover, .photo-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    outline: none;
    border-color: var(--color-primary);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.lightbox-figure { margin: 0; max-width: min(900px, 92vw); text-align: center; }
.lightbox-figure img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    border-radius: var(--radius);
    margin: 0 auto;
}
.lightbox-figure figcaption { color: #fff; margin-top: 1rem; font-size: 0.95rem; }
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

/* Recent Jobs photo grid */

/* Lightbox */

/* Home hero: copy alongside a contained photo, rather than a full-bleed
   background. The supplied image is only 950px wide, so keeping it inside a
   column means it renders near its native size and stays sharp. */


/* Feature rows: photo filling one half of the row.
   Each photo is snapped to the standard ratio nearest its own (see
   render_feature_photo), so panels have clean filled edges without the heavy
   cropping a single fixed box would force. */
.feature-photo { display: flex; align-items: center; justify-content: center; }
.feature-photo img {
    aspect-ratio: var(--ar, 3/2);
    width: 100%;
    height: auto;
    /* Keeps a near-square panel from making its row far deeper than the rest */
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.3s var(--ease);
}
/* Portrait photos are sized from their height instead, so a tall frame doesn't
   make its row several times deeper than the others. */
.feature-photo-portrait img {
    width: auto;
    height: 400px;
    max-width: 100%;
}
.service-feature:hover .feature-photo img { transform: translateY(-4px); }

/* Confirmation step between the quote wizard and the GoCardless hosted page */

/* Waiting state shown while the GoCardless Direct Debit popup is open */

/* Recent Jobs photo grid */

/* Lightbox */

/* Home hero: copy alongside a contained photo, rather than a full-bleed
   background. The supplied image is only 950px wide, so keeping it inside a
   column means it renders near its native size and stays sharp. */

/* Service feature blocks: photo with the brand icon badge sitting on it */

/* Accreditation badges in the footer */
.footer-accreditations {
    margin: 2.25rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    max-width: 560px;
}
.footer-accreditations img { width: 100%; height: auto; }

/* Plans intro: copy alongside a small supporting photo. The source image is only
   272px wide, so it is deliberately kept small rather than scaled up. */


/* A long unbroken URL in body copy shouldn't be able to force the whole page to
   scroll sideways on a narrow screen. */
body { overflow-wrap: break-word; }

/* Landlord pricing cards: clarifies that no call-out charge applies */
.pricing-card .tier-note {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: -0.35rem 0 0.6rem;
}

/* Feature row — the same component as a service block, reused on other pages so
   photography appears in one consistent shape across the site rather than a
   different treatment per page. */
.feature-rows { display: flex; flex-direction: column; gap: 1.75rem; }
.feature-row {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.5rem;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-row:hover .feature-photo img { transform: translateY(-4px); }
.feature-row h2 { text-align: left; }
.feature-row .grid-2 { gap: 2.5rem; }
@media (max-width: 760px) {
    .feature-row { padding: 1.75rem; }
    /* Copy before photo on narrow screens */
    .feature-row .feature-photo { order: 2; }
}

/* Home service cards with a photo at the top, matching combidoctor.co.uk's
   home page. The photo spans the full card width and the card's own padding is
   removed at the top so the image sits flush, as theirs does. */
.card.service-card {
    padding: 0 0 1.75rem;
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.service-card-photo {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-surface);
}
.service-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}
.card.service-card:hover .service-card-photo img { transform: scale(1.04); }
.card.service-card h3 { margin: 1.25rem 1.5rem 0.5rem; }
.card.service-card p { margin: 0 1.5rem; color: var(--color-text-light); }

/* Red rule under feature-row headings — combidoctor uses this under every
   section heading on its service pages. */
.feature-row h2, .service-feature h2 { margin-bottom: 0.75rem; }
.feature-row h2::after, .service-feature h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
    margin: 0.85rem 0 0;
}

/* The photographic home hero is left-aligned, as combidoctor.co.uk's is. */
.hero.has-photo { text-align: left; }
.hero.has-photo .lead { margin-left: 0; margin-right: 0; max-width: 34em; }
.hero.has-photo .hero-actions { justify-content: flex-start; }
@media (max-width: 760px) {
    .hero.has-photo { text-align: center; }
    .hero.has-photo .lead { margin-left: auto; margin-right: auto; }
    .hero.has-photo .hero-actions { justify-content: center; }
}

/* Photographic band behind a sub-page heading. The overlay is dark enough that
   white text clears AA on any of the photos behind it, and the gradient keeps
   the left-hand side — where the badge and heading sit — the darkest part. */
.hero-sm.has-photo {
    position: relative;
    background-image:
        linear-gradient(100deg, rgba(18, 20, 28, 0.86) 0%, rgba(18, 20, 28, 0.72) 45%, rgba(18, 20, 28, 0.55) 100%),
        var(--header-photo);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    padding: 3.25rem 0 5rem;
}
.hero-sm.has-photo h1 { color: #fff; }
.hero-sm.has-photo p, .hero-sm.has-photo .lead { color: rgba(255, 255, 255, 0.9); }
.hero-sm.has-photo .icon-badge { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }

/* Legal page navigation. Long policies are easy to get lost in, so the section
   links stick to the top of the viewport while you read, the current section is
   highlighted, and each section ends with a way back. */
.legal-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2.5rem;
    padding: 0.85rem 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.legal-nav a {
    padding: 0.45em 1em;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.legal-nav a:hover { background: var(--color-primary); color: #fff; }
.legal-nav a.is-current { background: var(--color-primary); color: #fff; }

/* Anchored headings shouldn't land underneath the sticky bar */
.legal-section { scroll-margin-top: 5.5rem; }
.legal-back { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.legal-back a { color: var(--color-text-light); text-decoration: none; font-size: 0.9rem; }
.legal-back a:hover { color: var(--color-primary); }

/* Floating back-to-top, shown once you're well down any page */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-primary-dark); }

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */
/* Only applied once JavaScript has confirmed motion is wanted, so with
   scripting off or reduced-motion set, everything is simply visible. */

.motion-on .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.motion-on .reveal.is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Hero entry — the eyebrow, heading, copy and buttons arrive in sequence. */
.motion-on .hero .container > *,
.motion-on .hero-sm .container > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-on .hero.is-entered .container > *,
.motion-on .hero-sm.is-entered .container > * { opacity: 1; transform: none; }
.motion-on .hero.is-entered .container > *:nth-child(2) { transition-delay: 90ms; }
.motion-on .hero.is-entered .container > *:nth-child(3) { transition-delay: 180ms; }
.motion-on .hero.is-entered .container > *:nth-child(4) { transition-delay: 270ms; }
.motion-on .hero-sm.is-entered .container > *:nth-child(2) { transition-delay: 90ms; }

/* A very slow drift on photographic heroes. Large scale, long duration and no
   loop — enough to feel alive without ever drawing attention to itself. */
.motion-on .hero.has-photo,
.motion-on .hero-sm.has-photo { background-size: cover, 108%; }
.motion-on .hero.has-photo.is-entered,
.motion-on .hero-sm.has-photo.is-entered {
    background-size: cover, 100%;
    transition: background-size 14s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Buttons: a light sweep across on hover, plus a slightly softer lift. */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}
.motion-on .btn:hover::after { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transform: translateX(120%); }
.btn-outline::after, .btn-dark::after { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%); }

/* Cards lift a little further and gain depth rather than just moving. */
.motion-on .card, .motion-on .pricing-card, .motion-on .feature-row, .motion-on .service-feature {
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease;
}
.motion-on .photo-tile { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease; }
.motion-on .photo-tile img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.motion-on .photo-tile:hover img { transform: scale(1.06); }

/* Feature photos ease up with their row rather than snapping. */
.motion-on .feature-photo img { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1); }

/* Nav underline that grows from the centre. */
.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -4px;
    height: 2px;
    background: var(--color-primary);
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1), right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-nav a:hover::after, .main-nav a.active::after { left: 0; right: 0; }

/* Keyboard focus stays obvious throughout. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .motion-on .reveal,
    .motion-on .hero .container > *,
    .motion-on .hero-sm .container > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}