/*
 * Land Home Properties — page compositions
 * Home, projects, project detail, blog and article, How It Works,
 * contact, legal and error pages.
 */

/* ---------------------------------------------------------------- Home hero */
/*
 * Layers, back to front: background slider, readability overlay (on the
 * slider viewport), headline and current-property card, slider controls.
 * The hero is a grid on the shared container edges; the fixed glass header
 * sits over its top. Phones: the image carries the headline and the property
 * card overlaps its lower edge. Tablets: the card sits below the headline.
 * Wide screens: headline left, card right.
 */
.hero {
    --hero-edge: max(var(--gutter), (100% - var(--container)) / 2);
    --hero-card-overlap: 2.75rem;
    background: var(--portfolio-surface);
    display: grid;
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--container)) [content-end] minmax(var(--gutter), 1fr) [full-end];
    isolation: isolate;
    position: relative;
}

/* No z-index here: the slider controls must stack above the text layer. */
.hero__media {
    background: var(--ink);
    grid-column: full;
    grid-row: 1;
    min-height: clamp(34rem, 88svh, 44rem);
    position: relative;
}

/* Swipes over the headline reach the slider; links and buttons stay usable. */
.hero__text {
    align-self: end;
    color: var(--white);
    grid-column: content;
    grid-row: 1;
    padding: calc(var(--header-height) + 5.5rem) 0 calc(var(--hero-card-overlap) + 4.75rem);
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.hero__text a,
.hero__text button {
    pointer-events: auto;
}

.hero__eyebrow {
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    backdrop-filter: blur(10px);
    background: rgb(255 255 255 / 12%);
    border: 1px solid rgb(255 255 255 / 26%);
    border-radius: 999px;
    color: var(--white);
    display: inline-flex;
    font-family: var(--font-display);
    font-size: .75rem;
    font-stretch: 110%;
    font-weight: 600;
    gap: .6rem;
    letter-spacing: .14em;
    line-height: 1.3;
    margin: 0 0 1.25rem;
    padding: .45rem .95rem .45rem .8rem;
    text-transform: uppercase;
}

.hero__eyebrow-dot {
    background: var(--brand-on-dark);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgb(127 208 224 / 24%);
    flex: none;
    height: .45rem;
    width: .45rem;
}

.hero h1 {
    color: var(--white);
    font-size: clamp(2.6rem, 1.45rem + 4.6vw, 5.25rem);
    font-stretch: 112%;
    letter-spacing: -.025em;
    line-height: 1.02;
    margin: 0;
    max-width: 13ch;
    text-shadow: 0 2px 24px rgb(0 0 0 / 22%);
}

.hero__accent {
    color: var(--brand-on-dark);
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

/* A single clay stroke under the accent words, drawn once on arrival. */
.hero__swash {
    bottom: -.16em;
    fill: none;
    height: .3em;
    left: .02em;
    overflow: visible;
    position: absolute;
    stroke: var(--clay-on-dark);
    stroke-linecap: round;
    stroke-width: 3.5;
    width: 96%;
}

.js-motion .hero__swash path {
    animation: swash-draw 1.1s 550ms var(--ease-out) both;
    stroke-dasharray: 1;
}

@keyframes swash-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

.hero__lead {
    color: rgb(255 255 255 / 92%);
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem);
    line-height: 1.55;
    margin: 1.35rem 0 0;
    max-width: 31rem;
    text-shadow: 0 1px 12px rgb(0 0 0 / 25%);
}

.hero__actions {
    margin-top: 1.9rem;
}

@media (max-width: 575.98px) {
    .hero__actions {
        display: grid;
    }
}

.hero__points {
    color: rgb(255 255 255 / 88%);
    display: flex;
    flex-wrap: wrap;
    font-size: .9375rem;
    gap: .45rem 1.35rem;
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
}

.hero__points li {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

@media (max-width: 575.98px) {
    .hero__points {
        font-size: .875rem;
        gap: .35rem 1rem;
        margin-top: 1.25rem;
    }
}

.hero__points .icon {
    color: var(--brand-on-dark);
    height: 1.05em;
    width: 1.05em;
}

/* Current property card. */
.hero-card {
    grid-column: content;
    grid-row: 2;
    margin-top: calc(var(--hero-card-overlap) * -1);
    position: relative;
    z-index: 3;
}

.hero-card__link {
    align-items: center;
    background: var(--white);
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    display: grid;
    gap: 1rem;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    padding: .7rem 1rem .7rem .7rem;
    text-decoration: none;
    transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.hero-card__link:hover {
    box-shadow: 0 32px 64px -30px rgb(24 37 43 / 55%);
    color: var(--ink);
    transform: translateY(-2px);
}

.hero-card__media {
    aspect-ratio: 1;
    border-radius: 12px;
    display: block;
    overflow: hidden;
}

.hero-card__media picture,
.hero-card__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hero-card__body {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.hero-card__label {
    color: var(--clay-ink);
    font-family: var(--font-display);
    font-size: .6875rem;
    font-stretch: 110%;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-card__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-stretch: 108%;
    font-weight: 600;
    line-height: 1.2;
}

.hero-card__meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: .875rem;
    gap: .3rem;
}

.hero-card__meta .icon {
    color: var(--brand-ink);
    height: 1em;
    width: 1em;
}

.hero-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.hero-card__tags span {
    background: var(--brand-tint);
    border-radius: 999px;
    color: var(--brand-deep);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    padding: .2rem .6rem;
}

.hero-card__go {
    align-items: center;
    background: var(--brand-deep);
    border-radius: 50%;
    color: var(--white);
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    transition: background-color var(--duration), transform var(--duration) var(--ease-out);
    width: 2.5rem;
}

.hero-card__link:hover .hero-card__go {
    background: var(--brand-deeper);
    transform: translateX(3px);
}

@media (min-width: 768px) {
    .hero {
        --hero-card-overlap: 0rem;
        background: var(--ink);
        grid-template-rows: minmax(calc(var(--header-height) + 2.5rem), 1fr) auto auto minmax(6.5rem, 1fr);
        min-height: clamp(38rem, 100svh, 60rem);
    }

    .hero__media {
        grid-row: 1 / -1;
        min-height: 0;
    }

    .hero__text {
        align-self: auto;
        grid-row: 2;
        max-width: 46rem;
        padding: 0;
    }

    .hero-card {
        grid-row: 3;
        justify-self: start;
        margin-top: 2.25rem;
        width: min(100%, 30rem);
    }

    .hero-card__link {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        background: rgb(255 255 255 / 94%);
    }

    .hero-card__link:focus-visible {
        outline-color: var(--white);
    }
}

@media (min-width: 1200px) {
    .hero__text {
        max-width: 44rem;
    }

    .hero-card {
        align-self: end;
        grid-row: 2;
        justify-self: end;
        margin-top: 0;
        width: 26.5rem;
    }

    .hero-card__link {
        gap: 1.1rem;
        grid-template-columns: 6.5rem minmax(0, 1fr) auto;
        padding: .8rem 1.1rem .8rem .8rem;
    }
}

/* Short landscape screens (phones turned sideways): keep everything in view. */
@media (min-width: 768px) and (max-height: 600px) {
    .hero {
        grid-template-rows: calc(var(--header-height) + 1.5rem) auto auto 5rem;
        min-height: 0;
    }

    .hero h1 {
        font-size: clamp(2.25rem, 1.5rem + 3vw, 3rem);
    }

    .hero__points {
        display: none;
    }
}

/* Background slider. The first image works without JavaScript. */
.hero-slider,
.hero-slider__viewport {
    inset: 0;
    position: absolute;
}

.hero-slider__viewport {
    background: var(--ink);
    overflow: hidden;
    touch-action: pan-y;
}

.hero-slider__viewport:focus-visible {
    outline-color: var(--white);
    outline-offset: -6px;
}

/* Readability overlay: darker where the text sits, clear over the architecture. */
.hero-slider__viewport::after {
    background:
        linear-gradient(180deg, rgb(15 26 31 / 30%) 0%, rgb(15 26 31 / 0%) 9rem),
        linear-gradient(0deg, rgb(15 26 31 / 92%) 0%, rgb(15 26 31 / 72%) 38%, rgb(15 26 31 / 18%) 70%, rgb(15 26 31 / 0%) 100%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero-slider__viewport::after {
        background:
            linear-gradient(90deg, rgb(15 26 31 / 80%) 0%, rgb(15 26 31 / 56%) 36%, rgb(15 26 31 / 14%) 68%, rgb(15 26 31 / 0%) 100%),
            linear-gradient(0deg, rgb(15 26 31 / 62%) 0%, rgb(15 26 31 / 0%) 34%);
    }
}

.hero-slider__slide {
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 900ms var(--ease-out);
}

.hero-slider__slide.is-active {
    opacity: 1;
}

.hero-slider__slide picture,
.hero-slider__slide img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* A slow settle as each image arrives; not repeated while it stays. */
.hero-slider__slide img {
    transform: scale(1.06);
    transition: transform 8s var(--ease-out);
}

.hero-slider__slide.is-active img {
    transform: none;
}

.hero-slider__slide--villa img {
    object-position: 62% 50%;
}

.hero-slider__slide--land img {
    object-position: 60% 50%;
}

.hero-slider__slide--building img {
    object-position: 70% 40%;
}

/* Controls: one segment per image (the active one fills with time), counter. */
.hero-slider__controls {
    align-items: center;
    bottom: calc(var(--hero-card-overlap) + 1.25rem);
    color: var(--white);
    display: flex;
    gap: .9rem;
    left: var(--hero-edge);
    position: absolute;
    z-index: 3;
}

.hero-slider__controls[hidden] {
    display: none;
}

.hero-slider__dot:focus-visible {
    outline-color: var(--white);
}

.hero-slider__dots {
    display: flex;
    gap: .35rem;
}

.hero-slider__dot {
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    padding: 1.1rem 0;
    width: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem);
}

.hero-slider__bar {
    background: rgb(255 255 255 / 34%);
    border-radius: 3px;
    display: block;
    height: 3px;
    overflow: hidden;
    position: relative;
    transition: background-color var(--duration);
}

.hero-slider__dot:hover .hero-slider__bar {
    background: rgb(255 255 255 / 62%);
}

.hero-slider__bar::after {
    background: var(--white);
    content: '';
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
}

.hero-slider__dot.is-active .hero-slider__bar::after {
    transform: scaleX(1);
}

.hero-slider:not(.is-paused) .hero-slider__dot.is-active .hero-slider__bar::after {
    animation: hero-progress var(--hero-interval, 7000ms) linear both;
}

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

.hero-slider__count {
    color: rgb(255 255 255 / 72%);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-stretch: 110%;
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
    margin: 0;
}

.hero-slider__count span {
    color: var(--white);
    font-weight: 600;
}

@media (min-width: 768px) {
    .hero-slider__controls {
        bottom: 1.75rem;
    }
}

/* Current property feature card (Home and Properties). */
.owner-showcase {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

.owner-showcase--feature {
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-sm);
    gap: 0;
    overflow: hidden;
    transition: box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.owner-showcase--feature:hover {
    border-color: rgb(154 93 64 / 30%);
    box-shadow: var(--shadow);
}

.owner-showcase__media {
    display: block;
    min-height: 24rem;
    overflow: hidden;
    position: relative;
}

.owner-showcase__media picture,
.owner-showcase__media img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.owner-showcase__media img {
    transition: transform 700ms var(--ease-out);
}

.owner-showcase--feature:hover .owner-showcase__media img {
    transform: scale(1.04);
}

.owner-showcase__body {
    max-width: 36rem;
    padding: clamp(1.5rem, 3vw, 3rem);
}

.owner-showcase h2,
.owner-showcase h3 {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.owner-showcase__title {
    color: inherit;
    text-decoration: none;
}

.owner-showcase__title:hover {
    color: var(--brand-ink);
}

.owner-showcase__location {
    align-items: center;
    color: var(--muted);
    display: flex;
    gap: .5rem;
}

.owner-showcase__location .icon {
    color: var(--brand-ink);
    flex: 0 0 auto;
}

.owner-showcase__facts {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    margin: 1.35rem 0 1.6rem;
}

.owner-showcase__facts > div {
    background: var(--sand-surface);
    border-radius: 10px;
    padding: .65rem .85rem;
}

.owner-showcase__facts dt {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.owner-showcase__facts dd {
    color: var(--ink);
    font-family: var(--font-display);
    font-stretch: 106%;
    font-weight: 600;
    margin: .1rem 0 0;
}

@media (max-width: 767.98px) {
    .owner-showcase {
        grid-template-columns: 1fr;
    }

    .owner-showcase__media {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
}

.review-note { border-left: 3px solid var(--brand); padding: .65rem 1rem; background: var(--sand-surface); font-size: .94rem; }
.reading-width { max-width: 52rem; }
/* ------------------------------------------------- Explore by property type */
.type-mosaic {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.type-tile--lead {
    grid-column: span 2;
}

.type-tile a {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    color: var(--white);
    display: block;
    height: 100%;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.type-tile--lead a {
    aspect-ratio: 16 / 10;
}

.type-tile picture,
.type-tile img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: -2;
}

.type-tile img {
    transition: transform 700ms var(--ease-out);
}

.type-tile a::after {
    background: linear-gradient(180deg, rgb(15 26 31 / 0%) 40%, rgb(15 26 31 / 78%) 100%);
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
}

.type-tile a:hover img,
.type-tile a:focus-visible img {
    transform: scale(1.05);
}

.type-tile__label {
    bottom: 0;
    display: grid;
    gap: .1rem;
    left: 0;
    padding: 1rem 3.75rem 1rem 1.1rem;
    position: absolute;
    right: 0;
}

.type-tile__label strong {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
    font-stretch: 108%;
    font-weight: 600;
    line-height: 1.2;
}

.type-tile--lead .type-tile__label strong {
    font-size: clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
}

.type-tile__label small {
    color: rgb(255 255 255 / 85%);
    font-size: .875rem;
}

.type-tile__go {
    align-items: center;
    background: rgb(255 255 255 / 92%);
    border-radius: 50%;
    bottom: 1rem;
    color: var(--ink);
    display: flex;
    height: 2.25rem;
    justify-content: center;
    position: absolute;
    right: 1rem;
    transition: background-color var(--duration), color var(--duration), transform var(--duration) var(--ease-out);
    width: 2.25rem;
}

.type-tile a:hover .type-tile__go {
    background: var(--brand-deep);
    color: var(--white);
    transform: translateX(3px);
}

@media (min-width: 768px) {
    .type-mosaic {
        grid-auto-rows: clamp(11rem, 15vw, 15rem);
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .type-tile--lead {
        grid-row: span 2;
    }

    .type-tile a,
    .type-tile--lead a {
        aspect-ratio: auto;
    }
}

.more-types {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: 1.5rem;
}

.more-types > span {
    color: var(--muted);
    font-family: var(--font-display);
    font-size: .75rem;
    font-stretch: 110%;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ Home sections */
.featured-grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: minmax(0, 1fr);
}

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

@media (min-width: 992px) {
    .featured-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .featured-grid--single {
        grid-template-columns: minmax(0, 42rem);
    }

    .featured-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 58rem;
    }
}

.section--portfolio .section-head {
    border-top: 2px solid var(--portfolio-rule);
    padding-top: 1.1rem;
}

.section--portfolio .eyebrow {
    color: var(--clay-ink);
}

.section--portfolio .project-card {
    background: rgb(255 255 255 / 78%);
    border-color: rgb(154 93 64 / 18%);
}

.section--portfolio .project-card:hover,
.section--portfolio .project-card:focus-within {
    border-color: var(--portfolio-rule);
}

.section--locations .eyebrow {
    color: var(--location-accent);
}

.project-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
}

/* About: one image with a sage offset block, short text and three points. */
.about-editorial {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .about-editorial {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.about-editorial__image {
    border-radius: var(--radius-lg);
    margin: 0;
    overflow: hidden;
    position: relative;
}

.about-editorial__image img {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    width: 100%;
}

@media (min-width: 992px) {
    .about-editorial__image {
        box-shadow: 1.25rem 1.25rem 0 var(--sage);
    }

    .about-editorial__image img {
        aspect-ratio: 4 / 5;
    }
}

.about-editorial__text h2 {
    margin-bottom: 1rem;
}

.about-editorial__text > p:not(.eyebrow) {
    color: var(--muted);
    max-width: var(--measure);
}

.about-points {
    display: grid;
    gap: 1.1rem;
    list-style: none;
    margin: 1.75rem 0 2rem;
    padding: 0;
}

.about-points li {
    align-items: flex-start;
    display: flex;
    gap: .9rem;
}

.about-points__icon {
    align-items: center;
    background: var(--brand-tint);
    border-radius: 50%;
    color: var(--brand-deep);
    display: inline-flex;
    flex: none;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.about-points h3 {
    font-size: 1.05rem;
    margin: .1rem 0 .15rem;
}

.about-points p {
    color: var(--muted);
    font-size: .975rem;
    margin: 0;
}

/* Short list with hairlines (Our Story). */
.value-stack {
    display: grid;
    list-style: none;
    margin: 1.75rem 0;
    padding: 0;
}

.value-stack li {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    padding-block: 1.1rem;
}

.value-stack li:last-child {
    border-bottom: 1px solid var(--line);
}

.value-stack h3 {
    font-size: 1.05rem;
    margin: 0 0 .2rem;
}

.value-stack p {
    font-size: .975rem;
    margin: 0;
}

.value-stack .icon-tile {
    height: 2.5rem;
    width: 2.5rem;
}

/* Explore locations: a finite, manually controlled rail with room for its arrows. */
.location-slider {
    min-width: 0;
    position: relative;
}

.location-slider__rail {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: .2rem clamp(3.25rem, 7vw, 5rem);
    scroll-behavior: smooth;
    scroll-padding-inline: clamp(3.25rem, 7vw, 5rem);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.location-slider__rail::-webkit-scrollbar {
    display: none;
}

.location-slider__rail:focus-visible {
    outline: 3px solid rgb(23 108 133 / 45%);
    outline-offset: 4px;
}

.location-slider__list {
    display: grid;
    gap: 1rem;
    grid-auto-columns: minmax(0, 82vw);
    grid-auto-flow: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.location-tile {
    min-width: 0;
    scroll-snap-align: start;
}

.location-slider__controls {
    display: flex;
    inset: 50% 0 auto;
    justify-content: space-between;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
    z-index: 2;
}

.location-slider__control {
    align-items: center;
    background: var(--white);
    border: 1px solid rgb(23 108 133 / 24%);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    color: var(--location-accent);
    display: inline-flex;
    height: 2.85rem;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
    transition: background-color var(--duration), border-color var(--duration), color var(--duration), opacity var(--duration), transform var(--duration-fast) var(--ease-out);
    width: 2.85rem;
}

.location-slider__control:hover:not(:disabled),
.location-slider__control:focus-visible {
    background: var(--location-accent);
    border-color: var(--location-accent);
    color: var(--white);
    transform: scale(1.04);
}

.location-slider__control:disabled {
    cursor: default;
    opacity: .42;
}

@media (min-width: 576px) {
    .location-slider__list {
        grid-auto-columns: minmax(0, calc((100% - 1rem) / 2));
    }
}

@media (min-width: 768px) {
    .location-slider__list {
        grid-auto-columns: minmax(0, calc((100% - 2rem) / 3));
    }
}

@media (min-width: 1200px) {
    .location-slider__list {
        grid-auto-columns: minmax(0, calc((100% - 3rem) / 4));
    }
}

.location-tile a {
    aspect-ratio: 4 / 5;
    background: var(--brand-deep);
    border-radius: var(--radius-lg);
    color: var(--white);
    display: block;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.location-tile picture,
.location-tile img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: -2;
}

.location-tile img {
    transition: transform 700ms var(--ease-out);
}

.location-tile a::after {
    background: linear-gradient(180deg, rgb(15 26 31 / 0%) 45%, rgb(15 26 31 / 80%) 100%);
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
}

.location-tile a:hover img,
.location-tile a:focus-visible img {
    transform: scale(1.05);
}

.location-tile__plain {
    align-items: center;
    color: rgb(255 255 255 / 40%);
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
}

.location-tile__plain .icon {
    height: 3rem;
    width: 3rem;
}

.location-tile__body {
    bottom: 0;
    display: grid;
    gap: .15rem;
    left: 0;
    padding: 1.1rem 1.2rem;
    position: absolute;
    right: 0;
}

.location-tile__body strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-stretch: 108%;
    font-weight: 600;
    line-height: 1.2;
}

.location-tile__body small {
    align-items: center;
    color: rgb(255 255 255 / 88%);
    display: flex;
    font-size: .875rem;
    gap: .4rem;
}

.location-tile__body small::before {
    background: var(--clay-on-dark);
    border-radius: 50%;
    content: '';
    height: .4rem;
    width: .4rem;
}

/* Support for your property journey */
.support {
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .support {
        align-items: start;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

.support__intro h2 {
    margin-bottom: 1rem;
}

.support__intro > p:not(.eyebrow) {
    color: var(--muted);
    margin-bottom: 1.5rem;
    max-width: 28rem;
}

.roof-accent {
    display: none;
    fill: none;
    stroke: var(--clay);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

@media (min-width: 992px) {
    .roof-accent {
        display: block;
        margin-top: 3rem;
        width: 13rem;
    }
}

.support__list {
    counter-reset: support;
    display: grid;
    gap: 2rem 1.75rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .support__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.support__list li {
    border-top: 1px solid var(--line);
    counter-increment: support;
    display: flex;
    flex-direction: column;
    padding-top: 1.35rem;
    position: relative;
}

.support__list li::after {
    color: var(--clay-ink);
    content: '0' counter(support);
    font-family: var(--font-display);
    font-size: .875rem;
    font-stretch: 110%;
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 1.35rem;
}

.support__icon {
    align-items: center;
    background: var(--brand-tint);
    border-radius: 12px;
    color: var(--brand-deep);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 2.75rem;
}

.support__icon .icon {
    height: 1.35rem;
    width: 1.35rem;
}

.support__list h3 {
    font-size: 1.15rem;
    margin: 0 0 .4rem;
}

.support__list p {
    color: var(--muted);
    font-size: .975rem;
    margin: 0 0 .9rem;
}

.support__list .btn-link-arrow {
    margin-top: auto;
}

/* Home enquiry: image-backed introduction beside the working form. */
.contact-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
}

@media (min-width: 992px) {
    .contact-panel {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

.contact-panel__intro {
    align-items: flex-end;
    background: var(--ink);
    display: flex;
    isolation: isolate;
    min-height: 18rem;
    padding: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
    position: relative;
}

.contact-panel__intro picture,
.contact-panel__photo {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: -2;
}

.contact-panel__intro::after {
    background: linear-gradient(180deg, rgb(15 26 31 / 20%) 0%, rgb(15 26 31 / 82%) 45%, rgb(15 26 31 / 92%) 100%);
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
}

@media (max-width: 991.98px) {
    .contact-panel__intro {
        padding-top: 8rem;
    }
}

@media (min-width: 992px) {
    .contact-panel__intro::after {
        background: linear-gradient(180deg, rgb(15 26 31 / 30%) 0%, rgb(15 26 31 / 88%) 70%);
    }
}

.contact-panel__text h2 {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    margin-bottom: .9rem;
    max-width: 14ch;
}

.contact-panel__text p {
    color: rgb(255 255 255 / 88%);
    margin-bottom: 1.5rem;
    max-width: 26rem;
}

.contact-panel__form {
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.contact-lines {
    display: grid;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-lines a {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-weight: 500;
    gap: .6rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.contact-lines a:hover {
    text-decoration: underline;
}

.contact-lines .icon {
    color: var(--brand-ink);
}

.on-dark .contact-lines a {
    color: var(--white);
}

.on-dark .contact-lines .icon {
    color: var(--clay-on-dark);
}

.image-credits {
    color: var(--muted);
    font-size: .8125rem;
    margin-top: 1.5rem;
}

.image-credits summary {
    cursor: pointer;
    font-weight: 500;
    width: fit-content;
}

.image-credits p {
    margin: .6rem 0 .4rem;
    max-width: 52rem;
}

.image-credits ul {
    margin: 0;
    padding-left: 1.1rem;
}

.image-credits a {
    color: var(--muted);
}

/* ------------------------------------------------------------- Projects page */
.projects-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.filter-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--clay);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin: var(--space-l) 0 0;
    padding: clamp(1rem, .85rem + .8vw, 1.5rem);
}

.filter-panel .form-label {
    font-size: .875rem;
}

.filter-actions {
    display: flex;
    gap: .5rem;
}

.filter-actions .btn {
    flex: 1 1 auto;
}

.results-bar {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    margin: var(--space-l) 0 1.5rem;
}

.results-bar h2 {
    font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
    margin: 0;
}

.active-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ------------------------------------------------------- Project detail page */
.detail-hero__grid {
    align-items: center;
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .detail-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.detail-hero h1 {
    margin-bottom: 1.1rem;
    max-width: 18ch;
}

.detail-hero__meta {
    margin: 0 0 1.75rem;
}

.detail-hero__cover {
    aspect-ratio: 3 / 2;
    background: var(--white);
    border-radius: var(--radius-lg);
    margin: 0;
    overflow: hidden;
    position: relative;
}

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

.detail-layout {
    display: grid;
    gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(.5rem, 0rem + 2vw, 1.5rem) var(--section-space);
}

@media (min-width: 1200px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

.detail-section {
    border-bottom: 1px solid var(--line);
    padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
    scroll-margin-top: calc(var(--header-height) + 4rem);
}

.detail-section:last-child {
    border-bottom: 0;
}

.detail-section__head {
    align-items: baseline;
    display: flex;
    gap: .9rem;
    margin-bottom: 1.5rem;
}

.detail-section__number {
    color: var(--brand-ink);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.detail-section__head h2 {
    font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem);
    margin: 0;
}

.overview-text {
    margin-bottom: 1.75rem;
    max-width: 46rem;
}

.plan-figure {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin: 0;
    padding: clamp(.75rem, .5rem + 1vw, 1.25rem);
}

.plan-figure .gallery__item {
    aspect-ratio: auto;
    background: var(--white);
    width: 100%;
}

.plan-figure img {
    max-height: 32rem;
    object-fit: contain;
    width: 100%;
}

.plan-figure figcaption {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: .9375rem;
    gap: .5rem;
    margin-top: .85rem;
}

.location-card {
    align-items: flex-start;
    background: var(--surface-soft);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.location-card__place {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
}

.location-card h3 {
    font-size: 1.25rem;
    margin: 0 0 .25rem;
}

.location-card p {
    color: var(--muted);
    margin: 0;
}

.detail-aside {
    display: none;
}

@media (min-width: 1200px) {
    .detail-aside {
        display: block;
        padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    }
}

.aside-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 5rem);
}

.aside-card h2 {
    font-size: 1.3rem;
    margin-bottom: .5rem;
}

.aside-card p {
    color: var(--muted);
    font-size: .975rem;
}

.enquiry-split {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .enquiry-split {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }
}

@media (min-width: 1200px) {
    .enquiry-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mobile-cta {
    backdrop-filter: blur(10px);
    background: rgb(255 255 255 / 96%);
    border-top: 1px solid var(--line);
    bottom: 0;
    display: flex;
    gap: .5rem;
    left: 0;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    transition: transform var(--duration) var(--ease-out);
    z-index: 1025;
}

.mobile-cta .btn {
    flex: 1;
}

.mobile-cta.is-hidden {
    transform: translateY(110%);
}

.has-mobile-cta {
    padding-bottom: 4.5rem;
}

@media (min-width: 992px) {
    .mobile-cta {
        display: none;
    }

    .has-mobile-cta {
        padding-bottom: 0;
    }
}

/* ---------------------------------------------------------------- Blog pages */
.blog-feature {
    align-items: center;
    display: grid;
    gap: 1.25rem clamp(1.5rem, 1rem + 3vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr);
    position: relative;
}

@media (min-width: 900px) {
    .blog-feature {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    }
}

.blog-feature__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.blog-feature__media picture {
    display: block;
    height: 100%;
}

.blog-feature__media img {
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out);
    width: 100%;
}

.blog-feature:hover .blog-feature__media img {
    transform: scale(1.03);
}

.blog-feature__body {
    display: grid;
    gap: .85rem;
    justify-items: start;
}

.blog-feature h2 {
    font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
    margin: 0;
}

.blog-feature h2 a {
    color: var(--ink);
    text-decoration: none;
}

.blog-feature h2 a:hover {
    color: var(--brand-ink);
}

.blog-feature h2 a::after {
    content: '';
    inset: 0;
    position: absolute;
}

.blog-feature p {
    color: var(--muted);
    margin: 0;
}

.blog-grid {
    display: grid;
    gap: 2.25rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

@media (min-width: 992px) {
    .blog-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.blog-grid--index {
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin-top: var(--space-l);
    padding-top: var(--space-l);
}

.topic-strip {
    margin-top: 1.5rem;
}

.article-meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .9375rem;
    gap: .4rem 1.25rem;
    margin: 1.5rem 0 0;
}

.article-meta span {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

.article-meta .icon {
    color: var(--brand-ink);
}

.draft-banner {
    align-items: center;
    background: var(--warning-soft);
    border-bottom: 1px solid #f1d29b;
    color: #6b3f00;
    display: flex;
    font-weight: 500;
    gap: .6rem;
    justify-content: center;
    margin: 0;
    padding: .75rem var(--gutter);
    text-align: center;
}

.article-figure {
    margin: var(--space-l) auto 0;
    max-width: 62rem;
}

.article-figure picture,
.article-figure img {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    display: block;
    object-fit: cover;
    width: 100%;
}

.article-figure figcaption {
    color: var(--muted);
    font-size: .875rem;
    margin-top: .65rem;
    text-align: right;
}

.article-layout {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
    max-width: 62rem;
    padding-block: var(--space-l) var(--section-space);
}

@media (min-width: 1100px) {
    .article-layout {
        grid-template-columns: 13rem minmax(0, 1fr);
    }
}

.toc {
    align-self: start;
    border-left: 1px solid var(--line);
    padding: .25rem 0 .25rem 0;
}

@media (min-width: 1100px) {
    .toc {
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
    }
}

.toc h2 {
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    margin: 0 0 .75rem 1rem;
    text-transform: uppercase;
}

.toc ol {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc a {
    border-left: 2px solid transparent;
    color: var(--muted);
    display: block;
    font-size: .9rem;
    line-height: 1.4;
    margin-left: -1px;
    padding: .15rem 0 .15rem 1rem;
    text-decoration: none;
    transition: color var(--duration), border-color var(--duration);
}

.toc a:hover,
.toc a.is-current {
    border-left-color: var(--brand);
    color: var(--ink);
}

.article-body {
    font-size: clamp(1.0625rem, 1.03rem + .2vw, 1.125rem);
    line-height: 1.8;
    max-width: 42rem;
}

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

.article-body h2 {
    font-size: clamp(1.45rem, 1.3rem + .7vw, 1.85rem);
    margin: 2.5rem 0 1rem;
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.article-body h3 {
    font-size: 1.25rem;
    margin: 1.75rem 0 .65rem;
}

.article-body p,
.article-body ul,
.article-body ol {
    margin-bottom: 1.25rem;
}

.article-body ul {
    list-style: none;
    padding-left: 0;
}

.article-body ul > li {
    margin-bottom: .55rem;
    padding-left: 1.5rem;
    position: relative;
}

.article-body ul > li::before {
    background: var(--brand);
    border-radius: 50%;
    content: '';
    height: .4rem;
    left: .3rem;
    position: absolute;
    top: .75em;
    width: .4rem;
}

.article-body ol {
    counter-reset: article-step;
    list-style: none;
    padding-left: 0;
}

.article-body ol > li {
    counter-increment: article-step;
    margin-bottom: .75rem;
    padding-left: 2.5rem;
    position: relative;
}

.article-body ol > li::before {
    align-items: center;
    background: var(--brand-tint);
    border-radius: 50%;
    color: var(--brand-deep);
    content: counter(article-step);
    display: flex;
    font-size: .85rem;
    font-weight: 600;
    height: 1.75rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: .2em;
    width: 1.75rem;
}

.article-body blockquote {
    border-left: 3px solid var(--brand);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 2rem 0;
    padding: .25rem 0 .25rem 1.5rem;
}

.article-body blockquote p:last-child {
    margin-bottom: 0;
}

.article-body a {
    font-weight: 500;
}

.article-cta {
    margin-top: 3rem;
}

.article-cta .cta-band {
    grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------- How it works page */
.process-layout {
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .process-layout {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }

    .process-layout__intro {
        align-self: start;
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }
}

.timeline {
    counter-reset: timeline;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.timeline::before {
    background: var(--line);
    bottom: 1.5rem;
    content: '';
    left: 1.25rem;
    position: absolute;
    top: 1.5rem;
    width: 1px;
}

.timeline > li {
    counter-increment: timeline;
    display: grid;
    gap: 0 1.25rem;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-bottom: 1.75rem;
    position: relative;
}

.timeline > li:last-child {
    padding-bottom: 0;
}

.timeline > li::before {
    align-items: center;
    background: var(--white);
    border: 1px solid var(--brand);
    border-radius: 50%;
    color: var(--brand-deep);
    content: counter(timeline);
    display: flex;
    font-size: .9375rem;
    font-weight: 600;
    height: 2.5rem;
    justify-content: center;
    position: relative;
    width: 2.5rem;
    z-index: 1;
}

.timeline__card {
    padding-top: .35rem;
}

.timeline__card h3 {
    font-size: 1.25rem;
    margin: 0 0 .35rem;
}

.timeline__card p {
    color: var(--muted);
    margin: 0;
}

/* ---------------------------------------------------------- Contact page */
.contact-layout {
    align-items: start;
    display: grid;
    gap: clamp(1.75rem, 1.25rem + 2vw, 3rem);
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-l);
}

@media (min-width: 992px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    }
}

/* Contact details, tips and next steps share one soft panel. */
.contact-aside {
    background: var(--surface-soft);
    border-radius: var(--radius-lg);
    display: grid;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.contact-aside .info-card {
    border-top: 1px solid var(--line);
    padding-block: 1.25rem;
}

.contact-aside .info-card:first-child {
    border-top: 0;
    padding-top: 0;
}

.contact-aside .info-card:last-child {
    padding-bottom: 0;
}

.contact-aside .info-card h2 {
    font-size: 1.2rem;
    margin: 0 0 .5rem;
}

.contact-aside .check-list {
    font-size: .975rem;
    gap: .55rem;
}

.contact-method {
    align-items: center;
    display: flex;
    gap: .85rem;
    padding-block: .6rem;
}

.contact-method > div {
    min-width: 0;
}

.contact-method .icon-tile {
    background: var(--white);
    height: 2.5rem;
    width: 2.5rem;
}

.contact-method small {
    color: var(--muted);
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.contact-method a {
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.contact-method a:hover {
    color: var(--brand-ink);
    text-decoration: underline;
}

/* ---------------------------------------------------------- Legal and error */
.legal-copy {
    max-width: 46rem;
    padding-top: var(--space-l);
}

.legal-copy h2 {
    font-size: clamp(1.3rem, 1.2rem + .5vw, 1.6rem);
    margin: 2.25rem 0 .75rem;
}

.legal-copy h2:first-child {
    margin-top: 0;
}

.legal-copy ul {
    padding-left: 1.25rem;
}

.error-page {
    padding-block: var(--section-space);
    text-align: center;
}

.error-page__code {
    color: var(--brand);
    font-family: var(--font-display);
    font-size: clamp(4rem, 3rem + 6vw, 7rem);
    font-stretch: 112%;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1;
    margin-bottom: 1rem;
}

.error-page .lead {
    margin-inline: auto;
    max-width: var(--measure);
}

.error-page .btn-row {
    justify-content: center;
}

/* Text and image split used on About, Our Story, Why Us and How It Works */
.story-split {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .story-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .story-split--reverse > :first-child {
        order: 2;
    }
}

.story-split h2 {
    margin-bottom: 1.1rem;
}

.story-split p:not(.eyebrow) {
    color: var(--muted);
    max-width: var(--measure);
}

.story-photo {
    border-radius: var(--radius-lg);
    margin: 0;
    overflow: hidden;
}

.story-photo picture {
    display: block;
}

.story-photo img {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    width: 100%;
}

.card-grid {
    display: grid;
    gap: 2rem 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.card-grid--three {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.quote-panel {
    border-left: 3px solid var(--brand);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.15rem + .8vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.35;
    margin: 0;
    padding: .25rem 0 .25rem 1.5rem;
}