/* Public website (cdecb.ca rebuild — SPEC cdecb-website-rebuild).
   Palette/typography lifted from the live WordPress site (Astra customizer):
   primary green #3d9646 (hover #4bb754), body #444 on #f2f4f9, white content
   cards, Source Sans Pro (h2 weight 300), dark footer, green header bar with
   the white CDECB logo — matching the portal's green family (#4a7c59). */

:root {
    --cw-green: #3d9646;
    --cw-green-light: #4bb754;
    --cw-green-dark: #2e7336;
    --cw-ink: #444444;
    --cw-heading: #333333;
    --cw-muted: #6c757d;
    --cw-line: #e4e8ee;
    --cw-bg: #f2f4f9;
    --cw-card: #ffffff;
    --cw-footer-bg: #141414;
}

.cw-body {
    margin: 0;
    font-family: "Source Sans Pro", "Segoe UI", -apple-system, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--cw-ink);
    background: var(--cw-bg);
}

.cw-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { color: var(--cw-heading); font-family: inherit; }
h1 { font-weight: 700; font-size: 2.4rem; line-height: 1.25; }
h2 { font-weight: 300; font-size: 1.9rem; line-height: 1.3; }
h3 { font-weight: 400; font-size: 1.45rem; }
h4 { font-weight: 700; font-size: 1.15rem; }

/* ── header / nav (green bar, white logo + links, like the WP site) ────── */

.cw-header {
    background: var(--cw-green);
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* On the homepage the header rides over the hero photograph, as the live site
   does — a solid green slab above a green hero reads as two stacked bars. */
.cw-home .cw-header {
    position: absolute; left: 0; right: 0;
    background: transparent; box-shadow: none;
}
.cw-home .cw-hero { padding-top: 190px; }

/* Utility row: the small account/language links the live header carries above
   the main bar, rather than mixed in with the section nav. */
.cw-utility { background: rgba(0, 0, 0, 0.16); font-size: 0.82rem; }
.cw-home .cw-utility { background: rgba(0, 0, 0, 0.22); }
.cw-utility-inner { display: flex; justify-content: flex-end; gap: 22px; padding-top: 7px; padding-bottom: 7px; }
.cw-utility a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.cw-utility a:hover { color: #fff; text-decoration: underline; }

/* One row: brand left, nav right — not a second line of links under a slab. */
.cw-header-inner {
    display: flex; align-items: center; gap: 28px;
    padding-top: 14px; padding-bottom: 14px;
}
.cw-brand { text-decoration: none; display: flex; align-items: center; gap: 14px; }
.cw-logo { height: 58px; width: auto; display: block; }
.cw-brand-text { display: flex; flex-direction: column; }
.cw-brand-mark { font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; color: #fff; line-height: 1.1; }
.cw-brand-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.85); max-width: 300px; }

.cw-nav { margin-left: auto; }
.cw-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; align-items: center; }
.cw-menu > li { position: relative; }
.cw-menu > li > a {
    display: block; padding: 9px 13px; text-decoration: none; border-radius: 3px;
    color: #fff; font-size: 0.95rem; font-weight: 600; white-space: nowrap;
    transition: background 0.15s ease;
}
.cw-menu > li > a:hover { color: #fff; background: rgba(0, 0, 0, 0.18); }
.cw-menu > li > a[aria-current="page"] { background: rgba(0, 0, 0, 0.3); }
.cw-nav-login {
    background: #fff; color: var(--cw-green) !important;
    border-radius: 3px; margin-left: 6px;
}
.cw-nav-login:hover { background: #eef7ef !important; }
.cw-nav-lang { font-weight: 400 !important; opacity: 0.9; }
.cw-caret { font-size: 0.65em; opacity: 0.8; }

/* Dropdowns: hidden by default (the ul selector must outrank .cw-menu rules,
   hence ul.cw-dropdown), shown on hover/focus. White panel, dark links. */
ul.cw-dropdown {
    display: none;
    position: absolute; left: 0; top: 100%;
    background: #fff; border: 1px solid #eaeaea; border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    min-width: 250px; margin: 0; padding: 6px 0;
    list-style: none; z-index: 60;
}
.cw-has-dropdown:hover > ul.cw-dropdown,
.cw-has-dropdown:focus-within > ul.cw-dropdown { display: block; }
ul.cw-dropdown li { width: 100%; }
ul.cw-dropdown a {
    display: block; padding: 9px 18px; text-decoration: none;
    color: var(--cw-ink); font-size: 0.92rem;
}
ul.cw-dropdown a:hover { background: #f2f7f3; color: var(--cw-green); }

.cw-nav-toggle {
    display: none; margin-left: auto; font-size: 1.5rem; line-height: 1;
    background: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px; padding: 6px 12px; cursor: pointer;
}

@media (max-width: 1023px) {
    .cw-nav-toggle { display: block; }
    .cw-nav { display: none; width: 100%; }
    .cw-nav.open { display: block; }
    .cw-menu { flex-direction: column; align-items: stretch; }
    .cw-menu > li > a { padding: 12px 8px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
    ul.cw-dropdown {
        display: block; position: static; border: none; box-shadow: none;
        background: rgba(0, 0, 0, 0.15); border-radius: 0; padding: 0 0 0 16px;
    }
    ul.cw-dropdown a { color: #fff; }
    ul.cw-dropdown a:hover { background: rgba(0, 0, 0, 0.2); color: #fff; }
    .cw-nav-login { margin-left: 0; }
}

/* ── hero / sections ──────────────────────────────────────────────────── */

/* The live WP site runs a full-bleed photograph under a green wash. A flat
   gradient read as a downgrade next to it, so the same purchased photos are
   served from wwwroot/img/website/. The gradient stays underneath as the
   fallback while the image loads (and if it ever 404s). */
.cw-hero {
    position: relative;
    background:
        linear-gradient(150deg, rgba(46, 115, 54, 0.88), rgba(20, 70, 26, 0.92)),
        var(--cw-hero-img, none),
        linear-gradient(150deg, var(--cw-green), var(--cw-green-dark));
    background-size: cover, cover, cover;
    background-position: center, center 28%, center;
    color: #fff; padding: 112px 0 96px;
}
.cw-hero--home { --cw-hero-img: url("/img/website/hero-home.jpg"); }
.cw-hero--interior {
    --cw-hero-img: url("/img/website/hero-interior.jpg");
    padding: 72px 0 60px;
}
.cw-hero h1 { color: #fff; margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3rem); }
.cw-hero-sub { font-size: 1.15rem; max-width: 680px; opacity: 0.95; font-weight: 300; }

/* Hero split: copy left, a card floated right — the live homepage shape. */
.cw-hero-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 48px; align-items: center; }
.cw-hero-card {
    background: #fff; color: var(--cw-ink); border-radius: 4px;
    padding: 28px 26px; text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.cw-hero-card h2 { margin: 0 0 10px; font-size: 1.3rem; }
.cw-hero-card p { margin: 0 0 18px; font-size: 0.95rem; color: var(--cw-muted); }
@media (max-width: 900px) {
    .cw-hero-split { grid-template-columns: 1fr; gap: 32px; }
    .cw-hero { padding: 72px 0 56px; }
}
.cw-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.cw-section { padding: 48px 0; }
.cw-section-alt { background: #e9eef4; }
.cw-cta-band { background: var(--cw-green); color: #fff; text-align: center; }
.cw-cta-band h2, .cw-cta-band p { color: #fff; }

/* ── buttons (WP: green, white text, 10px/40px padding) ───────────────── */

.cw-btn {
    /* border-box or a width:100% button (the sidebar cards) overflows its
       card by its own 32px of side padding */
    box-sizing: border-box;
    display: inline-block; padding: 10px 32px; border-radius: 3px;
    text-decoration: none; font-weight: 600; font-size: 0.95rem;
    font-family: inherit; border: 2px solid transparent; cursor: pointer;
    transition: background 0.15s ease;
}
.cw-btn-primary { background: var(--cw-green); color: #fff; border-color: var(--cw-green); }
.cw-btn-primary:hover { background: var(--cw-green-light); border-color: var(--cw-green-light); }
.cw-btn-outline { border-color: #fff; color: #fff; background: transparent; }
.cw-btn-outline:hover { background: rgba(255, 255, 255, 0.15); }
.cw-btn-light { background: #fff; color: var(--cw-green); }
.cw-btn-light:hover { background: #eef7ef; }

/* ── cards / lists ────────────────────────────────────────────────────── */

.cw-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cw-card {
    display: block; background: var(--cw-card); border: 1px solid var(--cw-line);
    border-radius: 6px; padding: 18px; text-decoration: none; color: var(--cw-ink);
    transition: box-shadow 0.15s ease;
}
.cw-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); }
.cw-card h3 { margin: 8px 0 0; font-size: 1.05rem; font-weight: 600; color: var(--cw-green); }
.cw-card-date { font-size: 0.82rem; color: var(--cw-muted); margin-right: 8px; }
.cw-card-tag {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
    background: #e7f2e8; color: var(--cw-green-dark);
    border-radius: 999px; padding: 2px 9px;
}
.cw-more { color: var(--cw-green); text-decoration: none; font-weight: 600; }
.cw-more:hover { color: var(--cw-green-light); text-decoration: underline; }

.cw-post-list { list-style: none; margin: 24px 0; padding: 0; }
.cw-post-list li { padding: 12px 0; border-bottom: 1px solid var(--cw-line); }
.cw-post-list a { color: var(--cw-green-dark); text-decoration: none; font-weight: 600; }
.cw-post-list a:hover { color: var(--cw-green); text-decoration: underline; }
.cw-post-meta { margin-top: -8px; }
.cw-post-thumb { max-width: 100%; border-radius: 6px; margin: 12px 0; }

.cw-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.cw-filter-row a {
    padding: 6px 16px; border-radius: 999px; text-decoration: none;
    color: var(--cw-ink); background: #fff; border: 1px solid var(--cw-line); font-size: 0.9rem;
}
.cw-filter-row a.active { background: var(--cw-green); border-color: var(--cw-green); color: #fff; }

.cw-job-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.cw-job-card {
    display: block; background: var(--cw-card); border: 1px solid var(--cw-line);
    border-left: 4px solid var(--cw-green); border-radius: 6px;
    padding: 16px 20px; text-decoration: none; color: var(--cw-ink);
}
.cw-job-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); }
.cw-job-card h3 { margin: 0 0 4px; font-weight: 600; color: var(--cw-green-dark); }
.cw-job-meta { margin: 0; color: var(--cw-muted); }
.cw-job-dates { margin: 4px 0 0; font-size: 0.85rem; color: var(--cw-muted); }

/* ── content pages (Astra "separate container": white card on gray bg) ── */

.cw-page {
    padding: 36px 40px 56px;
    background: var(--cw-card);
    max-width: none;
    margin: 0;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.cw-center { text-align: center; }

/* The body was capped at 820px inside a 1240px shell and left-aligned, which
   left roughly half the viewport empty and stacked everything into one thin
   column. The page now uses its full width; readable line length is kept by
   limiting the *text* measure rather than the container, so an image floated
   alongside fills the space instead of a dead margin. */
.cw-prose { max-width: none; }
/* .cw-prose is also set ON .cw-container on the homepage. Without this the
   rule above cancels the container's own 1240px cap and the body goes flush
   to the viewport edge. */
.cw-container.cw-prose { max-width: 1240px; }
.cw-prose > p, .cw-prose > blockquote { max-width: 74ch; }

/* Images sit beside their text rather than spanning the column. */
.cw-prose img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0 16px; }


/* Long link lists — the Credit Portfolio forms pages carry 36 of them, and the
   FAQ indexes more — run as columns instead of one item per line down a narrow
   strip. :has() keeps short lists untouched. */
.cw-prose ul:has(> li:nth-child(9)) { columns: 2; column-gap: 48px; max-width: none; }
.cw-prose ul:has(> li:nth-child(18)) { columns: 3; }
.cw-prose ul:has(> li:nth-child(9)) > li { break-inside: avoid; }
@media (max-width: 900px) {
    .cw-prose ul:has(> li:nth-child(9)),
    .cw-prose ul:has(> li:nth-child(18)) { columns: 1; }
}
.cw-prose a { color: var(--cw-green); }
.cw-prose a:hover { color: var(--cw-green-light); }
.cw-prose table { border-collapse: collapse; width: 100%; }
.cw-prose td, .cw-prose th { border: 1px solid var(--cw-line); padding: 8px 10px; }
.cw-quote {
    margin: 0; background: #f6f9f6; border-left: 4px solid var(--cw-green);
    border-radius: 4px; padding: 16px 20px;
}
.cw-quote cite { display: block; margin-top: 8px; color: var(--cw-muted); font-style: normal; font-weight: 600; }

/* ── contact form ─────────────────────────────────────────────────────── */

.cw-contact-form { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cw-line); max-width: 820px; }
.cw-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-form-grid label { display: flex; flex-direction: column; font-weight: 600; font-size: 0.9rem; gap: 4px; }
.cw-form-wide { grid-column: 1 / -1; }
.cw-form-grid input, .cw-form-grid textarea {
    font: inherit; font-weight: 400; padding: 9px 12px;
    border: 1px solid #d9dee0; border-radius: 3px; background: #fff;
}
.cw-form-grid input:focus, .cw-form-grid textarea:focus { outline: none; border-color: var(--cw-green); box-shadow: 0 0 0 2px rgba(61, 150, 70, 0.2); }
.cw-form-check { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 0.92rem; }
.cw-req { color: #b03a2e; }
.cw-recaptcha { margin: 12px 0; }
.cw-form-error {
    background: #fdecea; color: #b03a2e; border: 1px solid #f5c6cb;
    border-radius: 4px; padding: 10px 14px; margin-bottom: 14px;
}
.cw-contact-details { margin-top: 40px; color: var(--cw-muted); }

@media (max-width: 640px) {
    .cw-form-grid { grid-template-columns: 1fr; }
    .cw-hero h1 { font-size: 1.7rem; }
    .cw-logo { height: 48px; }
    .cw-brand-sub { display: none; }
}

/* ── footer (dark, like the WP footer overlay) ────────────────────────── */

.cw-footer { background: var(--cw-footer-bg); color: #b9bec4; margin-top: 48px; font-size: 0.92rem; }
.cw-footer a { color: #fff; }
.cw-footer h4 { color: #fff; margin-bottom: 8px; }
.cw-footer-logo { height: 72px; width: auto; margin-bottom: 10px; }
.cw-footer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px; padding-top: 44px; padding-bottom: 24px;
}
.cw-footer-links { list-style: none; margin: 0; padding: 0; }
.cw-footer-links li { margin: 5px 0; }
.cw-footer-links a { text-decoration: none; }
.cw-footer-links a:hover { color: var(--cw-green-light); text-decoration: underline; }
.cw-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px; padding-bottom: 24px; font-size: 0.85rem;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cw-land-ack { font-style: italic; max-width: 560px; }


/* ── content page: body + promo rail (live WP content-page shape) ───────── */

.cw-page-title {
    margin: 32px 0 20px; padding-left: 18px; font-weight: 400;
    border-left: 5px solid var(--cw-green); line-height: 1.15;
}
.cw-page-h1 { margin-top: 0; }

.cw-page-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    gap: 32px; align-items: start; margin-bottom: 56px;
    /* Sized so the body column lands near 700px: a comfortable measure that
       fills its card, rather than 74ch of text floating in a wider one. */
    max-width: 1120px;
}

.cw-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
.cw-side-card {
    background: var(--cw-card); border-radius: 6px; padding: 26px 24px;
    text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.cw-side-card h2 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 400; }
.cw-side-card p { margin: 0 0 18px; font-size: 0.92rem; color: var(--cw-muted); }
.cw-side-card .cw-btn { width: 100%; white-space: normal; padding-left: 16px; padding-right: 16px; }

/* The second card is the photo panel the live site runs under a green wash. */
.cw-side-card--feature {
    background:
        linear-gradient(150deg, rgba(46, 115, 54, 0.9), rgba(20, 70, 26, 0.93)),
        url("/img/website/hero-interior.jpg");
    background-size: cover; background-position: center;
    color: #fff; text-align: left;
}
.cw-side-card--feature h2 { color: #fff; }
.cw-side-card--feature p { color: rgba(255, 255, 255, 0.92); }
.cw-btn-dark { background: #141414; color: #fff; border-color: #141414; }
.cw-btn-dark:hover { background: #000; border-color: #000; }

@media (max-width: 1023px) {
    .cw-page-grid { grid-template-columns: 1fr; }
    .cw-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
    .cw-sidebar .cw-side-card { flex: 1 1 280px; }
}


/* ── link runs ─────────────────────────────────────────────────────────────
   The Credit Portfolio pages list 36 documents, and the imported WP bodies
   put each link in its own <p> rather than a list — so a list rule never
   applies and they run one per line for two screens. Paragraphs that are
   nothing but a link become inline-block half-widths, which pairs consecutive
   ones into two columns with no wrapper element and leaves ordinary
   paragraphs alone. */
/* The imported WP bodies mark each document link up as an anchor wrapping a
   heading — <a href="/site/asset/31/1-2019.docx"><h3>Form 1 …</h3></a> — so it
   renders as a full-width heading block and the Credit Portfolio pages run 36
   of them down two screens. Render them as a two-column set of link tiles. */
.cw-prose a:has(> h3:only-child),
.cw-prose a:has(> h4:only-child) {
    display: inline-block; vertical-align: top; box-sizing: border-box;
    width: calc(50% - 8px); margin: 0 6px 10px 0; padding: 11px 14px;
    border: 1px solid var(--cw-line); border-radius: 4px;
    background: #fff; text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cw-prose a:has(> h3:only-child):hover,
.cw-prose a:has(> h4:only-child):hover {
    border-color: var(--cw-green); background: var(--cw-green-wash, #f6f9f6);
}
.cw-prose a:has(> h3:only-child) > h3,
.cw-prose a:has(> h4:only-child) > h4 {
    margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35;
    color: var(--cw-green);
}
/* A plain link among the tiles (e.g. "Switch to PDF Format") must not be
   dragged onto a tile's line by the inline-block flow. */
.cw-prose > a:not(:has(h3)):not(:has(h4)) { display: block; margin: 0 0 14px; }

/* A paragraph that is nothing but a link pairs up the same way. */
.cw-prose p:has(> a:only-child) {
    display: inline-block; vertical-align: top;
    width: calc(50% - 24px); margin: 0 20px 12px 0; max-width: none;
}
@media (max-width: 720px) {
    .cw-prose a:has(> h3:only-child),
    .cw-prose a:has(> h4:only-child),
    .cw-prose p:has(> a:only-child) { display: block; width: auto; margin-right: 0; }
}

/* ── form: keep the required marker on the label's own line ─────────────── */
.cw-form-grid label { display: block; font-weight: 600; font-size: 0.9rem; }
.cw-form-grid label > input,
.cw-form-grid label > textarea { display: block; width: 100%; margin-top: 5px; }
.cw-req { color: #b03a2e; margin-left: 2px; }

/* ── footer: the live site's creed block and trademark notice ──────────── */
.cw-creed { font-size: 1.05rem; line-height: 1.45; letter-spacing: 0.04em; margin: 0 0 14px; }
.cw-creed span { color: var(--cw-green-light); font-weight: 700; }
.cw-footer-creed p { font-size: 0.9rem; }
.cw-trademark { font-size: 0.78rem; opacity: 0.75; max-width: 70ch; }


/* ── homepage sections (see Helpers/WebsiteHomeSections.cs) ─────────────── */

.cw-home-body { max-width: 1240px; }
.cw-home-body > h1 { text-align: center; margin: 8px 0 4px; }
/* the seal under the title */
.cw-home-body > h1 + img, .cw-home-body > img:first-of-type {
    display: block; margin: 0 auto 36px; max-width: 170px;
}
.cw-home-body > h2 {
    margin: 56px 0 22px; padding-left: 16px;
    border-left: 5px solid var(--cw-green); font-weight: 400;
}

/* photo left, copy right — the live "What is a CDE?" block */
.cw-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 52px; align-items: start; margin: 40px 0 8px;
}
.cw-split-media img { width: 100%; height: auto; border-radius: 4px; display: block; margin: 0; }
.cw-split-body > h2 {
    margin-top: 0; padding-left: 16px; border-left: 5px solid var(--cw-green); font-weight: 400;
}
.cw-split-body > p { max-width: none; }
/* the first link in the copy becomes the primary button, as on the live page */
.cw-split-body > a:first-of-type {
    display: inline-block; margin: 12px 14px 0 0; padding: 11px 26px; border-radius: 3px;
    background: var(--cw-green); color: #fff; text-decoration: none; font-weight: 600;
}
.cw-split-body > a:first-of-type:hover { background: var(--cw-green-light); color: #fff; }
/* every later link stays a plain text link, as on the live page */
.cw-split-body > a:first-of-type ~ a {
    display: block; margin-top: 14px; color: var(--cw-green); text-decoration: underline;
}
/* the homepage form sits under its own heading from the body */
.cw-home-body .cw-contact-form { border-top: none; margin-top: 8px; padding-top: 0; }

/* call-to-action card: copy left, the trailing link as a button right */
.cw-callout {
    background: var(--cw-card); border-radius: 6px; padding: 28px 32px;
    margin: 28px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px; align-items: center;
}
.cw-callout > h3 { grid-column: 1; margin: 0 0 8px; font-weight: 400; }
.cw-callout > p { grid-column: 1; margin: 0; max-width: 80ch; color: var(--cw-muted); }
.cw-callout > img { grid-column: 1; max-width: 150px; }
.cw-callout > a {
    grid-column: 2; grid-row: 1 / span 3; align-self: center;
    display: inline-block; padding: 13px 30px; border-radius: 3px;
    background: #141414; color: #fff; text-decoration: none; font-weight: 600;
    white-space: nowrap;
}
.cw-callout > a:hover { background: #000; color: #fff; }

/* the Vision / Mission icon cards */
.cw-feature-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px; margin: 32px 0 8px; padding: 32px;
    background: var(--cw-card); border-radius: 6px;
}
.cw-feature img { width: 64px; height: auto; margin: 0 0 14px; display: block; }
.cw-feature h5 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 600; }
.cw-feature p { margin: 0; color: var(--cw-muted); max-width: none; font-size: 0.95rem; }

@media (max-width: 860px) {
    .cw-split { grid-template-columns: 1fr; gap: 28px; }
    .cw-callout { grid-template-columns: 1fr; }
    .cw-callout > a { grid-column: 1; grid-row: auto; justify-self: start; }
}


/* ── FAQ index (built in WebsiteController.Page) ───────────────────────── */

/* The imported FAQ shells leave stray plugin form controls behind — a search
   box with no handler. The real contact form is a sibling of .cw-prose, not
   inside it, so hiding controls here only removes the dead ones. */
.cw-prose input, .cw-prose select, .cw-prose button, .cw-prose textarea { display: none; }

.cw-faq-index { margin-top: 8px; }
.cw-faq-filter { display: block; max-width: 420px; margin: 0 0 10px; }
.cw-faq-filter span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; }
.cw-faq-filter input {
    display: block; width: 100%; box-sizing: border-box; font: inherit;
    padding: 10px 13px; border: 1px solid #d9dee0; border-radius: 3px; background: #fff;
}
.cw-faq-count { color: var(--cw-muted); font-size: 0.88rem; margin: 0 0 14px; }
.cw-faq-cat { margin: 26px 0 0; }
.cw-faq-cat > h2 {
    font-size: 1.3rem; font-weight: 600; margin: 0 0 12px;
    padding-left: 14px; border-left: 4px solid var(--cw-green);
}
.cw-faq-n {
    font-size: 0.78rem; font-weight: 600; color: var(--cw-muted);
    background: #eef2f6; border-radius: 10px; padding: 2px 9px; margin-left: 8px;
    vertical-align: middle;
}
.cw-faq-index ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.cw-faq-index li { break-inside: avoid; margin: 0 0 10px; }
.cw-faq-index li a { color: var(--cw-green); text-decoration: none; line-height: 1.4; }
.cw-faq-index li a:hover { text-decoration: underline; }
@media (max-width: 860px) { .cw-faq-index ul { columns: 1; } }