/* ==========================================================================
   Tenant public site — wears each org's own name, not the platform's
   Design language matched to the Hello Elementor / Elementor-built reference:
   blue #2A9EC8 accent, Montserrat headings, DM Sans body, eyebrow + heading
   pairs, alternating image/copy rows, dark gradient footer.
   ========================================================================== */

:root {
    --font-head: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

    --blue: #2A9EC8;
    --blue-dark: #1F7C9E;
    --blue-darker: #17607A;
    --blue-soft: #EAF6FB;
    --blue-soft-border: #C4E5F1;

    --ink: #1A2B33;
    --ink-soft: #3F535C;
    --muted: #64777F;
    --faint: #9AA8AE;

    --bg: #FFFFFF;
    --bg-soft: #F5F9FB;
    --line: #E3EBEF;

    --content: 800px;
    --wide: 1200px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    --shadow-sm: 0 1px 3px rgba(26, 43, 51, 0.06), 0 1px 2px rgba(26, 43, 51, 0.04);
    --shadow-md: 0 10px 30px rgba(26, 43, 51, 0.08), 0 2px 8px rgba(26, 43, 51, 0.04);
    --shadow-lg: 0 24px 60px rgba(26, 43, 51, 0.14), 0 6px 16px rgba(26, 43, 51, 0.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Column layout with a growing main so the footer sits at the bottom of the viewport on
   short pages instead of riding up under the content. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > .chw-footer, body > .chw-portal-footer { flex-shrink: 0; }

html, body {
    margin: 0; padding: 0; background: var(--bg);
    font-family: var(--font-body); color: var(--ink-soft);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-size: 16px; line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
h1, h2, h3, h4, h5 {
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
    letter-spacing: -0.01em; margin: 0; line-height: 1.2;
}
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.chw-container { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.chw-narrow { max-width: var(--content); margin: 0 auto; }

/* Shared type pieces ------------------------------------------------------ */

.chw-eyebrow {
    display: inline-block; color: var(--blue); font-family: var(--font-head);
    font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    margin-bottom: 14px;
}
.chw-h2 { font-size: 40px; margin: 0 0 18px; }
.chw-h2 b, .chw-h2 .accent { color: var(--blue); font-weight: 700; }
.chw-lead { font-size: 17px; color: var(--muted); }

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

@keyframes chw-bob {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.chw-btn-lg, .chw-btn-outline, .chw-btn-ghost {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-head); font-weight: 600; font-size: 15px;
    padding: 14px 28px; border-radius: var(--radius-sm); border: 2px solid transparent;
}
.chw-btn-lg { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.chw-btn-lg:hover { background: var(--blue-dark); color: #fff; animation: chw-bob .4s ease; }
.chw-btn-outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.chw-btn-outline:hover { background: var(--blue); color: #fff; animation: chw-bob .4s ease; }
.chw-btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.chw-btn-ghost:hover { background: #fff; color: var(--blue-dark); animation: chw-bob .4s ease; }

/* ==========================================================================
   HEADER — logo left, nav centre, CTA right
   ========================================================================== */

/* Frosted rather than solid white: the page tints and photos read through it as you scroll,
   which is what stops a sticky bar looking like a lid sitting on the page.
   The rgba background is the fallback wherever backdrop-filter is unsupported. */
.chw-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(227, 235, 239, 0.9);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .chw-header {
        background: rgba(255, 255, 255, 0.62);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
}
.chw-header-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    max-width: var(--wide); margin: 0 auto; padding: 14px 24px;
}
.chw-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--ink); }
.chw-brand .mark {
    width: 38px; height: 38px; border-radius: var(--radius-sm); flex: none;
    background: linear-gradient(155deg, var(--blue), var(--blue-darker));
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
}
.chw-nav { display: flex; gap: 30px; align-items: center; }
.chw-nav a {
    font-family: var(--font-head); color: var(--ink); font-size: 15px; font-weight: 500;
    position: relative; padding: 4px 0;
}
.chw-nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
    background: var(--blue); transition: right .2s ease;
}
.chw-nav a:hover { color: var(--blue); }
.chw-nav a:hover::after { right: 0; }
.chw-header-cta { flex: none; }
.chw-nav-toggle, .chw-nav-btn { display: none; }

/* ==========================================================================
   HERO — full-bleed photo under a gradient, copy and trust card on top
   ========================================================================== */

/* The photo comes in as --chw-hero-image, set per block so the CMS can swap it.
   Gradients are listed before the image so they paint over it: a directional wash that
   is heaviest behind the copy on the left, plus a top scrim that keeps the frosted
   header legible where it overlaps a bright sky. */
.chw-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(520px, 66vh, 700px);
    padding: 96px 24px 104px;
    background-image:
        linear-gradient(180deg, rgba(8, 32, 43, 0.55) 0%, rgba(8, 32, 43, 0) 26%),
        linear-gradient(96deg, rgba(8, 32, 43, 0.88) 0%, rgba(8, 32, 43, 0.72) 38%, rgba(8, 32, 43, 0.42) 66%, rgba(10, 54, 71, 0.34) 100%),
        var(--chw-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--blue-darker);   /* holds the copy legible before the photo loads */
}

.chw-hero-inner {
    position: relative; z-index: 1;
    width: 100%;
    max-width: var(--wide); margin: 0 auto;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}

.chw-hero-copy { max-width: 640px; }
.chw-hero h1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.12; margin: 0 0 20px; color: #fff; }
.chw-hero .lead { font-size: 18px; color: rgba(255, 255, 255, 0.86); margin: 0 0 30px; max-width: 560px; }
.chw-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }

/* Outline button inverts on the photo — the default ink-on-white version disappears. */
.chw-hero .chw-btn-outline {
    color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chw-hero .chw-btn-outline:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; color: #fff; }

/* Glass card, so the photo still reads through the trust badge rather than being
   blocked out by a solid white panel. */
.chw-hero-card {
    justify-self: end;
    max-width: 300px;
    padding: 28px 28px 30px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 18px 50px rgba(4, 22, 30, 0.32);
    color: #fff;
}
.chw-hero-card .icon { color: #fff; display: flex; margin-bottom: 16px; }
.chw-hero-card .title {
    font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #fff; margin-bottom: 7px;
}
.chw-hero-card .desc { font-size: 14.5px; color: rgba(255, 255, 255, 0.82); line-height: 1.6; }

/* Small inline trust ticks under the hero copy */
.chw-hero-ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.chw-hero-ticks span { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.chw-hero-ticks svg { color: #7FD4F0; flex: none; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.chw-section { padding: 88px 24px; }
.chw-section.tight { padding: 56px 24px; }
.chw-section.alt { background: var(--bg-soft); }
.chw-section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.chw-section-head .chw-h2 { font-size: 38px; }
.chw-section-head .sub { color: var(--muted); font-size: 17px; margin: 0; }

/* Alternating image + copy rows ------------------------------------------- */

.chw-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: var(--wide); margin: 0 auto; }
.chw-feature-row.reverse .media { order: 2; }
.chw-feature-row .media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
.chw-feature-row .media .placeholder { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); aspect-ratio: 1/1; }
.chw-feature-row .copy .chw-h2 { text-align: left; }

/* Icon list (checkmark rows) ---------------------------------------------- */

.chw-icon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.chw-icon-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ink-soft); }
.chw-icon-list .ico { flex: none; color: var(--blue); display: flex; }
.chw-icon-list a { color: var(--ink-soft); }
.chw-icon-list a:hover { color: var(--blue); }
.chw-icon-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 32px; margin-top: 28px; }

/* Feature grid — "why us" value props with icons -------------------------- */

.chw-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; max-width: var(--wide); margin: 0 auto; }
.chw-feature-item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.chw-feature-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--blue-soft-border); }
.chw-feature-item .ico {
    width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--blue-soft); color: var(--blue);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.chw-feature-item h3 { font-size: 18px; margin: 0 0 9px; }
.chw-feature-item p { font-size: 15px; color: var(--muted); margin: 0; }

/* Case-study / result cards ----------------------------------------------- */

.chw-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; max-width: var(--wide); margin: 0 auto; }
.chw-case-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.chw-case-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.chw-case-card img { width: 100%; aspect-ratio: 5/6; object-fit: cover; }
.chw-case-card .body { padding: 26px 28px 30px; }
.chw-case-card h4 { font-size: 19px; line-height: 1.35; margin: 0 0 12px; }
.chw-case-card p { font-size: 15px; color: var(--muted); margin: 0; }

/* Service cards ------------------------------------------------------------ */

.chw-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; max-width: var(--wide); margin: 0 auto; }
.chw-service-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.chw-service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--blue-soft-border); }
.chw-service-card .icon {
    width: 54px; height: 54px; border-radius: var(--radius-md); background: var(--blue-soft); color: var(--blue);
    display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
    font-family: var(--font-head); font-weight: 700; font-size: 20px;
}
.chw-service-card h3 { font-size: 20px; margin: 0 0 10px; }
.chw-service-card p { font-size: 15px; color: var(--muted); margin: 0 0 16px; }
.chw-service-card .price { font-family: var(--font-head); font-size: 14px; color: var(--blue); font-weight: 700; }
.chw-service-card .arrow { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.chw-service-card:hover .arrow { color: var(--blue); }

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

.chw-cta-band {
    background:
        linear-gradient(135deg, rgba(42,158,200,.94) 0%, rgba(23,96,122,.96) 100%),
        url("/img/cta-dusk.jpg") center/cover no-repeat;
    border-radius: var(--radius-xl); padding: 68px 48px; max-width: var(--wide); margin: 0 auto;
    position: relative; overflow: hidden; text-align: center;
}
.chw-cta-band::before { content: ""; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.09); }
.chw-cta-band::after { content: ""; position: absolute; left: -60px; bottom: -110px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.06); }
.chw-cta-band .chw-eyebrow { color: rgba(255,255,255,.75); position: relative; }

/* In the hero the eyebrow becomes a glass chip — it sits on a photo now, and plain small
   caps over an image read as an artefact rather than a label. */
.chw-hero .chw-eyebrow {
    padding: 7px 15px; border-radius: 999px; margin-bottom: 20px; color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.chw-cta-band h2 { color: #fff; font-size: 36px; position: relative; margin-bottom: 16px; }
.chw-cta-band p { color: rgba(255,255,255,.85); font-size: 17px; max-width: 560px; margin: 0 auto 30px; position: relative; }
.chw-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.chw-cta-band .chw-btn-lg { background: #fff; color: var(--blue-dark); }
.chw-cta-band .chw-btn-lg:hover { background: #F0FAFD; color: var(--blue-darker); }

/* FAQ accordion (native details/summary — no JS) --------------------------- */

.chw-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.chw-faq details {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.chw-faq details[open] { border-color: var(--blue-soft-border); box-shadow: var(--shadow-sm); }
.chw-faq summary {
    cursor: pointer; padding: 19px 22px; list-style: none;
    font-family: var(--font-head); font-weight: 600; font-size: 16.5px; color: var(--ink);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.chw-faq summary::-webkit-details-marker { display: none; }
.chw-faq summary:hover { color: var(--blue); }
.chw-faq summary::after {
    content: ""; flex: none; width: 11px; height: 11px; border-right: 2.5px solid var(--blue);
    border-bottom: 2.5px solid var(--blue); transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}
.chw-faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.chw-faq .answer { padding: 0 22px 21px; color: var(--muted); font-size: 15.5px; line-height: 1.75; }

/* Testimonials ------------------------------------------------------------ */

.chw-testimonial-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px;
    box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.chw-testimonial-card .quote { flex: 1; }
.chw-testimonial-card .stars { color: #F5B301; font-size: 16px; letter-spacing: 3px; margin-bottom: 14px; }
.chw-testimonial-card p.quote { font-size: 16px; color: var(--ink-soft); margin: 0 0 18px; }
.chw-testimonial-card .attribution { font-family: var(--font-head); font-size: 14.5px; font-weight: 700; color: var(--ink); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.chw-footer { background: linear-gradient(160deg, #1E323B 0%, #12212A 100%); color: #A9B9C0; padding: 0 24px 26px; }
.chw-footer-contact-bar {
    max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px;
    padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.09);
    font-family: var(--font-head); font-size: 14.5px; font-weight: 500; color: #E2EBEF;
}
.chw-footer-contact-bar span { display: flex; align-items: center; gap: 10px; }
.chw-footer-contact-bar a { color: #E2EBEF; }
.chw-footer-contact-bar a:hover { color: #fff; }
.chw-footer-contact-bar svg { color: var(--blue); flex: none; }

.chw-footer-grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; padding: 52px 0 44px; }
.chw-footer-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 17px; margin-bottom: 16px; }
.chw-footer-brand .mark { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.chw-footer p { font-size: 14.5px; line-height: 1.7; max-width: 300px; }
.chw-footer h4 { color: #fff; font-family: var(--font-head); font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.chw-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.chw-footer ul a { color: #A9B9C0; font-size: 14.5px; }
.chw-footer ul a:hover { color: #fff; }
.chw-social-row { display: flex; gap: 10px; margin-top: 18px; }
.chw-social-row a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.09); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.chw-social-row a:hover { background: var(--blue); color: #fff; }
.chw-footer-divider { max-width: var(--wide); margin: 0 auto; height: 1px; background: rgba(255,255,255,.09); }
.chw-footer-bottom { max-width: var(--wide); margin: 22px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: #7E9099; }
.chw-footer-bottom ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.chw-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; max-width: 660px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.chw-form-field { margin-bottom: 20px; }
.chw-form-field label { display: block; font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.chw-form-field input, .chw-form-field select, .chw-form-field textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 15px; font-family: var(--font-body); background: var(--bg-soft); color: var(--ink);
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.chw-form-field input:focus, .chw-form-field select:focus, .chw-form-field textarea:focus {
    outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3.5px var(--blue-soft);
}
.chw-form-row { display: flex; gap: 16px; }
.chw-form-row .chw-form-field { flex: 1; }
.chw-alert { background: var(--blue-soft); border: 1px solid var(--blue-soft-border); color: var(--blue-darker); padding: 14px 18px; border-radius: var(--radius-sm); font-size: 15px; margin-bottom: 22px; }
.chw-alert-error { background: #FDEEEC; border-color: #F5CFC7; color: #B3411F; }
.chw-status-pill { display: inline-block; font-family: var(--font-head); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }

/* Blog -------------------------------------------------------------------- */

.chw-blog-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; transition: box-shadow .18s ease, transform .18s ease; }
.chw-blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.chw-blog-card h3 { font-size: 19px; margin: 0 0 10px; }
.chw-blog-card .meta { font-family: var(--font-head); font-size: 13px; color: var(--faint); margin-bottom: 14px; font-weight: 500; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .chw-hero-inner { grid-template-columns: 1fr; gap: 38px; }
    .chw-hero-card { justify-self: start; max-width: 340px; }
    .chw-feature-row { grid-template-columns: 1fr; gap: 40px; }
    .chw-feature-row.reverse .media { order: 0; }
    .chw-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
    .chw-nav {
        position: fixed; inset: 68px 0 0 0; background: #fff; flex-direction: column;
        align-items: flex-start; padding: 28px; gap: 22px; overflow-y: auto;
        transform: translateX(110%); transition: transform .22s ease; z-index: 39;
    }
    .chw-nav-toggle:checked ~ .chw-header .chw-nav { transform: translateX(0); }
    .chw-nav a { font-size: 18px; }
    .chw-nav-btn {
        display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
        border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
    }
    .chw-header-cta { display: none; }
    .chw-hero { min-height: 0; padding: 64px 24px 72px; background-position: 62% center; }
    .chw-hero-inner { grid-template-columns: 1fr; gap: 34px; }
    .chw-hero-card { justify-self: stretch; max-width: none; }
    .chw-section { padding: 60px 24px; }
    .chw-h2, .chw-section-head .chw-h2 { font-size: 30px; }
    .chw-icon-cols { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .chw-footer-grid { grid-template-columns: 1fr; }
    .chw-cta-band { padding: 46px 26px; }
    .chw-cta-band h2 { font-size: 27px; }
    .chw-form-row { flex-direction: column; gap: 0; }
    .chw-form-card { padding: 26px; }
}

/* ==========================================================================
   Service map — full-bleed embedded map of the area we cover
   ========================================================================== */

/* Padding lives on the section, not the footer, so the block keeps its bottom gap even
   when the areas and CTA are cleared out and the map is the last thing in it. */
.chw-map-section { padding: 72px 0; background: var(--bg-soft); }
/* The shared section head carries a 56px bottom margin; the frame supplies its own
   spacing here, so it is dropped rather than stacked. */
.chw-map-section .chw-section-head { margin-bottom: 0; }

/* The frame is deliberately outside .chw-container so the map runs edge to edge.
   A fixed vh-based height rather than an aspect-ratio: a 16/9 box turns into a
   letterbox slot on a phone, and a map needs vertical room more than it needs a
   particular shape. */
.chw-map-frame {
    width: 100%;
    height: clamp(400px, 58vh, 640px);
    margin-top: 34px;
    background: #DFE8EC;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.chw-map-frame iframe {
    display: block;   /* kills the inline-element baseline gap under the frame */
    width: 100%;
    height: 100%;
    border: 0;
}

.chw-map-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px 26px; flex-wrap: wrap; padding-top: 26px;
}
.chw-map-areas {
    display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0;
}
.chw-map-areas li {
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 15px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 700px) {
    .chw-map-section { padding: 52px 0; }
    .chw-map-frame { height: clamp(360px, 64vh, 520px); margin-top: 26px; }
}

/* ==========================================================================
   Section waves — soft edges between tinted and white bands
   ========================================================================== */

/* Each wave is painted in its own section's colour and pushed outside that section's box,
   so it bleeds over the neighbour. Two tinted sections next to each other therefore cancel
   out — the wave lands on its own colour and vanishes — which keeps this correct no matter
   how blocks get reordered in the CMS. */
.chw-wave {
    position: absolute; left: 0; right: 0;
    height: clamp(34px, 4.4vw, 72px);
    line-height: 0;           /* no inline-descender gap under the svg */
    pointer-events: none;
    color: var(--bg-soft);    /* the fill, inherited by the path below */
}
.chw-wave svg { display: block; width: 100%; height: 100%; }
.chw-wave path { fill: currentColor; }

.chw-wave-top { top: 0; transform: translateY(-99%); }
.chw-wave-bottom { bottom: 0; transform: translateY(99%); }

.chw-section.alt, .chw-map-section { position: relative; }

@media (max-width: 700px) {
    .chw-wave { height: clamp(26px, 7vw, 44px); }
}

/* ==========================================================================
   Sandbox banner
   ========================================================================== */

/* Sticky above the header rather than scrolling away: it is a standing caveat about the
   whole site, so it should still be there when someone hits a bug three pages in. */
.chw-sandbox-banner {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 9px 20px; text-align: center;
    background: #FEF3C7; border-bottom: 1px solid #FCD34D; color: #78350F;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 500; line-height: 1.45;
}
.chw-sandbox-banner svg { flex: none; }

/* The site header is sticky too; without this the two fight for the same offset and the
   header slides under the banner. */
.chw-sandbox-banner ~ .chw-header { top: 38px; }

@media (max-width: 640px) {
    .chw-sandbox-banner { font-size: 12.5px; padding: 8px 14px; text-align: left; }
    .chw-sandbox-banner ~ .chw-header { top: 0; position: static; }
}

.chw-sandbox-banner-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 4px 12px; border-radius: 999px; text-decoration: none;
    background: rgba(120, 53, 15, .10); color: #78350F;
    font-size: 12.5px; font-weight: 700; line-height: 1.4;
    transition: background .14s ease;
}
.chw-sandbox-banner-btn:hover { background: rgba(120, 53, 15, .18); color: #78350F; }

/* An uploaded logo stands in for the wordmark. Capped by height so a wide or a square logo
   both sit correctly in a header row without the layout depending on the file's dimensions. */
.chw-brand-logo { max-height: 40px; max-width: 190px; object-fit: contain; display: block; }
.chw-footer-brand .chw-brand-logo { max-height: 36px; }