/*
 * CormackCoreWeb 2.0 — Windrush Park
 * Design tokens + global base
 * Author: Charlie - Cormack Advertising
 */

:root {
    /* Brand */
    --wp-green:        #0F4023;
    --wp-green-alt:    #0F4123;
    --wp-mint:         #DCFBE9;
    --wp-mint-alt:     #E3FAEA;
    --wp-cream:        #FFFAF4;
    --wp-leaf:         #A5CC82;
    --wp-leaf-mid:     #73BE86;
    --wp-sage:         #55665B;

    /* Neutrals */
    --wp-white:        #FFFFFF;
    --wp-ink:          #151210;
    --wp-charcoal:     #2A2A2A;
    --wp-grey-100:     #F1F2EC;
    --wp-grey-200:     #E7ECE6;
    --wp-grey-300:     #D6D6D6;
    --wp-grey-500:     #757575;
    --wp-grey-600:     #616161;
    --wp-grey-610:     #616160;
    --wp-grey-nav:     #6B6B6B;

    /* Type */
    --wp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --wp-fs-xs:   12px;
    --wp-fs-sm:   14px;
    --wp-fs-base: 16px;
    --wp-fs-md:   20px;
    --wp-fs-lg:   22px;
    --wp-fs-xl:   36px;
    --wp-fs-2xl:  40px;

    /* Layout — Figma canvas is 1440 with 68px gutters */
    --wp-max:     1304px;
    --wp-gutter:  68px;
    --wp-nav-h:   76px;
    --wp-nav-h-compact: 58px;

    /* Content cap — opt in per section via .wrap.
       Hero and mosaics stay full-bleed and deliberately do NOT use this. */
    --wp-content-max: 1600px;

    /* Hero — full-bleed, padding steps down on smaller screens */
    --wp-hero-pad: 80px;
}

/* Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* The nav is fixed, so anchor targets must clear it when jumped to */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--wp-nav-h);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: var(--wp-font);
    font-optical-sizing: auto;
    font-size: var(--wp-fs-base);
    line-height: 1.6;
    color: var(--wp-charcoal);
    background: var(--wp-cream);
    -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   Scroll reveals
   The hidden state is gated behind .js-reveal, which reveal.js only adds once
   it can actually observe elements — so no-JS and reduced-motion keep
   everything visible.
   ========================================================================== */

.js-reveal [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Default: rise into place */
.js-reveal [data-reveal="up"] {
    transform: translateY(40px);
}

/* Site plans sweep in from off-screen */
.js-reveal [data-reveal="right"] {
    transform: translateX(clamp(60px, 30vw, 420px));
}

.js-reveal [data-reveal="left"] {
    transform: translateX(calc(-1 * clamp(60px, 30vw, 420px)));
}

.js-reveal [data-reveal="zoom"] {
    transform: scale(0.94);
}

.js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Content wrapper — opt in per section.
   Full-bleed sections (hero, mosaics) intentionally skip this. */
.wrap {
    width: 100%;
    max-width: var(--wp-content-max);
    margin-inline: auto;
    padding-inline: var(--wp-gutter);
}

/* Shared button */
.wp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: var(--wp-font);
    font-size: var(--wp-fs-base);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-cream);
    background: var(--wp-sage);
    border: 1px solid var(--wp-cream);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.wp-btn:hover,
.wp-btn:focus-visible {
    background: var(--wp-cream);
    color: var(--wp-sage);
}

/* ==========================================================================
   Site navigation
   ========================================================================== */

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--wp-nav-h);
    background: var(--wp-grey-nav);
    border-bottom: 2px solid var(--wp-white);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compact state — set by nav.js once the page scrolls away from the top */
.site-nav.is-compact {
    height: var(--wp-nav-h-compact);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 100%;
    padding: 0 32px;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav.is-compact .site-nav__inner {
    padding: 0 24px;
}

/* Brand mark (left) */
.site-nav__brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--wp-leaf);
}

.site-nav__brand svg,
.site-nav__brand img {
    width: 64px;
    height: auto;
}

/* Menu (centre) */
.site-nav__menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.site-nav__menu ul {
    display: flex;
    align-items: center;
    gap: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__menu a {
    position: relative;
    font-size: var(--wp-fs-base);
    font-weight: 400;
    color: var(--wp-cream);
    padding: 4px 0;
}

.site-nav__menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.25s ease;
}

.site-nav__menu a:hover::after,
.site-nav__menu a:focus-visible::after,
.site-nav__menu .current-menu-item > a::after {
    width: 100%;
}

/* Agent mark (right) */
.site-nav__agent {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.site-nav__agent img {
    width: 122px;
    height: auto;
}

/* Logos shrink with the bar */
.site-nav__brand svg,
.site-nav__brand img,
.site-nav__agent img {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav.is-compact .site-nav__brand svg,
.site-nav.is-compact .site-nav__brand img {
    width: 48px;
}

.site-nav.is-compact .site-nav__agent img {
    width: 92px;
}

/* Mobile toggle */
.site-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.site-nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: var(--wp-cream);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-nav.is-open .site-nav__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-nav.is-open .site-nav__toggle span:nth-child(2) {
    opacity: 0;
}

.site-nav.is-open .site-nav__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    background: var(--wp-green);
}

.hero__media,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__video {
    object-fit: cover;
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: calc(var(--wp-nav-h) + 150px) var(--wp-hero-pad) var(--wp-hero-pad);
}

.hero__content {
    max-width: 640px;
    color: var(--wp-cream);
}

.hero__eyebrow {
    margin: 0 0 24px;
    font-size: var(--wp-fs-lg);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    text-transform: capitalize;
    color: var(--wp-white);
}

.hero__title {
    margin: 0 0 28px;
    font-size: clamp(30px, 2.8vw, var(--wp-fs-2xl)); /* 40px at design width */
    font-weight: 600;
    line-height: 1.225;  /* 49/40 */
    letter-spacing: -1px;
    color: var(--wp-mint);
}

.hero__lede {
    margin: 0 0 32px;
    max-width: 330px;
    font-size: var(--wp-fs-md);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2px;
    color: var(--wp-cream);
}

/* Wired W mark, bottom right — aligned to the hero padding */
.hero__mark {
    position: absolute;
    right: var(--wp-hero-pad);
    bottom: var(--wp-hero-pad);
    z-index: 2;
    width: clamp(160px, 18vw, 264px);
    pointer-events: none;
}

.hero__mark img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Availability hero — copy left 40%, tile grid right 60%
   ========================================================================== */

.hero-av {
    min-height: 0;
    height: 100vh;
    align-items: stretch;
}

.hero-av__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-av__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 40% 60%;
    width: 100%;
    padding-top: var(--wp-nav-h);
}

.hero-av__copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 150px var(--wp-hero-pad) 0;
    color: var(--wp-cream);
}

.hero-av__copy .hero__title {
    max-width: 460px;
    color: var(--wp-white);
}

.hero-av__copy .wp-btn {
    align-self: flex-start;
}

/* Decorative colour washes over the photograph */
.hero-av__tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.hero-av__tile {
    display: block;
}

.hero-av__tile--r1c3 { grid-area: 1 / 3 / 2 / 4; background: #E7ECE6B2; }
.hero-av__tile--r2c4 { grid-area: 2 / 4 / 3 / 5; background: #E7ECE666; }
.hero-av__tile--r2c5 { grid-area: 2 / 5 / 3 / 6; background: #E7ECE666; }
.hero-av__tile--r3c2 { grid-area: 3 / 2 / 4 / 3; background: #E7ECE6B2; }
.hero-av__tile--r3c3 { grid-area: 3 / 3 / 5 / 6; background: #A5CC82A6; }
.hero-av__tile--r4c1 { grid-area: 4 / 1 / 5 / 3; background: #0F40235C; }

/* ==========================================================================
   Generic page content (page.php / index.php fallback)
   ========================================================================== */

.page-content {
    padding-top: calc(var(--wp-nav-h) + 64px);
    padding-bottom: 96px;
}

.page-content__title {
    margin: 0 0 24px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--wp-green);
}

.page-content__body {
    font-size: var(--wp-fs-base);
    line-height: 1.6;
    color: var(--wp-charcoal);
}

.page-content__body p {
    margin: 0 0 1em;
}

/* ==========================================================================
   Typical specification — icon carousel
   ========================================================================== */

.spec {
    background: #636363;
    padding: 100px 0;
    color: var(--wp-cream);
}

.spec__title {
    margin: 0 0 16px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-cream);
}

.spec__lede {
    margin: 0 0 72px;
    font-size: var(--wp-fs-md);
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: var(--wp-cream);
}

/* The PNGs include their own circular ground, so no background here */
.spec__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
}

.spec__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.spec__label {
    margin: 0;
    font-size: var(--wp-fs-base);
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: var(--wp-cream);
}

/* --------------------------------------------------------------------------
   Carousel — generic, reusable
   -------------------------------------------------------------------------- */

/* Grid keeps the arrows on one row with the track, and gives the dots their
   own full-width row beneath — flex-wrap would let an arrow drop instead. */
.carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 28px;
}

.carousel__dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: rgba(255, 250, 244, 0.45);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.carousel__dot:hover {
    background: rgba(255, 250, 244, 0.75);
}

.carousel__dot.is-active {
    background: var(--wp-white);
    transform: scale(1.15);
}

.carousel__viewport {
    flex: 1 1 auto;
    overflow: hidden;
}

.carousel__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Width is set from data-per-view in JS; this is the no-JS default */
.carousel__item {
    flex: 0 0 25%;
    min-width: 0;
    padding: 0 16px;
}

.carousel__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--wp-cream);
    background: none;
    border: 0;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

.carousel__arrow svg {
    width: 100%;
    height: 100%;
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
    opacity: 0.6;
}

.carousel__arrow[disabled] {
    opacity: 0.25;
    cursor: default;
}

/* ==========================================================================
   Site plans — unit schedule beside the plan drawing
   ========================================================================== */

.siteplan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* Plans slide in from off-screen — don't let that widen the page */
    overflow-x: clip;
}

.siteplan__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px var(--wp-gutter);
}

.siteplan__panel--table {
    background: var(--wp-cream);
}

.siteplan__panel--plan {
    background: var(--wp-green);
}

/* Flipped rows put the plan first without reordering the markup, so the
   table still comes first for screen readers and on mobile. */
.siteplan--flip .siteplan__panel--table {
    order: 2;
}

.siteplan--flip .siteplan__panel--plan {
    order: 1;
}

.siteplan__content {
    width: 100%;
    max-width: 620px;
}

.siteplan__title {
    margin: 0 0 48px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    color: var(--wp-green);
}

.siteplan__panel--plan img {
    width: 100%;
    height: auto;
    max-width: 744px;
}

/* --- Unit schedule --- */

.unit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wp-fs-sm);
    line-height: 1.4;
    color: var(--wp-green);
}

.unit-table th,
.unit-table td {
    padding: 12px 8px;
    text-align: right;
    font-weight: 400;
    border-bottom: 1px solid rgba(15, 64, 35, 0.18);
}

/* Unit name column */
.unit-table th[scope="row"],
.unit-table thead th:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--wp-green);
}

.unit-table thead th {
    font-weight: 400;
    color: var(--wp-green);
}

.unit-table tfoot th,
.unit-table tfoot td {
    border-bottom: 0;
    font-weight: 500;
}

/* ==========================================================================
   Colour bar — divider beneath the hero
   ========================================================================== */

.colour-bar {
    width: 100%;
    height: 33px;
    background: var(--wp-leaf);
}

/* ==========================================================================
   Mosaic — 8 col x 3 row grid over a looping video
   ========================================================================== */

.mosaic-a {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--wp-green);
}

.mosaic-a__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.mosaic-a__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* Row height tracks the column width so cells stay square-ish at any size */
    grid-auto-rows: calc(100vw / 8);
    max-height: none;
}

/* Cells default to empty — the video shows through the gaps */
.mosaic-a__item {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.mosaic-a__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Placement: grid-area is row-start / col-start / row-end / col-end --- */

.mosaic-a__item--1 { grid-area: 1 / 1 / 2 / 3; }  /* F1 car          */
.mosaic-a__item--2 { grid-area: 1 / 6 / 2 / 7; }  /* pale block      */
.mosaic-a__item--3 { grid-area: 1 / 7 / 2 / 9; }  /* warehouse       */
.mosaic-a__item--4 { grid-area: 2 / 1 / 3 / 2; }  /* W mark          */
.mosaic-a__item--5 { grid-area: 2 / 2 / 4 / 4; }  /* cafe            */
.mosaic-a__item--6 { grid-area: 2 / 5 / 3 / 6; }  /* atom icon       */
.mosaic-a__item--7 { grid-area: 2 / 6 / 4 / 9; }  /* drone           */
.mosaic-a__item--8 { grid-area: 3 / 1 / 4 / 2; }  /* dark block      */
.mosaic-a__item--9 { grid-area: 3 / 4 / 4 / 6; }  /* caption         */

/* --- Cell treatments --- */

.mosaic-a__block--pale {
    background: #A5CC82B8;
}

/* Dark green comes from the background video — this cell stays empty */
.mosaic-a__block--dark {
    background: transparent;
}

.mosaic-a__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18%;
    background: var(--wp-grey-200);
    color: var(--wp-leaf);
}

.mosaic-a__logo svg {
    width: 100%;
    height: auto;
}

/* Atom tile — 70% of a full cell, pinned to the bottom-right of its grid area */
.mosaic-a__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    justify-self: end;
    width: 70%;
    aspect-ratio: 1;
    padding: 18%;
    background: #FFFAF4D1;
}

.mosaic-a__icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.mosaic-a__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--wp-green);
}

.mosaic-a__caption p {
    margin: 0;
    font-size: var(--wp-fs-base);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-cream);
}

/* ==========================================================================
   Mosaic B — large amenities mosaic, 5 col x 6 row
   ========================================================================== */

.mosaic-b {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--wp-green);
}

.mosaic-b__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.mosaic-b__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: calc(100vw / 7.35);
}

.mosaic-b__item {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.mosaic-b__item img,
.mosaic-b__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mirrored to match the design's composition */
.mosaic-b__item--bee img,
.mosaic-b__item--sheep img,
.mosaic-b__item--tennis-img img,
.mosaic-b__item--coffee-img img {
    transform: scaleX(-1);
}

/* Crop framing. Note: on mirrored images the horizontal keyword is inverted,
   so these use the vertical axis only. */
.mosaic-b__item--coffee-img img {
    object-position: center 68%;
}

.mosaic-b__item--weights img {
    object-position: center 35%;
}

.mosaic-b__item--seedling img {
    object-position: center 30%;
}

/* --- Placement: row-start / col-start / row-end / col-end --- */

.mosaic-b__item--bee        { grid-area: 1 / 2 / 2 / 4; }
.mosaic-b__item--tennis-img { grid-area: 1 / 5 / 2 / 6; }
.mosaic-b__item--sheep      { grid-area: 2 / 1 / 4 / 3; }
.mosaic-b__item--intro      { grid-area: 2 / 3 / 3 / 5; }
.mosaic-b__item--tennis     { grid-area: 2 / 5 / 3 / 6; }
/* Overlaps the sheep image's bottom-right quarter */
.mosaic-b__item--nursery    { grid-area: 3 / 2 / 4 / 3; z-index: 2; }
.mosaic-b__item--runner     { grid-area: 3 / 4 / 5 / 6; }
.mosaic-b__item--coffee-img { grid-area: 4 / 1 / 5 / 3; }
.mosaic-b__item--white      { grid-area: 4 / 3 / 5 / 4; background: var(--wp-white); }
/* Overlaps the runner video */
.mosaic-b__item--gardens    { grid-area: 4 / 4 / 5 / 5; z-index: 2; }
.mosaic-b__item--coffee     { grid-area: 5 / 2 / 6 / 3; }
.mosaic-b__item--weights    { grid-area: 5 / 3 / 6 / 5; }
.mosaic-b__item--gym        { grid-area: 5 / 5 / 6 / 6; }
.mosaic-b__item--seedling   { grid-area: 6 / 1 / 7 / 3; }
.mosaic-b__item--radio      { grid-area: 6 / 3 / 7 / 4; }
.mosaic-b__item--mixer      { grid-area: 6 / 5 / 7 / 6; }

/* --- Intro copy --- */

.mosaic-b__item--intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
    background: var(--wp-mint);
}

.mosaic-b__title {
    margin: 0 0 16px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--wp-green);
}

.mosaic-b__text {
    margin: 0;
    max-width: 500px;
    font-size: var(--wp-fs-md);
    font-weight: 400;
    line-height: 1.4;
    color: var(--wp-green);
}

/* --- Icon + label tiles --- */

.mosaic-b__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
}

/* Icons vary in intrinsic ratio (84x87, 91x91, 78x97.5, 104x102.8...).
   Cap the height and let width follow the viewBox so none are squashed. */
.mosaic-b__label svg {
    flex: 0 0 auto;
    width: auto;
    height: 126px;
    max-width: 100%;
}

.mosaic-b__label h3 {
    margin: 0;
    font-size: var(--wp-fs-lg);
    font-weight: 600;
    line-height: 1.27;
    color: var(--wp-green);
}

/* Tile grounds — several are translucent so the video reads through */
.mosaic-b__label--pale  { background: rgba(165, 204, 130, 0.72); }
.mosaic-b__label--green  { background: var(--wp-leaf-mid); }
.mosaic-b__label--olive { background: rgba(131, 166, 96, 0.71); }
.mosaic-b__label--leaf  { background: rgba(165, 204, 130, 0.35); }
.mosaic-b__label--ghost { background: rgba(231, 236, 230, 0.7); }
.mosaic-b__label--jade  { background: rgba(115, 190, 134, 0.8); }

/* ==========================================================================
   Features — headline + 3x2 animated icon grid
   ========================================================================== */

.features {
    background: var(--wp-cream);
    padding: 80px 0 96px;
}

.features__title {
    margin: 0 auto 24px;
    max-width: 1116px;
    font-size: var(--wp-fs-2xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -1px;
    text-align: center;
    color: var(--wp-green);
}

.features__lede {
    margin: 0 0 88px;
    font-size: var(--wp-fs-md);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    color: var(--wp-grey-600);
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Lottie mounts inside this circle */
.features__icon {
    width: 104px;
    height: 104px;
    margin-bottom: 20px;
    padding: 18px;
    background: var(--wp-grey-200);
    border-radius: 50%;
    overflow: hidden;
}

.features__icon svg,
.features__icon canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.features__heading {
    margin: 0 0 12px;
    font-size: var(--wp-fs-lg);
    font-weight: 600;
    line-height: 1.27;
    color: var(--wp-green);
}

.features__text {
    margin: 0;
    max-width: 334px;
    font-size: var(--wp-fs-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--wp-grey-600);
}

/* ==========================================================================
   ESG — video bleeds off the left edge, copy respects the content cap
   ========================================================================== */

.esg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    padding: 100px 0;
    background: var(--wp-cream);
}

.esg__media {
    /* Flush to the viewport's left edge */
    margin-left: 0;
    aspect-ratio: 723 / 450;
    overflow: hidden;
}

.esg__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right column: the copy stops at the content cap's right edge, so it stays
   aligned with .wrap sections above and below while the video bleeds left.
   Beyond 1600px the surplus becomes margin rather than stretching the text. */
.esg__body {
    display: flex;
    justify-content: flex-start;
    padding-left: 80px;
    padding-right: max(
        var(--wp-gutter),
        calc((100vw - var(--wp-content-max)) / 2 + var(--wp-gutter))
    );
}

.esg__copy {
    max-width: 620px;
}

.esg__title {
    margin: 0 0 24px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: var(--wp-green);
}

.esg__text {
    margin: 0 0 32px;
    font-size: var(--wp-fs-md);
    font-weight: 400;
    line-height: 1.4;   /* 28/20 */
    letter-spacing: 0.2px;
    color: var(--wp-grey-500);
}

.esg__btn,
.location__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    font-size: var(--wp-fs-base);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-green);
    background: #A5CC8259;
    border: 1px solid var(--wp-green);
    transition: background 0.25s ease, color 0.25s ease;
}

.esg__btn:hover,
.esg__btn:focus-visible,
.location__btn:hover,
.location__btn:focus-visible {
    background: var(--wp-green);
    color: var(--wp-cream);
}

/* ==========================================================================
   Location — Oxford-Cambridge Arc statement
   ========================================================================== */

.location {
    background: var(--wp-grey-100);
    padding: 96px 0 104px;
}

.location__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.location__title {
    margin: 0 0 40px;
    max-width: 900px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: var(--wp-green);
}

.location__text {
    margin: 0 0 40px;
    max-width: 760px;
    font-size: var(--wp-fs-base);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--wp-grey-610);
}

/* ==========================================================================
   Videos — poster tiles that open a lightbox player
   ========================================================================== */

.videos {
    background: var(--wp-cream);
    padding: 54px 0 0;
}

.videos__inner {
    width: 100%;
    max-width: var(--wp-content-max);
    margin-inline: auto;
    padding-inline: var(--wp-gutter);
}

.videos__eyebrow {
    margin: 0 0 40px;
    font-size: var(--wp-fs-base);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-green);
}

.videos__grid,
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Tile --- */

.videos__tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 427 / 485;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 11px;
    overflow: hidden;
    cursor: pointer;
}

.videos__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.35s ease;
}

.videos__tile:hover .videos__poster,
.videos__tile:focus-visible .videos__poster {
    transform: scale(1.04);
    filter: brightness(0.72);
}

/* White play icon, revealed on hover */
.videos__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%) scale(0.85);
    color: var(--wp-white);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.videos__tile:hover .videos__play,
.videos__tile:focus-visible .videos__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.videos__play svg {
    width: 100%;
    height: 100%;
}

.videos__title {
    margin: 22px 0 0;
    font-size: var(--wp-fs-lg);
    font-weight: 600;
    line-height: 1.27;
    text-align: center;
    color: var(--wp-green);
}

.videos__rule {
    height: 3px;
    margin: 54px 0 0;
    background: var(--wp-leaf);
    border: 0;
}

/* ==========================================================================
   Gallery — three static images, same geometry as the video tiles
   ========================================================================== */

.gallery {
    background: var(--wp-cream);
    padding: 0 0 96px;
}

.gallery__inner {
    width: 100%;
    max-width: var(--wp-content-max);
    margin-inline: auto;
    padding-inline: var(--wp-gutter);
}

/* Matches .videos__tile: same ratio and corner radius */
.gallery__tile {
    margin: 0;
    aspect-ratio: 427 / 485;
    border-radius: 11px;
    overflow: hidden;
}

.gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   F1 — Williams feature on the dark green ground
   ========================================================================== */

.f1 {
    background: var(--wp-green);
    padding: 80px 0 96px;
}

.f1__title {
    margin: 0 auto 40px;
    max-width: 780px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-mint);
}

.f1__text {
    margin: 0 auto 64px;
    max-width: 790px;
    font-size: var(--wp-fs-md);
    font-weight: 400;
    line-height: 1.4;   /* 28/20 */
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-mint);
}

.f1__media {
    margin: 0;
    aspect-ratio: 1308 / 505;
    overflow: hidden;
}

.f1__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Motorsport Cluster — track + trophy left, copy and stats right
   ========================================================================== */

.cluster {
    background: var(--wp-white);
    padding: 80px 0 96px;
}

.cluster__title {
    margin: 0 0 64px;
    font-size: var(--wp-fs-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-green);
}

/* Mirror of .esg: media bleeds off one edge, copy holds to the content cap.
   Here the media is on the LEFT and the copy on the right. */
.cluster__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
}

/* Flush to the viewport's left edge */
.cluster__media {
    position: relative;
    margin: 0;
    aspect-ratio: 727 / 450;
    overflow: hidden;
}

.cluster__track {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

.cluster__trophy {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32%;
    height: auto;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
}

/* Right column: stops at the content cap's right edge so it lines up with
   .wrap sections, while the media bleeds off the left. */
.cluster__copy {
    padding-left: 80px;
    padding-right: max(
        var(--wp-gutter),
        calc((100vw - var(--wp-content-max)) / 2 + var(--wp-gutter))
    );
}

.cluster__lede {
    margin: 0 0 48px;
    font-size: var(--wp-fs-md);
    font-weight: 400;
    line-height: 1.4;   /* 28/20 */
    letter-spacing: 0.2px;
    color: var(--wp-grey-610);
}

/* --- Stats --- */

.cluster__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin: 0 0 48px;
    padding: 0;
    list-style: none;
}

.cluster__figure {
    margin: 0 0 10px;
    font-size: 37px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    text-align: center;
    text-transform: capitalize;
    color: var(--wp-green);
    font-variant-numeric: tabular-nums;
}

.cluster__caption {
    margin: 0;
    font-size: var(--wp-fs-base);
    font-weight: 400;
    line-height: 1.5;   /* 24/16 */
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--wp-green);
}

.cluster__note {
    margin: 0;
    font-size: var(--wp-fs-md);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: var(--wp-grey-610);
}

/* ==========================================================================
   Aerial — full-bleed video band
   ========================================================================== */

.aerial {
    width: 100%;
    aspect-ratio: 1439 / 689;
    overflow: hidden;
    background: var(--wp-green);
}

.aerial__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ==========================================================================
   Map — full-bleed video band
   ========================================================================== */

.map {
    width: 100%;
    aspect-ratio: 1440 / 757;
    overflow: hidden;
    background: var(--wp-green);
}

.map__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
    background: #3D3D3D;
    padding: 72px 0 40px;
    border-top: 2px solid var(--wp-white);
    color: var(--wp-cream);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 240px 240px 1fr;
    gap: 40px;
    margin-bottom: 56px;
}

.site-footer__label {
    margin: 0 0 48px;
    font-size: var(--wp-fs-sm);
    font-weight: 500;
    line-height: 1;
    color: var(--wp-cream);
}

/* Agent marks carry their own ground, so no box or padding here */
.site-footer__logo {
    display: inline-block;
}

.site-footer__logo img {
    height: 44px;
    width: auto;
}

/* The Savills mark is a knockout — the wordmark is cut out of a solid
   square, so it needs a dark ground behind it rather than the white box. */
.site-footer__logo--savills {
    background: var(--wp-charcoal);
}

.site-footer__logo--savills img {
    display: block;
    width: 72px;
    height: 73px;
}

.site-footer__contact {
    margin: 28px 0 0;
    font-size: var(--wp-fs-sm);
    font-weight: 500;
    font-style: normal;
    line-height: 1.6;
    color: var(--wp-cream);
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
    text-decoration: underline;
}

/* --- Subscribe --- */

.site-footer__subscribe {
    justify-self: end;
    width: 100%;
    max-width: 338px;
    padding: 30px;
    background: var(--wp-charcoal);
}

.site-footer__subscribe-title {
    margin: 0 0 20px;
    font-size: var(--wp-fs-base);
    font-weight: 700;
    line-height: 1;
    color: var(--wp-cream);
}

.subscribe {
    display: flex;
    background: var(--wp-white);
}

.subscribe__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px;
    font-family: var(--wp-font);
    font-size: var(--wp-fs-sm);
    color: #424242;
    background: none;
    border: 0;
}

.subscribe__input::placeholder {
    color: #424242;
}

.subscribe__input:focus {
    outline: 2px solid var(--wp-leaf-mid);
    outline-offset: -2px;
}

.subscribe__submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 0;
    color: var(--wp-white);
    background: var(--wp-leaf-mid);
    border: 0;
    cursor: pointer;
    transition: background 0.25s ease;
}

.subscribe__submit:hover,
.subscribe__submit:focus-visible {
    background: var(--wp-leaf);
}

.subscribe__submit svg {
    width: 22px;
    height: 22px;
}

.site-footer__note {
    margin: 14px 0 0;
    font-size: var(--wp-fs-xs);
    font-weight: 400;
    line-height: 1.5;
    color: var(--wp-cream);
}

/* --- Legal row --- */

.site-footer__rule {
    height: 1px;
    margin: 0 0 40px;
    background: rgba(255, 250, 244, 0.4);
    border: 0;
}

/* Everything sits on the bottom edge. The brand is a flex column, so its
   baseline would come from the logo rather than the wordmark — `end` puts
   "Windrush Park" level with the legal links instead. */
.site-footer__bottom {
    display: grid;
    grid-template-columns: 240px 215px 1fr auto;
    align-items: end;
    gap: 24px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--wp-leaf);
}

.site-footer__brand svg {
    width: 72px;
    height: auto;
}

.site-footer__brand span {
    font-size: var(--wp-fs-md);
    font-weight: 600;
    line-height: 1;
    color: var(--wp-cream);
}

.site-footer__legal {
    margin: 0;
    font-size: var(--wp-fs-xs);
    font-weight: 500;
    line-height: 1;
    color: var(--wp-cream);
}

a.site-footer__legal:hover,
a.site-footer__legal:focus-visible {
    text-decoration: underline;
}

.site-footer__canmoor {
    justify-self: end;
    display: inline-block;
}

.site-footer__canmoor img {
    height: 52px;
    width: auto;
}

/* Visually hidden but available to screen readers */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 16, 0.88);
}

.lightbox__dialog {
    position: relative;
    width: 80vw;
    max-width: 1600px;
}

.lightbox__video {
    width: 100%;
    max-height: 80vh;
    background: #000;
    display: block;
}

.lightbox__video[hidden],
.lightbox__frame[hidden] {
    display: none;
}

/* Embeds are 16:9; the ratio box keeps the iframe from collapsing */
.lightbox__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    background: #000;
}

.lightbox__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lightbox__close {
    position: absolute;
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 8px;
    color: var(--wp-cream);
    background: none;
    border: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
    opacity: 0.6;
}

.lightbox__close svg {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1280px — tighten gutters, ease the largest type
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    :root {
        --wp-gutter: 48px;
        --wp-hero-pad: 56px;
    }

    .site-nav__menu ul {
        gap: 32px;
    }

    .cluster__copy,
    .esg__body {
        padding-left: 48px;
    }
}

/* --------------------------------------------------------------------------
   <= 1024px — stack the two-column sections, thin the mosaics
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    :root {
        --wp-gutter: 32px;
        --wp-hero-pad: 40px;
    }

    .site-nav__menu ul {
        gap: 24px;
    }

    .site-nav__agent img {
        width: 100px;
    }

    /* Section titles */
    .features__title,
    .esg__title,
    .f1__title,
    .cluster__title,
    .location__title,
    .mosaic-b__title,
    .spec__title,
    .siteplan__title {
        font-size: 30px;
    }

    /* Spec carousel */
    .spec {
        padding: 72px 0;
    }

    .spec__lede {
        margin-bottom: 48px;
    }

    .carousel {
        gap: 8px;
    }

    .carousel__item {
        padding: 0 10px;
    }

    /* Site plans */
    .siteplan__title {
        margin-bottom: 32px;
    }

    /* ESG + Cluster: stack, media first, full-bleed */
    .esg,
    .cluster__grid {
        grid-template-columns: 1fr;
    }

    .esg {
        padding: 64px 0;
    }

    .esg__media,
    .cluster__media {
        aspect-ratio: 16 / 9;
    }

    .esg__body,
    .cluster__copy {
        padding: 40px var(--wp-gutter) 0;
    }

    .esg__copy {
        max-width: none;
    }

    /* Features: 2 across */
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 32px;
    }

    .features__lede {
        margin-bottom: 56px;
    }

    /* Mosaic icon labels scale with the cells */
    .mosaic-b__label svg {
        height: 84px;
    }

    .mosaic-b__label h3,
    .mosaic-a__caption p {
        font-size: var(--wp-fs-base);
    }

    .mosaic-b__item--intro {
        padding: 28px 32px;
    }

    .mosaic-b__text {
        font-size: var(--wp-fs-base);
    }

    /* Footer: subscribe drops below the agent columns */
    .site-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }

    .site-footer__subscribe {
        grid-column: 1 / -1;
        justify-self: start;
        max-width: 420px;
    }

    .site-footer__label {
        margin-bottom: 24px;
    }

    .site-footer__bottom {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__canmoor {
        justify-self: end;
    }
}

/* --------------------------------------------------------------------------
   <= 860px — mobile nav, single-column content, mosaics re-flow
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .site-nav__toggle {
        display: flex;
        order: 3;
    }

    .site-nav__agent {
        order: 2;
        margin-left: auto;
    }

    .site-nav__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: 24px 32px 32px;
        background: var(--wp-grey-nav);
    }

    .site-nav.is-open .site-nav__menu {
        display: flex;
    }

    .site-nav__menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
    }

    .hero__content {
        max-width: 100%;
    }

    .hero__lede {
        max-width: 100%;
    }

    .hero__mark {
        width: 132px;
        opacity: 0.85;
    }

    /* Availability hero: copy over the image, tiles drop away */
    .hero-av {
        height: auto;
        min-height: 100vh;
    }

    .hero-av__inner {
        grid-template-columns: 1fr;
    }

    .hero-av__copy {
        padding: 56px var(--wp-hero-pad);
    }

    .hero-av__tiles {
        display: none;
    }

    /* Site plans stack; table first regardless of flip */
    .siteplan {
        grid-template-columns: 1fr;
    }

    .siteplan--flip .siteplan__panel--table,
    .siteplan--flip .siteplan__panel--plan {
        order: 0;
    }

    .siteplan__panel {
        padding: 56px var(--wp-gutter);
    }

    .siteplan__content,
    .siteplan__panel--plan img {
        max-width: none;
    }

    /* Videos + gallery: single column, natural height */
    .videos__grid,
    .gallery__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .videos__tile,
    .gallery__tile {
        aspect-ratio: 16 / 10;
    }

    .videos__title {
        margin-top: 16px;
    }

    .videos__rule {
        margin-top: 40px;
    }

    /* Cluster stats side by side but tighter */
    .cluster__stats {
        gap: 24px;
    }

    /* Lightbox uses more of the screen */
    .lightbox__dialog {
        width: 92vw;
    }

    .lightbox__close {
        top: -44px;
    }

    /* ---- Mosaic A: 8 cols -> 4 ---- */
    .mosaic-a__grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: calc(100vw / 4);
    }

    .mosaic-a__item--1 { grid-area: 1 / 1 / 2 / 3; }  /* F1 car     */
    .mosaic-a__item--3 { grid-area: 1 / 3 / 2 / 5; }  /* warehouse  */
    .mosaic-a__item--4 { grid-area: 2 / 1 / 3 / 2; }  /* W mark     */
    .mosaic-a__item--5 { grid-area: 2 / 2 / 4 / 4; }  /* cafe       */
    .mosaic-a__item--6 { grid-area: 2 / 4 / 3 / 5; }  /* atom       */
    .mosaic-a__item--7 { grid-area: 3 / 4 / 5 / 5; }  /* drone      */
    .mosaic-a__item--9 { grid-area: 4 / 1 / 5 / 4; }  /* caption    */
    .mosaic-a__item--2,
    .mosaic-a__item--8 { display: none; }             /* filler blocks */

    /* ---- Mosaic B: 5 cols -> 3 ---- */
    .mosaic-b__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc(100vw / 3.6);
    }

    .mosaic-b__item--bee        { grid-area: 1 / 1 / 2 / 3; }
    .mosaic-b__item--tennis-img { grid-area: 1 / 3 / 2 / 4; }
    .mosaic-b__item--intro      { grid-area: 2 / 1 / 3 / 4; }
    .mosaic-b__item--sheep      { grid-area: 3 / 1 / 4 / 3; }
    .mosaic-b__item--nursery    { grid-area: 3 / 3 / 4 / 4; }
    .mosaic-b__item--tennis     { grid-area: 4 / 1 / 5 / 2; }
    .mosaic-b__item--runner     { grid-area: 4 / 2 / 5 / 4; }
    .mosaic-b__item--gardens    { grid-area: 5 / 1 / 6 / 2; }
    .mosaic-b__item--coffee-img { grid-area: 5 / 2 / 6 / 4; }
    .mosaic-b__item--coffee     { grid-area: 6 / 1 / 7 / 2; }
    .mosaic-b__item--weights    { grid-area: 6 / 2 / 7 / 4; }
    .mosaic-b__item--gym        { grid-area: 7 / 1 / 8 / 2; }
    .mosaic-b__item--seedling   { grid-area: 7 / 2 / 8 / 4; }
    .mosaic-b__item--radio      { grid-area: 8 / 1 / 9 / 2; }
    .mosaic-b__item--mixer      { grid-area: 8 / 2 / 9 / 4; }
    .mosaic-b__item--white      { display: none; }

    .mosaic-b__label svg {
        height: 64px;
    }
}

/* --------------------------------------------------------------------------
   <= 560px — phones
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    :root {
        --wp-gutter: 20px;
        --wp-hero-pad: 24px;
    }

    .hero__inner {
        padding-top: calc(var(--wp-nav-h) + 56px);
        padding-bottom: 132px;
    }

    .hero-av__copy {
        padding-top: 56px;
    }

    .hero__eyebrow {
        font-size: var(--wp-fs-base);
    }

    .hero__title {
        letter-spacing: -0.5px;
    }

    /* Section titles */
    .features__title,
    .esg__title,
    .f1__title,
    .cluster__title,
    .location__title,
    .mosaic-b__title,
    .spec__title,
    .siteplan__title {
        font-size: 26px;
        letter-spacing: 0;
    }

    /* Spec carousel — one icon at a time (JS matches this) */
    .spec {
        padding: 64px 0;
    }

    .spec__lede {
        font-size: var(--wp-fs-base);
        margin-bottom: 40px;
    }

    .carousel__arrow {
        width: 32px;
        height: 32px;
    }

    /* Site plans */
    .siteplan__panel {
        padding: 48px var(--wp-gutter);
    }

    /* Unit table: four columns won't fit, so let it scroll rather than
       squash the figures into unreadable wraps. */
    .unit-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .unit-table {
        min-width: 460px;
        font-size: var(--wp-fs-xs);
    }

    .unit-table th,
    .unit-table td {
        padding: 10px 6px;
    }

    .features,
    .cluster,
    .f1,
    .location {
        padding: 56px 0 64px;
    }

    .features__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .features__lede,
    .esg__text,
    .f1__text,
    .cluster__lede,
    .cluster__note {
        font-size: var(--wp-fs-base);
    }

    .features__icon {
        width: 84px;
        height: 84px;
        padding: 14px;
    }

    /* Stats stack */
    .cluster__stats {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cluster__figure {
        font-size: 32px;
    }

    /* Colour bars slim down */
    .colour-bar {
        height: 20px;
    }

    /* ---- Mosaic A: 4 cols -> 2 ---- */
    .mosaic-a__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: calc(100vw / 2.2);
    }

    .mosaic-a__item--1 { grid-area: 1 / 1 / 2 / 3; }
    .mosaic-a__item--3 { grid-area: 2 / 1 / 3 / 3; }
    .mosaic-a__item--5 { grid-area: 3 / 1 / 4 / 2; }
    .mosaic-a__item--4 { grid-area: 3 / 2 / 4 / 3; }
    .mosaic-a__item--7 { grid-area: 4 / 1 / 5 / 3; }
    .mosaic-a__item--6 { grid-area: 5 / 1 / 6 / 2; }
    .mosaic-a__item--9 { grid-area: 5 / 2 / 6 / 3; }

    /* ---- Mosaic B: 3 cols -> 2 ---- */
    .mosaic-b__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: calc(100vw / 2.4);
    }

    .mosaic-b__item--bee        { grid-area: 1 / 1 / 2 / 3; }
    .mosaic-b__item--intro      { grid-area: 2 / 1 / 3 / 3; }
    .mosaic-b__item--sheep      { grid-area: 3 / 1 / 4 / 2; }
    .mosaic-b__item--nursery    { grid-area: 3 / 2 / 4 / 3; }
    .mosaic-b__item--tennis-img { grid-area: 4 / 1 / 5 / 2; }
    .mosaic-b__item--tennis     { grid-area: 4 / 2 / 5 / 3; }
    .mosaic-b__item--runner     { grid-area: 5 / 1 / 6 / 2; }
    .mosaic-b__item--gardens    { grid-area: 5 / 2 / 6 / 3; }
    .mosaic-b__item--coffee-img { grid-area: 6 / 1 / 7 / 2; }
    .mosaic-b__item--coffee     { grid-area: 6 / 2 / 7 / 3; }
    .mosaic-b__item--weights    { grid-area: 7 / 1 / 8 / 2; }
    .mosaic-b__item--gym        { grid-area: 7 / 2 / 8 / 3; }
    .mosaic-b__item--seedling   { grid-area: 8 / 1 / 9 / 2; }
    .mosaic-b__item--radio      { grid-area: 8 / 2 / 9 / 3; }
    .mosaic-b__item--mixer      { grid-area: 9 / 1 / 10 / 3; }

    .mosaic-b__label svg {
        height: 52px;
    }

    .mosaic-b__label {
        gap: 10px;
        padding: 16px;
    }

    .mosaic-b__item--intro {
        padding: 24px 20px;
    }

    /* Video bands get taller so they read on a narrow screen */
    .aerial,
    .map {
        aspect-ratio: 4 / 3;
    }

    .f1__media {
        aspect-ratio: 4 / 3;
    }

    /* ---- Footer ---- */
    .site-footer {
        padding: 48px 0 32px;
    }

    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 40px;
    }

    .site-footer__subscribe {
        max-width: none;
        padding: 24px;
    }

    .site-footer__bottom {
        grid-template-columns: 1fr;
        gap: 28px;
        justify-items: start;
    }

    .site-footer__canmoor {
        justify-self: start;
    }
}

/* Respect reduced-motion: pause the loop */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }

    .hero__media {
        background: var(--wp-green) center/cover no-repeat;
    }
}