/*
 * NOVO Clean Energy - holding website
 *
 * CANONICAL PALETTE - taken from the approved production logo lockup
 * (assets/images/novo-logo-tagline.png). The approved logo and favicon are
 * the canonical visual source for this holding site. See CLAUDE.md >
 * Brand Rules.
 *
 *   --nce-navy   #0C273F   principal dark surface and primary text
 *   --nce-blue   #0994B7   principal blue accent
 *   --nce-gold   #FDB940   restrained secondary accent
 *
 * favicon.svg uses #0094B7 for its blue. That small asset discrepancy is
 * accepted; the CSS uses #0994B7 from the complete logo lockup.
 *
 * Contrast: --nce-blue measures 3.54:1 against white. That clears the 3:1
 * threshold for non-text UI (focus rings, borders, rules, markers) but not
 * the 4.5:1 needed for normal small text, so blue is never used for body
 * copy on light backgrounds. Navy is 15.25:1 on white.
 *
 * --nce-slate, --nce-rule and --nce-ice are DERIVED INTERFACE TONES needed
 * for readable secondary text, hairline dividers and tinted surfaces. They
 * are not NOVO brand colours and must not be treated as such.
 */

/* ---------------------------------------------------------------------------
   Typeface: Manrope, self-hosted
   See assets/fonts/README.md for source, licence and provenance.
   --------------------------------------------------------------------------- */

/*
 * One variable file covers every weight the site uses (400/500/600/700/800),
 * so no static weight files are needed. WOFF2 alone is enough for every
 * browser the site supports.
 */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Variable.woff2') format('woff2-variations'),
         url('../fonts/Manrope-Variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/*
 * Metric-matched fallback, used only while Manrope is loading.
 *
 * Manrope has a taller x-height than Arial (0.540 vs 0.519 of em), so plain
 * Arial would visibly reflow on swap. size-adjust scales Arial to match, and
 * the ascent/descent overrides make it produce the same line box, which keeps
 * cumulative layout shift at zero.
 *
 *   size-adjust     0.540 / 0.5186          = 104.1%
 *   ascent-override (2132 / 2000) / 1.041   = 102.4%
 *   descent-override ( 600 / 2000) / 1.041  =  28.8%
 */
@font-face {
    font-family: 'Manrope Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 104.1%;
    ascent-override: 102.4%;
    descent-override: 28.8%;
    line-gap-override: 0%;
}

:root {
    /* Typeface */
    --nce-font: 'Manrope', 'Manrope Fallback', Arial, Helvetica, sans-serif;

    /* Canonical brand colours (approved logo lockup) */
    --nce-navy: #0c273f;
    --nce-blue: #0994b7;
    --nce-gold: #fdb940;

    /* Derived interface tones - NOT brand colours */
    --nce-slate: #5a6e82;
    --nce-rule: #d8e2eb;
    --nce-ice: #f1f6fa;

    /* Role tokens */
    --nce-ink: var(--nce-navy);
    --nce-muted: var(--nce-slate);
    --nce-accent: var(--nce-blue);
    --nce-amber: var(--nce-gold);
    --nce-tint: var(--nce-ice);
    --nce-focus: var(--nce-blue);

    --nce-container: 1240px;
    --nce-gutter: 24px;
    --nce-header-h: 122px;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    flex-direction: column;

    background: #ffffff;
    color: var(--nce-ink);
    font-family: var(--nce-font);
    font-size: 17px;
    line-height: 1.6;

    /* Manrope's default figures are proportional; tabular keeps the grant
       values, company numbers and capacities aligned. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
   Site shell: skip link, header, navigation, main, footer
   --------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
    z-index: 20;

    padding: 10px 14px;
    background: #ffffff;
    border: 2px solid var(--nce-focus);
    color: var(--nce-ink);
    font-size: 14px;
    text-decoration: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;

    border-bottom: 1px solid var(--nce-rule);
    background: #ffffff;

    /* Very restrained separation while scrolling; reads as a soft edge only. */
    box-shadow: 0 6px 18px -14px rgba(12, 39, 63, 0.55);
}

.site-header__inner {
    max-width: var(--nce-container);
    margin: 0 auto;
    padding: 18px var(--nce-gutter);

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/*
 * 186px, up from 160px. The lockup's tagline is set very small relative to
 * the wordmark, and at 160px it was close to illegible; the extra 16% makes
 * it readable without changing the header's character.
 *
 * The logo drives the header height, so --nce-header-h is set from it:
 * 186px wide is 84.6px tall at the asset's 904x411 aspect, plus the inner
 * padding and the 1px bottom border.
 */
.site-brand__logo {
    display: block;
    width: 186px;
    height: auto;
}

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

    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
}

.site-nav__link {
    display: block;
    padding: 10px 0;

    border-bottom: 2px solid transparent;
    color: var(--nce-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

/* Current-page and hover indicators use blue: 3.54:1, clears the 3:1 rule. */
.site-nav__link:hover {
    border-bottom-color: var(--nce-focus);
}

.site-nav__link.is-current {
    border-bottom-color: var(--nce-focus);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 10px 12px;

    background: #ffffff;
    border: 1px solid var(--nce-rule);
    color: var(--nce-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.nav-toggle__bars {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    background: var(--nce-ink);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--nce-ink);
}

.nav-toggle__bars::before {
    top: -6px;
}

.nav-toggle__bars::after {
    top: 6px;
}

.site-main {
    flex: 1 1 auto;
}

.page {
    max-width: var(--nce-container);
    margin: 0 auto;
    padding: 72px var(--nce-gutter) 96px;
}

.page__title {
    margin: 0;
    color: var(--nce-ink);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page__title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 24px;
    background: var(--nce-accent);
}

.page__status {
    margin: 26px 0 0;
    color: var(--nce-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/*
 * Corporate footer.
 *
 * Navy, so it needs its own light-on-dark values. The translucent whites are
 * derived interface tones, not brand colours: they exist because secondary
 * text and hairlines on navy need to sit below white without dropping under
 * 4.5:1. rgba(255,255,255,0.72) measures 8.51:1 on --nce-navy.
 *
 * The top hairline matters because on pages ending in a navy .cta-band the
 * footer would otherwise merge into one continuous navy block.
 */
.site-footer {
    background: var(--nce-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.site-footer__inner {
    max-width: var(--nce-container);
    margin: 0 auto;
    padding: 64px var(--nce-gutter) 40px;
}

/* The single gold detail, matching the 48x3 rule used on the CTA band. */
.site-footer__inner::before {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin-bottom: 40px;
    background: var(--nce-amber);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px 40px;
}

.site-footer__brand {
    max-width: 46ch;
}

/*
 * The supplied all-white logo variant, used because the navy footer would
 * otherwise hide the navy wordmark in the standard colour asset. Neither
 * asset is modified; the header continues to use the colour version.
 */
.site-footer__logo {
    display: block;
    width: 176px;
    height: auto;
}

.site-footer__descriptor {
    max-width: 42ch;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
}

.site-footer__heading {
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

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

.site-footer__list > li + li {
    margin-top: 12px;
}

.site-footer__link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.site-footer__link:hover {
    text-decoration: underline;
    text-decoration-color: var(--nce-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.site-footer__company {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.7;
}

.site-footer__label {
    margin: 22px 0 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.site-footer__address {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.7;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 32px;

    margin-top: 52px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__copyright {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 500;
}

.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__legal-links .site-footer__link {
    font-size: 14px;
}

.site-footer__link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (min-width: 700px) {
    .site-footer__top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1060px) {
    .site-footer__top {
        grid-template-columns: 1.5fr 1fr 1.2fr;
        gap: 48px;
    }

    .site-footer__inner {
        padding-top: 76px;
        padding-bottom: 44px;
    }
}

/* Visible keyboard focus for every interactive element in the shell. */
.skip-link:focus-visible,
.site-brand:focus-visible,
.site-nav__link:focus-visible,
.nav-toggle:focus-visible {
    outline: 2px solid var(--nce-focus);
    outline-offset: 3px;
}

/*
 * Header and navigation: collapsed mode.
 *
 * The inline desktop navigation needs 1093px of content width (186px logo +
 * 32px gap + 875px nav). If it does not fit it wraps underneath the logo,
 * which grows the real header while --nce-header-h stays at its one-row
 * value, so anchored sections land underneath the sticky header.
 *
 * The fix is to collapse into the existing toggle menu wherever the inline
 * nav will not fit on one row, rather than to chase the wrapped heights with
 * per-band header-height values. Measured at 1200px, the narrowest viewport
 * that keeps the inline nav, the row has 44px to spare.
 *
 * Collapsed, the header is a stable single row of 113.56px, because the logo
 * is a fixed width and is always the tallest item.
 */
@media (max-width: 1199px) {
    :root {
        --nce-header-h: 114px;
    }

    .site-header__inner {
        padding: 14px var(--nce-gutter);
    }

    .site-nav {
        width: 100%;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav__item + .site-nav__item {
        border-top: 1px solid var(--nce-rule);
    }

    .site-nav__link {
        padding: 14px 0;
        border-bottom: 0;
        border-left: 3px solid transparent;
        padding-left: 12px;
    }

    .site-nav__link:hover,
    .site-nav__link.is-current {
        border-bottom-color: transparent;
        border-left-color: var(--nce-focus);
    }

    /*
     * Progressive enhancement: without JavaScript the navigation stays open
     * and fully usable. main.js adds .has-js, which collapses it behind the
     * toggle button.
     */
    .has-js .nav-toggle {
        display: inline-flex;
    }

    .has-js .site-nav {
        display: none;
    }

    .has-js .site-nav.is-open {
        display: block;

        /* Keep the open menu usable inside the sticky header on short screens. */
        max-height: calc(100svh - 96px);
        overflow-y: auto;
    }

    /*
     * Without JavaScript the navigation is permanently expanded, so a sticky
     * header would consume most of a phone viewport. Stick only when the
     * collapsible menu is available.
     */
    html:not(.has-js) .site-header {
        position: static;
        box-shadow: none;
    }
}

/*
 * Narrow phones.
 *
 * At 186px the logo plus the menu toggle no longer fit on one row below about
 * 380px, and a wrapped toggle grows the header past --nce-header-h, which
 * puts anchored sections underneath the sticky header. Step the logo back to
 * 168px here - still larger than the 160px this header used before - and set
 * the matching header height: 14px + 14px padding + 76.38px logo + 1px
 * border.
 */
@media (max-width: 380px) {
    :root {
        --nce-header-h: 106px;
    }

    .site-brand__logo {
        width: 168px;
    }
}

/*
 * Not a header rule. .page is the simple holding-page layout and keeps its
 * own 820px breakpoint, independent of when the navigation collapses.
 */
@media (max-width: 820px) {
    .page {
        padding: 48px var(--nce-gutter) 64px;
    }
}


/* ---------------------------------------------------------------------------
   Content pages: reusable editorial components
   Established on solutions.php; intended for reuse on funding.php,
   air-conditioning.php and air-source-heat-pumps.php.
   --------------------------------------------------------------------------- */

.wrap {
    max-width: var(--nce-container);
    margin: 0 auto;
    padding-left: var(--nce-gutter);
    padding-right: var(--nce-gutter);
}

/* Page hero -------------------------------------------------------------- */

.page-hero {
    padding: 84px 0 60px;
    border-bottom: 1px solid var(--nce-rule);
}

.page-hero__title {
    max-width: 20ch;
    margin: 0;
    color: var(--nce-ink);
    font-size: clamp(32px, 4.2vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

/* Dark page hero ---------------------------------------------------------- */

/*
 * One shared modifier for every main inner page, so the hero treatment is
 * defined once rather than per page. Deliberately calmer than the Home hero:
 * smaller H1 (54px/700 against Home's 68px/800), smaller brand marks and less
 * vertical padding, so Home still reads as the primary entrance.
 *
 * The padding is written at .page-hero.page-hero--dark specificity because
 * plain .page-hero padding is reset later in the file inside the 820px and
 * 1440px media queries, which would otherwise win on source order.
 *
 * The light-on-navy tones below are derived interface values, matching those
 * already used in the footer. They are not brand colours.
 */
.page-hero.page-hero--dark {
    padding: clamp(52px, 6vw, 92px) 0 clamp(48px, 5.4vw, 84px);
    background: var(--nce-navy);
    border-bottom: 0;
}

.page-hero--dark .page-hero__title {
    color: #ffffff;
}

.page-hero--dark .section__lede {
    color: #ffffff;
}

.page-hero--dark .prose p {
    color: rgba(255, 255, 255, 0.72);
}

/*
 * Restrained geometric mark, adapted from the Home hero: two blue bars and
 * one gold, skewed to echo the parallelograms in the approved logo. Smaller
 * than the Home version. Decorative only, so it is hidden from assistive
 * technology and carries no meaning conveyed by colour.
 */
.page-hero__marks {
    display: flex;
    gap: 8px;
    margin: 0 0 26px;
}

.page-hero__marks span {
    display: block;
    width: 28px;
    height: 5px;
    background: var(--nce-accent);
    transform: skewX(-14deg);
}

.page-hero__marks span:last-child {
    background: var(--nce-amber);
}

/*
 * Status notice on navy. The light surface used on white pages would read as
 * a disconnected pale box here, so the fill is dropped and the rule and text
 * become light. Neutral rather than gold or coloured, so it stays a factual
 * note and never looks like an alert.
 */
.page-hero--dark .status-notice {
    background: transparent;
    border-left-color: rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.86);
}

/* In-page section navigation --------------------------------------------- */

.section-nav {
    border-bottom: 1px solid var(--nce-rule);
}

.section-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-nav__link {
    display: block;
    padding: 16px 0;

    border-bottom: 2px solid transparent;
    color: var(--nce-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.section-nav__link:hover {
    color: var(--nce-ink);
    border-bottom-color: var(--nce-accent);
}

/* Sections --------------------------------------------------------------- */

.section {
    padding: 76px 0;

    /* Clear the sticky header so anchored sections are never hidden beneath it. */
    scroll-margin-top: calc(var(--nce-header-h) + 12px);
}

.site-main {
    scroll-margin-top: calc(var(--nce-header-h) + 12px);
}

.section + .section {
    border-top: 1px solid var(--nce-rule);
}

.section--tint {
    background: var(--nce-tint);
    border-top-color: transparent;
}

.section__title {
    position: relative;
    max-width: 26ch;
    margin: 0;
    padding-top: 24px;

    color: var(--nce-ink);
    font-size: clamp(26px, 2.9vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.section__title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--nce-accent);
}

/*
 * Measure.
 *
 * The lede must read as a SHORTER line than body copy. Previously 58ch at
 * 21px was physically wider (~609px) than .prose at 66ch/17px (~561px),
 * which inverted the reading rhythm.
 *
 * Note that ch is the width of "0", and Manrope's figures are narrow relative
 * to its lowercase, so a ch value renders roughly 20% more characters than it
 * suggests. These values are tuned to the measured result, not the nominal
 * number: 44ch renders ~53 characters here, and .prose at 55ch renders ~66.
 */
.section__lede {
    max-width: 44ch;
    margin: 28px 0 0;
    color: var(--nce-ink);
    font-size: clamp(19px, 1.7vw, 21px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

/* Sub-heading within a section, above a grouped list --------------------- */

.section__subtitle {
    max-width: 34ch;
    margin: 40px 0 0;
    color: var(--nce-ink);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.section__subtitle + .feature-list {
    margin-top: 16px;
}

/* ---------------------------------------------------------------------------
   Funding & Schemes page composition
   --------------------------------------------------------------------------- */

/*
 * Guidance block. Holds the two explanatory paragraphs that previously sat in
 * the navy hero and made it the tallest on the site. Reads as important
 * context rather than an alert: no icon, no callout box, no colour coding.
 */
.funding-guidance {
    max-width: 58ch;
}

.funding-guidance__text {
    margin: 0;
    color: var(--nce-ink);
    font-size: 17px;
    line-height: 1.6;
}

/*
 * The non-administration statement carries slightly more typographic weight
 * than the paragraph above it, separated by a hairline rather than by colour
 * or a border-left, so it reads as a considered statement and not a warning.
 */
.funding-guidance__statement {
    margin: 22px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--nce-rule);

    color: var(--nce-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
}

/*
 * Scheme overview. A scanning aid only: every string in it already appears
 * further down the page. Each item is a single link whose accessible name is
 * the scheme name followed by its current status, so the status is available
 * from text alone and never conveyed by colour.
 */
.scheme-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;

    margin: 44px 0 0;
    padding: 0;

    background: var(--nce-rule);
    border: 1px solid var(--nce-rule);
    list-style: none;
}

.scheme-overview > li {
    display: flex;
}

.scheme-overview__item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px 22px 24px;

    background: #ffffff;
    color: var(--nce-ink);
    text-decoration: none;
}

.scheme-overview__item:hover {
    background: var(--nce-tint);
}

.scheme-overview__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: underline;
    text-decoration-color: var(--nce-accent);
    text-underline-offset: 4px;
}

.scheme-overview__status {
    position: relative;
    display: block;
    margin-top: 14px;
    padding-left: 20px;

    color: var(--nce-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.scheme-overview__status::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 10px;
    height: 2px;
    background: var(--nce-accent);
}

@media (min-width: 700px) {
    .scheme-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1060px) {
    .scheme-overview {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*
 * Scheme heading group. Binds each scheme's title to its status label and
 * closes the pair with a hairline, so all four sections open with the same
 * recognisable unit and the status is never separated from the name.
 */
.scheme-head {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--nce-rule);
}

.scheme-head + .section__lede {
    margin-top: 30px;
}

/*
 * Full scheme sections: centred editorial column.
 *
 * These sections read left-heavy in the 1240px container. The heading rule
 * spans the full width while the prose stops around 570px, leaving a large
 * empty band on the right. Narrowing the container centres the whole
 * composition and brings the .scheme-head rule back into relationship with
 * the text beneath it.
 *
 * Applied only to the four scheme sections. The hero, section navigation,
 * guidance block, overview, closing note and CTA keep the standard container.
 */
.section--scheme .wrap {
    max-width: 940px;
}

/*
 * Text is widened within that column so it fills the composition rather than
 * hugging the left edge, but stays short of the container so the rule above
 * still reads as a heading rule. 620px is the lower end of the brief's range,
 * chosen because it keeps body copy near 70 characters per line.
 */
.section--scheme .section__lede,
.section--scheme .prose,
.section--scheme .feature-list {
    max-width: 620px;
}

/* Scheme status tag ------------------------------------------------------ */

/*
 * A neutral factual label, not an alert. It deliberately avoids
 * traffic-light colours: every status uses the same restrained navy-on-tint
 * treatment, so the wording carries the meaning rather than the colour.
 */
.status-tag {
    display: inline-block;
    max-width: 100%;
    margin: 20px 0 0;
    padding: 7px 13px;

    background: var(--nce-tint);
    border: 1px solid var(--nce-rule);
    color: var(--nce-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Invert the surface so the tag stays legible on tinted sections. */
.section--tint .status-tag {
    background: #ffffff;
}

.status-tag + .section__lede,
.status-tag + .prose {
    margin-top: 22px;
}

/* Body copy -------------------------------------------------------------- */

.prose {
    max-width: 55ch;
    margin: 24px 0 0;
}

.prose p {
    margin: 0 0 18px;
    color: var(--nce-ink);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose a {
    color: var(--nce-ink);
    text-decoration: underline;
    text-decoration-color: var(--nce-accent);
    text-underline-offset: 3px;
}

.prose a:hover {
    text-decoration-thickness: 2px;
}

/* Aside note (used for the developer cross-reference) --------------------- */

.note {
    max-width: 46ch;
    margin: 30px 0 0;
    padding: 4px 0 4px 18px;

    border-left: 3px solid var(--nce-rule);
    color: var(--nce-muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
}

.note a {
    color: var(--nce-muted);
    text-decoration-color: var(--nce-accent);
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Media split — VISUAL PROTOTYPE COMPONENTS
   Established on solutions.php as the Phase 8B prototype. Intended for reuse
   on index.php, air-conditioning.php and air-source-heat-pumps.php once the
   visual direction is approved. Keep these generic: no Solutions-specific
   rules belong here.
   --------------------------------------------------------------------------- */

/*
 * Image and copy side by side, stacking below 900px.
 *
 * There is deliberately no `order` property anywhere in this component. The
 * side an image appears on is decided by DOM order alone, so the visual order
 * always matches the reading order, at every width. Sections that lead with
 * the image put .media-split__media first; sections that lead with the
 * heading put .media-split__content first.
 */
.media-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 36px 0 0;
    align-items: center;
}

.media-split__content > :first-child {
    margin-top: 0;
}

/*
 * Continuation area beneath a split, for content that would be cramped in a
 * half-width column: long lists, dense process copy, nested lists.
 */
.section-body {
    margin: 44px 0 0;
}

.section-body > :first-child {
    margin-top: 0;
}

@media (min-width: 900px) {
    .media-split {
        grid-template-columns: 52fr 48fr;
        gap: 52px;
    }

    /*
     * Where the image is the second column, flip the ratio so the media
     * column keeps the same 52% share. Without this the images alternate
     * between 52% and 48% down the page and read as inconsistent sizes.
     */
    .media-split--media-last {
        grid-template-columns: 48fr 52fr;
    }
}

@media (min-width: 1200px) {
    .media-split {
        gap: 64px;
    }
}

/* Image frame ------------------------------------------------------------- */

/*
 * Square corners, no radius, no shadow, no overlay and no colour treatment.
 * The 4:3 architectural crop is applied here rather than baked into the file,
 * so the same asset can be recropped later without reprocessing.
 */
.media-frame {
    display: block;
    overflow: hidden;
    background: var(--nce-tint);
}

.media-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Plain two-column reference list (enterprise sectors) -------------------- */

.list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    column-gap: 32px;

    margin: 30px 0 0;
    padding: 0;
    border-top: 1px solid var(--nce-rule);
    list-style: none;
}

.list-grid > li {
    padding: 13px 0;
    border-bottom: 1px solid var(--nce-rule);
    color: var(--nce-ink);
    font-size: 16px;
    line-height: 1.4;
}

.list-grid > li.is-muted {
    color: var(--nce-muted);
}

/* Measures grid ---------------------------------------------------------- */

/*
 * Explicit column counts rather than auto-fit. The set is eight items, which
 * divides evenly into 1, 2 and 4 but not 3: at intermediate widths auto-fit
 * resolved to three columns and left an empty cell showing the container's
 * rule colour as a grey block. The 1060px step is where four columns first
 * fit (4 x 250px + 3px of gaps needs 1003px of content width).
 */
.measures {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;

    margin: 34px 0 0;
    padding: 0;

    background: var(--nce-rule);
    border: 1px solid var(--nce-rule);
    list-style: none;
}

.measures > li {
    display: flex;
}

/*
 * Two rows: the decorative icon spans the full cell width, then the measure
 * name and its arrow sit beneath on one row, the arrow pushed right. Grid
 * rather than a wrapping flex row, because a flex-basis of 100% on the icon
 * would also stretch the SVG to the full width.
 */
.measures__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;

    flex: 1 1 auto;
    min-height: 96px;
    padding: 20px 24px 22px;

    background: #ffffff;
    color: var(--nce-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

/*
 * Measure icons. One family: 24x24 viewBox, 1.5 stroke, round caps and
 * joins, no fill. Navy by default via currentColor, with at most one
 * accented element per icon in NOVO blue. Decorative only.
 */
.measure-icon {
    grid-column: 1 / -1;
    width: 26px;
    height: 26px;

    color: var(--nce-ink);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.measure-icon__accent {
    stroke: var(--nce-accent);
}

a.measures__item:hover {
    background: var(--nce-tint);
}

a.measures__item .measures__label {
    text-decoration: underline;
    text-decoration-color: var(--nce-accent);
    text-underline-offset: 4px;
}

.measures__arrow {
    flex: 0 0 auto;
    color: var(--nce-accent);
}

@media (min-width: 560px) {
    .measures {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1060px) {
    .measures {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Service status notice -------------------------------------------------- */

/*
 * A factual statement that something is not yet available, established on
 * air-conditioning.php. Restrained rather than alert-like: navy on tint, no
 * warning colour. Visually the same treatment as .form-notice on
 * register.php; the two could be consolidated once a third use appears.
 */
.status-notice {
    max-width: 58ch;
    margin: 28px 0 0;
    padding: 14px 18px;

    background: var(--nce-tint);
    border-left: 3px solid var(--nce-ink);
    color: var(--nce-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
}

/* System option cards ---------------------------------------------------- */

/*
 * A small comparison set. Deliberately 1 column or 3 columns and nothing in
 * between, so a three-item set never renders as an uneven 2 + 1.
 */
.options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;

    margin: 34px 0 0;
    padding: 0;

    background: var(--nce-rule);
    border: 1px solid var(--nce-rule);
    list-style: none;
}

.options > li {
    padding: 26px 24px;
    background: #ffffff;
}

.options__title {
    margin: 0 0 16px;
    color: var(--nce-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.options__title::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 14px;
    background: var(--nce-accent);
}

.options__list {
    margin: 0;
    padding-left: 18px;
    color: var(--nce-ink);
    font-size: 15px;
    line-height: 1.6;
}

.options__list li + li {
    margin-top: 10px;
}

@media (min-width: 900px) {
    .options {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Ordered process steps -------------------------------------------------- */

/*
 * A restrained sequence explainer, established on air-source-heat-pumps.php.
 * It is an ordered list, so the sequence is conveyed semantically rather than
 * by the visual numbering: the "01" markers are decorative and hidden from
 * assistive technology, and nothing in the component depends on colour.
 *
 * role="list" is set in the markup because list-style: none removes list
 * semantics in some browsers.
 */
/*
 * 250px is chosen so a four-step sequence resolves to 4 across on desktop
 * and a balanced 2 x 2 on tablet, rather than an uneven 3 + 1.
 */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px;

    margin: 34px 0 0;
    padding: 0;

    background: var(--nce-rule);
    border: 1px solid var(--nce-rule);
    list-style: none;
}

.steps > li {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #ffffff;
}

.steps__num {
    display: block;
    margin-bottom: 14px;
    color: var(--nce-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.steps__label {
    display: block;
    margin-bottom: 8px;
    color: var(--nce-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.steps__text {
    display: block;
    color: var(--nce-ink);
    font-size: 15px;
    line-height: 1.55;
}

/* Feature list ----------------------------------------------------------- */

.feature-list {
    max-width: 55ch;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.feature-list > li {
    position: relative;
    padding: 18px 0 18px 28px;
    border-top: 1px solid var(--nce-rule);
    color: var(--nce-ink);
    font-size: 16px;
    line-height: 1.55;
}

.feature-list > li:last-child {
    border-bottom: 1px solid var(--nce-rule);
}

.feature-list > li::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 0;
    width: 10px;
    height: 2px;
    background: var(--nce-accent);
}

.feature-list ul {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--nce-muted);
    font-size: 15px;
    line-height: 1.55;
}

.feature-list ul li {
    margin: 5px 0;
}

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

.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 34px 0 0;
    padding: 15px 24px;

    background: var(--nce-ink);
    border: 1px solid var(--nce-ink);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.button:hover {
    background: #ffffff;
    color: var(--nce-ink);
}

.button__arrow {
    color: currentColor;
}

/* ---------------------------------------------------------------------------
   Form components
   Established on register.php. Front-end only: no submission is wired up.
   --------------------------------------------------------------------------- */

/*
 * The form is deliberately narrower than the page container. Text inputs
 * stretched across 1240px are uncomfortable to scan and read as unfinished.
 *
 * Centred rather than left-aligned: at 1440px a 760px panel pinned to the
 * left edge left roughly 480px of empty page beside it, which read as an
 * unfinished layout rather than as deliberate whitespace.
 */
.form-panel {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 44px 44px;

    background: #ffffff;
    border: 1px solid var(--nce-rule);
}

/*
 * Holding state for the disabled submit control. Placed ahead of the fields
 * so it is read and seen before anything is filled in.
 *
 * Presented as a quiet status panel using the same tint-plus-hairline idiom
 * as .status-tag, rather than the heavy navy left bar it previously carried,
 * which read as a directional callout. No icon, no colour coding.
 */
.form-notice {
    margin: 0 0 34px;
    padding: 15px 18px;

    background: var(--nce-tint);
    border: 1px solid var(--nce-rule);
    color: var(--nce-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/*
 * Error variant of the same notice. Distinguished by a navy left rule and the
 * message text itself, not by colour: no red, no icon, no alert box. Text
 * alone carries the meaning.
 */
.form-notice--error {
    border-left: 3px solid var(--nce-ink);
}

/*
 * Honeypot. Removed from view and from the accessibility tree, but not with
 * display:none, which some bots detect and skip. Never announced, never
 * focusable.
 */
.form-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * The input inherits the default field width, so its layout box extends past
 * the clipped container and past the viewport on narrow screens. It is
 * painted-clipped and causes no scrollbar, but constraining it keeps the
 * sitewide "nothing extends past the right edge" check honest.
 */
.form-trap input {
    width: 1px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}

/* Field-level validation message, tied to its input by aria-describedby. */
.field__error {
    margin: 8px 0 0;
    color: var(--nce-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    margin: 0 0 10px;
    color: var(--nce-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.field__optional {
    margin-left: 6px;
    color: var(--nce-muted);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
}

/*
 * 16px keeps mobile browsers from zooming on focus; 48px min-height keeps the
 * touch target comfortable.
 *
 * The border is --nce-muted, not the lighter --nce-rule used for decorative
 * dividers. A control boundary is "information required to identify a user
 * interface component" under WCAG 1.4.11 and so needs 3:1 against the page:
 * --nce-rule is only 1.09:1 on white, --nce-muted is 5.27:1.
 */
.field__control {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;

    background: #ffffff;
    border: 1px solid var(--nce-muted);
    border-radius: 0;
    color: var(--nce-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
}

.field__control:hover {
    border-color: var(--nce-ink);
}

.field__control:focus-visible {
    outline: 2px solid var(--nce-focus);
    outline-offset: 2px;
    border-color: var(--nce-ink);
}

/* Native select, restyled to match the text inputs; the arrow is pure CSS. */
.field__select {
    position: relative;
    display: block;
}

.field__select .field__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
}

.field__select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    margin-top: -7px;

    border-right: 2px solid var(--nce-ink);
    border-bottom: 2px solid var(--nce-ink);
    transform: rotate(45deg);
    pointer-events: none;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;

    margin: 32px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--nce-rule);
}

/* .button is shared with the link buttons, which carry their own top margin. */
button.button {
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

/*
 * Disabled submit. Keeps the button silhouette and border of the NOVO button
 * system so it does not look broken, but drops to the tint surface and muted
 * label so it is unmistakably unavailable. Muted on tint measures 4.84:1,
 * above the 4.5:1 text threshold even though disabled controls are exempt.
 */
.button[disabled] {
    background: var(--nce-tint);
    border-color: var(--nce-muted);
    color: var(--nce-muted);
    cursor: not-allowed;
}

.button[disabled]:hover {
    background: var(--nce-tint);
    color: var(--nce-muted);
}

/* ---------------------------------------------------------------------------
   Home page
   --------------------------------------------------------------------------- */

/*
 * The home hero is the one navy opening on the site, giving the homepage a
 * stronger hierarchy than the white interior page heroes while staying inside
 * the approved palette. No imagery and no gradient.
 */
.home-hero {
    padding: 96px 0 100px;
    background: var(--nce-navy);
    color: #ffffff;
}

/*
 * Three small skewed bars: two blue, one gold. A restrained geometric echo of
 * the parallelograms in the approved mark, NOT a reproduction of it. Purely
 * decorative, so it is hidden from assistive technology and carries no
 * meaning that is conveyed by colour alone.
 */
.home-hero__marks {
    display: flex;
    gap: 9px;
    margin: 0 0 36px;
}

.home-hero__marks span {
    display: block;
    width: 34px;
    height: 6px;
    background: var(--nce-accent);
    transform: skewX(-14deg);
}

.home-hero__marks span:last-child {
    background: var(--nce-amber);
}

/* The one display-weight element on the site. */
.home-hero__title {
    max-width: 16ch;
    margin: 0;
    color: #ffffff;
    font-size: clamp(36px, 5.2vw, 68px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.home-hero__lede {
    max-width: 60ch;
    margin: 30px 0 0;
    color: #ffffff;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.6;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
    margin: 42px 0 0;
}

.home-hero__actions .button {
    margin: 0;
}

/* Button variants for dark surfaces --------------------------------------- */

.button--invert {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--nce-ink);
}

.button--invert:hover {
    background: transparent;
    color: #ffffff;
}

.button--ghost {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.button--ghost:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--nce-ink);
}

.home-hero .button:focus-visible {
    outline-color: #ffffff;
}

/* Restrained inline "more" link ------------------------------------------- */

/* Vertical padding keeps the hit area at 27px; the text alone is only 15px. */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 0;
    padding: 6px 0;

    color: var(--nce-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.text-link__label {
    text-decoration: underline;
    text-decoration-color: var(--nce-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.text-link:hover .text-link__label {
    text-decoration-color: var(--nce-ink);
}

.text-link__arrow {
    color: var(--nce-accent);
}

/* Audience cards ---------------------------------------------------------- */

/*
 * An editorial image-led grid: 4:3 photograph, then heading, description and
 * arrow beneath. The photograph uses the shared .media-frame component, so
 * there is no image CSS specific to this card.
 *
 * Each card is a single link wrapping its own content, matching .measures on
 * solutions.php. That keeps one interactive element per card with a fully
 * descriptive accessible name, rather than nesting controls.
 *
 * Deliberately 1 or 2 columns and never 4. Four photographs across a 1240px
 * container would render each one around 280px wide, too small to read as
 * architecture. Two columns give roughly 570px, matching the media-split
 * images used on the inner pages.
 *
 * No card fill, border, shadow or radius: the photographs and the whitespace
 * do the separating, which is what makes the block read as editorial rather
 * than as a panel of tiles.
 */
.audience {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px 40px;

    margin: 40px 0 0;
    padding: 0;

    list-style: none;
}

.audience > li {
    display: flex;
}

.audience__card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    color: var(--nce-ink);
    text-decoration: none;
}

.audience__title {
    display: block;
    margin: 24px 0 10px;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-color: var(--nce-accent);
    text-underline-offset: 5px;
}

/* Hover shifts the existing underline rather than adding a new effect. */
.audience__card:hover .audience__title {
    text-decoration-color: var(--nce-ink);
}

.audience__text {
    display: block;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.6;
}

.audience__arrow {
    display: block;
    margin-top: 18px;
    padding-top: 0;
    color: var(--nce-accent);
    font-weight: 700;
}

@media (min-width: 700px) {
    .audience {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .audience {
        gap: 56px 48px;
    }
}

/* Featured technology panels ---------------------------------------------- */

.featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;

    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.featured > li {
    display: flex;
    flex-direction: column;
    padding: 34px 32px 32px;

    background: #ffffff;
    border: 1px solid var(--nce-rule);
    border-top: 3px solid var(--nce-accent);
}

.featured__title {
    margin: 0 0 16px;
    color: var(--nce-ink);
    font-size: clamp(19px, 1.8vw, 23px);
    font-weight: 700;
    line-height: 1.25;
}

.featured__text {
    margin: 0;
    color: var(--nce-ink);
    font-size: 16px;
    line-height: 1.6;
}

.featured__status {
    margin: 16px 0 0;
    color: var(--nce-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

/* Bottom-align the links so the two panels read as a pair. */
.featured .text-link {
    margin-top: auto;
    padding-top: 28px;
}

@media (min-width: 860px) {
    .featured {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Funding scheme preview -------------------------------------------------- */

.scheme-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;

    margin: 34px 0 0;
    padding: 0;

    background: var(--nce-rule);
    border: 1px solid var(--nce-rule);
    list-style: none;
}

.scheme-preview > li {
    padding: 24px 22px;
    background: #ffffff;
}

.scheme-preview__name {
    margin: 0;
    color: var(--nce-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

/*
 * Home-specific status treatment. The Funding page uses the boxed uppercase
 * .status-tag, which is right where each scheme has a full section to itself
 * but reads as too dense across four compact preview cards. Here the status
 * is quiet sentence-case text, secondary to the scheme name, marked with the
 * same small blue dash used by .feature-list. The wording is identical to the
 * Funding page. .status-tag itself is untouched.
 */
.scheme-preview__status {
    position: relative;
    margin: 12px 0 0;
    padding-left: 20px;

    color: var(--nce-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.scheme-preview__status::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 10px;
    height: 2px;
    background: var(--nce-accent);
}

@media (min-width: 700px) {
    .scheme-preview {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .scheme-preview {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Closing call to action ------------------------------------------------- */

.cta-band {
    padding: 76px 0;
    background: var(--nce-navy);
}

.cta-band__title {
    position: relative;
    max-width: 24ch;
    margin: 0;
    padding-top: 26px;

    color: #ffffff;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/*
 * The single amber accent on the site, echoing the one amber tile in the
 * approved logo. Used here only, against navy, where it has strong contrast.
 */
.cta-band__title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--nce-amber);
}

/*
 * Optional supporting line beneath a CTA band heading. White on navy is
 * 15.24:1.
 */
.cta-band__text {
    max-width: 54ch;
    margin: 20px 0 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.6;
}

/* Clear the sticky header when the CTA band is used as an anchor target. */
.cta-band {
    scroll-margin-top: calc(var(--nce-header-h) + 12px);
}

.cta-band .button {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--nce-ink);
}

.cta-band .button:hover {
    background: transparent;
    color: #ffffff;
}

/* Focus states for content-page interactive elements ---------------------- */

.section-nav__link:focus-visible,
.prose a:focus-visible,
.note a:focus-visible,
a.measures__item:focus-visible,
.audience__card:focus-visible,
.text-link:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--nce-focus);
    outline-offset: 3px;
}

.cta-band .button:focus-visible {
    outline-color: #ffffff;
}

@media (max-width: 820px) {
    .page-hero {
        padding: 52px 0 40px;
    }

    .section {
        padding: 52px 0;
    }

    .cta-band {
        padding: 56px 0;
    }

    .section-nav__list {
        gap: 0 24px;
    }
}

@media (max-width: 480px) {
    .measures__item {
        min-height: 0;
        padding: 18px 20px;
    }

    .button {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .form-panel {
        padding: 26px 22px 30px;
    }

    .form-grid {
        gap: 20px;
    }
}

/*
 * Wide desktop: open the vertical rhythm slightly so the generous side
 * margins read as deliberate framing rather than unfinished layout.
 */
@media (min-width: 1440px) {
    :root {
        --nce-gutter: 40px;
    }

    .page-hero {
        padding: 108px 0 76px;
    }

    .section {
        padding: 92px 0;
    }

    .cta-band {
        padding: 92px 0;
    }
}