/* =============================================================
   TG Escapes — Homepage
   sd-home.css
   Author: Silo Digital Ltd

   Visual language shared with pricing.css / case-study.css /
   map-page.css: cream alt sections, 16px card radius (12px for
   small cards), pill buttons, editorial hairlines, brand green
   accents, Outfit headings.
   ============================================================= */

/* ─── Scoped design tokens ────────────────────────────────── */
.hp-wrap {
    --cream:         var(--sd-color-cream, #f8f6ee);
    --cream-deep:    #efece0;
    --charcoal:      var(--sd-color-text, #171717);
    --charcoal-muted:#555555;
    --forest:        var(--sd-color-primary, #36452f);
    --forest-light:  var(--sd-color-primary-light, #445636);
    --forest-faint:  rgba(54, 69, 47, 0.06);
    --cta:           var(--sd-color-cta, #5f7d3a);
    --cta-hover:     var(--sd-color-cta-hover, #8db35a);
    --cta-faint:     rgba(95, 125, 58, 0.12);
    --rule:          rgba(23, 23, 23, 0.08);
    --white:         #ffffff;
    --font-label:    var(--sd-font-family-primary, 'Outfit', sans-serif);

    --hp-max:        var(--sd-container-max, 1440px);
    --hp-gutter:     clamp(1.25rem, 5vw, 3.5rem);
    --hp-radius:     8px;  /* cards — site-wide standard */
    --hp-radius-sm:  6px;  /* small cards / badges */
    --hp-pill:       999px; /* buttons / chips */

    /* Dark image-overlay hue — same neutral dark green as case-study */
    --overlay-rgb:   20, 28, 16;

    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* Headings: Outfit, consistent with the rest of the site (typography.css
   defaults headings to Manrope, which the homepage must override). */
.hp-wrap h1,
.hp-wrap h2,
.hp-wrap h3,
.hp-wrap h4 {
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
}

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes hp-kb-1 {
    from { transform: scale(1)    translate(0, 0); }
    to   { transform: scale(1.08) translate(-1.5%, -1%); }
}
@keyframes hp-kb-2 {
    from { transform: scale(1.03) translate(-1%, 0); }
    to   { transform: scale(1.10) translate(0.5%, -1.5%); }
}
@keyframes hp-kb-3 {
    from { transform: scale(1.02) translate(0, -0.5%); }
    to   { transform: scale(1.09) translate(-1%, 0.5%); }
}
@keyframes hp-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hp-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Base ───────────────────────────────────────────────────── */
.hp-wrap {
    color: var(--charcoal);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hp-wrap *,
.hp-wrap *::before,
.hp-wrap *::after {
    box-sizing: border-box;
}

.hp-wrap p {
    margin: 0 0 1em;
    line-height: 1.7;
}

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

/* ─── Containers ─────────────────────────────────────────────── */
.hp-container {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
}

/* ─── Section scaffolding ─────────────────────────────────────── */
.hp-section {
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.hp-section--white  { background: var(--white); }
.hp-section--sand   { background: var(--cream); }
.hp-section--forest { background: var(--forest); color: var(--white); }

/* ─── Overline label ─────────────────────────────────────────── */
.hp-overline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-label);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cta);
    margin-bottom: 1.25rem;
}

.hp-section--forest .hp-overline {
    color: rgba(255, 255, 255, 0.6);
}

/* ─── Section headings ───────────────────────────────────────── */
.hp-h2 {
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    margin: 0 0 1.5rem;
}

.hp-section--forest .hp-h2 {
    color: var(--white);
}

.hp-h2 em {
    font-style: normal;
    color: var(--cta);
}

/* Section description — short SEO copy under headings */
.hp-section__desc {
    font-size: 1rem;
    color: var(--charcoal-muted);
    line-height: 1.65;
    max-width: 540px;
    margin: 0;
}

/* "View all" links beside section headings */
.hp-sectors__all-link,
.hp-projects__all-link,
.hp-blog__all-link {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cta);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    padding-bottom: 4px; /* align with h2 baseline */
}

.hp-sectors__all-link:hover,
.hp-projects__all-link:hover,
.hp-blog__all-link:hover {
    gap: 10px;
    color: var(--forest);
}

/* ─── Buttons ─────────────────────────────────────────────────── */
/* Kept exactly as originally designed — the user signed off the hero
   (buttons included), so these deliberately stay 4px, not pills. */
.hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.25s var(--ease-out);
    cursor: pointer;
    border: none;
    line-height: 1;
}

.hp-btn--primary {
    background: var(--cta);
    color: var(--white);
}

.hp-btn--primary:hover {
    background: var(--sd-color-cta-strong, #4f6b30);
    color: var(--white);
    transform: translateY(-1px);
}

.hp-btn--outline {
    background: transparent;
    color: var(--charcoal);
    border: 1.5px solid rgba(26, 26, 26, 0.25);
}

.hp-btn--outline:hover {
    border-color: var(--charcoal);
    transform: translateY(-1px);
}

.hp-btn--outline-white {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.hp-btn--outline-white:hover {
    border-color: var(--white);
}

/* ─────────────────────────────────────────────────────────────
   1. HERO
───────────────────────────────────────────────────────────── */
.hp-hero {
    position: relative;
    min-height: 85vh;
    min-height: 85svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Slideshow. Forest base so the moment before the first photo arrives reads
   as a deliberate brand colour, not the white page through the gradients. */
.hp-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--forest);
}

.hp-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.hp-hero-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hp-hero-slide--active {
    opacity: 1;
}

/* Set by the hero's inline script only while the first photo is still in
   flight: it then fades in whole instead of painting down the screen. */
.hp-hero-media.is-loading .hp-hero-slide {
    opacity: 0;
}

/* Gradient overlays — original hero values, signed off by the user */
.hp-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10, 20, 14, 0.78) 0%,
        rgba(10, 20, 14, 0.50) 45%,
        rgba(10, 20, 14, 0.15) 100%
    );
    z-index: 1;
}

/* Secondary bottom gradient for text legibility */
.hp-hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 20, 14, 0.55) 0%,
        transparent 40%
    );
    z-index: 1;
}

/* Hero body */
.hp-hero__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    padding-bottom: clamp(6rem, 12vw, 10rem);
}

.hp-hero__inner {
    max-width: 920px;
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    margin-left: 0;
    padding-left: var(--hp-gutter);
}

.hp-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-label);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 1.25rem;
    animation: hp-fadeUp 0.9s var(--ease-out) 0.2s both;
    font-weight: 600;
}

.hp-hero__h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--white);
    margin: 0 0 1.5rem;
    animation: hp-fadeUp 0.9s var(--ease-out) 0.4s both;
}

.hp-hero__h1 em {
    font-style: normal;
    color: var(--cta);
}

.hp-hero__lead {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.65;
    max-width: 540px;
    margin-bottom: 2.5rem;
    animation: hp-fadeUp 0.9s var(--ease-out) 0.6s both;
}

.hp-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    animation: hp-fadeUp 0.9s var(--ease-out) 0.8s both;
}

/* Feefo rating badge */
.hp-hero__feefo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    text-decoration: none;
    animation: hp-fadeUp 0.9s var(--ease-out) 1s both;
    transition: opacity 0.2s ease;
}

.hp-hero__feefo:hover {
    opacity: 0.75;
}

.hp-hero__feefo-stars {
    display: flex;
    gap: 1px;
    color: #f0b429;
}

.hp-hero__feefo-score {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.hp-hero__feefo-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

.hp-hero__feefo-logo {
    height: 18px;
    width: auto;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
    filter: brightness(0) invert(1);
}

/* Slide UI (counter + progress) */
.hp-hero-media__ui {
    position: absolute;
    bottom: clamp(1.5rem, 4vw, 3rem);
    right: var(--hp-gutter);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.hp-hero-media__counter {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-label);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
}

.hp-hero-media__sep {
    opacity: 0.4;
    margin: 0 2px;
}

.hp-hero-media__progress {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.hp-hero-media__bar {
    height: 100%;
    width: 0;
    background: var(--white);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────
   2. STATS BAR — dark floating trust banner overlapping the hero.
   Kept exactly as originally designed (user signed this off).
───────────────────────────────────────────────────────────── */
.hp-stats {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: var(--white);
    max-width: var(--hp-max);
    margin-inline: auto;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transform: translateY(-30%);
    margin-bottom: -1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.hp-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 20% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 80% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
    pointer-events: none;
}

.hp-stats__inner {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
}

.hp-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.hp-stats__item--visible {
    opacity: 1;
    transform: translateY(0);
}

.hp-stats__item:last-child {
    border-right: none;
}

.hp-stats__num {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--white);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: baseline;
}

.hp-stats__value,
.hp-stats__text-value {
    color: var(--white);
}

.hp-stats__suffix {
    color: var(--cta);
    font-weight: 500;
    font-size: 0.6em;
    margin-left: 2px;
}

.hp-stats__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   3. SECTORS — What we build
───────────────────────────────────────────────────────────── */
.hp-sectors {
    background: var(--white);
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.hp-sectors__head {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hp-sectors__head-copy {}

.hp-sectors__grid {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hp-sector-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--hp-radius);
    text-decoration: none;
    display: block;
    background: var(--forest);
}

.hp-sector-card::before {
    content: '';
    display: block;
    padding-top: 118%;
}

.hp-sector-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--sector-img);
    transition: transform 0.7s var(--ease-out);
}

.hp-sector-card:hover .hp-sector-card__bg {
    transform: scale(1.04);
}

.hp-sector-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--overlay-rgb), 0.88) 0%,
        rgba(var(--overlay-rgb), 0.25) 55%,
        rgba(var(--overlay-rgb), 0.08) 100%
    );
    transition: opacity 0.4s ease;
}

.hp-sector-card:hover .hp-sector-card__overlay {
    opacity: 0.92;
}

.hp-sector-card__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.hp-sector-card__label {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.5rem;
    display: block;
}

.hp-sector-card__title {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    color: var(--white);
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.hp-sector-card__desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
    margin: 0 0 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--ease-out), opacity 0.4s ease;
}

.hp-sector-card:hover .hp-sector-card__desc {
    max-height: 100px;
    opacity: 1;
}

.hp-sector-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s ease, gap 0.2s ease;
}

.hp-sector-card:hover .hp-sector-card__cta {
    color: var(--white);
    gap: 10px;
}

.hp-sector-card__arrow {
    font-size: 1rem;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   4. FEATURED CASE STUDIES
───────────────────────────────────────────────────────────── */
.hp-projects {
    background: var(--cream);
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.hp-projects__head {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hp-projects__grid {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* First card spans 2 columns */
.hp-projects__grid .hp-project-card:first-child {
    grid-column: span 2;
}

.hp-project-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--hp-radius);
    background: var(--forest);
    text-decoration: none;
    display: block;
}

.hp-project-card::before {
    content: '';
    display: block;
    padding-top: 62%;
}

.hp-project-card:first-child::before {
    padding-top: 56%;
}

.hp-project-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--project-img);
    transition: transform 0.7s var(--ease-out);
}

.hp-project-card:hover .hp-project-card__img {
    transform: scale(1.04);
}

.hp-project-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--overlay-rgb), 0.85) 0%,
        rgba(var(--overlay-rgb), 0.1) 55%,
        transparent 100%
    );
}

.hp-project-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* Category badge — green pill, same as the case-study hero badge */
.hp-project-card__cat {
    display: inline-block;
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--cta);
    border-radius: var(--hp-pill);
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
}

.hp-project-card__title {
    font-size: clamp(1rem, 2vw, 1.375rem);
    color: var(--white);
    line-height: 1.25;
    margin: 0;
    transition: opacity 0.2s ease;
}

.hp-project-card:hover .hp-project-card__title {
    opacity: 0.85;
}

.hp-project-card__location {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────
   5. WHY TG ESCAPES — Split section
───────────────────────────────────────────────────────────── */
.hp-why {
    background: var(--white);
    padding-block: clamp(4.5rem, 9vw, 8rem);
    overflow: hidden;
}

.hp-why__grid {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 7vw, 6rem);
    /* Stretch, not center: the image fills the full copy-column height,
       so the section has no dead white space beside the text. */
    align-items: stretch;
}

.hp-why__image {
    position: relative;
    border-radius: var(--hp-radius);
    overflow: hidden;
    min-height: 480px;
    height: 100%;
}

.hp-why__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-why__image-badge {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    background: rgba(var(--overlay-rgb), 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--white);
    padding: 0.875rem 1.25rem;
    border-radius: var(--hp-radius-sm);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

.hp-why__image-badge strong {
    display: block;
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
    font-size: 1.625rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    text-transform: none;
}

.hp-why__copy {}

.hp-why__lead {
    font-size: 1.0625rem;
    color: var(--charcoal-muted);
    margin-bottom: 2rem;
    line-height: 1.7;
}

/* "Drawing board" treatment (Option 2 from the card-redesign review):
   architect's registration ticks instead of borders, the pictogram breaking
   the card's top edge. Ticks are drawn with corner gradients so no extra
   markup is needed; --tick flips sage -> lime on hover. */
.hp-why__usps {
    list-style: none;
    padding: 0;
    margin: 30px 0 2.5rem; /* top room for the overhanging icons */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1.25rem;
}

.hp-why__usp {
    --tick: var(--sd-color-sage, #a9c187);
    display: block;
    padding: 2.25rem 1.25rem 1.5rem;
    text-align: center;
    background-color: var(--cream);
    background-image:
        linear-gradient(var(--tick), var(--tick)),
        linear-gradient(var(--tick), var(--tick)),
        linear-gradient(var(--tick), var(--tick)),
        linear-gradient(var(--tick), var(--tick)),
        linear-gradient(var(--tick), var(--tick)),
        linear-gradient(var(--tick), var(--tick)),
        linear-gradient(var(--tick), var(--tick)),
        linear-gradient(var(--tick), var(--tick));
    background-repeat: no-repeat;
    background-position:
        top left, top left,
        top right, top right,
        bottom left, bottom left,
        bottom right, bottom right;
    background-size:
        18px 2px, 2px 18px,
        18px 2px, 2px 18px,
        18px 2px, 2px 18px,
        18px 2px, 2px 18px;
    transition: transform 0.25s ease;
}

.hp-why__usp:hover {
    --tick: var(--cta);
    transform: translateY(-4px);
}

.hp-why__usp-icon {
    width: 60px;
    height: 60px;
    margin: -52px auto 0.875rem; /* torso above the card's top edge */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-why__usp-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

.hp-why__usp-body {}

.hp-why__usp-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--charcoal);
    display: block;
    margin-bottom: 0.3rem;
}

.hp-why__usp-text {
    font-size: 0.8125rem;
    color: var(--charcoal-muted);
    line-height: 1.55;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   6. TESTIMONIAL
   Contained split card on cream — green stays inside the card
   (same language as the service-page case-study spotlight).
───────────────────────────────────────────────────────────── */
.hp-testimonial {
    background: var(--cream);
    padding-block: clamp(4.5rem, 8vw, 7rem);
}

.hp-testimonial__inner {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
}

.hp-testimonial__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    background: var(--forest);
    color: var(--white);
    border-radius: var(--hp-radius);
    overflow: hidden;
    box-shadow: 0 32px 64px -36px rgba(42, 54, 36, 0.45);
}

.hp-testimonial__card--no-media {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
    margin-inline: auto;
}

.hp-testimonial__media {
    position: relative;
    min-height: 420px;
}

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

.hp-testimonial__content {
    padding: clamp(2.25rem, 4.5vw, 3.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.hp-testimonial__card--no-media .hp-testimonial__content {
    align-items: center;
    text-align: center;
}

.hp-testimonial__stars {
    display: inline-flex;
    gap: 4px;
    color: #f0b429;
    margin-bottom: 1.75rem;
}

.hp-testimonial__mark {
    display: none; /* replaced by the star rating */
}

.hp-testimonial blockquote {
    margin: 0 0 2rem;
    padding: 0;
    border: none;
}

.hp-testimonial blockquote p {
    font-size: clamp(1.125rem, 1.8vw, 1.4375rem);
    font-weight: 300;
    font-style: normal;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
}

.hp-testimonial__attribution {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    align-self: stretch;
}

.hp-testimonial__card--no-media .hp-testimonial__attribution {
    border-top: none;
    padding-top: 0;
}

.hp-testimonial__card--no-media .hp-testimonial__attribution::before {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    margin: 0 auto 1.25rem;
}

.hp-testimonial__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
}

.hp-testimonial__role {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ─────────────────────────────────────────────────────────────
   7. BLOG
───────────────────────────────────────────────────────────── */
.hp-blog {
    background: var(--white);
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.hp-blog__head {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hp-blog__grid {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hp-blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--cream);
    border-radius: var(--hp-radius);
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

.hp-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(23, 23, 23, 0.1);
}

.hp-blog-card__thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--cream-deep);
}

.hp-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease-out);
}

.hp-blog-card:hover .hp-blog-card__thumb img {
    transform: scale(1.04);
}

.hp-blog-card__body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hp-blog-card__cat {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cta);
    margin-bottom: 0.6rem;
    display: block;
}

.hp-blog-card__title {
    font-size: 1.0625rem;
    color: var(--charcoal);
    line-height: 1.35;
    margin: 0 0 0.75rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.hp-blog-card:hover .hp-blog-card__title {
    color: var(--forest);
}

.hp-blog-card__date {
    font-size: 0.75rem;
    color: var(--charcoal-muted);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   8. CTA
───────────────────────────────────────────────────────────── */
.hp-cta {
    background: var(--cream);
    padding-block: clamp(4.5rem, 8vw, 7rem);
    padding-inline: var(--hp-gutter);
}

/* Contained dark card on cream — green stays inside the card */
.hp-cta__inner {
    max-width: 1080px;
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    text-align: center;
    background: var(--forest);
    color: var(--white);
    border-radius: var(--hp-radius);
    box-shadow: 0 32px 64px -36px rgba(42, 54, 36, 0.45);
    position: relative;
    overflow: hidden;
}

.hp-cta__inner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(95, 125, 58, 0.16) 0%, transparent 65%);
    pointer-events: none;
}

.hp-cta__inner > * {
    position: relative;
    z-index: 1;
}

.hp-cta .hp-overline {
    color: rgba(255, 255, 255, 0.5);
    justify-content: center;
}

.hp-cta__h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--white);
    margin: 0 0 1.25rem;
}

.hp-cta__sub {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.65;
    margin: 0 auto 2.5rem;
    max-width: 620px;
}

.hp-cta__phone {
    display: block;
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--white);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.2s ease;
    font-variant-numeric: tabular-nums;
}

.hp-cta__phone:hover {
    color: var(--cta-hover);
}

.hp-cta__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hp-cta__email {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

/* !important needed: typography.css sets `p a { color: #0000EE !important }`
   globally, which would otherwise paint this link default-blue. */
.hp-cta__email a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.hp-cta__email a:hover {
    color: var(--white) !important;
    text-decoration-color: var(--cta);
}

/* ─────────────────────────────────────────────────────────────
   10. TRUST BAR — accreditation & framework logos
   Uniform charcoal marks via brightness(0): the source PNGs are
   white/coloured variants designed for the dark footer.
───────────────────────────────────────────────────────────── */
.hp-trust {
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    padding-block: 1.5rem 3.25rem;
}

.hp-trust__inner {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    text-align: center;
}

.hp-trust__overline {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--charcoal-muted);
    margin: 0 0 2rem;
}

.hp-trust__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
    row-gap: 1.75rem;
}

.hp-trust__logo {
    display: flex;
    align-items: center;
}

.hp-trust__logo img {
    display: block;
    max-height: 52px;
    max-width: 124px;
    width: auto;
    height: auto;
    /* Both overridable per logo from Footer Options -> Logo Treatment, which
       sets these custom properties inline on the <img>. */
    filter: var(--logo-filter, brightness(0));
    opacity: var(--logo-opacity, 0.45);
    transition: opacity 0.2s ease;
}

.hp-trust__logo:hover img {
    opacity: 0.75;
}

/* Solid-plate logos keep their internal contrast (greyscale, not flattened)
   and sit smaller so the filled square doesn't dominate the line-art marks. */
.hp-trust__logo--plate img {
    filter: var(--logo-filter, grayscale(1) contrast(1.05));
    opacity: var(--logo-opacity, 0.5);
    max-height: 40px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────
   11. BUILD METHOD — factory and site, working in parallel
───────────────────────────────────────────────────────────── */
.hp-method__inner {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
}

.hp-method__head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hp-method__head .hp-overline {
    justify-content: center;
}

.hp-method__lead {
    max-width: 640px;
    margin-inline: auto;
}

.hp-method__lanes {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    max-width: 1080px;
    margin-inline: auto;
}

.hp-method__spine {
    background: var(--rule);
}

.hp-method__lane-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 1rem;
}

.hp-method__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hp-method__step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--rule);
}

.hp-method__step-num {
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cta);
    letter-spacing: 0.05em;
    line-height: 1.7;
    font-variant-numeric: tabular-nums;
}

.hp-method__step-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.25rem;
}

.hp-method__step-text {
    font-size: 0.875rem;
    color: var(--charcoal-muted);
    line-height: 1.6;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   12. PROCESS STRIP — what happens next
───────────────────────────────────────────────────────────── */
.hp-process__inner {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
}

.hp-process__head {
    max-width: 720px;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hp-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hp-process__step {
    border-top: 1px solid rgba(23, 23, 23, 0.18);
    padding-top: 1.5rem;
}

.hp-process__num {
    display: block;
    font-family: var(--font-label);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cta);
    letter-spacing: 0.05em;
    margin-bottom: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.hp-process__title {
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--charcoal);
    margin: 0 0 0.5rem;
}

.hp-process__text {
    font-size: 0.875rem;
    color: var(--charcoal-muted);
    line-height: 1.6;
    margin: 0;
}

/* Testimonial case-study link */
.hp-testimonial__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    transition: color 0.2s ease, gap 0.2s ease;
}

.hp-testimonial__link:hover {
    color: var(--white);
    gap: 10px;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
    /* The banner stacks 2x2 here and grows ~300px tall, so the desktop
       -30% pull would swallow the hero's bottom content (Feefo badge).
       Keep a slight overlap cue only. */
    .hp-stats {
        transform: translateY(-1.5rem);
        margin-bottom: 0;
        margin-inline: var(--hp-gutter);
    }

    .hp-sectors__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* Projects + blog become swipe carousels below desktop: every card
       stays in the DOM and reachable (no display:none content hiding). */
    .hp-projects__grid,
    .hp-blog__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--hp-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 14px;
        padding-bottom: 0.5rem;
    }

    .hp-projects__grid::-webkit-scrollbar,
    .hp-blog__grid::-webkit-scrollbar {
        display: none;
    }

    .hp-project-card,
    .hp-blog-card {
        flex: 0 0 46%;
        scroll-snap-align: start;
    }

    /* Uniform card height in the carousel (no 2-col hero card) */
    .hp-project-card:first-child::before {
        padding-top: 62%;
    }

    .hp-why__grid {
        gap: 3rem;
    }

    .hp-method__lanes {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 640px;
    }

    .hp-method__spine {
        display: none;
    }

    .hp-process__steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2rem;
    }

    .hp-stats__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-stats__item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hp-stats__item:nth-child(2n) {
        border-right: none;
    }

    .hp-stats__item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hp-hero {
        min-height: 80svh;
    }

    /* Hero text sits at the bottom (flex-end); when the stacked mobile content
       (H1 + lead + two full-width CTAs + Feefo) is taller than the hero it
       overflows upward, sliding the heading under the fixed 72px header. Reserve
       header clearance at the top so the heading can never be clipped by the nav. */
    .hp-hero__body {
        padding-top: calc(var(--sd-header-height-mobile, 72px) + 1rem);
    }

    /* Sized so "Modular eco-buildings" holds one line at 390px — the
       explicit hyphen otherwise becomes an ugly break point. */
    .hp-hero__h1 {
        font-size: clamp(1.75rem, 8.4vw, 3rem);
    }

    .hp-hero__lead {
        font-size: 0.9375rem;
    }

    .hp-hero__ctas {
        flex-direction: column;
        gap: 10px;
    }

    .hp-hero__ctas .hp-btn {
        width: 100%;
        justify-content: center;
        max-width: 280px;
    }

    .hp-sectors__head,
    .hp-projects__head,
    .hp-blog__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .hp-sectors__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hp-sector-card::before {
        padding-top: 72%;
    }

    .hp-sector-card__desc {
        max-height: 100px;
        opacity: 1;
    }

    /* Carousel cards show ~1.2 at a time on phones */
    .hp-project-card,
    .hp-blog-card {
        flex-basis: 80%;
    }

    .hp-why__grid {
        grid-template-columns: 1fr;
    }

    .hp-why__image {
        aspect-ratio: 16/9;
        height: auto;
        min-height: 0;
    }

    .hp-stats__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .hp-stats__item {
        padding: 1.5rem 0.75rem;
    }

    .hp-testimonial blockquote p {
        font-size: 1.1875rem;
    }

    .hp-testimonial__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-testimonial__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .hp-testimonial__media img {
        position: static;
        inset: auto;
    }

    .hp-trust__logo img {
        max-height: 40px;
        max-width: 104px;
    }

    .hp-process__steps {
        grid-template-columns: 1fr;
        row-gap: 1.75rem;
    }

    .hp-hero-media__ui {
        display: none;
    }

    .hp-why__usps {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}

@media (max-width: 480px) {
    .hp-stats__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-stats__item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hp-stats__item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hp-stats__item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   9. UK MAP
───────────────────────────────────────────────────────────── */

/* ── Scoped tokens ─────────────────────────────────────────── */
.hp-map {
    --map-stroke:     var(--forest, #36452f);
    --map-fill:       rgba(54, 69, 47, 0.06);
    --dot-color:      var(--cta);
    --dot-glow:       rgba(95, 125, 58, 0.4);
    overflow: hidden;
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes hp-map-ping {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

@keyframes hp-map-statIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Layout ────────────────────────────────────────────────── */
.hp-map__grid {
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

/* ── Copy column ───────────────────────────────────────────── */
.hp-map__copy {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.hp-map--visible .hp-map__copy {
    opacity: 1;
    transform: translateY(0);
}

.hp-map__body {
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    color: var(--charcoal-muted);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ── Stats ─────────────────────────────────────────────────── */
.hp-map__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.hp-map__stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: clamp(1rem, 2vw, 1.5rem) 0;
    opacity: 0;
    transform: translateY(16px);
}

.hp-map__stat--visible {
    animation: hp-map-statIn 0.6s var(--ease-out) forwards;
}

.hp-map__stat:not(:last-child) {
    border-right: 1px solid var(--rule);
    padding-right: clamp(0.75rem, 1.5vw, 1.25rem);
    margin-right: clamp(0.75rem, 1.5vw, 1.25rem);
}

.hp-map__stat-num {
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1;
    color: var(--charcoal);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.hp-map__stat-suffix {
    color: var(--cta);
    font-weight: 400;
}

.hp-map__stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charcoal-muted);
    font-weight: 500;
}

/* ── Map visual column ─────────────────────────────────────── */
.hp-map__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s var(--ease-out) 0.2s, transform 0.8s var(--ease-out) 0.2s;
}

.hp-map--visible .hp-map__visual {
    opacity: 1;
    transform: translateY(0);
}

/* ── Map wrapper (positions dots over SVG) ─────────────────── */
.hp-map__map-wrap {
    position: relative;
    width: 100%;
    /* Crop empty space around UK in the 1000×1000 SVG */
    margin: -6% -14% -4% -38%;
}

.hp-map__map-wrap svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--map-stroke);
    fill: var(--map-fill);
    stroke: currentColor;
}

/* ── Dots (CSS-positioned over map) ────────────────────────── */
.hp-map__dot {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: auto;
    z-index: 2;
}

.hp-map__dot-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-color);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.2s ease;
    transition-delay: calc(0.3s + var(--dot-delay, 0s));
}

.hp-map--visible .hp-map__dot-core {
    opacity: 1;
}

.hp-map__dot-ping {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-glow);
    opacity: 0;
    pointer-events: none;
}

.hp-map--visible .hp-map__dot-ping {
    animation: hp-map-ping 2.8s ease-out infinite;
    animation-delay: calc(1s + var(--dot-delay, 0s));
}

/* Hover on dot */
.hp-map__dot:hover .hp-map__dot-core {
    transform: translate(-50%, -50%) scale(1.5);
}

/* ── Subtle radial glow behind map ─────────────────────────── */
.hp-map__visual::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(
        ellipse at center,
        rgba(95, 125, 58, 0.06) 0%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .hp-map__grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 4vw, 3rem);
    }

    .hp-map__map-wrap {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .hp-map__grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 6vw, 3rem);
    }

    .hp-map__visual {
        order: -1;
        max-height: 55vh;
    }

    .hp-map__map-wrap {
        max-width: none;
        margin-inline: auto;
    }

    .hp-map__stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .hp-map__body {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .hp-map__stat-num {
        font-size: 1.75rem;
    }

    .hp-map__stat-label {
        font-size: 0.6875rem;
    }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hp-map__copy,
    .hp-map__visual,
    .hp-map__stat,
    .hp-stats__item {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .hp-map__stat--visible {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hp-map__dot-core {
        opacity: 1;
        transition: none;
    }

    .hp-map__dot-ping {
        animation: none;
        opacity: 0;
    }
}

/* ─────────────────────────────────────────────────────────────
   MEET THE TEAM (curated leadership strip)
───────────────────────────────────────────────────────────── */
.hp-team__head {
    max-width: 640px;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
    text-align: center;
}

.hp-team__head .hp-overline {
    justify-content: center;
}

.hp-team__head .hp-h2 {
    margin-bottom: 1rem;
}

.hp-team__lead {
    margin-inline: auto;
}

.hp-team__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--hp-team-count, 4), minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.hp-team__card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.hp-team__photo {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    overflow: hidden;
    background: var(--cream);
}

.hp-team__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s var(--ease-out);
}

.hp-team__card:hover .hp-team__img {
    transform: scale(1.04);
}

.hp-team__photo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rule);
}

.hp-team__photo-fallback svg {
    width: 48px;
    height: 48px;
}

.hp-team__body {
    padding-top: 1.1rem;
}

.hp-team__name {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
    color: var(--charcoal);
}

.hp-team__name a {
    color: inherit;
    text-decoration: none;
}

.hp-team__name a:hover {
    color: var(--cta);
}

.hp-team__role {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--charcoal-muted);
}

.hp-team__linkedin {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--forest);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease;
}

.hp-team__card:hover .hp-team__linkedin,
.hp-team__linkedin:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.hp-team__linkedin:hover {
    color: var(--cta);
}

.hp-team__linkedin svg {
    width: 16px;
    height: 16px;
}

.hp-team__cta {
    margin-top: clamp(2.25rem, 4vw, 3rem);
    text-align: center;
}

/* Tablet: two-up regardless of how many are featured. */
@media (max-width: 860px) {
    .hp-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: a single swipeable row keeps faces large rather than cramped. */
@media (max-width: 520px) {
    .hp-team__grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 68%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--hp-gutter) * -1);
        padding-inline: var(--hp-gutter);
        scrollbar-width: none;
    }

    .hp-team__grid::-webkit-scrollbar {
        display: none;
    }

    .hp-team__card {
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-team__img,
    .hp-team__linkedin {
        transition: none;
    }

    .hp-team__card:hover .hp-team__img {
        transform: none;
    }

    .hp-team__linkedin {
        opacity: 1;
        transform: none;
    }
}

/* ─── Statement + awards band (2026-09-27) ───────────────────────
   The old homepage's positioning line and award roundels, redrawn as
   one compact band: statement left, medal rail right, on a near-black
   ink ground so the black-and-gold roundels read as medals (forest
   washed them out). Kept to ~40% of a laptop viewport. */
.hp-statement {
    --ink: #11160f;
    --gold: #c9a55c;
    position: relative;
    background: var(--ink);
    color: var(--white);
    padding-block: clamp(2.25rem, 3.6vw, 3.25rem);
    border-block: 1px solid rgba(201, 165, 92, 0.28);
}

.hp-statement__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
    align-items: center;
}

/* Grid items default to min-width:auto; without this the mobile medal
   rail widens the column and the statement runs off-screen. */
.hp-statement__inner > * {
    min-width: 0;
}

.hp-statement .hp-overline {
    color: var(--cta-hover);
    margin-bottom: 0.875rem;
}

.hp-wrap .hp-statement__text {
    font-family: var(--font-label);
    font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    text-wrap: pretty;
}

.hp-statement__text em {
    font-style: normal;
    color: var(--cta-hover);
}

.hp-statement .hp-statement__awards-title {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold) !important;
    margin: 0 0 1rem;
}

.hp-statement__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column; /* one row, however many awards */
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
}

.hp-award {
    margin: 0;
    text-align: center;
}

.hp-award__img {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 0.875rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(201, 165, 92, 0.35), 0 10px 28px rgba(0, 0, 0, 0.55);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}

.hp-award:hover .hp-award__img {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 0 0 1px rgba(201, 165, 92, 0.7), 0 16px 34px rgba(0, 0, 0, 0.6);
}

/* One quiet line under each medal: awarding body + year. */
.hp-wrap .hp-award__text {
    margin: 0;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--gold);
}



@media (prefers-reduced-motion: reduce) {
    .hp-award__img { transition: none; }
    .hp-award:hover .hp-award__img { transform: none; }
}

@media (max-width: 1100px) {
    .hp-statement__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Mobile: the medals become a swipeable rail so the band stays short. */
@media (max-width: 700px) {
    .hp-statement__list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        margin-inline: calc(-1 * var(--hp-gutter));
        padding-inline: var(--hp-gutter);
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }

    .hp-statement__list::-webkit-scrollbar { display: none; }

    .hp-statement {
        padding-block: 2.25rem;
    }

    .hp-award {
        flex: 0 0 100px;
        scroll-snap-align: start;
    }

    .hp-award__img { max-width: 72px; }
}

/* Stats bar on the same ink as the awards band, so the homepage has one
   dark tone (was a charcoal gradient). Faint gold hairline to match. */
.hp-stats {
    background: #11160f;
    box-shadow: none;
}

/* Featured project name heads the testimonial panel, like the service-page
   spotlight (2026-09-27). */
.hp-wrap .hp-testimonial__overline {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #a9c187;
    margin: 0 0 0.75rem;
}
.hp-wrap .hp-testimonial__title {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.22;
    color: #fff;
    margin: 0 0 1.5rem;
}
.hp-wrap .hp-testimonial__head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }

/* Featured case study quote: body size, regular weight so it holds up on
   the green panel (2026-09-27). */
.hp-wrap .hp-testimonial blockquote p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
}

/* Accreditations: cap the logo row so the 13 marks break 7 / 6 on desktop
   instead of a long row and a few stragglers. */
.hp-wrap .hp-trust__logos {
    max-width: 62.5rem;
    margin-inline: auto;
}