/* CSS */

/*//////////*/
/*Colour palette*/
/* Every colour on the site comes from this block. Change a colour here once and it updates everywhere. */
:root {

    /* Core colours */
    --black: #111111;
    --white: #F9F9F9;

    /* 4th colour: all CTA buttons, the footer background and the key words (.accent) */
    --accent: #0057FF;
    --accent-dark: #0046CC;  /* button hover */
    --on-accent: #F9F9F9;    /* text that sits on top of the accent colour */

    /* AMBER OPTION: to use amber instead, replace the three accent lines above with these three
       --accent: #FFB800;
       --accent-dark: #E0A200;
       --on-accent: #111111;
       Amber is hard to read as text on a light background, so also swap the .accent rule below */

    /* Neutral shades */
    --grey: #555555;       /* secondary text on light backgrounds */
    --line: #E2E2E2;       /* borders and dividers on light backgrounds */
    --soft: #EFEFEF;       /* alternate section backgrounds and the "before" card */
    --dark-card: #1C1C1C;  /* cards on black sections */
    --dark-line: #2E2E2E;  /* borders and dividers on black sections */
    --muted: #A3A3A3;      /* secondary text on black sections */
    --field-line: #8A8A8A; /* borders and placeholder text in form fields */
}


/*//////////*/
/*Base styles*/
/* Same box sizing everywhere, so padding never changes an element's width */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Page defaults: font, text colour and background live here, not in each section */
body {
    margin: 0;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;

    background: var(--white);
    color: var(--black);
}

/* Key words that signify importance (hero, guide and comparison titles) */
.accent {
    color: var(--accent);
}

/* AMBER OPTION: use a highlighter instead of coloured text
.accent {
    background: linear-gradient(transparent 55%, var(--accent) 55%);
    color: var(--black);
}
*/

/* Keyboard focus ring, so every link and button shows where you are */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* Black sections: a coloured ring is hard to see on black, so use white */
.navbar a:focus-visible,
.navbar button:focus-visible,
.trust-section a:focus-visible {
    outline-color: var(--white);
}


/*//////////*/
/*CTA buttons*/
/* One button style shared by every CTA: nav, hero, plan and the repeat at the bottom (the form buttons come from the form kit) */
.nav-cta,
.hero-local__primary,
.cta,
.trust-section__cta a {
    display: inline-block;
    padding: 15px 24px;

    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);

    text-decoration: none;
    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

/* Hover: darker shade and a small lift */
.nav-cta:hover,
.hero-local__primary:hover,
.cta:hover,
.trust-section__cta a:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
}


/*//////////*/
/*Nav styles*/
/* CSS */
.navbar {
    display: flex;
    align-items: center;
    padding: 1.2rem 2rem;

    /* Black bar with light text */
    background: var(--black);
    color: var(--white);
}

.logo {
    margin-right: auto;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--white);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
}

/* Underline on hover for the normal links only (the CTA has its own hover) */
.nav-links a:not(.nav-cta):hover {
    text-decoration: underline;
}

/* Contact link styled as a button: a smaller padding so it fits the bar */
.nav-links .nav-cta {
    padding: 10px 20px;
    color: var(--on-accent);
}

/* Mobile responsiveness */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

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

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

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

@media (max-width: 750px) {

    .navbar {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-top: 1rem;
    }

    .nav-links.is-open {
        display: flex;
    }

    /* Divider lines between the links in the open menu (dark version for the black bar) */
    .nav-links a {
        padding: 0.9rem 0;
        border-top: 1px solid var(--dark-line);
    }

    /* The CTA becomes a full-width button at the bottom of the menu */
    .nav-links .nav-cta {
        margin-top: 1rem;
        padding: 14px;
        border-top: 0;
        text-align: center;
    }

}


/*//////////*/
/*Hero styles*/
.hero-local {
    min-height: 75vh;
    display: flex;
    align-items: center;
    padding: 80px 8%;

    /* White fades out to the hero image on the right (the image is optional) */
    background:
        linear-gradient(
            90deg,
            var(--white) 45%,
            transparent
        ),
        url("images/hero.jpg") center / cover;
}

.hero-local__content {
    max-width: 650px;
}

/* Location pill above the headline */
.hero-local__location {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 14px;
    border-radius: 50px;
    background: var(--black);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
}

/* Smallest size lowered to 36px so a long headline does not take up the whole phone screen */
.hero-local h1 {
    margin-bottom: 20px;
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 800;
    line-height: 1;
}

.hero-local p {
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--grey);
}

.hero-local__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

/* Primary button: its style comes from the shared CTA buttons block at the top */

/* Secondary button (not used on this page yet) */
.hero-local__secondary {
    padding: 15px 24px;
    border-radius: 8px;
    border: 1px solid var(--grey);
    text-decoration: none;
    font-weight: 700;
    color: var(--black);
}

.hero-local__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 800px) {
    .hero-local {

        /* On phones the image sits under a near-solid white layer so the text stays readable */
        background:
            linear-gradient(
                rgba(249,249,249,0.9),
                rgba(249,249,249,0.9)
            ),
            url("images/hero.jpg") center / cover;
    }

    /* One trust item per line on phones and small tablets */
    .hero-local__trust {
        flex-direction: column;
        gap: 6px;
    }
}


/*///////*/
/*SB7 template css*/
/* Used for the problem + guide section. Same 90px top and bottom spacing as every other section. */
.body-sb7 {
    max-width: 800px;
    margin: 0 auto;
    padding: 90px 20px;
}

.body-sb7__header {
    max-width: 700px;
}

.body-sb7__header span {
    display: block;
    margin-bottom: 15px;
    font-weight: inherit;   /* was 600: now follows the heading's weight */
}

.body-sb7__header h2 {
    margin: 0 0 20px;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
}

/* Paragraphs under the title */
.body-sb7__header p {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--grey);
}

/* Journey list (not used on this page yet) */
.body-sb7__journey {
    margin: 0;
    padding: 0;
    list-style: none;
}

.body-sb7__journey li {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;

    padding: 25px 0;
    border-bottom: 1px solid var(--line);
}

.body-sb7__journey strong {
    font-size: 1.1rem;
}

.body-sb7__journey p {
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 700px) {
    .body-sb7__journey li {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
/*////////*/


/*//////////*/
/*feature grid 12 */
/* Soft grey background, so the plan cards stand out from the white sections around them */
.feature-grid {
    padding: 90px 20px 50px;
    background: var(--soft);
}

.feature-grid__heading {
    max-width: 700px;
    margin: 0 auto 45px;
    text-align: center;
}

.feature-grid__heading span {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
}

.feature-grid__heading h2 {
    font-size: clamp(32px, 5vw, 50px);
    margin: 12px 0;
}

.feature-grid__heading p {
    color: var(--grey);
    line-height: 1.7;
}

.feature-grid__items {
    max-width: 1100px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Plan card: white on the soft grey section */
.feature {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.feature:hover {
    transform: translateY(-4px);
    border-color: var(--black);
}

.feature__icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 10px;
    background: var(--black);
    color: var(--white);
}

.feature h3 {
    margin: 20px 0 10px;
}

.feature p {
    color: var(--grey);
    line-height: 1.6;
}

/*For mobile*/
@media (max-width: 750px) {
    .feature-grid__items {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}


/*//////////*/
/*Plan CTA*/
/* The CTA under the plan cards: same soft grey as the section above, so they read as one block */
.plan-cta {
    padding: 0 20px 90px;
    background: var(--soft);
    text-align: center;
}


/*////////*/
/* 1 general service card the comparison one*/
/* Flexible Card: Comparison */

.compare-cards {
    padding: 90px 20px;
}

.compare-cards__container {
    max-width: 1100px;
    margin: 0 auto;
}

.compare-cards__intro {
    max-width: 750px;
    margin-bottom: 50px;
}

/* Eyebrow (not used on this page, the title does the talking) */
.compare-cards__eyebrow {
    display: inline-block;
    margin-bottom: 15px;

    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.compare-cards__intro h2 {
    margin: 0 0 20px;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.compare-cards__intro p {
    line-height: 1.8;
}

/* Button (not used on this page) */
.compare-cards__button {
    display: inline-block;
    margin-top: 20px;

    text-decoration: none;
    font-weight: 700;
}


/* Card grid */

.compare-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}


/* Base card */

.compare-card {
    padding: 40px;

    border-radius: 20px;
    border: 1px solid transparent;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Left card: muted and grey, this is the "cost of doing nothing" */

.compare-card--before {
    background: var(--soft);
    color: var(--grey);

    border-color: var(--line);
}


/* Right card: black, so it is clearly the stronger option */

.compare-card--after {
    background: var(--black);
    color: var(--white);

    border-color: var(--black);
}


/* Hover only the preferred card */

.compare-card--after:hover {
    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(17, 17, 17, 0.25);
}


/* Card content */

.compare-card__label {
    display: block;
    margin-bottom: 18px;

    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.compare-card h3 {
    margin-bottom: 25px;
    font-size: 1.5rem;
}

/* Heading on the grey card is full black, so it still stands out from the grey list */
.compare-card--before h3 {
    color: var(--black);
}

.compare-card__list {
    display: grid;
    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.compare-card__list li {
    position: relative;
    padding-left: 25px;

    line-height: 1.6;
}

.compare-card__list li::before {
    position: absolute;
    left: 0;
    top: 0;

    font-weight: 700;
}

/* Crosses on the left card, ticks on the right card */

.compare-card--before li::before {
    content: "✕";
}

.compare-card--after li::before {
    content: "✓";
    color: var(--accent);
}


/* Mobile */

/* Tablet and mobile: keep the two cards side by side and scale them down */

@media (max-width: 900px) {
    .compare-cards__grid {
        gap: 14px;
    }

    .compare-card {
        padding: 24px;
        border-radius: 16px;
    }

    .compare-card h3 {
        margin-bottom: 18px;
        font-size: 1.2rem;
    }

    .compare-card__list {
        gap: 10px;
        font-size: 0.95rem;
    }

    .compare-card__list li {
        padding-left: 22px;
    }
}

@media (max-width: 600px) {
    .compare-cards__grid {
        gap: 10px;
    }

    .compare-card {
        padding: 14px;
        border-radius: 12px;
    }

    .compare-card__label {
        margin-bottom: 10px;
        font-size: 0.68rem;
    }

    .compare-card h3 {
        margin-bottom: 12px;
        font-size: 1rem;
    }

    .compare-card__list {
        gap: 8px;
        font-size: 0.8rem;
    }

    .compare-card__list li {
        padding-left: 16px;
        line-height: 1.45;
    }
}


/*////////*/
/* Testimonial with cta*/
/* Black section: the "how I work" promises and the repeated CTA */
.trust-section {
    background: var(--black);
    color: var(--white);
    padding: 90px 20px;
}

.trust-section__heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 40px;
}

.trust-section__heading span {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.trust-section__heading h2 {
    font-size: clamp(30px, 5vw, 52px);
}

.trust-section__heading p {
    color: var(--muted);
}

.trust-section__reviews {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: auto;
}

/* Card on the black section */
.trust-section__reviews article {
    background: var(--dark-card);
    border: 1px solid var(--dark-line);
    padding: 28px;
    border-radius: 14px;
}

/* Tick (or stars, once there are real testimonials) */
.trust-section__reviews article span {
    color: var(--accent);
    font-weight: 700;
}

.trust-section__reviews article strong {
    color: var(--muted);
}

/* Repeated CTA box. The button style comes from the shared CTA buttons block at the top. */
.trust-section__cta {
    text-align: center;
    margin: 50px auto 0;
    padding: 32px;
    background: var(--dark-card);
    border: 1px solid var(--dark-line);
    border-radius: 16px;
    max-width: 900px;
}

.trust-section__cta a {
    margin-top: 12px;
}


/*Mobile*/
/* Tablet and mobile: keep the two cards side by side and scale them down */

@media (max-width: 900px) {
    .trust-section__reviews {
        gap: 14px;
    }

    .trust-section__reviews article {
        padding: 20px;
        border-radius: 12px;
    }

    .trust-section__reviews article p {
        margin: 10px 0;
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

@media (max-width: 600px) {
    .trust-section__reviews {
        gap: 10px;
    }

    .trust-section__reviews article {
        padding: 14px;
        border-radius: 10px;
    }

    .trust-section__reviews article p {
        margin: 8px 0;
        font-size: 0.8rem;
    }

    .trust-section__reviews article strong {
        font-size: 0.75rem;
    }
}


/*////////*/
/* NAP 11*/
/* Footer on the accent colour, so it matches the CTA buttons */
.nap-essentials {
    padding: 65px 20px 20px;
    background: var(--accent);
    color: var(--on-accent);
}

.nap-essentials__grid {
    max-width: 1100px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 45px;
}

.nap-essentials__brand h2 {
    margin: 0 0 10px;
    font-size: 26px;
}

.nap-essentials__brand p {
    max-width: 340px;
    margin: 0;
    opacity: 0.9;
    line-height: 1.7;
}

.nap-essentials h3 {
    margin: 0 0 14px;
    font-size: 14px;
}

.nap-essentials address {
    display: grid;
    gap: 10px;

    font-style: normal;
    line-height: 1.7;
    opacity: 0.9;
}

.nap-essentials address a {
    width: fit-content;
    padding: 4px 0;

    color: inherit;
    text-decoration: none;
}

.nap-essentials address a:hover {
    text-decoration: underline;
}

.nap-essentials__hours {
    margin: 0;
    display: grid;
    gap: 8px;

    opacity: 0.9;
}

.nap-essentials__hours div {
    max-width: 260px;

    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.nap-essentials__hours dt {
    font-weight: 600;
}

.nap-essentials__hours dd {
    margin: 0;
}

/* Bottom bar: divider line, copyright and legal links */
.nap-essentials__bottom {
    max-width: 1100px;
    margin: 50px auto 0;
    padding-top: 20px;

    border-top: 1px solid currentColor;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    font-size: 13px;
}

.nap-essentials__bottom nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.nap-essentials__bottom a {
    color: inherit;
    text-decoration: none;
}

.nap-essentials__bottom a:hover {
    text-decoration: underline;
}

/*Mobile*/
/* Tablet and mobile: keep the three columns and the bottom bar in a row, and scale everything down */

@media (max-width: 900px) {
    .nap-essentials {
        padding: 45px 20px 16px;
    }

    .nap-essentials__grid {
        gap: 24px;
    }

    .nap-essentials__brand h2 {
        font-size: 20px;
    }

    .nap-essentials__brand p,
    .nap-essentials address,
    .nap-essentials__hours {
        font-size: 14px;
        line-height: 1.5;
    }

    .nap-essentials h3 {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .nap-essentials__bottom {
        margin-top: 30px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .nap-essentials {
        padding: 32px 14px 14px;
    }

    .nap-essentials__grid {
        gap: 14px;
    }

    .nap-essentials__brand h2 {
        margin-bottom: 6px;
        font-size: 15px;
    }

    .nap-essentials__brand p,
    .nap-essentials address,
    .nap-essentials__hours {
        font-size: 11px;
    }

    .nap-essentials address {
        gap: 6px;
    }

    /* The email is one long word: let it break instead of pushing the columns apart */
    .nap-essentials address a {
        overflow-wrap: anywhere;
    }

    .nap-essentials h3 {
        margin-bottom: 8px;
        font-size: 12px;
    }

    /* Day above time inside each row, because the column is too narrow for them side by side */
    .nap-essentials__hours {
        gap: 6px;
    }

    .nap-essentials__hours div {
        flex-direction: column;
        gap: 0;
    }

    .nap-essentials__bottom {
        margin-top: 24px;
        font-size: 10.5px;
    }

    .nap-essentials__bottom nav {
        gap: 10px;
    }
}


/*///////*/
/*contact.html form*/
/* Page container: centres the form and gives it the same 90px top and bottom spacing as the other sections */
.contact-section {
    max-width: 640px;
    margin: 0 auto;
    padding: 90px 20px;
}

/* Title and intro above the form */
.contact-section__header {
    margin-bottom: 40px;
}

.contact-section__header h1 {
    margin: 0 0 15px;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
}

.contact-section__header p {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--grey);
}

/*//////////*/
/*Multi-step contact form (library No. 10)*/
/* Snippet code, kept as it came. Only the TOKENS block was changed, so the form uses the site palette.
   Two small edits are marked "SITE EDIT". The form needs no other CSS. */

/* =========================================================================
   1. TOKENS — edit these to re-theme this form. Nothing else needs to change.
   ========================================================================= */

.cf {
    --cf-accent: var(--accent);    /* buttons, links, ticks */
    --cf-accent-text: var(--on-accent); /* text on the accent colour */
    --cf-text: var(--black);      /* main text */
    --cf-muted: var(--grey);     /* hints and placeholders */
    --cf-bg: transparent;    /* background of the form box */
    --cf-field-bg: var(--white);  /* background of inputs */
    --cf-border: var(--field-line);    /* input borders */
    --cf-focus: var(--accent);     /* focus ring */
    --cf-error: #b91c1c;     /* error text and borders */
    --cf-success: #15803d;   /* success message */
    --cf-radius: 8px;        /* inputs and buttons */
    --cf-card-radius: 0px;   /* the form box itself */
    --cf-gap: 20px;          /* space between fields */
    --cf-pad: 0px;           /* padding inside the form box */
    --cf-max-width: 100%;   /* widest the form may get */
    --cf-col-min: 220px;     /* narrowest a column may get (.cf-grid, .cf-row) */
}

/* =========================================================================
   2. BASE — the form "kit". Identical in every contact-form snippet.
   Don't edit this part per client; change the TOKENS above instead.
   -------------------------------------------------------------------------
   Why adding or editing fields can't break the styling:

   • Controls are styled by ELEMENT TYPE inside .cf (input, select, textarea,
     button). There is no per-field wrapper class to forget, so any control
     you add anywhere inside the form is styled automatically.

   • Selectors use :where(), which adds ZERO specificity. Your own CSS can
     override anything here with a plain one-class selector.

   • Layout helpers (.cf-grid, .cf-full, .cf-row) flow new fields in by
     themselves. No nth-child, no hard-coded column counts.
   ========================================================================= */

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

.cf {
    position: relative;
    display: grid;
    gap: var(--cf-gap);
    width: 100%;
    max-width: var(--cf-max-width);
    padding: var(--cf-pad);
    border-radius: var(--cf-card-radius);
    background: var(--cf-bg);
    color: var(--cf-text);
    font: inherit;
    line-height: 1.5;
}

.cf > * {
    min-width: 0;
}

/* ---- Text blocks ------------------------------------------------------- */

.cf :where(h2, h3, p) {
    margin: 0;
}

.cf :where(h2, h3) {
    line-height: 1.2;
}

.cf :where(a) {
    color: var(--cf-accent);
    text-underline-offset: 2px;
}

.cf-eyebrow {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cf-muted);
}

.cf-intro {
    color: var(--cf-muted);
}

/* ---- Field = label text + control (+ hint + error) ---------------------- */

.cf-field {
    display: grid;
    gap: 8px;
    align-content: start;
}

.cf-label,
.cf-fieldset > legend {
    font-weight: 600;
}

.cf-hint {
    font-size: 0.875em;
    font-weight: 400;
    color: var(--cf-muted);
}

.cf-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cf-fieldset > legend {
    padding: 0;
    margin-bottom: 10px;
}

/* Red asterisk on required fields (progressive enhancement: needs :has) */
.cf-field:has(:required) > .cf-label::after {
    content: " *";
    color: var(--cf-error);
}

/* ---- Controls: styled by element type, not by wrapper ------------------- */

.cf :where(
    input:not(
        [type="checkbox"], [type="radio"], [type="file"], [type="hidden"],
        [type="submit"], [type="button"], [type="reset"], [type="range"],
        [type="color"], [type="image"]
    ),
    select,
    textarea
) {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0.8em 0.9em;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    background: var(--cf-field-bg);
    color: inherit;
    font: inherit;
    line-height: 1.4;
}

.cf :where(textarea) {
    min-height: 8em;
    resize: vertical;
}

.cf ::placeholder {
    color: var(--field-line);   /* SITE EDIT: lighter than the typed text, so example text is not mistaken for an answer */
    opacity: 1;      /* Firefox dims placeholders by default; keep them readable */
}

.cf :where(input, select, textarea):focus {
    border-color: var(--cf-focus);
}

.cf :where(input, select, textarea, button):focus-visible {
    outline: 2px solid var(--cf-focus);
    outline-offset: 2px;
}

/* Set by the JS when the server (or the browser) rejects a field */
.cf :where([aria-invalid="true"]) {
    border-color: var(--cf-error);
}

.cf-error {
    display: block;
    margin: 0;
    font-size: 0.875em;
    font-weight: 500;
    color: var(--cf-error);
}

/* ---- Checkboxes & radios ------------------------------------------------ */

.cf :where(input[type="checkbox"], input[type="radio"]) {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    margin: 0.175em 0 0;      /* lines the box up with the first line of text */
    accent-color: var(--cf-accent);
}

.cf-options {
    display: grid;
    gap: 12px;
}

.cf-options--cols {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.cf-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    font-weight: 400;
    cursor: pointer;
}

/* A plain <label><input type="checkbox"> Text</label> works too */
.cf label:has(> input[type="checkbox"], > input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    font-weight: 400;
    cursor: pointer;
}

/* ---- File input ---------------------------------------------------------- */

.cf :where(input[type="file"]) {
    display: block;
    width: 100%;
    padding: 0.6em;
    border: 1px dashed var(--cf-border);
    border-radius: var(--cf-radius);
    background: var(--cf-field-bg);
    color: inherit;
    font: inherit;
}

.cf :where(input[type="file"])::file-selector-button {
    margin-right: 0.8em;
    padding: 0.5em 0.9em;
    border: 0;
    border-radius: calc(var(--cf-radius) - 2px);
    background: var(--cf-accent);
    color: var(--cf-accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Buttons: any <button> you add looks right (so does <a class="cf-button">);
        add cf-button--ghost for the quiet version ----------------------------- */

.cf :where(button, input[type="submit"], .cf-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.9em 1.4em;
    border: 1px solid var(--cf-accent);
    border-radius: var(--cf-radius);
    background: var(--cf-accent);
    color: var(--cf-accent-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cf :where(button:hover, .cf-button:hover) {
    opacity: 0.9;
}

.cf :where(button:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf .cf-button--ghost {
    background: transparent;
    color: var(--cf-accent);
}

.cf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

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

/* Fields flow into as many columns as fit (min width = --cf-col-min). */
.cf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cf-col-min)), 1fr));
    gap: var(--cf-gap);
}

.cf-grid > .cf-full {
    grid-column: 1 / -1;
}

/* One line: fields grow, buttons keep their size (inline / compact forms) */
.cf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.cf-row > .cf-field {
    flex: 1 1 var(--cf-col-min);
}

.cf-row > button {
    flex: none;
}

/* ---- Feedback ------------------------------------------------------------ */

.cf-status {
    margin: 0;
    font-weight: 500;
}

/* An empty status line must not leave a gap under the button. The negative
   margin cancels the grid gap, and the element stays in the page for screen readers. */
.cf-status:empty {
    margin-top: calc(-1 * var(--cf-gap));
}

.cf-status[data-state="info"] {
    color: var(--cf-muted);
}

.cf-status[data-state="success"] {
    color: var(--cf-success);
}

.cf-status[data-state="error"] {
    color: var(--cf-error);
}

.cf[aria-busy="true"] {
    cursor: progress;
}

/* Honeypot: invisible to people, tempting to bots. Never use display:none. */
.cf-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .cf * {
        transition: none !important;
    }
}

/* =========================================================================
   3. THIS SNIPPET — layout extras
   ========================================================================= */

.cf-step {
    display: grid;
    gap: var(--cf-gap);
}

.cf-step[hidden] {
    display: none;
}

.cf-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--line);   /* SITE EDIT: light track, so the form border colour is not reused for the bar */
    overflow: hidden;
}

.cf-progress__bar {
    display: block;
    height: 100%;
    width: var(--cf-progress, 33%);
    background: var(--cf-accent);
    transition: width 0.25s ease;
}

/* Small note under the form */
.contact-section__note {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--grey);
}

/*//////////*/
/*FAQ cards*/
/* Soft grey section: stands apart from the white contact section above and the accent footer below */
.faq-cards {
    padding: 90px 20px;
    background: var(--soft);
}

.faq-cards__heading {
    max-width: 650px;
    margin: 0 auto 40px;
    text-align: center;
}

/* Eyebrow: same look as the other section eyebrows */
.faq-cards__heading span {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
}

.faq-cards__heading h2 {
    font-size: clamp(32px, 5vw, 50px);
    margin: 12px 0;
}

.faq-cards__heading p {
    color: var(--grey);
}

.faq-cards__list {
    max-width: 850px;
    margin: auto;
    display: grid;
    gap: 14px;
}

/* One question card: white on the soft grey section */
.faq-card {
    padding: 20px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;

    transition: border-color 0.3s ease;
}

/* Hover and open: a darker border shows which card you are on */
.faq-card:hover,
.faq-card[open] {
    border-color: var(--black);
}

.faq-card summary {
    cursor: pointer;
    font-weight: 600;
}

/* Keyboard focus ring on the question */
.faq-card summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

.faq-card p {
    margin-bottom: 0;
    color: var(--grey);
    line-height: 1.7;
}


/*//////////*/
/*Spacing and motion*/
/* On phones the big 90px section spacing is reduced to 60px */
@media (max-width: 700px) {
    .body-sb7 {
        padding: 60px 20px;
    }

    .feature-grid {
        padding: 60px 20px 40px;
    }

    .plan-cta {
        padding: 0 20px 60px;
    }

    .compare-cards,
    .trust-section,
    .faq-cards {
        padding: 60px 20px;
    }

    .contact-section {
        padding: 60px 20px;
    }
}

/* People who turn animations off in their device settings get no hover movement */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}