/* ============================================================
   Solar Air Energy — brand component primitives
   The signature patterns from the Brand Design Guide v1.0:
   eyebrow pill, two-tone headings, highlight marker, pill buttons,
   the CTA gradient and mist section zoning. Token-driven.
   ============================================================ */

/* ---- Eyebrow pill (mist-green capsule above section headings) ---- */
.sae-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ds-green-tint);
    color: var(--ds-green-ink);
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: var(--ds-fs-eyebrow);
    letter-spacing: var(--ds-track-eyebrow);
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
}
.sae-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-green);
    flex: none;
}

/* ---- Two-tone headings — colour the final word(s) ---- */
.sae-two-tone .g { color: var(--ds-green); }
.sae-two-tone .o { color: var(--ds-orange); }

/* ---- Pill buttons ---- */
.sae-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    border: 0;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sae-pill--orange { background: var(--ds-orange); color: #fff; box-shadow: var(--shadow-cta); }
.sae-pill--orange:hover { background: var(--ds-orange-dark); color: #fff; }
.sae-pill--ghost { background: #fff; color: var(--ds-green-ink); border: 1.5px solid var(--ds-green-line); }
.sae-pill--ghost:hover { background: var(--ds-green-tint); color: var(--ds-green-ink); }

/* ---- CTA gradient block (the big "design your solar solution" panels) ---- */
.sae-cta-band {
    background: var(--ds-grad-cta);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 5vw, 44px);
    position: relative;
    overflow: hidden;
}
.sae-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ds-grad-stripe);
    pointer-events: none;
}
.sae-cta-band > * { position: relative; }
.sae-cta-band h2, .sae-cta-band h3 { color: #fff; }

/* ---- Section surfaces / mist zoning ---- */
.sae-section { padding-block: var(--ds-section-py); }
.sae-section--mist { background: var(--ds-surface-2); }

/* ---- Card (rounded, soft shadow) ---- */
.sae-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
}

/* ============================================================
   Gutenberg block styles (registered in inc/blocks.php)
   So native core blocks carry the brand inside the editor + on the front end.
   ============================================================ */

/* Button pills */
.wp-block-button.is-style-sae-orange > .wp-block-button__link,
.wp-block-button.is-style-sae-green > .wp-block-button__link,
.wp-block-button.is-style-sae-ghost > .wp-block-button__link {
    font-family: var(--ds-font-display);
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 13px 26px;
    transition: transform 0.15s ease, background 0.15s ease;
}
.wp-block-button.is-style-sae-orange > .wp-block-button__link {
    background: var(--ds-orange); color: #fff; box-shadow: var(--shadow-cta);
}
.wp-block-button.is-style-sae-orange > .wp-block-button__link:hover { background: var(--ds-orange-dark); }
.wp-block-button.is-style-sae-green > .wp-block-button__link {
    background: var(--ds-green-leaf); color: #fff;
}
.wp-block-button.is-style-sae-green > .wp-block-button__link:hover { background: var(--ds-green-deep); }
.wp-block-button.is-style-sae-ghost > .wp-block-button__link {
    background: #fff; color: var(--ds-green-ink); border: 1.5px solid var(--ds-green-line);
}
.wp-block-button.is-style-sae-ghost > .wp-block-button__link:hover { background: var(--ds-green-tint); }

/* Group surfaces */
.wp-block-group.is-style-sae-cta-band {
    background: var(--ds-grad-cta);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 5vw, 44px) !important;
    position: relative;
    overflow: hidden;
}
.wp-block-group.is-style-sae-cta-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--ds-grad-stripe);
}
.wp-block-group.is-style-sae-cta-band > * { position: relative; }
.wp-block-group.is-style-sae-cta-band :where(h1, h2, h3, p) { color: #fff; }
.wp-block-group.is-style-sae-cta-band .sae-cta-reassure { color: rgba(255, 255, 255, 0.88); font-size: 14px; margin-top: 8px; }

.wp-block-group.is-style-sae-mist {
    background: var(--ds-surface-2);
    border-radius: var(--radius-lg);
}
.wp-block-group.is-style-sae-card,
.wp-block-column.is-style-sae-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
}
/* Brand grid gutters */
.wp-block-columns.sae-grid { gap: var(--space-md); }

/* FAQ accordion (core/details) */
.sae-faq__item { border-bottom: 1px solid var(--ds-line); padding: 16px 0; }
.sae-faq__item summary {
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--ds-ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sae-faq__item summary::-webkit-details-marker { display: none; }
.sae-faq__item summary::after {
    content: ""; flex: none; width: 9px; height: 9px;
    border-right: 2px solid var(--ds-green); border-bottom: 2px solid var(--ds-green);
    transform: rotate(45deg); transition: transform 0.2s ease;
}
.sae-faq__item[open] summary { color: var(--ds-green-ink); }
.sae-faq__item[open] summary::after { transform: rotate(-135deg); }

/* ---- Hero (dark, brand-gradient) ---- */
.wp-block-group.sae-hero,
.sae-hero {
    background:
        radial-gradient(120% 140% at 88% -10%, rgba(239, 130, 0, 0.14), transparent 46%),
        radial-gradient(130% 150% at -10% 120%, rgba(76, 175, 80, 0.20), transparent 50%),
        var(--ds-ink);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 5vw, 56px) !important;
}
.sae-hero :where(h1, h2, h3) { color: #fff; }
.sae-hero .sae-two-tone .g { color: var(--ds-green-light); }
.sae-hero p { color: rgba(255, 255, 255, 0.86); }
.sae-hero .is-style-sae-eyebrow { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sae-hero .is-style-sae-eyebrow::before { background: var(--ds-orange); }
/* keep the inner white card legible on the dark hero */
.sae-hero .is-style-sae-card :where(h1, h2, h3) { color: var(--ds-ink); }
.sae-hero .is-style-sae-card p { color: var(--ds-grey); }

/* Page hero — centred + form-free. For About / Contact / Refer / Earn / utility pages, so the header
   never repeats the quote form those pages carry themselves. Reuses the dark-gradient .sae-hero base. */
.sae-hero--page { text-align: center; }
.sae-hero--page > * { max-width: 740px; margin-inline: auto; }
.sae-hero--page .is-style-sae-eyebrow { margin-inline: auto; }
.sae-hero--page .wp-block-buttons { justify-content: center; margin-top: var(--space-sm); }
.sae-hero--page p.has-lead-font-size { color: rgba(255, 255, 255, 0.82); }

/* ---- Contact — details + message form (2-up) ---- */
.sae-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 768px) { .sae-contact { grid-template-columns: 1fr; } }
.sae-contact__row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--ds-line); }
.sae-contact__row:last-child { border-bottom: 0; }
.sae-contact__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--ds-green-tint); color: var(--ds-green-ink); display: inline-flex; align-items: center; justify-content: center; }
.sae-contact__icon svg { width: 20px; height: 20px; }
.sae-contact__label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-grey-light); margin: 2px 0 3px; }
.sae-contact__value { font-family: var(--ds-font-display); font-weight: 600; font-size: 18px; color: var(--ds-ink); line-height: 1.3; }
.sae-contact__value a { color: inherit; text-decoration: none; }
.sae-contact__value a:hover { color: var(--ds-green-ink); }
.sae-contact__value small { display: block; font-family: var(--ds-font-body); font-weight: 400; font-size: 14px; color: var(--ds-grey); margin-top: 2px; }
.sae-contact-form { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-card); }
.sae-contact-form h3 { margin: 0 0 4px; }
.sae-contact-form > p { margin: 0 0 14px; color: var(--ds-grey); font-size: 15px; }
.sae-contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ds-ink); margin: 12px 0 6px; }
.sae-contact-form input, .sae-contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ds-line); border-radius: var(--radius-sm); font: inherit; color: var(--ds-ink); background: var(--ds-surface-2); }
.sae-contact-form input:focus, .sae-contact-form textarea:focus { outline: var(--ds-focus); outline-offset: 1px; border-color: var(--ds-green); background: #fff; }
.sae-contact-form .sae-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .sae-contact-form .sae-form-row { grid-template-columns: 1fr; } }
.sae-contact-form button { margin-top: 16px; width: 100%; border: 0; cursor: pointer; padding: 15px 20px; border-radius: var(--radius-pill); background: var(--ds-grad-cta); color: #fff; font-family: var(--ds-font-display); font-weight: 600; font-size: 16px; transition: filter var(--ds-ease); }
.sae-contact-form button:hover { filter: brightness(1.05); }
.sae-contact-form .sae-form-note { margin: 12px 0 0; font-size: 12px; color: var(--ds-grey-light); }
.sae-form-status { margin: 12px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.sae-form-status.is-ok { color: var(--ds-green-ink); }
.sae-form-status.is-error { color: var(--ds-error); }

/* Hero quick-quote card — the reviews card with a compact wired form.
   The form sits flush inside the hero's is-style-sae-card column, so it drops its own card panel. */
.sae-contact-form.sae-hero-form { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.sae-hero-quote .sae-stars { font-size: 15px; letter-spacing: 1px; margin: 0 0 6px; }
.sae-hero-quote__google { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.sae-hero-quote__google .sae-stars { margin: 0; }
.sae-hero-quote__glogo { flex: none; }
.sae-hero-quote__rating { font-family: var(--ds-font-body); font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--ds-grey); vertical-align: middle; }
.sae-hero-quote h3 { margin: 0 0 12px; }
.sae-hero-form label { margin: 8px 0 4px; font-size: 12px; color: var(--ds-grey); }
.sae-hero-form input { padding: 10px 13px; }
.sae-hero-form button { margin-top: 12px; padding: 13px 18px; font-size: 15px; }
.sae-hero-quote .sae-card-trust { margin-top: 12px; }

/* Checklist with orange ticks */
.sae-checklist { list-style: none; padding: 0; margin: var(--space-md) 0; display: flex; flex-direction: column; gap: 10px; }
.sae-checklist li { padding-left: 30px; position: relative; font-weight: 600; }
.sae-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--ds-orange); font-weight: 800; font-family: var(--ds-font-display); }

/* ---- Testimonial cards ---- */
.sae-stars { color: var(--ds-gold); letter-spacing: 2px; font-size: 18px; }
/* Container specificity (0,2,0) beats WP :where()/blockGap rules — no !important needed */
.sae-card .sae-stars, .wp-block-column .sae-stars, .wp-block-group .sae-stars { margin-bottom: 8px; }

/* ---- Stat figures ---- */
.sae-stat__num { font-family: var(--ds-font-display); font-weight: 800; font-size: clamp(28px, 4vw, 40px); color: var(--ds-green); line-height: 1; }
/* Container specificity (0,2,0) beats WP :where()/blockGap rules — no !important needed */
.sae-card .sae-stat__num, .wp-block-column .sae-stat__num { margin: 0; }
.sae-stat__label { color: var(--ds-grey); font-size: 14px; }
.sae-card .sae-stat__label, .wp-block-column .sae-stat__label { margin-top: 6px; }

/* ---- Shared image corner radius (matches /intro) ---- */
.entry-content .wp-block-image img,
.wp-block-media-text__media img,
.sae-feature img { border-radius: var(--radius-lg); }

/* Feature-split (left/right) images — one tokenised aspect so every split image is the same height
   product-wide (was stretched to each section's text height + distorted by object-fit:fill). */
.sae-feature .wp-block-media-text__media { align-self: center; }
.sae-feature .wp-block-media-text__media img { width: 100%; height: auto; aspect-ratio: var(--ds-split-media); object-fit: cover; display: block; }
/* Consistent 24px vertical rhythm in feature-split content — matches the site-wide block-gap
   (was default 16/11px margins, tighter than the rest of the site). */
.sae-feature .wp-block-media-text__content > * { margin-block: 0; }
.sae-feature .wp-block-media-text__content > * + * { margin-top: var(--space-md); }

/* ---- Service cards: /intro's SVG structure — the IMAGE is clipped to the ogee notch INSIDE an svg
   (renders reliably in every browser), with the circular arrow seated hard in the corner. The cover
   block is rewritten to .sae-scard at render time (functions.php: sae_service_card_svg). ---- */
.sae-scard {
    position: relative;
    aspect-ratio: 400 / 326; /* /intro proportion — the svg viewBox maps 1:1, so the notch never distorts */
    overflow: visible; /* the arrow seats in the corner un-clipped */
    transition: filter var(--ds-card-ease), transform var(--ds-card-ease);
}
.sae-scard__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* hover lift lives in the shared "Card interaction" section below */
.sae-scard__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    padding: var(--space-md);
    z-index: 1;
}
.sae-scard__body h3 { color: #fff; margin: 0 0 6px; max-width: 78%; }
.sae-scard__body p { color: var(--ds-white-92); margin: 0; max-width: 76%; }
.sae-arrow {
    position: absolute;
    right: 0; bottom: 0; /* hard in the corner; the ogee notch folds the image around it (like /intro) */
    width: 20%; height: 25%;
    min-width: 50px; min-height: 50px; /* no max: arrow tracks 20% of the card so it always fills the notch */
    border-radius: 50%;
    background: var(--ds-green-leaf);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background var(--ds-ease), transform var(--ds-card-ease);
    z-index: 2;
}
/* Green by default, Sun Orange + scale on hover/focus (the /intro card interaction, tokenised) */
.sae-scard:hover .sae-arrow,
.sae-scard:focus-within .sae-arrow,
.sae-arrow:hover,
.sae-arrow:focus-visible { color: #fff; background: var(--ds-orange); transform: scale(var(--ds-card-arrow-scale)); }
.sae-arrow svg { width: 24px; height: 24px; }

/* ============================================================
   Site footer
   ============================================================ */
/* Inset rounded panel — floats off the page edges for a clean rounded bottom (matches /intro). */
.sae-footer {
    background: var(--ds-surface-2);
    color: var(--ds-grey);
    margin: var(--space-xl) var(--ds-edge) var(--ds-edge);
    border-radius: var(--radius-lg);
}
.sae-footer__inner { padding-block: clamp(40px, 5vw, 64px); }
.sae-footer__top { display: grid; grid-template-columns: 1fr 2.4fr; gap: clamp(28px, 5vw, 56px); }
.sae-footer__logo img { height: 56px; width: auto; }
.sae-footer__tag { margin: 16px 0 18px; max-width: 42ch; font-size: 14.5px; line-height: 1.6; }
.sae-footer__social { display: flex; gap: 10px; }
.sae-footer__social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; color: var(--ds-green-ink); border: 1px solid var(--ds-green-line);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sae-footer__social-link:hover { background: var(--ds-green); color: #fff; }

.sae-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sae-footer__heading { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink); margin-bottom: 14px; }
.sae-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sae-footer__menu a { color: var(--ds-grey); font-size: 14.5px; text-decoration: none; }
.sae-footer__menu a:hover { color: var(--ds-orange); }

.sae-footer__divider { height: 1px; background: var(--ds-green-line); margin: clamp(28px, 4vw, 44px) 0 22px; }
.sae-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.sae-footer__copy { margin: 0; font-size: 13.5px; }
.sae-footer__legal { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.sae-footer__legal a { color: var(--ds-orange); text-decoration: none; }
.sae-footer__legal a:hover { color: var(--ds-orange-dark); }
.sae-footer__legal span { color: var(--ds-grey-light); }
.sae-footer__powered {
    display: inline-flex; align-items: center; gap: 0.5em;
    margin: 0; color: inherit; text-decoration: none;
    font: 500 11px/1 var(--ds-font-body); letter-spacing: 0.01em;
    opacity: 0.55; transition: opacity 0.15s ease;
}
.sae-footer__powered:hover,
.sae-footer__powered:focus-visible { opacity: 1; }
.sae-footer__metrix { display: block; height: 11px; width: auto; }

@media (max-width: 1024px) {
    .sae-footer__top { grid-template-columns: 1fr; gap: 32px; }
    /* Centre the brand block (logo + tagline + social) once the footer stacks */
    .sae-footer__brand { text-align: center; }
    .sae-footer__logo { display: inline-flex; }
    .sae-footer__tag { margin-inline: auto; }
    .sae-footer__social { justify-content: center; }
}
@media (max-width: 768px) {
    .sae-footer__cols { grid-template-columns: repeat(2, 1fr); }
    .sae-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Content templates — articles, archive, search, 404
   ============================================================ */
.sae-archive__head { max-width: 640px; margin-bottom: var(--space-lg); }
.sae-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
/* DUP-3: breakpoints shared with .cs-grid — combined below at the cs-grid definition */

.sae-acard {
    display: flex; flex-direction: column;
    background: var(--ds-surface); border: 1px solid var(--ds-line);
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
    transition: transform var(--ds-card-ease), box-shadow var(--ds-card-ease);
}
.sae-acard__media { display: block; }                             /* unique: explicit block (cs-card uses block-level element) */
.sae-acard__media img { border-radius: 0; }                        /* unique: explicit radius reset */
.sae-acard__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ds-green-tint), var(--ds-surface-2)); }

/* Shared service-category pill — one relevancy tag on every card that has a service (article + case-study
   card media). Add .sae-cardtag to any new card media to inherit it. */
/* DUP-2 consolidated: shared media-container + image layout for all card media elements */
.sae-acard__media, .cs-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ds-surface-2); }
.sae-acard__media img, .cs-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sae-cardtag {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: var(--radius-pill);
    background: var(--ds-white-92);
    color: var(--ds-green-ink);
    font-family: var(--ds-font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(21, 28, 36, 0.12);
}

/* Articles filter chips (service taxonomy) */
.sae-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--space-lg); }
.sae-filter__chip {
    display: inline-flex; align-items: center; padding: 9px 18px;
    border-radius: var(--radius-pill); border: 1px solid var(--ds-line); background: var(--ds-surface);
    color: var(--ds-grey); font-family: var(--ds-font-display); font-weight: 600; font-size: 14px;
    text-decoration: none; transition: background var(--ds-ease), color var(--ds-ease), border-color var(--ds-ease);
}
.sae-filter__chip:hover { border-color: var(--ds-green); color: var(--ds-green-ink); }
.sae-filter__chip.is-active { background: var(--ds-grad-cta); border-color: transparent; color: #fff; }

/* Success-story hero image (project leaf) — shares the article reading column */
.sae-article__hero { margin: 0 0 var(--space-md); border-radius: var(--radius-lg); overflow: hidden; }
.sae-article__hero img { display: block; width: 100%; height: auto; }
.sae-acard__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sae-acard__title { font-size: 18px; margin: 0; }
.sae-acard__title a { color: var(--ds-ink); text-decoration: none; }
.sae-acard__title a:hover { color: var(--ds-orange); }
.sae-acard__excerpt { color: var(--ds-grey); font-size: 14.5px; margin: 0; flex: 1; }
.sae-acard__meta { color: var(--ds-grey-light); font-size: 13px; margin: 6px 0 0; }

/* Article single — reading column + sticky aside */
.sae-article__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
    max-width: 1060px;
    margin-inline: auto;
}
.sae-article__main { min-width: 0; }
.sae-article__head { margin-bottom: var(--space-lg); }
.sae-article__head a.is-style-sae-eyebrow { text-decoration: none; }
.sae-article__title { margin: 12px 0 10px; }
.sae-article__meta { color: var(--ds-grey-light); font-size: 14px; margin: 0; }
.sae-article__content { font-size: 17px; line-height: 1.75; color: var(--ds-grey); }
.sae-article__content > * + * { margin-top: 1.1em; }
.sae-article__content h2 { font-size: var(--ds-fs-h2); margin: 1.5em 0 0.4em; color: var(--ds-ink); scroll-margin-top: var(--ds-nav-height); }
.sae-article__content h3 { margin: 1.3em 0 0.3em; color: var(--ds-ink); scroll-margin-top: var(--ds-nav-height); }
.sae-article__content img { border-radius: var(--radius-lg); }
.sae-article__content a { color: var(--ds-green-ink); text-decoration: underline; text-underline-offset: 2px; }
.sae-article__content ul, .sae-article__content ol { padding-left: 1.3em; }
.sae-article__content blockquote { border-left: 3px solid var(--ds-green); padding-left: 18px; color: var(--ds-ink); font-style: italic; margin-inline: 0; }
.sae-article__foot { margin-top: var(--space-xl); }

.sae-article__aside { position: sticky; top: var(--ds-nav-height); display: flex; flex-direction: column; gap: var(--space-md); }
.sae-toc { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--radius-md); padding: var(--space-md); }
.sae-toc__title { font-family: var(--ds-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-grey-light); margin: 0 0 12px; }
.sae-toc__list { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 9px; border-left: 2px solid var(--ds-green-line); }
.sae-toc__list a { color: var(--ds-grey); font-size: 14px; text-decoration: none; line-height: 1.4; }
.sae-toc__list a:hover { color: var(--ds-orange); }

.sae-aside-cta { background: var(--ds-green-tint); border-radius: var(--radius-md); padding: var(--space-md); }
.sae-aside-cta h3 { margin: 8px 0 6px; font-size: 19px; }
.sae-aside-cta p { font-size: 14px; color: var(--ds-grey); margin: 0 0 14px; }

.sae-related { margin-top: var(--space-xl); max-width: 1060px; }
.sae-related h2 { margin-bottom: var(--space-md); }

@media (max-width: 1024px) {
    .sae-article__grid { grid-template-columns: 1fr; }
    .sae-article__aside { position: static; }
    .sae-toc { display: none; }
}

/* 404 */
.sae-404 { max-width: 560px; text-align: center; }
.sae-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: var(--space-md) 0; }

/* Pagination */
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-lg); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ds-line); color: var(--ds-ink); text-decoration: none; font-weight: 600; }
.pagination .page-numbers.current { background: var(--ds-green); color: #fff; border-color: var(--ds-green); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--ds-green); color: var(--ds-green-ink); }

/* Search form */
.search-form { display: flex; gap: 8px; max-width: 420px; margin: var(--space-md) auto 0; }
.search-form .search-field { flex: 1; padding: 12px 16px; border: 1px solid var(--ds-line); border-radius: var(--radius-pill); font: inherit; }
.search-form .search-submit { padding: 12px 22px; border: 0; border-radius: var(--radius-pill); background: var(--ds-orange); color: #fff; font-family: var(--ds-font-display); font-weight: 600; cursor: pointer; }

/* Eyebrow as a paragraph block style */
.wp-block-paragraph.is-style-sae-eyebrow,
p.is-style-sae-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ds-green-tint);
    color: var(--ds-green-ink);
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: var(--ds-fs-eyebrow);
    letter-spacing: var(--ds-track-eyebrow);
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;              /* long labels wrap inside the pill instead of overflowing */
    justify-content: center;
    text-align: center;          /* balanced wrap */
    max-width: 100%;
}
.wp-block-paragraph.is-style-sae-eyebrow::before,
p.is-style-sae-eyebrow::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-green); flex: none;
}

/* Mobile: centre the feature-split + hero eyebrow pills (section-heading eyebrows already centre) */
@media (max-width: 768px) {
    /* tighter tracking so labels fit on one line (0.14em is ~49px of spacing on a long label) */
    p.is-style-sae-eyebrow,
    .wp-block-paragraph.is-style-sae-eyebrow { letter-spacing: 0.08em; }
    .sae-feature .is-style-sae-eyebrow,
    .sae-hero .is-style-sae-eyebrow {
        display: flex;
        width: fit-content;
        margin-inline: auto;
    }
    .sae-feature .wp-block-media-text__content { text-align: center; }
    /* Stack the split at the tablet bp (WP core stacks at 600 — align to the canonical 768) and add a
       gap between the image and the content (was flush). */
    .sae-feature.wp-block-media-text { grid-template-columns: 100% !important; row-gap: var(--space-lg); }
    .sae-feature.wp-block-media-text > * { grid-column: 1 !important; }
    /* Centre the CTA button (wp-block-buttons is flex, so text-align can't centre it) */
    .sae-feature .wp-block-buttons { justify-content: center; }

    /* Centre the hero text column on mobile (the reviews/quote form card keeps its own alignment) */
    .sae-hero .sae-mtext__wide { text-align: center; }
    .sae-hero .sae-mtext__wide .wp-block-buttons { justify-content: center; }
    /* keep the checklist a centred block with left-aligned items so the ticks stay aligned */
    .sae-hero .sae-checklist { width: fit-content; margin-inline: auto; text-align: left; }
}

/* ============================================================
   #3 templates — archives, Success Stories
   ============================================================ */
/* Archive headers */
.sae-archive__header { max-width: 760px; margin-bottom: var(--space-lg); }
.sae-archive__title { font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; }
.sae-archive__intro { color: var(--ds-grey); font-size: 17px; }
.sae-archive__empty { color: var(--ds-grey); }
nav.pagination, .sae-pagination { margin-top: var(--space-lg); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
nav.pagination .page-numbers { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--ds-line, #e6e9e7); text-decoration: none; color: var(--ds-ink); }
nav.pagination .page-numbers.current { background: var(--ds-green); color: #fff; border-color: var(--ds-green); }

/* Case-study cards (Success Stories archive) */
.cs-grid { display: grid; grid-template-columns: repeat(var(--cs-cols, 3), 1fr); gap: var(--space-md); margin-top: var(--space-md); }
/* DUP-3 consolidated: identical 2-col/1-col breakpoints shared with .sae-card-grid */
@media (max-width: 1024px) { .sae-card-grid, .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sae-card-grid, .cs-grid { grid-template-columns: 1fr; } }
.cs-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ds-line, #e6e9e7); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; transition: transform var(--ds-card-ease), box-shadow var(--ds-card-ease); }
/* DUP-2 consolidated: .cs-card__media layout now in shared .sae-acard__media, .cs-card__media rule above */
.cs-card__media img { display: block; }                            /* unique: baseline-gap reset */
.cs-card__badge { position: absolute; left: 12px; bottom: 12px; background: var(--ds-green); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: var(--radius-pill); }
.cs-card__body { padding: 16px 18px 20px; }
.cs-card__title { font-size: 18px; margin: 0 0 6px; color: var(--ds-ink); }
.cs-card__excerpt { color: var(--ds-grey); font-size: 14.5px; margin: 0; }

/* Single case study */
.sae-cs__header { max-width: 760px; margin-bottom: 20px; }
.sae-cs__title { font-size: clamp(28px, 4vw, 46px); margin: 0; }
.sae-cs__media { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-lg); }
.sae-cs__media img { width: 100%; height: auto; display: block; }
.sae-cs__grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-lg); align-items: start; }
.sae-cs__body { font-size: 17px; line-height: 1.75; color: var(--ds-grey); }
.sae-cs__body h2, .sae-cs__body h3 { color: var(--ds-ink); }
.sae-cs__quote { border-left: 3px solid var(--ds-green); padding: 6px 0 6px 18px; margin: 24px 0; font-size: 19px; color: var(--ds-ink); font-style: italic; }
.sae-cs__aside { position: sticky; top: var(--ds-nav-height); }
.sae-cs__specs { background: var(--ds-surface-2); border-radius: var(--radius-md); padding: 22px; }
.sae-cs__specs-title { font-size: 17px; margin: 0 0 14px; }
.sae-cs__specs dl { margin: 0; }
.sae-cs__spec { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ds-line, #e6e9e7); }
.sae-cs__spec:last-of-type { border-bottom: 0; }
.sae-cs__spec dt { color: var(--ds-grey); font-size: 14px; }
.sae-cs__spec dd { margin: 0; font-weight: 700; color: var(--ds-ink); font-size: 14px; text-align: right; }
.sae-cs__cta { margin-top: 16px; width: 100%; justify-content: center; }
@media (max-width: 768px) { .sae-cs__grid { grid-template-columns: 1fr; } .sae-cs__aside { position: static; } }

/* ============================================================
   Type scale (approved weight ladder) — enforced over theme.json :where() defaults.
   800 numerals · 700 H1/H2 + strong · 600 H3/eyebrow/UI · 500 caption · 400 body/lead
   ============================================================ */
h3, .wp-block-heading.has-h-3-font-size { font-weight: 600; letter-spacing: -0.005em; }
h4, h5, h6 { font-weight: 600; letter-spacing: 0; }
.sae-cs__title, .cs-card__title, .sae-service-card h3 { font-weight: 600; }

/* Lead paragraph — section intro (type-scale Lead level) */
.sae-lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: var(--ds-grey); max-width: 680px; }
.has-text-align-center.sae-lead { margin-inline: auto; }
.sae-story { } /* marker for authored story sections */
.sae-story .wp-block-list { max-width: 560px; margin-inline: auto; text-align: left; color: var(--ds-grey); }

/* Eyebrow pill on mist surfaces — switch to a white capsule so it doesn't blend into the mist bg */
.sae-section--mist .is-style-sae-eyebrow,
.sae-section--mist .sae-eyebrow,
.wp-block-group.is-style-sae-mist .is-style-sae-eyebrow { background: #fff; }

/* ============================================================
   Homepage (page-blank) — spacing rhythm, gutters, hero inset
   ============================================================ */
/* Page gutter: full-bleed section bands keep their bg, but content never touches the viewport edge. */
.sae-page--blank .sae-section { padding-inline: var(--ds-edge); }
/* Hero floats as an inset rounded panel (padding/space on all four sides), matching the footer.
   Top gap trimmed to ~80% of --ds-edge — nav-to-hero read as too airy at the shared clamp value. */
.sae-page--blank .sae-hero { margin: var(--ds-edge); margin-top: clamp(13px, 3.2vw, 38px); padding: clamp(32px, 5vw, 60px) !important; }
/* A logo strip sitting on a mist section shouldn't be a second mist panel — flatten it (kills the
   mist-on-mist double padding behind Trust + Warranties). */
/* Child selector (0,2,0) beats base .sae-section--mist (0,1,0) — no !important needed */
.sae-section--mist > .sae-section--mist { background: transparent; padding: 4px 0 0; border-radius: 0; }

/* Hero reviews-card trust footer (fills + reinforces the card) */
/* Container specificity (0,2,0) beats WP blockGap — no !important needed */
.sae-card-trust { padding-top: 14px; border-top: 1px solid var(--ds-line, #e6e9e7); font-size: 13px; font-weight: 600; color: var(--ds-grey); line-height: 1.5; }
.sae-hero .sae-card-trust { margin-top: 16px; }

/* Rebate stat row */
.sae-rebate-stats { text-align: center; }
/* Container specificity (0,2,0) beats WP blockGap margin — no !important needed */
.sae-section .sae-rebate-stats { margin-top: var(--space-lg); }
.sae-rebate-stats .wp-block-column { padding: 0 8px; }
/* (0,2,0) beats base .wp-block-column .sae-stat__num (0,2,0) by source order — no !important needed */
.sae-rebate-stats .sae-stat__num { font-family: var(--ds-font-display); font-weight: 800; font-size: clamp(30px, 4vw, 44px); color: var(--ds-green-ink); line-height: 1; margin: 0 0 6px; }
.sae-rebate-stats .sae-stat__label { color: var(--ds-grey); font-size: 14px; margin: 0; }

/* Centre the eyebrow pill when the section heading is centred (eyebrow carries has-text-align-center).
   The pill is inline-flex, so text-align alone won't move it — flex + max-content + auto margins will. */
.is-style-sae-eyebrow.has-text-align-center,
.sae-eyebrow.has-text-align-center { display: flex; width: max-content; max-width: 100%; margin-inline: auto; }

/* ============================================================
   Brand partner scroller (auto-marquee, white)
   ============================================================ */
.sae-brand-scroller { overflow: hidden; max-width: 100%; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sae-brand-scroller__track { display: flex; align-items: center; gap: clamp(44px, 6vw, 84px); width: max-content; animation: sae-marquee 26s linear infinite; }
.sae-brand-scroller:hover .sae-brand-scroller__track { animation-play-state: paused; }
.sae-brand-scroller img { height: 44px; width: auto; object-fit: contain; opacity: .82; flex: none; }
/* Seals (CEC roundels, SolarQuotes medals) carry fine-print detail that reads smaller than a flat
   wordmark at the same pixel height — bump them up so they hold equal visual weight in the strip. */
.sae-brand-scroller img.sae-brand-scroller__seal { height: 58px; }
@keyframes sae-marquee { to { transform: translateX(-50%); } }
/* Tight trust band pulled up under the hero */
/* Double-class selector (0,2,0) beats WP block padding — no !important needed */
.sae-section.sae-trust-tight { padding-top: clamp(18px, 2.5vw, 28px); padding-bottom: clamp(22px, 3vw, 36px); }
.sae-trust-tight .sae-trust-label { text-align: left; color: var(--ds-grey); font-size: 14px; font-weight: 600; margin: 0 0 18px; }

/* ============================================================
   Video trigger (pulsing play button) + click-to-play modal
   ============================================================ */
.sae-video { position: relative; aspect-ratio: 16 / 9; max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--ds-ink); cursor: pointer; box-shadow: var(--shadow-card); }
.sae-video__poster { width: 100%; height: 100%; object-fit: cover; opacity: .5; display: block; }
.sae-video__play { position: absolute; inset: 0; margin: auto; width: 86px; height: 86px; border-radius: 50%; background: var(--ds-orange); color: #fff; display: grid; place-items: center; z-index: 1; border: 0; cursor: pointer; }
.sae-video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.sae-video__play::before, .sae-video__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ds-orange); z-index: -1; animation: sae-ping 2.6s cubic-bezier(0,0,0.2,1) infinite; }
.sae-video__play::after { animation-delay: 1.3s; }
@keyframes sae-ping { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sae-brand-scroller__track, .sae-video__play::before, .sae-video__play::after { animation: none; } }

/* Video trigger as a real <button> — reset chrome + add focus ring (a11y) */
.sae-video { display: block; width: 100%; border: 0; padding: 0; }
.sae-video:focus-visible { outline: var(--ds-focus); outline-offset: 3px; }

.sae-video-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.sae-video-modal.is-open { display: block; }
.sae-video-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 18, .92); }
.sae-video-modal__dialog { position: relative; max-width: 1100px; margin: 5vh auto; padding: 0 20px; }
.sae-video-modal__video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: #000; display: block; }
.sae-video-modal__close { position: absolute; top: -46px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sae-video-modal__close:hover { background: rgba(255,255,255,.22); }
.sae-video-modal__close:focus-visible { outline: var(--ds-focus); outline-offset: 2px; }
body.sae-video-modal-open { overflow: hidden; }
@media (max-width: 640px) { .sae-video-modal__dialog { margin-top: 12vh; } .sae-video-modal__close { top: -42px; right: 8px; } }

/* ============================================================
   Niche call-out band — mentions an atypical/specialist offer + routes to its page
   ============================================================ */
.sae-niche-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; background: var(--ds-green-tint); border: 1px solid var(--ds-green-line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 44px); }
.sae-niche-callout__body { flex: 1 1 380px; }
.sae-niche-callout__eyebrow { font-family: var(--ds-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-green-ink); margin: 0 0 6px; }
.sae-niche-callout h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 6px; color: var(--ds-ink); }
.sae-niche-callout p { margin: 0; color: var(--ds-grey); font-size: 15.5px; }
.sae-niche-callout__link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ds-font-display); font-weight: 600; font-size: 15px; color: #fff; background: var(--ds-green-leaf); padding: 13px 22px; border-radius: var(--radius-pill); text-decoration: none; transition: background var(--ds-ease); }
.sae-niche-callout__link:hover { background: var(--ds-green-deep); color: #fff; }

/* Brand bar — label LEFT, logos scroll inline to its right (same row); stacks on mobile */
.sae-brandbar { display: flex; align-items: center; gap: clamp(20px, 4vw, 52px); }
.sae-brandbar .sae-trust-label { margin: 0; flex: 0 0 auto; max-width: 230px; line-height: 1.4; }
.sae-brandbar .sae-brand-scroller { flex: 1 1 auto; min-width: 0; }
@media (max-width: 768px) {
    .sae-brandbar { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sae-brandbar .sae-trust-label { max-width: none; }
}

/* ============================================================
   Problem cards — 3 pain points under the problem statement
   ============================================================ */
/* Container specificity (0,2,0) beats WP blockGap margin — no !important needed */
.sae-section .sae-problem-cards { margin-top: var(--space-lg); }
.sae-problem-card { background: #fff; border: 1px solid var(--ds-line, #e6e9e7); border-radius: var(--radius-md); padding: 26px 24px; text-align: left; box-shadow: var(--shadow-card); height: 100%; }
.sae-problem-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(239, 130, 0, 0.12); color: var(--ds-orange); margin-bottom: 16px; }
.sae-problem-card__icon svg { width: 23px; height: 23px; }
.sae-problem-card h3 { font-size: 18px; margin: 0 0 6px; color: var(--ds-ink); }
.sae-problem-card p { margin: 0; color: var(--ds-grey); font-size: 15px; line-height: 1.6; }

/* ============================================================
   Card interaction — ONE shared, tokenised hover language for
   every card component (service .sae-scard, audience .sae-acard,
   case-study .cs-card; /intro's .solution-card is the same set of
   tokens in sections.css). Rise by --ds-card-lift; the shadow
   deepens to --shadow-hover. Solid cards use box-shadow; the cut
   service card uses drop-shadow so the shadow follows the notch.
   Add a new card to these selector lists — never re-invent a hover.
   ============================================================ */
.sae-scard:hover,  .sae-scard:focus-within,
.sae-acard:hover,  .sae-acard:focus-within,
.cs-card:hover,    .cs-card:focus-within {
    transform: translateY(var(--ds-card-lift));
}
.sae-acard:hover,  .sae-acard:focus-within,
.cs-card:hover,    .cs-card:focus-within { box-shadow: var(--shadow-hover); }
.sae-scard:hover,  .sae-scard:focus-within { filter: drop-shadow(var(--shadow-hover)); }

/* Reduced-motion: cards don't rise or scale (colour/shadow still shift) */
@media (prefers-reduced-motion: reduce) {
    .sae-scard, .sae-acard, .cs-card, .sae-arrow { transition: background var(--ds-ease), box-shadow var(--ds-ease) !important; }
    .sae-scard:hover, .sae-scard:focus-within, .sae-acard:hover, .sae-acard:focus-within, .cs-card:hover, .cs-card:focus-within { transform: none !important; }
    .sae-scard:hover .sae-arrow, .sae-scard:focus-within .sae-arrow { transform: none !important; }
}

/* Location index cards (clickable problem-card) */
.sae-loc-card { display: flex; flex-direction: column; text-decoration: none; transition: transform var(--ds-card-ease), box-shadow var(--ds-card-ease); }
.sae-loc-card:hover, .sae-loc-card:focus-within { transform: translateY(var(--ds-card-lift)); box-shadow: var(--shadow-hover); }
.sae-loc-card h3 { color: var(--ds-ink); }
.sae-loc-card p { flex: 1 0 auto; }
.sae-loc-card__go { margin-top: 14px; color: var(--ds-green-ink); font-family: var(--ds-font-display); font-weight: 600; font-size: 14px; }

/* Full-width rounded banner image (real brand photos on utility pages) */
.sae-banner { margin: 0; }
.sae-banner img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); display: block; }

/* ============================================================
   Media-text layout utilities — replaces repeated inline style attrs (SIMP-17)
   Specificity raised over core Gutenberg block CSS where needed.
   ============================================================ */
/* grid-template-columns (0,2,0) beats core .wp-block-media-text (0,1,0) */
.wp-block-media-text.sae-mtext { grid-template-columns: 48% auto; }
/* (0,3,0) beats core .wp-block-media-text.has-media-on-the-right (0,2,0) */
.wp-block-media-text.has-media-on-the-right.sae-mtext--flip { grid-template-columns: auto 48%; }
/* (0,3,0) matches core column rule — wins by later source order (brand.css loads after core inline CSS).
   flex-grow:0 replaces the core [style*=flex-basis] rule that no longer fires once inline style is gone. */
.wp-block-columns > .wp-block-column.sae-mtext__wide   { flex-basis: 58%; flex-grow: 0; }
.wp-block-columns > .wp-block-column.sae-mtext__narrow { flex-basis: 42%; flex-grow: 0; }
/* (0,2,0) beats core .wp-block-cover (0,1,0) */
.wp-block-cover.sae-mtext__media { min-height: 340px; }

/* Scrim overlay — dark gradient over cover block images (legibility) (SIMP-18) */
/* (0,2,0) beats core .wp-block-cover__background (0,1,0) */
.wp-block-cover__background.sae-scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
}