/*
 * blocks.css — page-level blocks. Currently the static home page sections;
 * when M1 lands these become the render targets for the content block types
 * (hero, feature, CTA band, impact counters, value chain, grids, …).
 */

/* -------------------------------------------------------------------------
 * Hero slider
 *
 * Photographs cross-fade behind the copy, each slide carrying its own message.
 * Behaviour lives in js/hero-slider.js; with JavaScript off the first slide
 * simply stays put, which is a complete hero on its own.
 * ---------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    min-height: clamp(30rem, 74vh, 44rem);
    background-color: var(--gg-green-950);
    color: var(--gg-ink-100);
    padding-block: clamp(3rem, 5.5vw, 5.5rem);
}

/* Each slide is a photograph + its brand overlay. */
.hero__slide {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms var(--gg-ease), visibility 900ms;
}

.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(4, 30, 20, 0.94) 0%, rgba(4, 30, 20, 0.78) 45%, rgba(4, 30, 20, 0.42) 100%),
        radial-gradient(52rem 52rem at 88% 8%, rgba(251, 191, 36, 0.2), transparent 58%);
}

.hero__media {
    position: absolute;
    inset: 0;
    background-image: var(--slide-image, none);
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
}

/* Slow drift on the visible slide gives the photograph life without motion sickness. */
.hero__slide.is-active .hero__media { animation: gg-kenburns 14s var(--gg-ease) forwards; }

@keyframes gg-kenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}

.hero__inner { position: relative; z-index: 1; }

/* Copy blocks are stacked so the tallest sets the height and nothing jumps. */
.hero__copy { display: grid; }
.hero__copy > * { grid-area: 1 / 1; }

.hero__panel {
    max-width: 44rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 600ms var(--gg-ease) 120ms, transform 600ms var(--gg-ease) 120ms, visibility 600ms;
}

.hero__panel.is-active { opacity: 1; visibility: visible; transform: none; }

.hero__eyebrow { color: var(--gg-gold-300); }

/* Long three-sentence headlines run a size below the global display scale so
   the lead and CTAs still clear the fold. */
.hero h1,
.hero__title {
    margin: var(--gg-space-4) 0 var(--gg-space-5);
    font-family: var(--gg-font-display);
    font-size: clamp(2rem, 1.1rem + 2.6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: #fff;
}

.hero__accent { color: var(--gg-gold-400); }

.hero__lead {
    max-width: 36rem;
    font-size: var(--gg-text-lg);
    color: var(--gg-ink-200);
    margin-bottom: var(--gg-space-6);
}

/* Controls: dots on the left, arrows on the right, on one line. */
.hero__controls {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-4);
    margin-top: clamp(2rem, 4vw, 3rem);
}

.hero__dots { display: flex; align-items: center; gap: var(--gg-space-3); margin: 0; padding: 0; list-style: none; }

.hero__dot {
    width: 2.5rem;
    height: 3px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: background-color var(--gg-speed) var(--gg-ease), width var(--gg-speed) var(--gg-ease);
}

.hero__dot[aria-selected="true"] { width: 4rem; background: var(--gg-accent); }

.hero__arrows { display: flex; gap: var(--gg-space-3); }

.hero__arrow {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--gg-speed) var(--gg-ease), border-color var(--gg-speed) var(--gg-ease);
}

.hero__arrow:hover { background: var(--gg-accent-strong); border-color: var(--gg-accent-strong); }

@media (prefers-reduced-motion: reduce) {
    .hero__slide, .hero__panel { transition: none; }
    .hero__slide.is-active .hero__media { animation: none; transform: scale(1.04); }
}

/* Mobile hero.
 *
 * Measured against the reference site at 375px: its hero is a CENTRED 28px
 * heading over one pill, and nothing else. Ours was a 32px left-aligned
 * heading, six lines of lead copy and two stacked buttons, which made the
 * hero 745px tall against their ~600px — you had to scroll past a wall of
 * text before reaching the page.
 *
 * The copy is not cut. It is centred, sized down and given a sensible
 * measure, so the same words occupy far less of the first screen. The slider,
 * its dots and its panels are untouched.
 */
@media (max-width: 42rem) {
    .hero { min-height: 0; padding-block: var(--gg-space-6) var(--gg-space-7); }

    .hero__copy,
    .hero__panel { text-align: center; }

    /* The eyebrow's leading rule reads as a bullet once centred, so it goes. */
    .hero__eyebrow { justify-content: center; }
    .hero__eyebrow::before { display: none; }

    .hero__title {
        font-size: 1.75rem;          /* 28px, the reference size */
        line-height: 1.15;
        letter-spacing: -0.01em;
        margin-block: var(--gg-space-3) var(--gg-space-4);
    }

    .hero__lead {
        margin-inline: auto;
        margin-bottom: var(--gg-space-5);
        max-width: 34ch;             /* a readable measure, not the full width */
        font-size: var(--gg-text-base);
    }

    /* One pill per row, centred, thumb-sized — not two half-width buttons. */
    .hero__panel .btn-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gg-space-3);
        max-width: 20rem;
        margin-inline: auto;
    }

    .hero__panel .btn-row .button { width: 100%; }

    .hero__controls { justify-content: center; }
    .hero__arrows { display: none; }
}

/* The masthead logo band takes 124px on a phone once the utility bar is above
   it; the reference header is about 101px in total. A smaller mark and tighter
   padding buy that back without hiding anything. */
@media (max-width: 42rem) {
    .masthead__inner { padding-block: var(--gg-space-2); }
    .brand img { width: 190px; height: auto; }
}

/* -------------------------------------------------------------------------
 * Pillar cards that overlap the hero's bottom edge
 * ---------------------------------------------------------------------- */
.pillars {
    position: relative;
    z-index: 2;
    margin-top: -4.5rem;
    padding-bottom: var(--gg-space-8);
}

.pillars__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gg-space-4);
}

.pillar-card {
    display: block;
    padding: var(--gg-space-5);
    border-radius: var(--gg-radius-lg);
    border-top: 4px solid var(--gg-accent);
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow-lg);
    text-decoration: none;
    color: var(--gg-ink-900);
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease);
}

.pillar-card:hover { transform: translateY(-4px); color: var(--gg-ink-900); }

.pillar-card__name {
    margin: var(--gg-space-4) 0 var(--gg-space-2);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    font-weight: 700;
    line-height: 1.2;
}

.pillar-card__hint { margin: 0; font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.pillar-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--gg-space-4);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-primary);
}

.pillar-card:hover .pillar-card__more .icon { transform: translateX(3px); }
.pillar-card__more .icon { transition: transform var(--gg-speed) var(--gg-ease); }

@media (max-width: 68rem) {
    .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 42rem) {
    .pillars { margin-top: -2.5rem; }
    .pillars__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Impact counters band
 * ---------------------------------------------------------------------- */
.impact { background: var(--gg-green-950); color: var(--gg-ink-100); padding-block: var(--gg-space-7); }

.impact__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gg-space-5);
}

.impact__item { text-align: center; }

@media (max-width: 56rem) {
    .impact__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 34rem) {
    .impact__grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
 * Decorative feature media panels (no photography yet — M7 replaces these
 * with real Cloudinary images).
 * ---------------------------------------------------------------------- */
.media-panel {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 20rem;
    border-radius: var(--gg-radius-xl);
    background:
        radial-gradient(30rem 30rem at 20% 20%, rgba(251, 191, 36, 0.35), transparent 55%),
        linear-gradient(140deg, var(--gg-green-700), var(--gg-green-950));
    box-shadow: var(--gg-shadow-lg);
    position: relative;
    overflow: hidden;
}

.media-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    pointer-events: none;
}

.media-panel__icon {
    position: relative;
    z-index: 1;
    width: 7rem;
    height: 7rem;
    display: grid;
    place-items: center;
    border-radius: var(--gg-radius-xl);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--gg-gold-300);
    backdrop-filter: blur(4px);
}

.media-panel__icon svg { width: 3.5rem; height: 3.5rem; }

/* -------------------------------------------------------------------------
 * Shop category tiles
 * ---------------------------------------------------------------------- */
.shop-cat {
    display: flex;
    align-items: center;
    gap: var(--gg-space-4);
    padding: var(--gg-space-5);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    text-decoration: none;
    color: var(--gg-ink-900);
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease), border-color var(--gg-speed) var(--gg-ease);
}

.shop-cat:hover {
    transform: translateY(-3px);
    box-shadow: var(--gg-shadow);
    border-color: var(--gg-green-200);
    color: var(--gg-ink-900);
}

.shop-cat__name { margin: 0; font-family: var(--gg-font-display); font-weight: 600; }

/* -------------------------------------------------------------------------
 * Home solar package cards
 * ---------------------------------------------------------------------- */
.package-card { position: relative; }

.package-card__tier {
    display: inline-block;
    margin-bottom: var(--gg-space-3);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gg-gold-700);
}

.package-card--featured {
    border-color: var(--gg-green-300);
    box-shadow: var(--gg-shadow);
}

.package-card--featured::before {
    content: "Most popular";
    position: absolute;
    top: -0.85rem;
    left: var(--gg-space-5);
    padding: 0.2rem 0.7rem;
    border-radius: var(--gg-radius-full);
    background: var(--gg-accent-strong);
    color: #fff;
    font-size: var(--gg-text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.package-card__size {
    font-family: var(--gg-font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gg-green-800);
}

.package-card__price { font-size: var(--gg-text-card); color: var(--gg-ink-muted); }

/* -------------------------------------------------------------------------
 * Interior page hero (compact, reused by every non-home page)
 * ---------------------------------------------------------------------- */
.page-hero {
    position: relative;
    overflow: hidden;
    /* The photograph is passed per page as --page-hero-image (partials/page-hero.php). */
    background-color: var(--gg-green-950);
    background-image: var(--page-hero-image);
    background-size: cover;
    background-position: center;
    color: var(--gg-ink-100);
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

/* Brand overlay: keeps white text readable on any photograph. */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(5, 41, 27, 0.94) 0%, rgba(5, 41, 27, 0.78) 45%, rgba(5, 41, 27, 0.45) 100%),
        radial-gradient(38rem 38rem at 92% 10%, rgba(251, 191, 36, 0.18), transparent 60%);
    pointer-events: none;
}

/* Sits inside .container, so the copy lines up with the navbar above it. */
.page-hero__inner { position: relative; max-width: 52rem; }
.page-hero__eyebrow { margin-bottom: var(--gg-space-3); }
.page-hero__actions { margin: var(--gg-space-5) 0 0; }

/* Highlight headline: solid blocks that hug each line of the title. */
.page-hero--highlight h1 {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.14em 0.3em;
    background: var(--gg-primary);
    line-height: 1.45;
}

.page-hero--highlight .page-hero__lead { margin-top: var(--gg-space-5); }
.page-hero--highlight .page-hero__inner > h1 { margin-inline-start: -0.3em; }

/* Breadcrumbs, shown under an interior hero. */
.breadcrumb {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: var(--gg-space-5) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-300);
}

.breadcrumb a { color: var(--gg-ink-200); text-decoration: none; }
.breadcrumb a:hover { color: var(--gg-gold-300); }
.breadcrumb .icon { width: 1rem; height: 1rem; color: rgba(255, 255, 255, 0.4); }
.breadcrumb [aria-current] { color: #fff; font-weight: 600; }

/* A section painted in the brand green, for photo-tile grids. */
.section--brand { background: var(--gg-primary); color: #fff; }
.section--brand h2, .section--brand h3 { color: #fff; }
.section--brand .section__lead { color: rgba(255, 255, 255, 0.86); }
.section--brand .eyebrow { color: #fff; }
.section--brand .eyebrow::before { background: rgba(255, 255, 255, 0.6); }

.page-hero .eyebrow { color: var(--gg-gold-300); }
.page-hero h1 { color: #fff; margin: var(--gg-space-3) 0 var(--gg-space-4); max-width: 44rem; }
.page-hero__lead { margin: 0; max-width: 42rem; font-size: var(--gg-text-lg); color: var(--gg-ink-200); }

/* Readable prose for legal / long-form pages */
.prose { max-width: 44rem; }
.prose h2 { margin-top: var(--gg-space-7); }
.prose h3 { margin-top: var(--gg-space-6); }

/* -------------------------------------------------------------------------
 * Section head with a trailing "view all" link (reference: act.or.ke)
 * ---------------------------------------------------------------------- */
.section__head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gg-space-5);
    max-width: none;
}

.section__head--split > div { max-width: 46rem; }

.view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    flex: none;
    margin-bottom: 0.4rem;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gg-primary);
    text-decoration: none;
    white-space: nowrap;
}

.view-all:hover { color: var(--gg-accent-strong); }
.view-all .icon { transition: transform var(--gg-speed) var(--gg-ease); }
.view-all:hover .icon { transform: translateX(3px); }

/* -------------------------------------------------------------------------
 * Who-we-are split: label + heading + CTA left, prose right
 * ---------------------------------------------------------------------- */
.who { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.who__intro .btn-row { margin-top: var(--gg-space-5); }
.who__prose p { margin-bottom: var(--gg-space-4); }
.who__prose p:last-child { margin-bottom: 0; }
.who__prose .lead { font-size: var(--gg-text-lg); color: var(--gg-ink-700); }

@media (max-width: 52rem) {
    .who { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Intro blocks — three solid colour blocks that ride up over the hero's
 * bottom edge (the reference theme's counter strip). First carries the big
 * number, the other two carry calls to action.
 * ---------------------------------------------------------------------- */
.intro-blocks {
    position: relative;
    z-index: 2;
    margin-top: -5rem;
}

.intro-blocks__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
}

.intro-block {
    display: block;
    width: 100%;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
}

.intro-block--gold { background: var(--gg-gold-500); color: rgba(0, 0, 0, 0.72); }
.intro-block--green { background: var(--gg-green-700); }
.intro-block--deep { background: var(--gg-green-900); }

.intro-block__number {
    display: block;
    font-family: var(--gg-font-display);
    font-size: clamp(2.75rem, 1.5rem + 4vw, 3.75rem);
    font-weight: 300;
    line-height: 1;
    color: rgba(0, 0, 0, 0.82);
}

.intro-block__label {
    display: block;
    margin-top: var(--gg-space-2);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xl);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.82);
}

.intro-block--gold .intro-block__sub { color: rgba(0, 0, 0, 0.6); }

.intro-block h3 { margin: 0 0 var(--gg-space-3); font-size: var(--gg-text-2xl); color: inherit; }
.intro-block p { margin: 0 0 var(--gg-space-4); font-size: var(--gg-text-card); color: inherit; opacity: 0.85; }

.intro-block__btn {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    transition: background-color var(--gg-speed) var(--gg-ease), color var(--gg-speed) var(--gg-ease);
}

.intro-block:hover .intro-block__btn { background: #fff; color: var(--gg-ink-900); }

.intro-block--gold .intro-block__btn { border-color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.8); }
.intro-block--gold:hover .intro-block__btn { background: var(--gg-ink-900); border-color: var(--gg-ink-900); color: #fff; }

@media (max-width: 52rem) {
    .intro-blocks { margin-top: -2.5rem; }
    .intro-blocks__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Services — horizontal icon + text items (reference block-6)
 * ---------------------------------------------------------------------- */
.service-item { display: flex; gap: var(--gg-space-5); }

.service-item__icon {
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    color: var(--gg-accent-strong);
}

.service-item__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }

.service-item__body h3 { margin: 0 0 var(--gg-space-3); font-size: var(--gg-text-xl); font-weight: 500; }
.service-item__body p { margin: 0; font-size: var(--gg-text-card); color: var(--gg-ink-muted); }

/* -------------------------------------------------------------------------
 * Outcome cards — the eight purpose words over photographs: each card is a
 * real image washed in green, a gold icon, the outcome in display caps and a
 * one-line explainer. One cell may fall back to the icon panel (EV has no
 * photograph yet).
 * ---------------------------------------------------------------------- */
.outcome-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 17rem;
    padding: var(--gg-space-5);
    border-radius: var(--gg-radius-lg);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

.outcome-card__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--gg-ease);
}

.outcome-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(5, 41, 27, 0.92) 15%, rgba(5, 41, 27, 0.45) 55%, rgba(5, 41, 27, 0.25) 100%);
    transition: background var(--gg-speed) var(--gg-ease);
}

.outcome-card:hover .outcome-card__bg { transform: scale(1.06); }

.outcome-card--icon {
    background:
        radial-gradient(18rem 18rem at 20% 10%, rgba(251, 191, 36, 0.32), transparent 55%),
        linear-gradient(150deg, var(--gg-green-700), var(--gg-green-950));
}

.outcome-card--icon::after { display: none; }

.outcome-card__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--gg-space-4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(2px);
    color: var(--gg-gold-300);
}

.outcome-card--icon .outcome-card__icon { background: rgba(255, 255, 255, 0.14); width: 4rem; height: 4rem; }
.outcome-card--icon .outcome-card__icon svg { width: 2rem; height: 2rem; }
.outcome-card__icon svg { width: 1.4rem; height: 1.4rem; }

.outcome-card__name {
    margin: 0;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-2xl);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.outcome-card__text { margin: var(--gg-space-1) 0 0; font-size: var(--gg-text-card); color: rgba(255, 255, 255, 0.85); }

/* -------------------------------------------------------------------------
 * Value flow — tall photo beside a vertical numbered timeline (replaces the
 * horizontal step pills for the agri-solar chain).
 * ---------------------------------------------------------------------- */
.value-flow {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.value-flow__media {
    position: relative;
    min-height: 30rem;
    border-radius: var(--gg-radius-lg);
    overflow: hidden;
    box-shadow: 0 3px 66px -24px rgba(0, 0, 0, 0.35);
}

.value-flow__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.value-flow__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 41, 27, 0.55), transparent 45%);
}

.value-flow__media figcaption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: var(--gg-space-5);
    font-size: var(--gg-text-sm);
    color: rgba(255, 255, 255, 0.9);
}

.value-flow__steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: value-step;
}

.value-flow__step {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: var(--gg-space-4);
    padding-bottom: var(--gg-space-5);
    counter-increment: value-step;
}

/* the connecting hairline between steps */
.value-flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 0;
    left: 1.6rem;
    width: 2px;
    background: var(--gg-green-100);
}

.value-flow__step:last-child { padding-bottom: 0; }

.value-flow__num {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 2px solid var(--gg-green-100);
    background: var(--gg-surface);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-base);
    font-weight: 700;
    color: var(--gg-primary);
}

.value-flow__step::after { content: none; }

.value-flow__body { padding-top: 0.35rem; }
.value-flow__body h3 { margin: 0 0 0.15rem; font-size: var(--gg-text-xl); font-weight: 600; }
.value-flow__body p { margin: 0; font-size: var(--gg-text-card); color: var(--gg-ink-muted); }

@media (max-width: 52rem) {
    .value-flow { grid-template-columns: 1fr; }
    .value-flow__media { min-height: 16rem; }
}

/* -------------------------------------------------------------------------
 * Package cards with a photograph on top.
 * ---------------------------------------------------------------------- */
.package-card { overflow: hidden; }

.package-card__media {
    margin: calc(-1 * var(--gg-space-6)) calc(-1 * var(--gg-space-6)) var(--gg-space-4);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gg-ink-100);
}

.package-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--gg-ease);
}

.package-card:hover .package-card__media img { transform: scale(1.05); }

.package-card--featured .package-card__media { position: relative; }

/* -------------------------------------------------------------------------
 * Program-area card — photo top with a white text box pulled up over it
 * (the reference theme's "cause" card).
 * ---------------------------------------------------------------------- */
.program-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Was a hard 4px — the one card on the site that ignored the radius
       token, so it read as a different family from everything beside it. */
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    box-shadow: 0 3px 66px -24px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease);
}

.program-card:hover { transform: translateY(-4px); box-shadow: 0 10px 70px -24px rgba(0, 0, 0, 0.3); }

.program-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }

.program-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--gg-ease);
}

.program-card:hover .program-card__media img { transform: scale(1.05); }

/* Icon-topped variant while a pillar has no photograph (EV bikes arrive in M7). */
.program-card__media--icon {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(20rem 20rem at 25% 15%, rgba(251, 191, 36, 0.3), transparent 55%),
        linear-gradient(140deg, var(--gg-green-700), var(--gg-green-950));
    color: var(--gg-gold-300);
}

.program-card__media--icon svg { width: 4rem; height: 4rem; }

.program-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gg-space-3);
    width: 92%;
    margin: -2.5rem auto 0;
    padding: var(--gg-space-5);
    background: var(--gg-surface);
    box-shadow: 0 3px 30px -14px rgba(0, 0, 0, 0.18);
    color: var(--gg-ink-900);
}

.program-card__title { margin: 0; font-size: var(--gg-text-xl); line-height: 1.25; color: var(--gg-ink-900); }
.program-card__text { margin: 0; font-size: var(--gg-text-card); color: var(--gg-ink-muted); }

.program-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: var(--gg-space-2);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gg-primary);
}

.program-card__more .icon { transition: transform var(--gg-speed) var(--gg-ease); }
.program-card:hover .program-card__more .icon { transform: translateX(3px); }

/* -------------------------------------------------------------------------
 * News card — photo, tag, title, read more ("What's new" row)
 * ---------------------------------------------------------------------- */
.news-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    overflow: hidden;
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow-sm);
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease);
}

.news-card:hover { transform: translateY(-4px); box-shadow: var(--gg-shadow); }

.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gg-ink-100); }

.news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--gg-ease);
}

.news-card:hover .news-card__media img { transform: scale(1.05); }

.news-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gg-space-3);
    padding: var(--gg-space-5);
}

.news-card__tag {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gg-gold-700);
}

.news-card__title { margin: 0; font-size: var(--gg-text-lg); line-height: 1.3; }
.news-card__text { margin: 0; font-size: var(--gg-text-card); color: var(--gg-ink-muted); }

/* -------------------------------------------------------------------------
 * Enquiry band — the reference theme's "volunteer" split: a photograph over
 * a colour-washed photo background, with a short message form look kept as
 * a clear call to action instead of a dead form.
 * ---------------------------------------------------------------------- */
.enquiry-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(4rem, 7vw, 7rem);
    background-color: var(--gg-green-900);
    background-image: var(--enquiry-image, none);
    background-size: cover;
    background-position: center;
}

.enquiry-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, rgba(10, 114, 71, 0.92), rgba(5, 41, 27, 0.9));
}

.enquiry-band__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.enquiry-band__media {
    min-height: 22rem;
    border-radius: 4px;
    background-image: var(--enquiry-media, none);
    background-size: cover;
    background-position: center;
    box-shadow: 0 3px 66px -24px rgba(0, 0, 0, 0.4);
}

.enquiry-band__content { color: var(--gg-ink-100); }
.enquiry-band__content h2, .enquiry-band__content h3 { color: #fff; }
.enquiry-band__content p { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 52rem) {
    .enquiry-band__grid { grid-template-columns: 1fr; }
    .enquiry-band__media { min-height: 14rem; }
}

/* -------------------------------------------------------------------------
 * Gallery strip — edge-to-edge photographs, four across, hover zoom icon
 * (the reference theme's ftco-gallery).
 * ---------------------------------------------------------------------- */
.gallery-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3.4;
    background: var(--gg-green-950);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--gg-ease);
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 30, 20, 0.35);
    opacity: 0;
    transition: opacity var(--gg-speed) var(--gg-ease);
}

.gallery-item__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--gg-accent-strong);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity var(--gg-speed) var(--gg-ease), transform var(--gg-speed) var(--gg-ease);
}

.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after, .gallery-item:hover .gallery-item__icon { opacity: 1; }
.gallery-item:hover .gallery-item__icon { transform: translate(-50%, -50%) scale(1); }

@media (max-width: 52rem) {
    .gallery-strip { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
 * Partner strip — the ecosystem we build with (text list until logo art lands)
 * ---------------------------------------------------------------------- */
.partner-strip {
    padding-block: var(--gg-space-6);
    border-block: 1px solid var(--gg-border);
    background: var(--gg-surface);
}

.partner-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-3) var(--gg-space-5);
}

.partner-strip__label {
    flex: none;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gg-accent-strong);
}

.partner-strip__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--gg-text-sm);
    font-weight: 500;
    color: var(--gg-ink-600);
}

.partner-strip__list li { display: inline-flex; align-items: center; gap: var(--gg-space-3); }
.partner-strip__list li + li::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--gg-gold-400); }

/* -------------------------------------------------------------------------
 * Training — drivin-inspired blocks: facts strip, course cards, enquiry form.
 * ---------------------------------------------------------------------- */

/* Facts strip — white shadow cards riding up over the hero's bottom edge. */
.facts { margin-top: calc(-1 * var(--gg-space-7)); position: relative; z-index: 2; }

.fact-card {
    display: flex;
    gap: var(--gg-space-5);
    align-items: center;
    min-height: 9.5rem;
    padding: var(--gg-space-5) var(--gg-space-6);
    background: var(--gg-surface);
    border-radius: var(--gg-radius-lg);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(5, 41, 27, 0.18);
}

.fact-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    background: var(--gg-primary);
    color: #fff;
}

.fact-card__icon svg { width: 1.75rem; height: 1.75rem; }
.fact-card h3 { margin: 0 0 0.2rem; font-size: var(--gg-text-xl); font-weight: 600; }
.fact-card p { margin: 0; font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

/* Course cards — text block on top (badge, title, blurb, meta), photo on the
   bottom with a hover overlay that reveals the Register Now button. */
.course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--gg-speed) var(--gg-ease), transform var(--gg-speed) var(--gg-ease);
}

.course-card:hover { box-shadow: var(--gg-shadow-lg); transform: translateY(-3px); }

.course-card__body { padding: 0 var(--gg-space-6) var(--gg-space-5); text-align: center; }

.course-card__badge {
    display: inline-block;
    margin-bottom: var(--gg-space-4);
    padding: 0.35rem 1.5rem;
    background: var(--gg-accent);
    color: var(--gg-green-950);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.course-card__body h3 { margin: 0 0 var(--gg-space-3); font-size: var(--gg-text-xl); font-weight: 600; }
.course-card__body > p { margin: 0 0 var(--gg-space-4); font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.course-card__meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gg-space-4);
    font-size: var(--gg-text-xs);
    color: var(--gg-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.course-card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.course-card__meta svg { width: 0.9rem; height: 0.9rem; color: var(--gg-accent-strong); }

.course-card__media {
    position: relative;
    margin-top: auto;
    aspect-ratio: 16 / 9.5;
    overflow: hidden;
    background: var(--gg-green-950);
}

.course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--gg-ease); }
.course-card:hover .course-card__media img { transform: scale(1.05); }

.course-card__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(14rem 14rem at 30% 20%, rgba(251, 191, 36, 0.3), transparent 55%),
        linear-gradient(150deg, var(--gg-green-700), var(--gg-green-950));
    color: rgba(255, 255, 255, 0.9);
}

.course-card__placeholder svg { width: 3.5rem; height: 3.5rem; }

.course-card__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(5, 41, 27, 0.55);
    opacity: 0;
    transition: opacity var(--gg-speed) var(--gg-ease);
}

.course-card:hover .course-card__overlay,
.course-card__overlay:focus-visible { opacity: 1; }

.course-card__register {
    padding: 0.7rem 2rem;
    border: 2px solid var(--gg-accent);
    color: #fff;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(5, 41, 27, 0.35);
    transition: background var(--gg-speed) var(--gg-ease);
}

.course-card__overlay:hover .course-card__register { background: var(--gg-accent); color: var(--gg-green-950); }

/* Stacked photos — the drivin "about" treatment: big photo with a smaller one
   overlapping the top-left corner on a white frame. */
.feature__media--stack { position: relative; padding: var(--gg-space-6) 0 0 var(--gg-space-6); }

.stack-photo { margin: 0; border-radius: var(--gg-radius-lg); overflow: hidden; }
.stack-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stack-photo--back { aspect-ratio: 4 / 3.4; }
.stack-photo--front {
    position: absolute;
    top: 0;
    left: 0;
    width: 11rem;
    height: 11rem;
    border: 0.5rem solid var(--gg-green-950);
    box-shadow: var(--gg-shadow-lg);
}

/* Two-column tick list (drivin about checks). */
.tick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gg-space-3) var(--gg-space-5);
    margin: var(--gg-space-5) 0;
}

.tick-grid span { display: flex; align-items: center; gap: 0.6rem; font-size: var(--gg-text-sm); }
.tick-grid svg { flex: none; width: 1rem; height: 1rem; color: var(--gg-accent-strong); }

@media (max-width: 40rem) {
    .tick-grid { grid-template-columns: 1fr; }
    .stack-photo--front { width: 7rem; height: 7rem; }
}

/* Enquiry section — photo backdrop, green wash, intro column + white form card. */
.enquiry { position: relative; overflow: hidden; color: #fff; }
.enquiry__bg { position: absolute; inset: 0; z-index: -1; }
.enquiry__bg img { width: 100%; height: 100%; object-fit: cover; }
.enquiry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, rgba(5, 41, 27, 0.94) 30%, rgba(5, 41, 27, 0.75) 70%, rgba(5, 41, 27, 0.55));
}

.enquiry__inner {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.enquiry__intro h2 { color: #fff; }
.enquiry__intro > p { color: rgba(255, 255, 255, 0.85); }
.eyebrow--on-dark { color: var(--gg-gold-300); }

.enquiry__points { margin: var(--gg-space-5) 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.enquiry__points li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--gg-text-sm); }
.enquiry__points svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--gg-gold-300); }
.enquiry__phone { font-size: var(--gg-text-base); }
.enquiry__phone svg { width: 1rem; height: 1rem; margin-right: 0.4rem; vertical-align: -0.15rem; color: var(--gg-gold-300); }
.enquiry__phone a { color: #fff; font-weight: 600; }

.enquiry__card {
    padding: var(--gg-space-6);
    background: var(--gg-surface);
    border-radius: var(--gg-radius-lg);
    color: var(--gg-ink);
    box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.45);
}

.enquiry__card h3 { margin: 0 0 var(--gg-space-5); font-size: var(--gg-text-2xl); font-weight: 600; }
.enquiry__submit { width: 100%; }
.enquiry__note { margin: var(--gg-space-3) 0 0; font-size: var(--gg-text-xs); color: var(--gg-ink-muted); text-align: center; }

@media (max-width: 56rem) {
    .enquiry__inner { grid-template-columns: 1fr; }
}

/* Thank-you card */
.container--narrow { max-width: 42rem; }
.card--centered { text-align: center; align-items: center; }
.thanks-card .icon-tile--lg { margin-bottom: var(--gg-space-4); }
.thanks-card__subject { font-family: var(--gg-font-display); font-size: var(--gg-text-lg); color: var(--gg-primary); }

/* -------------------------------------------------------------------------
 * Contact — form + channel split, and two-up form rows.
 * ---------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.contact-form-card {
    padding: var(--gg-space-7);
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    box-shadow: var(--gg-shadow-lg);
}

.contact-form-card h2 { margin-bottom: var(--gg-space-5); }
.contact-form-card form { margin-top: var(--gg-space-4); }
.contact-form-card .button { margin-top: var(--gg-space-2); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gg-space-4); }
.contact-hint { margin: calc(-1 * var(--gg-space-3)) 0 var(--gg-space-4); font-size: var(--gg-text-xs); color: var(--gg-ink-muted); }

.contact-side { display: grid; gap: var(--gg-space-5); }

.contact-side__block {
    padding: var(--gg-space-6);
    background: var(--gg-green-950);
    border-radius: var(--gg-radius-lg);
    color: #fff;
}

.contact-side__block h3 { color: #fff; margin: 0 0 var(--gg-space-5); font-size: var(--gg-text-xl); font-weight: 600; }
.contact-side__block--photo { padding: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.contact-side__block--photo img { width: 100%; height: 100%; object-fit: cover; }

.contact-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gg-space-5); }
.contact-lines li { display: flex; gap: var(--gg-space-4); align-items: flex-start; }
.contact-lines svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; color: var(--gg-gold-300); }
.contact-lines span { display: block; font-size: var(--gg-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.15rem; }
.contact-lines a, .contact-lines p { color: #fff; font-size: var(--gg-text-base); margin: 0; }
.contact-lines a:hover { color: var(--gg-gold-300); }

@media (max-width: 56rem) {
    .contact-grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .contact-form-card { padding: var(--gg-space-5); }
}

/* -------------------------------------------------------------------------
 * WhatsApp CTAs — the brand-green chat button used on product and topic cards.
 * ---------------------------------------------------------------------- */
.button--whatsapp {
    background: #1faa59;
    color: #fff;
}
.button--whatsapp:hover, .button--whatsapp:focus-visible { background: #128c4a; color: #fff; }
.button--whatsapp svg { width: 1rem; height: 1rem; }

/* Topic cards — icon + copy + a footer pair of actions (page link + WhatsApp). */
.topic-card { justify-content: flex-start; }
.topic-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-4);
    margin-top: auto;
    padding-top: var(--gg-space-3);
    border-top: 1px solid var(--gg-border);
}

/* Product card — the media and the title open the product's own page; the
   footer pairs "View details" with a direct WhatsApp enquiry. */
.product__name a { color: inherit; text-decoration: none; }
.product__name a:hover { color: var(--gg-primary); text-decoration: underline; }

/* The whole media block is a link, but it is hidden from assistive tech: the
   title link beside it goes to the same page. */
a.product__media { display: grid; }

.product__blurb {
    margin: var(--gg-space-2) 0 0;
    font-size: var(--gg-text-card);
    line-height: 1.5;
    color: var(--gg-ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gg-space-2);
    margin-top: auto;
    padding-top: var(--gg-space-3);
}

.product__action--whatsapp {
    background: #1faa59;
    border-color: #1faa59;
    color: #fff;
}

.product__action--whatsapp:hover { background: #128c4a; border-color: #128c4a; color: #fff; }

/* -------------------------------------------------------------------------
 * Service cards (/services and the "more services" row)
 * ---------------------------------------------------------------------- */
.service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    color: inherit;
    text-decoration: none;
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease), border-color var(--gg-speed) var(--gg-ease);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gg-shadow);
    border-color: var(--gg-green-200, #bfe6d0);
    color: inherit;
}

.service-card__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gg-ink-100); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--gg-ease); }
/* The photo already eased in on hover but the card itself never moved, so it
   read as flatter than every other card beside it. Same lift, same timing. */
@media (hover: hover) {
    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px -14px rgba(13, 23, 18, 0.26);
    }
}

.service-card:hover .service-card__media img { transform: scale(1.05); }

/* The icon sits over the corner of the photograph, half in the card. */
.service-card__icon {
    position: absolute;
    right: var(--gg-space-4);
    bottom: calc(-1 * var(--gg-space-4));
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--gg-radius);
    background: var(--gg-accent-strong);
    color: #fff;
    box-shadow: var(--gg-shadow);
}

.service-card__body { display: flex; flex-direction: column; gap: var(--gg-space-2); padding: var(--gg-space-5); }

.service-card__name {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--gg-ink-900);
}

.service-card__lead { font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.service-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: var(--gg-space-3);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-primary);
}

.service-card:hover .service-card__more .icon { transform: translateX(3px); }
.service-card__more .icon { transition: transform var(--gg-speed) var(--gg-ease); }

/* A contact panel under the photograph on a service page. */
.side-card {
    margin-top: var(--gg-space-5);
    padding: var(--gg-space-5);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface-alt);
}

.side-card__title { margin: 0 0 var(--gg-space-4); font-size: var(--gg-text-lg); }
.side-card__list { margin: 0 0 var(--gg-space-4); padding: 0; list-style: none; display: grid; gap: 0.6rem; font-size: var(--gg-text-sm); }
.side-card__list li { display: flex; align-items: center; gap: 0.5rem; }
.side-card__list .icon { color: var(--gg-primary); }

/* Two columns of ticks where a list runs long (service capability lists). */
.check-list--two { columns: 2; column-gap: var(--gg-space-6); }
.check-list--two li { break-inside: avoid; }

@media (max-width: 48rem) {
    .check-list--two { columns: 1; }
}

/* -------------------------------------------------------------------------
 * Product page (/shop/{slug})
 * ---------------------------------------------------------------------- */
.section--tight { padding-block: clamp(2rem, 3.5vw, 3rem) clamp(3rem, 5vw, 4.5rem); }

/* Breadcrumb strip on a light page, above the product. */
.page-crumbs { padding-block: var(--gg-space-4); border-bottom: 1px solid var(--gg-border); background: var(--gg-surface-alt); }
.breadcrumb--light { margin: 0; color: var(--gg-ink-muted); }
.breadcrumb--light a { color: var(--gg-ink-700); }
.breadcrumb--light a:hover { color: var(--gg-primary); }
.breadcrumb--light .icon { color: var(--gg-ink-400); }
.breadcrumb--light [aria-current] { color: var(--gg-ink-900); }

.product-page {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.product-page__media { position: sticky; top: calc(var(--gg-header-h) + var(--gg-space-4)); }
.product-page h1 { margin: 0 0 var(--gg-space-3); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.product-page__blurb { font-size: var(--gg-text-lg); color: var(--gg-ink-muted); }

.product-page__eyebrow { margin: 0 0 var(--gg-space-2); font-size: var(--gg-text-sm); }
.product-page__eyebrow a { color: var(--gg-primary); font-weight: 600; text-decoration: none; }
.product-page__eyebrow a:hover { text-decoration: underline; }

/* The product photo sits in a white frame, like a catalogue shot. */
.product-frame {
    display: grid;
    place-items: center;
    gap: var(--gg-space-4);
    padding: var(--gg-space-5);
    min-height: 22rem;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
}

.product-frame img { width: 100%; height: auto; border-radius: var(--gg-radius); }
.product-frame__glyph { color: var(--gg-green-700); }
.product-frame__glyph .icon { width: 4.5rem; height: 4.5rem; }
.product-frame__note { max-width: 22rem; margin: 0; text-align: center; font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

/* Key specifications: label in bold, value after it, green tick in front. */
.product-page__specs-title,
.product-detail__title {
    margin: var(--gg-space-5) 0 var(--gg-space-3);
    font-size: var(--gg-text-lg);
}

.spec-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.spec-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--gg-text-sm); color: var(--gg-ink-700); }
.spec-list .icon { margin-top: 0.15rem; color: var(--gg-primary); }
.spec-list strong { color: var(--gg-ink-900); }

.product-page__price {
    margin: var(--gg-space-5) 0 0;
    font-family: var(--gg-font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 800;
    color: var(--gg-ink-900);
}

.product-page__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: var(--gg-space-2) 0 var(--gg-space-5);
    padding: 0.25rem 0.6rem;
    border-radius: var(--gg-radius-sm);
    background: var(--gg-green-50, #eefaf3);
    color: var(--gg-green-800);
    font-size: var(--gg-text-sm);
    font-weight: 600;
}

.product-page__actions { display: grid; gap: var(--gg-space-3); }
.button--block { width: 100%; justify-content: center; }

/* Delivery and support promises, under the buttons. */
.assurance-box {
    margin-top: var(--gg-space-5);
    padding: var(--gg-space-4) var(--gg-space-5);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius);
    background: var(--gg-surface-alt);
}

.assurance-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.assurance-box li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--gg-text-sm); color: var(--gg-ink-700); }
.assurance-box .icon { margin-top: 0.15rem; color: var(--gg-primary); }

.product-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: var(--gg-space-5) 0 0;
    padding-top: var(--gg-space-4);
    border-top: 1px solid var(--gg-border);
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-muted);
}

.product-page__meta a { color: var(--gg-ink-800); }

/* Description column + "how buying works" rail. */
.product-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.product-detail__aside .side-card { margin-top: 0; background: var(--gg-surface); }

.step-list { margin: 0 0 var(--gg-space-4); padding: 0; list-style: none; display: grid; gap: var(--gg-space-3); font-size: var(--gg-text-sm); }
.step-list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--gg-ink-700); }

.step-list span {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--gg-primary);
    color: #fff;
    font-size: var(--gg-text-xs);
    font-weight: 700;
}

@media (max-width: 60rem) {
    .product-detail { grid-template-columns: 1fr; }
}

.product-page__subhead {
    margin: var(--gg-space-6) 0 var(--gg-space-4);
    font-size: var(--gg-text-xl);
}

.product-page__back { margin-top: var(--gg-space-6); }

/* The offer block: no price yet, so the assurance list carries the weight. */
.price-box {
    margin: var(--gg-space-5) 0 var(--gg-space-6);
    padding: var(--gg-space-5);
    border: 1px solid var(--gg-border);
    border-left: 4px solid var(--gg-accent);
    border-radius: var(--gg-radius);
    background: var(--gg-surface-alt);
}

.price-box__value {
    margin: 0;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-2xl);
    font-weight: 800;
    color: var(--gg-ink-900);
}

.price-box__note { margin: var(--gg-space-2) 0 var(--gg-space-4); font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.price-box__assurances {
    margin: var(--gg-space-4) 0 0;
    padding: var(--gg-space-4) 0 0;
    border-top: 1px solid var(--gg-border);
    list-style: none;
    display: grid;
    gap: 0.5rem;
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-700);
}

.price-box__assurances li { display: flex; align-items: center; gap: 0.5rem; }
.price-box__assurances .icon { color: var(--gg-primary); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--gg-space-2); margin: 0; padding: 0; list-style: none; }

/* Icon panel used when a product has no photograph yet. */
.media-panel--product { min-height: 22rem; align-content: center; gap: var(--gg-space-4); padding: var(--gg-space-6); text-align: center; }
.media-panel__note { position: relative; z-index: 1; max-width: 22rem; margin: 0 auto; font-size: var(--gg-text-sm); color: var(--gg-ink-200); }

@media (max-width: 60rem) {
    .product-page { grid-template-columns: 1fr; }
    .product-page__media { position: static; }
}

/* -------------------------------------------------------------------------
 * Shop listing extras: toolbar state, empty state and notes
 * ---------------------------------------------------------------------- */
.shop-toolbar__count { margin: 0; }

.shop-toolbar__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-primary);
    text-decoration: none;
}

.shop-toolbar__clear:hover { text-decoration: underline; }

.shop-note { margin-top: var(--gg-space-5); font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }
.filter-group__note { margin: 0; font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--gg-space-3);
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--gg-space-5);
    border: 1px dashed var(--gg-border);
    border-radius: var(--gg-radius-lg);
    text-align: center;
    background: var(--gg-surface-alt);
}

.empty-state h2 { margin: 0; font-size: var(--gg-text-xl); }
.empty-state p { margin: 0; max-width: 32rem; color: var(--gg-ink-muted); }

/* -------------------------------------------------------------------------
 * Business areas — a numbered index of the nine connected areas: ghost
 * number, green icon tile, title, copy and a "Learn more" where a real page
 * exists. Reads as a designed list rather than a wall of cards.
 * ---------------------------------------------------------------------- */
.area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--gg-space-7);
}

.area-item {
    position: relative;
    display: flex;
    gap: var(--gg-space-4);
    padding: var(--gg-space-5) 0;
    border-bottom: 1px solid var(--gg-border);
}

/* remove the hairline on the last row of the grid */
.area-item:nth-last-child(-n + 3) { border-bottom: 0; }

.area-item__num {
    position: absolute;
    top: var(--gg-space-4);
    right: 0;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--gg-green-100);
    user-select: none;
}

.area-item__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--gg-radius-md);
    background: var(--gg-green-100);
    color: var(--gg-primary);
}

.area-item__icon svg { width: 1.5rem; height: 1.5rem; }

.area-item__body { padding-right: var(--gg-space-7); }
.area-item__body h3 { margin: 0 0 var(--gg-space-2); font-size: var(--gg-text-xl); font-weight: 600; }
.area-item__body p { margin: 0 0 var(--gg-space-2); font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.area-item__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-accent-strong);
}
.area-item__more svg { width: 0.9rem; height: 0.9rem; transition: transform var(--gg-speed) var(--gg-ease); }
.area-item__more:hover svg { transform: translateX(4px); }

@media (max-width: 56rem) {
    .area-grid { grid-template-columns: 1fr 1fr; }
    .area-item:nth-last-child(-n + 3) { border-bottom: 1px solid var(--gg-border); }
    .area-item:nth-last-child(-n + 1) { border-bottom: 0; }
}

@media (max-width: 36rem) {
    .area-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Who we serve — photo collage beside a compact two-column audience list.
 * ---------------------------------------------------------------------- */
.serve {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.serve__media { position: relative; min-height: 26rem; }

.serve__photo { border-radius: var(--gg-radius-lg); overflow: hidden; box-shadow: var(--gg-shadow-lg); }
.serve__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.serve__photo--tall { width: 78%; height: 26rem; }
.serve__photo--small {
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--gg-space-6));
    width: 52%;
    height: 15rem;
    border: 6px solid var(--gg-surface);
}

.serve__content .section__head { margin-bottom: var(--gg-space-6); }

.serve__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gg-space-4) var(--gg-space-6); }

.serve-item {
    display: flex;
    align-items: center;
    gap: var(--gg-space-3);
    padding: var(--gg-space-3) var(--gg-space-4);
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-md);
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease);
}
.serve-item:hover { transform: translateY(-2px); box-shadow: var(--gg-shadow-sm); }

.serve-item__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--gg-radius-sm);
    background: var(--gg-green-100);
    color: var(--gg-primary);
}
.serve-item__icon svg { width: 1.15rem; height: 1.15rem; }

.serve-item__name { font-size: var(--gg-text-sm); font-weight: 600; color: var(--gg-ink); }

/* -------------------------------------------------------------------------
 * Impact framework — four gold-icon statements on the deep green band.
 * ---------------------------------------------------------------------- */
.impact-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.impact-item {
    padding: var(--gg-space-6) var(--gg-space-5);
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.impact-item:first-child { border-left: 0; }

.impact-item__icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--gg-space-4);
    border-radius: var(--gg-radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: var(--gg-gold-300);
}
.impact-item__icon svg { width: 1.6rem; height: 1.6rem; }

.impact-item h3 { margin: 0 0 var(--gg-space-2); font-size: var(--gg-text-lg); font-weight: 600; }
.impact-item p { margin: 0; font-size: var(--gg-text-sm); color: var(--gg-ink-200); }

@media (max-width: 56rem) {
    .serve { grid-template-columns: 1fr; }
    .serve__media { min-height: 0; margin-bottom: var(--gg-space-6); }
    .serve__photo--tall { width: 100%; height: 18rem; }
    .serve__photo--small { display: none; }
    .impact-strip { grid-template-columns: 1fr 1fr; }
    .impact-item:nth-child(odd) { border-left: 0; }
    .impact-item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .impact-item:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 36rem) {
    .serve__list { grid-template-columns: 1fr; }
    .impact-strip { grid-template-columns: 1fr; }
    .impact-item { border-left: 0; }
    .impact-item:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .impact-item:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
 * Knowledge Hub — the blog
 *
 * Index: topic chips, a three-up card grid and numbered pages.
 * Article: a single readable column with a cover, standfirst and share row.
 * ---------------------------------------------------------------------- */
.topic-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-3);
    margin-bottom: var(--gg-space-7);
}

.topic-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-full);
    background: var(--gg-surface);
    color: var(--gg-ink-700);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--gg-speed) var(--gg-ease), color var(--gg-speed) var(--gg-ease), border-color var(--gg-speed) var(--gg-ease);
}

.topic-filter__chip span {
    padding: 0.05rem 0.4rem;
    border-radius: var(--gg-radius-full);
    background: var(--gg-ink-100);
    font-size: var(--gg-text-xs);
    font-weight: 700;
    color: var(--gg-ink-muted);
}

.topic-filter__chip:hover { border-color: var(--gg-primary); color: var(--gg-primary); }
.topic-filter__chip.is-active { background: var(--gg-primary); border-color: var(--gg-primary); color: #fff; }
.topic-filter__chip.is-active span { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* --- article card --- */
.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease);
}

.post-card:hover { transform: translateY(-4px); box-shadow: var(--gg-shadow); }

.post-card__media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--gg-ink-50);
    color: var(--gg-green-700);
}

.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--gg-ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__glyph .icon { width: 2.5rem; height: 2.5rem; }

.post-card__body { display: flex; flex-direction: column; gap: var(--gg-space-2); padding: var(--gg-space-5); }

.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--gg-text-xs);
    color: var(--gg-ink-muted);
}

.post-card__topic {
    padding: 0.1rem 0.5rem;
    border-radius: var(--gg-radius-sm);
    background: var(--gg-green-50, #eefaf3);
    color: var(--gg-green-800);
    font-weight: 700;
}

.post-card__title { margin: 0; font-size: var(--gg-text-lg); line-height: 1.25; }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--gg-primary); }

.post-card__excerpt {
    margin: 0;
    font-size: var(--gg-text-card);
    color: var(--gg-ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card .card__link { margin-top: auto; padding-top: var(--gg-space-3); }

/* --- pagination --- */
.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: var(--gg-space-7); }

.pagination__link {
    min-width: 2.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-sm);
    background: var(--gg-surface);
    color: var(--gg-ink-700);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.pagination__link:hover { border-color: var(--gg-primary); color: var(--gg-primary); }
.pagination__link.is-active { background: var(--gg-primary); border-color: var(--gg-primary); color: #fff; }

/* --- the article itself --- */
.article { max-width: 48rem; }
.article__head { margin-bottom: var(--gg-space-6); }
.article h1 { margin: 0 0 var(--gg-space-4); font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); }

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-4);
    margin: 0;
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-muted);
}

.article__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.article__meta .icon { color: var(--gg-primary); }

.article__cover { margin: 0 0 var(--gg-space-6); border-radius: var(--gg-radius-lg); overflow: hidden; }
.article__cover img { width: 100%; height: auto; display: block; }

.article__standfirst {
    margin: 0 0 var(--gg-space-6);
    padding-left: var(--gg-space-4);
    border-left: 3px solid var(--gg-accent);
    font-size: var(--gg-text-lg);
    color: var(--gg-ink-700);
}

.article__body { max-width: none; }
.article__body h2 { margin-top: var(--gg-space-7); }
.article__body h3 { margin-top: var(--gg-space-6); }
.article__body img { max-width: 100%; height: auto; border-radius: var(--gg-radius); }
.article__body ul, .article__body ol { padding-left: 1.25rem; }
.article__body li { margin-bottom: 0.4rem; }
.article__body blockquote {
    margin: var(--gg-space-6) 0;
    padding: var(--gg-space-4) var(--gg-space-5);
    border-left: 4px solid var(--gg-primary);
    background: var(--gg-surface-alt);
    font-size: var(--gg-text-lg);
}

.article__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-4);
    margin-top: var(--gg-space-7);
    padding-top: var(--gg-space-5);
    border-top: 1px solid var(--gg-border);
}

.article__share { display: flex; align-items: center; gap: var(--gg-space-3); margin: 0; font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.article__share a {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--gg-ink-50);
    color: var(--gg-ink-700);
}

.article__share a:hover { background: var(--gg-primary); color: #fff; }

/* -------------------------------------------------------------------------
 * Customer quotes — the testimonials section. Nothing here is drawn unless
 * the testimonials table has an active row, so the styles are only ever
 * exercised by real content.
 * ---------------------------------------------------------------------- */
.quote-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-4);
    margin: 0;
    padding: var(--gg-space-6);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow-sm);
}

.quote-card__mark {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--gg-radius);
    background: var(--gg-ink-50);
    color: var(--gg-primary);
}

.quote-card__rating { display: flex; gap: 0.15rem; margin: 0; color: var(--gg-gold-400); }

.quote-card__text {
    flex: 1;
    margin: 0;
    font-size: var(--gg-text-lg);
    line-height: 1.65;
    color: var(--gg-ink-700);
}

.quote-card__person {
    display: flex;
    align-items: center;
    gap: var(--gg-space-4);
    padding-top: var(--gg-space-4);
    border-top: 1px solid var(--gg-border);
}

.quote-card__photo,
.quote-card__initials {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

.quote-card__initials {
    display: grid;
    place-items: center;
    background: var(--gg-primary);
    color: #fff;
    font-family: var(--gg-font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.quote-card__who { display: grid; gap: 0.1rem; }
.quote-card__name { font-weight: 700; color: var(--gg-ink-700); }
.quote-card__role { font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

/* A single quote pulled out inside a case study. */
.pull-quote {
    display: grid;
    gap: var(--gg-space-4);
    margin: var(--gg-space-7) 0;
    padding: var(--gg-space-6);
    border-left: 4px solid var(--gg-primary);
    border-radius: var(--gg-radius);
    background: var(--gg-surface-alt);
}

.pull-quote__mark { color: var(--gg-primary); }
.pull-quote blockquote { margin: 0; font-size: var(--gg-text-lg); line-height: 1.6; color: var(--gg-ink-700); }
.pull-quote figcaption { display: flex; flex-wrap: wrap; gap: 0 var(--gg-space-3); font-size: var(--gg-text-sm); }
.pull-quote figcaption span { color: var(--gg-ink-muted); }

/* -------------------------------------------------------------------------
 * Case-study numbers. Only figures the client entered are shown — see the
 * "no invented statistics" rule in the home-page view.
 * ---------------------------------------------------------------------- */
.metric-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-5);
    margin: 0 0 var(--gg-space-4);
    padding: 0;
    list-style: none;
}

.metric-list li { display: grid; gap: 0.1rem; }
.metric-list__value { font-family: var(--gg-font-display); font-weight: 700; color: var(--gg-primary); }
.metric-list__label { font-size: var(--gg-text-xs); color: var(--gg-ink-muted); }

.metric-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--gg-space-5);
    margin: var(--gg-space-6) 0;
    padding: var(--gg-space-5) var(--gg-space-6);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface-alt);
    list-style: none;
}

.metric-band li { display: grid; gap: 0.2rem; }

.metric-band__value {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-2xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--gg-primary);
}

.metric-band__label { font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

/* -------------------------------------------------------------------------
 * Partners — logos in the strip, and the grouped cards on Partner With Us.
 * ---------------------------------------------------------------------- */
.partner-strip__logo { display: block; height: 2.2rem; width: auto; object-fit: contain; }

.partner-group + .partner-group { margin-top: var(--gg-space-7); }

.partner-group__title {
    margin: 0 0 var(--gg-space-5);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gg-accent-strong);
}

/* .partner-card itself is defined once, further down with the application
   panel — an earlier copy here set flex-direction: column and quietly won
   against the later rules, which is exactly the trap to avoid. */

/* -------------------------------------------------------------------------
 * Gallery — the hard-coded photograph page (A18). Captions sit under each
 * picture rather than over it, so they stay readable on every image.
 * ---------------------------------------------------------------------- */
.gallery-count { margin: var(--gg-space-5) 0 0; color: var(--gg-ink-muted); font-size: var(--gg-text-sm); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--gg-space-5);
}

.gallery-tile {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow-sm);
}

.gallery-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-tile:hover img { transform: scale(1.04); }

.gallery-tile figcaption {
    padding: var(--gg-space-4) var(--gg-space-5);
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-700);
}

/* -------------------------------------------------------------------------
 * Downloads — one card per document. The format badge tells a visitor what
 * they are about to save before they tap.
 * ---------------------------------------------------------------------- */
.resource-card { display: flex; flex-direction: column; gap: var(--gg-space-3); }
.resource-card h3 { margin: 0; font-size: var(--gg-text-lg); }

.resource-card__media {
    display: block;
    margin: calc(var(--gg-space-6) * -1) calc(var(--gg-space-6) * -1) 0;
    overflow: hidden;
}

.resource-card__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.resource-card__meta {
    display: flex;
    align-items: center;
    gap: var(--gg-space-3);
    margin: 0;
    font-size: var(--gg-text-xs);
    color: var(--gg-ink-muted);
}

.resource-card__format {
    padding: 0.15rem 0.5rem;
    border-radius: var(--gg-radius-sm);
    background: var(--gg-ink-50);
    color: var(--gg-ink-700);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.resource-card .btn-row { margin-top: auto; }

/* An arrow pointing down, drawn from the "up" icon. */
.icon--flip { transform: rotate(180deg); }

/* -------------------------------------------------------------------------
 * Partner With Us — the pathway cards and the application form.
 *
 * A pathway card is a LINK: it carries its partner type into the form below
 * (?type=…#apply), so an applicant never has to find their own category in a
 * drop-down. The chosen one stays marked after the jump.
 * ---------------------------------------------------------------------- */
.pathway-card {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-3);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pathway-card h3 { margin: 0; font-size: var(--gg-text-lg); }
.pathway-card p { margin: 0; }
.pathway-card .card__link { margin-top: auto; padding-top: var(--gg-space-3); }

.pathway-card:hover,
.pathway-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--gg-primary);
    box-shadow: var(--gg-shadow);
}

/* Where the applicant came from, still visible once the page has jumped. */
.pathway-card.is-chosen {
    border-color: var(--gg-primary);
    box-shadow: inset 0 0 0 1px var(--gg-primary);
}

.partner-apply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--gg-space-7);
    align-items: start;
}

.partner-apply__intro h2 { margin-top: 0; }
.partner-apply__intro .check-list { margin-block: var(--gg-space-5); }

.partner-apply__direct {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-3);
    margin: 0;
    color: var(--gg-ink-muted);
}

.partner-apply__direct a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--gg-primary);
}

.partner-apply .contact-form-card h3 { margin-top: 0; }

@media (max-width: 62rem) {
    .partner-apply { grid-template-columns: 1fr; gap: var(--gg-space-6); }
}

/* -------------------------------------------------------------------------
 * Partner With Us — the application panel.
 *
 * The form used to be ten identical inputs in one stack. It is now three
 * numbered parts, and the numbering carries real information: an application
 * goes "who you are -> who we talk to -> what you want". The left column
 * numbers what happens AFTER you send it, so the two halves rhyme.
 * ---------------------------------------------------------------------- */

/* The steps a visitor goes through once they press send. */
.apply-steps {
    display: grid;
    gap: var(--gg-space-5);
    margin: var(--gg-space-6) 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.apply-steps li { display: flex; gap: var(--gg-space-4); align-items: flex-start; }

.apply-steps__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--gg-primary);
    color: #fff;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
}

.apply-steps__body { display: grid; gap: 0.15rem; }
.apply-steps__body strong { color: var(--gg-ink-700); }
.apply-steps__body span { font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

/* The panel itself: a dark head so the page's one conversion point reads as an
   object rather than white on white. */
.apply-card {
    overflow: hidden;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow-lg);
}

.apply-card__head {
    padding: var(--gg-space-5) var(--gg-space-6);
    background: var(--gg-green-950);
    color: #fff;
}

.apply-card__head h3 { margin: 0; color: #fff; }
.apply-card__head p { margin: 0.25rem 0 0; font-size: var(--gg-text-sm); color: var(--gg-ink-100); opacity: 0.85; }

.apply-card__body { padding: var(--gg-space-6); }

/* A fieldset carries the grouping for a screen reader as well as the eye. */
.apply-group {
    margin: 0 0 var(--gg-space-6);
    padding: 0;
    border: 0;
}

.apply-group:last-of-type { margin-bottom: var(--gg-space-5); }

.apply-group > legend {
    display: flex;
    align-items: center;
    gap: var(--gg-space-3);
    width: 100%;
    margin-bottom: var(--gg-space-4);
    padding-bottom: var(--gg-space-3);
    border-bottom: 1px solid var(--gg-border);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gg-ink-700);
}

.apply-group__num {
    font-size: var(--gg-text-xs);
    font-weight: 800;
    color: var(--gg-accent-strong);
}

.apply-card__foot { display: grid; gap: var(--gg-space-3); }

.apply-card__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    font-size: var(--gg-text-xs);
    color: var(--gg-ink-muted);
}

.button--block { width: 100%; justify-content: center; }

/* -------------------------------------------------------------------------
 * A partner card: the mark, then the words. A partner with no logo uploaded
 * yet gets a monogram, so the card is never a bare name over white.
 * ---------------------------------------------------------------------- */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--gg-space-5);
}

.partner-card {
    display: flex;
    gap: var(--gg-space-4);
    align-items: flex-start;
    padding: var(--gg-space-5);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow-sm);
}

.partner-card__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: var(--gg-radius);
    background: var(--gg-ink-50);
}

.partner-card__mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.partner-card__monogram {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--gg-primary);
}

.partner-card__body { display: grid; gap: var(--gg-space-3); }
.partner-card__body h4 { margin: 0; font-size: var(--gg-text-lg); }
.partner-card__body p { margin: 0; font-size: var(--gg-text-sm); }

@media (max-width: 40rem) {
    .apply-card__body { padding: var(--gg-space-5); }
    .apply-card__head { padding: var(--gg-space-5); }
}

/* -------------------------------------------------------------------------
 * Carousels.
 *
 * The track is a real scroll container with snap points, so it swipes on a
 * phone and shift-scrolls on a desktop with JavaScript blocked. js/carousel.js
 * only adds the arrows, the dots and the optional autoplay.
 *
 * Cards per view come from --per-view, so one component serves a row of three
 * pathway cards and a row of one wide quote.
 * ---------------------------------------------------------------------- */
.carousel { position: relative; }

.carousel__track {
    --per-view: 1;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gg-space-5)) / var(--per-view));
    gap: var(--gg-space-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Room for the cards' own shadow and focus ring, which a clipping
       scroll container would otherwise cut off. */
    padding: 0.35rem 0.35rem var(--gg-space-4);
    margin: -0.35rem -0.35rem 0;
    scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: var(--gg-focus); outline-offset: 4px; border-radius: var(--gg-radius); }

.carousel__slide { scroll-snap-align: start; display: flex; }
.carousel__slide > * { width: 100%; }

@media (min-width: 40rem) { .carousel__track { --per-view: 2; } }
@media (min-width: 64rem) { .carousel__track { --per-view: 3; } }

/* One wide item at a time, whatever the width — for quotes. */
.carousel--single .carousel__track { --per-view: 1; }
@media (min-width: 64rem) { .carousel--single .carousel__track { --per-view: 2; } }

/* Four across on a wide screen — for photographs. */
@media (min-width: 80rem) { .carousel--dense .carousel__track { --per-view: 4; } }

/* Mirrors .grid--4 (4 / 2 / 1 at the same 60rem and 42rem breakpoints), so a
   grid can become a slider without the desktop row changing at all.
   It also skips the 3-per-view step on purpose: with a multiple-of-four card
   count, 3 leaves a fractional page, and pageCount() rounds that away — the
   controls would vanish while a card stayed clipped off the edge. */
@media (min-width: 40rem) { .carousel--quad .carousel__track { --per-view: 2; } }
@media (min-width: 60rem) { .carousel--quad .carousel__track { --per-view: 4; } }

/* The furniture only exists once the script has built it. */
.carousel__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--gg-space-4);
    margin-top: var(--gg-space-5);
}

.carousel.is-ready.has-pages .carousel__nav { display: flex; }

.carousel__arrow {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--gg-border);
    border-radius: 50%;
    background: var(--gg-surface);
    color: var(--gg-ink-700);
    cursor: pointer;
    transition: background-color var(--gg-speed) var(--gg-ease),
                border-color var(--gg-speed) var(--gg-ease),
                color var(--gg-speed) var(--gg-ease);
}

.carousel__arrow:hover:not(:disabled) {
    background: var(--gg-primary);
    border-color: var(--gg-primary);
    color: #fff;
}

.carousel__arrow:disabled { opacity: 0.35; cursor: default; }

.carousel__dots { display: flex; align-items: center; gap: 0.45rem; }

.carousel__dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gg-border);
    cursor: pointer;
    transition: width var(--gg-speed) var(--gg-ease), background-color var(--gg-speed) var(--gg-ease);
}

.carousel__dot.is-active { width: 1.6rem; border-radius: var(--gg-radius-full); background: var(--gg-primary); }

/* On a dark band the furniture inverts. */
.section--dark .carousel__arrow {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.section--dark .carousel__dot { background: rgba(255, 255, 255, 0.3); }
.section--dark .carousel__dot.is-active { background: var(--gg-accent); }

@media (prefers-reduced-motion: reduce) {
    .carousel__track { scroll-behavior: auto; }
    .carousel__arrow, .carousel__dot { transition: none; }
}

/* -------------------------------------------------------------------------
 * Marquee — the partner ribbon.
 *
 * Two identical runs of the list slide left; when the first has gone by
 * exactly its own width the animation restarts, so the seam never shows. The
 * copy is aria-hidden, so a screen reader hears the partners once.
 * ---------------------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent); }

.marquee__runs { display: flex; width: max-content; }

.marquee__run {
    display: flex;
    align-items: center;
    gap: var(--gg-space-6);
    padding-right: var(--gg-space-6);
    animation: gg-marquee var(--marquee-speed, 38s) linear infinite;
}

.marquee:hover .marquee__run,
.marquee:focus-within .marquee__run { animation-play-state: paused; }

@keyframes gg-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Without motion the ribbon becomes an ordinary scrollable row. */
@media (prefers-reduced-motion: reduce) {
    .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .marquee__run { animation: none; }
    .marquee__runs > .marquee__run + .marquee__run { display: none; }
}

/* The ribbon inside the partner strip: it takes the remaining width beside the
   label, and its list items are the marquee's content. */
.partner-strip__marquee { flex: 1 1 22rem; min-width: 0; }
.partner-strip__marquee .marquee__run { margin: 0; padding-right: var(--gg-space-6); list-style: none; }
.partner-strip__marquee .marquee__run li { display: inline-flex; align-items: center; gap: var(--gg-space-3); white-space: nowrap; }
.partner-strip__marquee .marquee__run li::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--gg-gold-400); }

/* A slide is always a plain wrapper — never the card itself, or the
   "> * { width: 100% }" rule above would stretch the card’s own internals. */
.carousel__slide > .gallery-tile { height: 100%; }

/* -------------------------------------------------------------------------
 * Scroll motion.
 *
 * One vocabulary, tied to what the company does: things ARRIVE. Copy rises,
 * split sections come in from the side they sit on, and photographs are wiped
 * open like a blind letting light in — rather than everything doing the same
 * generic fade.
 *
 * [data-reveal]        rise (the default, set in base.css)
 * [data-reveal="left"] / "right"  slide in from that side
 * [data-reveal="zoom"] settle in from slightly small
 * [data-reveal="wipe"] uncover left to right — for pictures
 *
 * Every variant is a start state that js/ui.js clears by adding .is-revealed,
 * so with the script blocked nothing is ever hidden. base.css already turns
 * the whole system off under prefers-reduced-motion.
 * ---------------------------------------------------------------------- */
[data-reveal] {
    transition: opacity 700ms var(--gg-ease),
                transform 700ms var(--gg-ease),
                clip-path 900ms var(--gg-ease);
}

.reveal-on [data-reveal="left"]:not(.is-revealed)  { opacity: 0; transform: translate3d(-2rem, 0, 0); }
.reveal-on [data-reveal="right"]:not(.is-revealed) { opacity: 0; transform: translate3d(2rem, 0, 0); }
.reveal-on [data-reveal="zoom"]:not(.is-revealed)  { opacity: 0; transform: scale(0.94); }

.reveal-on [data-reveal="wipe"]:not(.is-revealed) {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
}

.reveal-on [data-reveal="wipe"].is-revealed { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
    .reveal-on [data-reveal]:not(.is-revealed) { clip-path: none; }
}

/* -------------------------------------------------------------------------
 * Scroll-linked effects.
 *
 * These use the browser's own scroll timelines, so they are driven by the
 * scroll position itself rather than by a script listening to it — no
 * scroll handler, nothing to jank. Everything is inside @supports, so a
 * browser without scroll timelines simply shows the page unanimated.
 * ---------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        /* How far down the page you are, drawn across the very top. */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 60;
            width: 100%;
            height: 3px;
            transform-origin: 0 50%;
            background: linear-gradient(90deg, var(--gg-primary), var(--gg-accent));
            animation: gg-progress linear both;
            animation-timeline: scroll(root block);
        }

        /* The hero photograph drifts more slowly than the page, so the
           headline lifts away from it as you start reading. */
        .page-hero {
            animation: gg-hero-drift linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 90vh;
        }
    }
}

@keyframes gg-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes gg-hero-drift {
    from { background-position: center 42%; }
    to   { background-position: center 58%; }
}

/* Without scroll timelines the bar would sit at full width across the top,
   which reads as a stray rule, so it is hidden unless it can animate. */
.scroll-progress { display: none; }

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .scroll-progress { display: block; }
    }
}

/* A reversed split puts the media on the left and the copy on the right, so
   the two columns come in from the side they actually sit on. */
.reveal-on .feature--reverse [data-reveal="left"]:not(.is-revealed)  { transform: translate3d(2rem, 0, 0); }
.reveal-on .feature--reverse [data-reveal="right"]:not(.is-revealed) { transform: translate3d(-2rem, 0, 0); }

/* Sideways reveals go UP on a phone.
 *
 * A side reveal holds the element 2rem off its final position until it
 * animates in. On desktop that is harmless — the element is half a column
 * wide, so the offset stays inside the grid. On a phone every one of these is
 * full-width, so the offset hangs 32px past the screen edge and the whole
 * document gains a horizontal scrollbar until the element happens to reveal.
 * Measured: /about was 391px wide inside a 375px viewport, from exactly this.
 *
 * Same motion, same timing, no axis that can overflow. */
@media (max-width: 42rem) {
    .reveal-on [data-reveal="left"]:not(.is-revealed),
    .reveal-on [data-reveal="right"]:not(.is-revealed),
    .reveal-on .feature--reverse [data-reveal="left"]:not(.is-revealed),
    .reveal-on .feature--reverse [data-reveal="right"]:not(.is-revealed) {
        transform: translate3d(0, 18px, 0);
    }
}

/* Country, county and town side by side where there is room. */
.location-fields { display: grid; gap: 0 var(--gg-space-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.location-fields [hidden] { display: none; }

/* The open intakes under a course fee: date, how it is taught, what it costs. */
.intake-list { display: grid; gap: var(--gg-space-3); margin: var(--gg-space-4) 0 0; padding: 0; list-style: none; }

.intake-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-3);
    padding: var(--gg-space-3) var(--gg-space-4);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius);
    background: var(--gg-surface-alt);
    font-size: var(--gg-text-sm);
}

.intake-list__date { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--gg-ink-700); }
.intake-list__mode { color: var(--gg-ink-muted); }
.intake-list__fee { margin-left: auto; font-weight: 700; color: var(--gg-primary); }

/* --------------------------------------------------------------- consent --
 * Cookie banner. Sits above the floating buttons (z-index 60) but below the
 * nav drawer (100), so it can never trap someone inside an open menu.
 *
 * It ships with the `hidden` attribute and consent.js removes it only when no
 * choice is stored, so a returning visitor gets no flash of a banner they
 * already answered. Without JavaScript it simply stays hidden.
 */
.consent {
    position: fixed;
    left: var(--gg-space-4);
    right: var(--gg-space-4);
    bottom: var(--gg-space-4);
    z-index: 70;
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    box-shadow: var(--gg-shadow-lg);
    padding: var(--gg-space-4) var(--gg-space-5);
}

.consent[hidden] { display: none; }

.consent__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-4);
    max-width: var(--gg-container);
    margin-inline: auto;
}

.consent__copy { flex: 1 1 18rem; min-width: 0; }

.consent__title {
    font-weight: 700;
    color: var(--gg-ink);
    margin-bottom: 0.2rem;
}

.consent__text {
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-muted);
}

.consent__text a { color: var(--gg-primary); text-decoration: underline; }

.consent__actions {
    display: flex;
    gap: var(--gg-space-3);
    flex: none;
}

/* On a phone the buttons get the full width rather than squeezing to nothing. */
@media (max-width: 30rem) {
    .consent { left: 0; right: 0; bottom: 0; border-radius: var(--gg-radius-lg) var(--gg-radius-lg) 0 0; }
    .consent__actions { flex: 1 1 100%; }
    .consent__actions .button { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------------------ team --
 * The people behind the work, on /about. Rows from team_members (A24).
 *
 * Design language borrowed from the reference site the client picked: a
 * generous 20px radius, a soft wide shadow rather than a hard border, and a
 * hover that lifts the card — transform + shadow over 300–400ms, which the
 * compositor can do without re-laying-out the page.
 */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--gg-space-5);
}

.team-card {
    background: var(--gg-surface);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(13, 23, 18, 0.10);
    transition: transform 0.4s var(--gg-ease), box-shadow 0.3s var(--gg-ease);
}

@media (hover: hover) {
    .team-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px -12px rgba(13, 23, 18, 0.28);
    }
}

/* Square portrait: consistent shape whatever the photo's aspect ratio, and a
   reserved box so nothing shifts while the image loads. */
.team-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(140deg, var(--gg-green-700), var(--gg-green-900));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.team-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The image itself creeps in on hover — the card lifts, the photo breathes. */
    transition: transform 0.6s var(--gg-ease);
}

@media (hover: hover) {
    .team-card:hover .team-card__media img { transform: scale(1.05); }
}

/* No photo is a normal state. Initials in the brand green beat a grey box,
   and beat a stock portrait of someone who does not work here. */
.team-card__initials {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-4xl);
    font-weight: 700;
    color: var(--gg-gold-300);
    letter-spacing: 0.06em;
}

.team-card__body { padding: var(--gg-space-4) var(--gg-space-4) var(--gg-space-5); }

.team-card__name {
    font-size: var(--gg-text-lg);
    font-weight: 700;
    color: var(--gg-ink);
    margin-bottom: 0.15rem;
}

.team-card__role {
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-primary);
    margin-bottom: var(--gg-space-3);
}

.team-card__bio {
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-muted);
    line-height: 1.55;
}

.team-card__links {
    display: flex;
    gap: var(--gg-space-3);
    margin-top: var(--gg-space-3);
}

.team-card__links a {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--gg-radius-full);
    background: var(--gg-ink-50);
    color: var(--gg-ink-500);
    transition: background 0.3s var(--gg-ease), color 0.3s var(--gg-ease);
}

.team-card__links a:hover,
.team-card__links a:focus-visible {
    background: var(--gg-primary);
    color: #fff;
}

/* A small square thumbnail in the admin team table. */
.admin-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------------- vision & mission cards --
 * The treatment the reference About page uses: one statement per filled card,
 * with a photograph bleeding in at the bottom. Green for the vision, gold for
 * the mission — the brand owns both colours already.
 */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--gg-space-5);
}

.vm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 22rem;
    border-radius: var(--gg-radius-lg);
    overflow: hidden;
    padding: var(--gg-space-6) var(--gg-space-5) 0;
    transition: transform 0.4s var(--gg-ease), box-shadow 0.3s var(--gg-ease);
}

@media (hover: hover) {
    .vm-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 44px -16px rgba(13, 23, 18, 0.34);
    }
}

.vm-card--vision {
    background: linear-gradient(150deg, var(--gg-green-700), var(--gg-green-900));
    color: #fff;
}

.vm-card--mission {
    background: linear-gradient(150deg, var(--gg-gold-400), var(--gg-gold-600));
    color: #33240a;
}

.vm-card__title {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-3xl);
    font-weight: 700;
    margin-bottom: var(--gg-space-3);
}

.vm-card--vision .vm-card__title { color: var(--gg-gold-300); }
.vm-card--mission .vm-card__title { color: var(--gg-green-900); }

.vm-card__text {
    font-size: var(--gg-text-lg);
    font-weight: 500;
    line-height: 1.5;
    max-width: 34ch;
}

/* The photograph sits in the bottom corner and bleeds off the card, which is
   what stops these reading as two flat blocks of colour. */
.vm-card__photo {
    align-self: flex-end;
    width: 11rem;
    max-width: 48%;
    margin-top: var(--gg-space-5);
    margin-right: calc(var(--gg-space-5) * -1);
    border-radius: var(--gg-radius-lg) 0 0 0;
    overflow: hidden;
    line-height: 0;
}

.vm-card__photo img {
    width: 100%;
    height: 9rem;
    object-fit: cover;
    object-position: 50% 25%;
}

.vm-line {
    margin-top: var(--gg-space-5);
    text-align: center;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xl);
    font-weight: 700;
    color: var(--gg-primary);
}

@media (max-width: 30rem) {
    .vm-card { min-height: 0; padding-inline: var(--gg-space-4); }
    .vm-card__photo { width: 8.5rem; margin-right: calc(var(--gg-space-4) * -1); }
}

/* --------------------------------------------------------- gentle float --
 * The one thing the reference site does that this one did not: a slow,
 * continuous bob on a cut-out image, so a still photograph on a flat panel
 * does not sit completely dead.
 *
 * Deliberately tiny (6px) and slow (6s). Anything more on a loop stops being
 * texture and starts being a distraction you cannot dismiss. transform only,
 * so it runs on the compositor, and it is off entirely for anyone who asked
 * for less motion.
 */
@media (prefers-reduced-motion: no-preference) {
    @keyframes gg-float-soft {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
    }

    .float-soft { animation: gg-float-soft 6s ease-in-out infinite; }

    /* Offset the second one so the pair never bobs in lockstep. */
    .float-soft--late { animation-delay: -3s; }
}

/* ---------------------------------------------------- blog card (A25) -----
 * The Knowledge Hub cards take the reference blog's shape: the publish date
 * in a pill on the corner of the cover, and a pill "Read more" with an arrow
 * instead of a bare text link.
 */
.post-card__head { position: relative; }

.post-card__date {
    position: absolute;
    right: var(--gg-space-3);
    bottom: calc(var(--gg-space-3) * -1);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--gg-radius-full);
    background: var(--gg-primary);
    color: #fff;
    font-size: var(--gg-text-xs);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 14px -4px rgba(13, 23, 18, 0.35);
}

.post-card__date .icon { width: 0.85rem; height: 0.85rem; }

/* .post-card__body already carries var(--gg-space-5) padding on all sides,
   which is enough to clear the pill where it hangs below the cover. */

.post-card__more {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-full);
    font-weight: 700;
    font-size: var(--gg-text-sm);
    color: var(--gg-primary);
    text-decoration: none;
    transition: background 0.3s var(--gg-ease), color 0.3s var(--gg-ease), border-color 0.3s var(--gg-ease);
}

.post-card__more .icon { transition: transform 0.3s var(--gg-ease); }

.post-card__more:hover,
.post-card__more:focus-visible {
    background: var(--gg-primary);
    border-color: var(--gg-primary);
    color: #fff;
}

.post-card__more:hover .icon { transform: translateX(3px); }

/* ------------------------------------------------- click-to-play video ----
 * Poster + play button until someone presses it; video.js then builds the
 * iframe in place. Nothing reaches YouTube before that.
 */
.video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--gg-radius-lg);
    background: var(--gg-green-950);
    box-shadow: 0 18px 40px -16px rgba(13, 23, 18, 0.4);
}

.video__poster,
.video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video__poster {
    object-fit: cover;
    transition: transform 0.6s var(--gg-ease), filter 0.3s var(--gg-ease);
}

/* Once the frame is in, the poster and button are gone. */
.video.is-playing .video__poster,
.video.is-playing .video__play { display: none; }

.video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    background: linear-gradient(180deg, rgba(5, 41, 27, 0.15), rgba(5, 41, 27, 0.55));
    border: 0;
    cursor: pointer;
    padding: 0;
}

.video__play-mark {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    padding-left: 4px;             /* optically centres the triangle */
    border-radius: 50%;
    background: var(--gg-accent-strong);
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
    transition: transform 0.3s var(--gg-ease), background 0.3s var(--gg-ease);
}

@media (hover: hover) {
    .video__play:hover .video__play-mark { transform: scale(1.08); background: var(--gg-accent); }
    .video__play:hover ~ .video__poster,
    .video__play:hover + .video__poster { transform: scale(1.03); }
}

.video__play:focus-visible { outline: var(--gg-focus); outline-offset: -4px; }

/* A slow pulse so the control reads as playable, not as a static badge.
   Off for anyone who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes gg-play-pulse {
        0%, 100% { box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(217, 119, 6, 0.45); }
        60%      { box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55), 0 0 0 18px rgba(217, 119, 6, 0); }
    }

    .video__play-mark { animation: gg-play-pulse 3.2s ease-out infinite; }
}