@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    --ink: #142033;
    --evergreen: #0a1d31;
    --evergreen-deep: #0a1d31;
    --teal: #2563eb;
    --coral: #2563eb;
    --coral-deep: #1d4ed8;
    --cyan: #0891b2;
    --positive: #0f8a72;
    --azure: #0073b5;
    --azure-deep: #005d92;
    --azure-soft: #eef7fb;
    --mint: #eaf0f6;
    --cream: #f4f7fa;
    --paper: #ffffff;
    --white: #ffffff;
    --muted: #5b6978;
    --line: #d7e0e9;
    --shadow: 0 24px 64px rgb(10 29 49 / 12%);
    --shadow-soft: 0 12px 32px rgb(10 29 49 / 8%);
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --shell: 80rem;
    --font: "Instrument Sans", "Avenir Next", Avenir, Helvetica, Arial,
        sans-serif;
}

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

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 4px;
}

::selection {
    background: var(--coral);
    color: var(--evergreen-deep);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    transform: translateY(-180%);
    border-radius: 999px;
    background: var(--white);
    color: var(--evergreen-deep);
    padding: 0.75rem 1rem;
    font-weight: 600;
    box-shadow: var(--shadow-soft);
}

.skip-link:focus {
    transform: translateY(0);
}

.shell {
    width: min(calc(100% - 2rem), var(--shell));
    margin-inline: auto;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.site-header.is-scrolled {
    border-color: rgb(20 63 59 / 10%);
    background: rgb(255 253 248 / 92%);
    box-shadow: 0 8px 28px rgb(23 38 36 / 5%);
    backdrop-filter: blur(14px);
}

.header-inner {
    min-height: 5.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    color: var(--evergreen-deep);
    text-decoration: none;
}

.brand-word {
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1;
}

.brand-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: var(--evergreen);
}

.brand-mark__letter {
    color: var(--white);
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.1em;
    line-height: 1;
    transform: translate(-0.03em, -0.04em);
}

.brand-mark__signal {
    position: absolute;
    right: 0.28rem;
    top: 0.28rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--coral);
}

.brand--light {
    color: var(--white);
}

.brand--light .brand-mark {
    background: var(--white);
}

.brand--light .brand-mark__letter {
    color: var(--evergreen-deep);
}

.primary-navigation {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.1vw, 2rem);
}

.primary-navigation > a:not(.button) {
    border-bottom: 1px solid transparent;
    color: var(--evergreen-deep);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.primary-navigation > a:not(.button):hover {
    border-color: var(--coral);
}

.menu-toggle {
    display: none;
}

.button {
    min-height: 3.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--coral);
    color: var(--evergreen-deep);
    padding: 0.85rem 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgb(238 116 95 / 22%);
    cursor: pointer;
    transition:
        transform 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
    background: #f18471;
    box-shadow: 0 14px 30px rgb(238 116 95 / 28%);
}

.button--small {
    min-height: 2.75rem;
    padding: 0.7rem 1.1rem;
    font-size: 0.88rem;
}

.button--light {
    background: var(--white);
    color: var(--evergreen-deep);
    box-shadow: none;
}

.button--light:hover {
    background: var(--mint);
}

.button--wide {
    width: 100%;
}

.eyebrow {
    margin: 0 0 1rem;
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow--light {
    color: #97d6c8;
}

.hero {
    position: relative;
    min-height: 52rem;
    overflow: hidden;
    background:
        linear-gradient(115deg, var(--cream) 0%, var(--paper) 55%, #ecf6f1 100%);
    padding: 9.5rem 0 6rem;
}

.hero::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 10rem;
    background: linear-gradient(to bottom, transparent, rgb(255 253 248 / 78%));
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.58;
    pointer-events: none;
}

.hero-glow--one {
    width: 29rem;
    height: 29rem;
    right: -8rem;
    top: 4rem;
    background: radial-gradient(circle, #bfe6d9 0%, transparent 68%);
}

.hero-glow--two {
    width: 22rem;
    height: 22rem;
    left: -12rem;
    bottom: -5rem;
    background: radial-gradient(circle, #ffd8cb 0%, transparent 70%);
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
}

.hero-grid > *,
.showcase-grid > * {
    min-width: 0;
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.hero h1,
.section h2 {
    margin: 0;
    color: var(--evergreen-deep);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.96;
}

.hero h1 {
    font-size: clamp(3.1rem, 4.1vw, 4.35rem);
    letter-spacing: -0.055em;
}

.hero h1 span,
.hero h1 em {
    display: block;
    white-space: nowrap;
}

.section h2 {
    font-size: clamp(3rem, 6vw, 5.85rem);
}

.hero h1 em {
    color: var(--teal);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.hero-intro {
    max-width: 37rem;
    margin: 2rem 0 0;
    color: #3c514d;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2.2rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--evergreen-deep);
    font-weight: 600;
    text-decoration-color: rgb(20 63 59 / 34%);
    text-underline-offset: 0.32em;
}

.text-link span {
    color: var(--coral-deep);
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.45rem;
    margin: 2.6rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.hero-points li {
    position: relative;
    padding-left: 1rem;
}

.hero-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--coral);
}

.product-stage {
    position: relative;
    min-height: 36rem;
}

.product-stage::before {
    content: "";
    position: absolute;
    inset: 8% 3% 3% 8%;
    border-radius: 48% 52% 44% 56% / 48% 42% 58% 52%;
    background: var(--mint);
    transform: rotate(-4deg);
}

.browser-frame {
    position: absolute;
    top: 3.5rem;
    right: 0;
    width: 92%;
    aspect-ratio: 1440 / 932;
    overflow: hidden;
    border: 0.55rem solid var(--evergreen-deep);
    border-radius: 1.15rem;
    background: var(--white);
    box-shadow: var(--shadow);
    transform: rotate(1.7deg);
    transition:
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 600ms ease;
}

.browser-frame__bar {
    height: 2.1rem;
    display: flex;
    align-items: center;
    gap: 0.34rem;
    background: var(--evergreen-deep);
    padding: 0 0.6rem;
}

.browser-frame__bar > span {
    width: 0.43rem;
    height: 0.43rem;
    border-radius: 50%;
    background: #72908b;
}

.browser-frame__bar > span:first-child {
    background: var(--coral);
}

.browser-frame > img {
    display: block;
    width: 100%;
    height: calc(100% - 2.1rem);
    object-fit: cover;
    object-position: top;
}

.phone-frame {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: 31%;
    aspect-ratio: 390 / 844;
    overflow: hidden;
    border: 0.48rem solid var(--evergreen-deep);
    border-radius: 2rem;
    background: var(--evergreen-deep);
    box-shadow: var(--shadow);
    transform: rotate(-3deg);
    transition:
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 600ms ease;
}

.phone-frame__speaker {
    position: absolute;
    z-index: 2;
    top: 0.32rem;
    left: 50%;
    width: 35%;
    height: 0.82rem;
    transform: translateX(-50%);
    border-radius: 0 0 0.65rem 0.65rem;
    background: var(--evergreen-deep);
}

.phone-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.stage-note {
    position: absolute;
    z-index: 5;
    border: 1px solid rgb(20 63 59 / 12%);
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    color: var(--evergreen-deep);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.stage-note--top {
    top: 0;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.stage-note__dot {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 0.25rem rgb(238 116 95 / 15%);
}

.stage-note--bottom {
    right: 1rem;
    bottom: 1rem;
    display: grid;
    padding: 0.7rem 1rem;
    font-size: 0.72rem;
}

.stage-note--bottom span {
    color: var(--muted);
    font-size: 0.62rem;
}

.proof-strip {
    position: relative;
    z-index: 4;
    border-block: 1px solid rgb(20 63 59 / 10%);
    background: var(--paper);
}

.proof-grid {
    min-height: 10.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.proof-grid p {
    min-height: 7rem;
    display: grid;
    place-content: center;
    margin: 0;
    border-right: 1px solid var(--line);
    padding: 1.25rem 1.5rem;
    color: var(--evergreen-deep);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.proof-grid p:last-child {
    border-right: 0;
}

.proof-grid span {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--coral-deep);
    font-size: clamp(1.85rem, 2.5vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
}

.section {
    padding: clamp(5rem, 9vw, 8.5rem) 0;
}

.section-heading--split {
    display: grid;
    grid-template-columns: 1.15fr 0.68fr;
    align-items: end;
    gap: clamp(3rem, 8vw, 8rem);
}

.section-heading--benefits {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    gap: clamp(2.5rem, 5vw, 5rem);
}

.section-heading.section-heading--benefits h2 {
    font-size: clamp(2.8rem, 4.4vw, 4rem);
    line-height: 1.05;
}

.section-heading.section-heading--benefits h2 span {
    display: block;
    white-space: nowrap;
}

.section-heading h2,
.showcase-copy h2,
.brand-section-copy h2,
.contact-copy h2 {
    font-size: clamp(2.6rem, 5vw, 4.65rem);
    line-height: 1.02;
}

.section-heading--split > p,
.section-heading--centred > p {
    margin: 0;
    color: var(--muted);
    font-size: 1.12rem;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 4.5rem;
}

.benefit-card {
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.benefit-card--dark {
    background: var(--evergreen-deep);
    color: var(--white);
}

.benefit-card--coral {
    background: var(--coral);
    color: var(--evergreen-deep);
}

.benefit-card--cream {
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--evergreen-deep);
}

.benefit-card .card-number {
    margin-bottom: auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.benefit-card h3 {
    margin: 3rem 0 0.7rem;
    font-size: 1.7rem;
    letter-spacing: -0.035em;
}

.benefit-card p {
    max-width: 24rem;
    margin: 0;
    opacity: 0.84;
}

.section--showcase {
    overflow: hidden;
    background: var(--mint);
}

.showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(4rem, 9vw, 9rem);
}

.large-copy {
    margin: 1.8rem 0 0;
    color: #415652;
    font-size: 1.16rem;
}

.feature-list {
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.feature-list li {
    border-top: 1px solid rgb(20 63 59 / 18%);
    padding: 1rem 0;
    color: #50645f;
}

.feature-list li:last-child {
    border-bottom: 1px solid rgb(20 63 59 / 18%);
}

.feature-list span {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--evergreen-deep);
    font-weight: 600;
}

.mobile-gallery {
    position: relative;
    min-height: 44rem;
}

.mobile-card {
    position: absolute;
    width: min(18.5rem, 46%);
    aspect-ratio: 390 / 844;
    margin: 0;
    overflow: hidden;
    border: 0.55rem solid var(--evergreen-deep);
    border-radius: 2.35rem;
    background: var(--evergreen-deep);
    box-shadow: var(--shadow);
    transition:
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 520ms ease;
}

.mobile-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.mobile-card--back {
    left: 3%;
    top: 2.5rem;
    transform: rotate(-4deg);
}

.mobile-card--front {
    z-index: 2;
    right: 5%;
    top: 0;
    transform: rotate(3deg);
}

.gallery-label {
    position: absolute;
    z-index: 4;
    left: 40%;
    bottom: 1.5rem;
    border-radius: 1rem;
    background: var(--white);
    padding: 0.85rem 1.1rem;
    color: var(--muted);
    box-shadow: var(--shadow-soft);
    font-size: 0.76rem;
}

.gallery-label span {
    display: block;
    color: var(--evergreen-deep);
    font-weight: 600;
}

.resident-tour {
    margin-top: clamp(4.5rem, 9vw, 8rem);
    border-top: 1px solid rgb(20 63 59 / 18%);
    padding-top: clamp(3.5rem, 7vw, 6rem);
}

.tour-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.4rem;
}

.tour-heading > div:first-child {
    max-width: 48rem;
}

.tour-heading h3 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1;
}

.tour-heading > div:first-child > p:last-child {
    max-width: 42rem;
    margin: 1.2rem 0 0;
    color: #50645f;
    font-size: 1.08rem;
}

.tour-actions {
    flex: 0 0 auto;
    text-align: right;
}

.tour-actions > p {
    margin: 0 0 0.6rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.tour-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.tour-controls button {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid rgb(20 63 59 / 18%);
    border-radius: 50%;
    background: var(--white);
    color: var(--evergreen-deep);
    box-shadow: var(--shadow-soft);
    font-size: 1.25rem;
    cursor: pointer;
    transition:
        transform 160ms ease,
        opacity 160ms ease;
}

.tour-controls button:hover:not(:disabled) {
    transform: translateY(-2px);
}

.tour-controls button:disabled {
    opacity: 0.34;
    cursor: default;
}

.screen-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 19.5rem);
    gap: 1.2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-color: rgb(20 63 59 / 34%) transparent;
    scrollbar-width: thin;
    padding: 0.5rem 0.25rem 1.5rem;
}

.screen-rail:focus-visible {
    border-radius: 1rem;
    outline-offset: 0.3rem;
}

.screen-card {
    scroll-snap-align: start;
    margin: 0;
    border: 1px solid rgb(20 63 59 / 12%);
    border-radius: 2rem;
    background: var(--paper);
    padding: 0.9rem;
    box-shadow: var(--shadow-soft);
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 320ms ease,
        box-shadow 320ms ease;
}

.screen-device {
    aspect-ratio: 390 / 844;
    overflow: hidden;
    border: 0.42rem solid var(--evergreen-deep);
    border-radius: 1.75rem;
    background: var(--evergreen-deep);
}

.screen-device img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.screen-card figcaption {
    padding: 1.15rem 0.25rem 0.35rem;
}

.screen-card figcaption span {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--coral-deep);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.screen-card figcaption strong {
    display: block;
    color: var(--evergreen-deep);
    font-size: 1.2rem;
}

.screen-card figcaption p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.section--resident-benefits {
    background: var(--cream);
}

.resident-benefits-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
    align-items: start;
    gap: clamp(4rem, 9vw, 8rem);
}

.resident-benefits-copy h2 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.8rem, 5vw, 4.65rem);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.98;
}

.resident-benefits-note {
    margin: 2.4rem 0 0;
    border-left: 3px solid var(--coral);
    color: #51645f;
    padding-left: 1rem;
    font-size: 0.94rem;
}

.resident-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.resident-benefit {
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(20 63 59 / 12%);
    border-radius: 1.6rem;
    background: var(--white);
    padding: 1.7rem;
    box-shadow: var(--shadow-soft);
}

.resident-benefit > span {
    color: var(--coral-deep);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.resident-benefit h3 {
    margin: auto 0 0.65rem;
    color: var(--evergreen-deep);
    font-size: 1.45rem;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.resident-benefit p {
    margin: 0;
    color: #536762;
}

.section--team {
    background: var(--paper);
}

.section-heading--centred {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

.section-heading--centred > p:last-child {
    max-width: 42rem;
    margin: 1.5rem auto 0;
}

.team-panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    margin-top: 4.5rem;
    overflow: hidden;
    border: 1px solid rgb(20 63 59 / 14%);
    border-radius: 2.4rem;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.team-panel__visual {
    min-height: 35rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgb(238 116 95 / 23%), transparent 32%),
        linear-gradient(145deg, var(--evergreen) 0%, var(--evergreen-deep) 100%);
    padding: 3rem;
}

.admin-preview {
    width: min(100%, 42rem);
    min-height: 25rem;
    display: grid;
    grid-template-columns: 8rem 1fr;
    overflow: hidden;
    border: 0.55rem solid #0a2623;
    border-radius: 1.1rem;
    background: #f2f5f4;
    box-shadow: 0 30px 70px rgb(0 0 0 / 28%);
    transform: rotate(-2deg);
}

.admin-preview__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: #102e2b;
    padding: 1.4rem;
}

.mini-mark {
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1.2rem;
    border: 0.35rem double var(--coral);
    border-radius: 0.85rem;
}

.admin-preview__rail i {
    width: 100%;
    height: 0.62rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 22%);
}

.admin-preview__rail i:nth-child(3) {
    background: var(--coral);
}

.admin-preview__content {
    padding: 2.2rem;
}

.admin-preview__heading {
    width: 42%;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--evergreen);
}

.admin-preview__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-top: 2rem;
}

.admin-preview__stats span {
    height: 5rem;
    border-radius: 0.75rem;
    background: var(--white);
    box-shadow: 0 5px 16px rgb(20 63 59 / 8%);
}

.admin-preview__stats span::before {
    content: "";
    display: block;
    width: 45%;
    height: 0.6rem;
    margin: 1.3rem 1rem;
    border-radius: 999px;
    background: var(--coral);
}

.admin-preview__rows {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.4rem;
}

.admin-preview__rows span {
    height: 1.8rem;
    border-radius: 0.45rem;
    background: var(--white);
}

.team-panel__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.panel-kicker {
    color: var(--coral-deep);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.team-panel h3 {
    margin: 0.5rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.team-panel ul {
    display: grid;
    gap: 0.85rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.team-panel li {
    position: relative;
    padding-left: 1.8rem;
}

.team-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50% 50% 50% 0;
    background: var(--teal);
    transform: rotate(-45deg);
}

.small-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.section--operations {
    overflow: hidden;
    background: #edf5f1;
}

.operations-heading {
    display: grid;
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1.58fr);
    align-items: start;
    gap: clamp(2.5rem, 7vw, 7rem);
}

.operations-heading h2 {
    max-width: 54rem;
    font-size: clamp(3.1rem, 6vw, 5.8rem);
}

.operations-heading .large-copy {
    max-width: 50rem;
}

.operations-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    margin-top: clamp(3rem, 6vw, 5.5rem);
    overflow: hidden;
    border: 1px solid rgb(20 63 59 / 14%);
    border-radius: 2.4rem;
    background: var(--white);
    box-shadow: var(--shadow);
}

.dashboard-shell {
    min-width: 0;
    align-self: center;
    margin: clamp(1.2rem, 4vw, 3rem);
    overflow: hidden;
    border: 0.48rem solid #0a2825;
    border-radius: 1.2rem;
    background: #f1f5f3;
    box-shadow: 0 25px 65px rgb(13 47 43 / 22%);
}

.dashboard-bar {
    min-height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--evergreen-deep);
    color: var(--white);
    padding: 0.8rem 1.1rem;
}

.dashboard-bar > p {
    margin: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    padding: 0.45rem 0.8rem;
    color: rgb(255 255 255 / 74%);
    font-size: 0.72rem;
    font-weight: 600;
}

.dashboard-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.dashboard-identity > span {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 50% 50% 48% 12%;
    font-family: Georgia, serif;
    font-style: italic;
}

.dashboard-identity strong {
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-view {
    min-height: 30rem;
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
}

.dashboard-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-right: 1px solid var(--line);
    background: var(--white);
    padding: 1.4rem 0.85rem;
}

.dashboard-navigation strong,
.dashboard-navigation span {
    display: block;
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.76rem;
}

.dashboard-navigation strong {
    background: var(--mint);
    color: var(--evergreen-deep);
}

.dashboard-navigation span {
    color: var(--muted);
}

.dashboard-content {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.dashboard-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-title span,
.dashboard-title small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-title h3 {
    margin: 0.2rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1.5rem;
}

.dashboard-stats article {
    min-width: 0;
    border: 1px solid rgb(20 63 59 / 10%);
    border-radius: 0.8rem;
    background: var(--white);
    padding: 0.9rem;
    box-shadow: 0 7px 18px rgb(20 63 59 / 6%);
}

.dashboard-stats span,
.dashboard-stats small {
    display: block;
    color: var(--muted);
    font-size: 0.67rem;
}

.dashboard-stats strong {
    display: block;
    margin: 0.25rem 0 0.15rem;
    color: var(--evergreen-deep);
    font-size: 1.35rem;
    line-height: 1.1;
}

.dashboard-review {
    margin-top: 1rem;
    border: 1px solid rgb(20 63 59 / 10%);
    border-radius: 0.8rem;
    background: var(--white);
    padding: 0 0.9rem;
}

.dashboard-review__heading,
.dashboard-review > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-review__heading {
    padding: 0.8rem 0;
    color: var(--muted);
    font-size: 0.67rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-review > p {
    margin: 0;
    border-top: 1px solid var(--line);
    padding: 0.72rem 0;
    color: #4b605c;
    font-size: 0.74rem;
}

.dashboard-review > p span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-review > p i {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--teal);
}

.dashboard-review > p strong {
    color: var(--evergreen-deep);
    font-size: 0.7rem;
}

.dashboard-review > p:last-child strong {
    color: var(--coral-deep);
}

.dashboard-explainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 100% 0%, rgb(238 116 95 / 20%), transparent 35%),
        var(--evergreen-deep);
    color: var(--white);
    padding: clamp(2rem, 5vw, 4rem);
}

.dashboard-explainer h3 {
    margin: 0.45rem 0 0;
    color: var(--white);
    font-size: clamp(2rem, 3.6vw, 3rem);
    letter-spacing: -0.05em;
    line-height: 1.04;
}

.dashboard-explainer ul {
    display: grid;
    gap: 0.9rem;
    margin: 2rem 0;
    padding: 0;
    color: rgb(255 255 255 / 76%);
    list-style: none;
}

.dashboard-explainer li {
    position: relative;
    padding-left: 1.35rem;
}

.dashboard-explainer li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58rem;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--coral);
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.audience-card {
    border-radius: 2.1rem;
    padding: clamp(1.7rem, 4vw, 3.2rem);
}

.audience-card--company {
    border: 1px solid rgb(20 63 59 / 13%);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.audience-card--resident {
    background: var(--coral);
    color: var(--evergreen-deep);
}

.audience-label {
    margin: 0;
    color: var(--coral-deep);
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.audience-card--resident .audience-label {
    color: rgb(11 45 42 / 70%);
}

.audience-card > h3 {
    max-width: 31rem;
    margin: 0.55rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1.04;
}

.audience-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.2rem;
    margin-top: 2.6rem;
}

.audience-points > div {
    border-top: 1px solid rgb(20 63 59 / 18%);
    padding-top: 1rem;
}

.audience-points span {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--coral-deep);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.audience-card--resident .audience-points span {
    color: rgb(11 45 42 / 68%);
}

.audience-points strong {
    display: block;
    color: var(--evergreen-deep);
    font-size: 1.08rem;
}

.audience-points p {
    margin: 0.45rem 0 0;
    color: #536762;
    font-size: 0.9rem;
    line-height: 1.55;
}

.audience-card--resident .audience-points p {
    color: rgb(11 45 42 / 78%);
}

.section--brand {
    position: relative;
    overflow: hidden;
    background: var(--evergreen-deep);
    color: var(--white);
}

.section--brand::after {
    content: "";
    position: absolute;
    right: -12rem;
    top: -14rem;
    width: 34rem;
    height: 34rem;
    border: 8rem solid rgb(151 214 200 / 7%);
    border-radius: 50%;
}

.brand-section-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: clamp(3rem, 9vw, 9rem);
}

.brand-section-copy h2 {
    color: var(--white);
}

.brand-section-copy > p:not(.eyebrow) {
    max-width: 34rem;
    margin: 1.6rem 0 2.2rem;
    color: rgb(255 255 255 / 70%);
    font-size: 1.1rem;
}

.brand-customiser {
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 2rem;
    background: var(--white);
    color: var(--evergreen-deep);
    padding: clamp(1.6rem, 4vw, 3rem);
    box-shadow: 0 30px 80px rgb(0 0 0 / 25%);
}

.brand-customiser__top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.8rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sample-village-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
}

.sample-village-logo__mark {
    width: 3.6rem;
    height: 3.6rem;
    display: grid;
    place-items: center;
    border-radius: 50% 50% 48% 12%;
    background: #173f3a;
    color: var(--white);
    font-family: Georgia, serif;
    font-size: 1.7rem;
    font-style: italic;
}

.sample-village-logo strong,
.sample-village-logo small {
    display: block;
}

.sample-village-logo strong {
    font-size: 1.25rem;
}

.sample-village-logo small {
    margin-top: 0.1rem;
    color: var(--muted);
    font-size: 0.74rem;
}

.colour-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
}

.colour-row span {
    height: 2.4rem;
    border: 1px solid rgb(20 63 59 / 10%);
    border-radius: 0.65rem;
}

.colour-row span:nth-child(1) {
    background: #173f3a;
}

.colour-row span:nth-child(2) {
    background: #bd6b43;
}

.colour-row span:nth-child(3) {
    background: #e7efe7;
}

.colour-row span:nth-child(4) {
    background: #f8f5ee;
}

.customiser-list {
    margin: 2rem 0 0;
}

.customiser-list div {
    display: grid;
    grid-template-columns: 7.2rem 1fr;
    gap: 1rem;
    border-top: 1px solid var(--line);
    padding: 0.8rem 0;
}

.customiser-list dt {
    color: var(--muted);
}

.customiser-list dd {
    margin: 0;
    font-weight: 600;
}

.powered-note {
    margin: 1.2rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
    text-align: right;
}

.powered-note strong {
    color: var(--evergreen-deep);
    letter-spacing: -0.04em;
}

.section--contact {
    background: var(--cream);
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: clamp(3rem, 9vw, 9rem);
}

.contact-detail {
    display: grid;
    gap: 0.2rem;
    margin-top: 2.5rem;
}

.contact-detail span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-detail a {
    width: fit-content;
    color: var(--evergreen-deep);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration-color: var(--coral);
    text-underline-offset: 0.25rem;
}

.contact-reassurance {
    max-width: 30rem;
    margin-top: 2.5rem;
    border-left: 3px solid var(--coral);
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.contact-form {
    border: 1px solid rgb(20 63 59 / 12%);
    border-radius: 2rem;
    background: var(--white);
    padding: clamp(1.4rem, 4vw, 3rem);
    box-shadow: var(--shadow-soft);
}

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

.field {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.field label {
    color: var(--evergreen-deep);
    font-size: 0.88rem;
    font-weight: 600;
}

.field label span {
    color: var(--muted);
    font-weight: 400;
}

.field input,
.field textarea {
    width: 100%;
    border: 1px solid #bfcac6;
    border-radius: 0.75rem;
    background: var(--paper);
    color: var(--ink);
    padding: 0.82rem 0.9rem;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.field input {
    min-height: 3.15rem;
}

.field textarea {
    min-height: 9.5rem;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--teal);
    outline: 0;
    box-shadow: 0 0 0 3px rgb(40 122 112 / 15%);
}

.field--honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    margin: 0.5rem 0 1.4rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.consent input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--teal);
}

.consent a {
    color: var(--evergreen-deep);
    font-weight: 600;
}

.contact-form .recaptcha-notice,
.guide-form .recaptcha-notice {
    width: 100%;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.contact-form .recaptcha-notice {
    margin: 0.65rem auto 0;
}

.guide-form .recaptcha-notice {
    margin: -0.45rem auto 0;
}

.grecaptcha-badge {
    visibility: hidden;
}

.form-status {
    min-height: 1.5rem;
    margin: 0.8rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

.form-status.is-success {
    color: #176256;
}

.form-status.is-error {
    color: #9c3428;
}

.site-footer {
    background: var(--evergreen-deep);
    color: rgb(255 255 255 / 74%);
    padding: 4rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: end;
    gap: 4rem;
}

.footer-grid > div:first-child > p {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.6rem 2rem;
}

.footer-links a,
.footer-meta a {
    color: var(--white);
    font-size: 0.88rem;
    text-decoration-color: rgb(255 255 255 / 25%);
    text-underline-offset: 0.25rem;
}

.footer-meta {
    text-align: right;
}

.footer-meta p {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
}

[data-reveal] {
    opacity: 1;
    transform: none;
}

.motion-ready [data-reveal] {
    opacity: 0;
    filter: blur(0.28rem);
    transform: translate3d(0, 2rem, 0);
    transition:
        opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 720ms ease,
        box-shadow 320ms ease;
    transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal="left"] {
    transform: translate3d(-2.4rem, 0, 0);
}

.motion-ready [data-reveal="right"] {
    transform: translate3d(2.4rem, 0, 0);
}

.motion-ready [data-reveal="scale"] {
    transform: translate3d(0, 1.2rem, 0) scale(0.975);
}

.motion-ready [data-reveal].is-visible,
[data-reveal].is-visible {
    opacity: 1;
    filter: none;
    transform: none;
}

.benefit-card,
.resident-benefit,
.team-panel,
.operations-dashboard,
.dashboard-shell,
.audience-card,
.brand-customiser,
.contact-form {
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 320ms ease,
        box-shadow 320ms ease;
}

.proof-grid span,
.feature-list li {
    transition:
        color 240ms ease,
        padding 240ms ease,
        transform 240ms ease;
}

.contact-form:focus-within {
    border-color: rgb(40 122 112 / 42%);
    box-shadow: 0 22px 54px rgb(17 54 50 / 13%);
}

@media (hover: hover) and (pointer: fine) {
    .product-stage:hover .browser-frame {
        box-shadow: 0 34px 90px rgb(17 54 50 / 18%);
        transform: translate3d(0, -0.35rem, 0) rotate(1deg);
    }

    .product-stage:hover .phone-frame {
        box-shadow: 0 34px 90px rgb(17 54 50 / 20%);
        transform: translate3d(0, -0.7rem, 0) rotate(-2deg);
    }

    .mobile-gallery:hover .mobile-card--back {
        transform: translate3d(-0.35rem, -0.55rem, 0) rotate(-5deg);
    }

    .mobile-gallery:hover .mobile-card--front {
        transform: translate3d(0.35rem, -0.7rem, 0) rotate(4deg);
    }

    .benefit-card:hover,
    .resident-benefit:hover,
    .screen-card:hover,
    .audience-card:hover,
    .brand-customiser:hover {
        border-color: rgb(20 63 59 / 24%);
        box-shadow: 0 22px 55px rgb(17 54 50 / 14%);
        transform: translate3d(0, -0.45rem, 0);
    }

    .screen-card:hover .screen-device img {
        transform: scale(1.018);
    }

    .team-panel:hover,
    .operations-dashboard:hover {
        box-shadow: 0 34px 90px rgb(17 54 50 / 16%);
    }

    .dashboard-shell:hover {
        box-shadow: 0 32px 75px rgb(13 47 43 / 28%);
        transform: translate3d(0, -0.35rem, 0);
    }

    .proof-grid p:hover span {
        color: var(--teal);
        transform: translateY(-0.18rem);
    }

    .feature-list li:hover {
        padding-left: 0.55rem;
    }
}

/* Analytics consent */

.cookie-banner {
    position: fixed;
    z-index: 300;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    left: clamp(1rem, 3vw, 2rem);
    width: min(72rem, calc(100% - clamp(2rem, 6vw, 4rem)));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    margin-inline: auto;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--radius-lg);
    background: var(--evergreen-deep);
    color: var(--white);
    padding: 1.4rem;
    box-shadow: 0 24px 70px rgb(10 29 49 / 30%);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__copy strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.cookie-banner__copy p {
    max-width: 48rem;
    margin: 0;
    color: rgb(255 255 255 / 76%);
    font-size: 0.9rem;
    line-height: 1.55;
}

.cookie-banner__copy a {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--white);
    font-size: 0.82rem;
    text-underline-offset: 0.2rem;
}

.cookie-banner__actions {
    display: flex;
    gap: 0.65rem;
}

.cookie-banner__actions button,
.cookie-settings-button {
    min-height: 2.8rem;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: var(--radius-sm);
    padding: 0.68rem 1rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.cookie-banner__actions button:first-child {
    background: var(--white);
    color: var(--evergreen-deep);
}

.cookie-banner__actions button:last-child {
    border-color: var(--azure);
    background: var(--azure);
    color: var(--white);
}

.footer-links button {
    width: fit-content;
    border: 0;
    background: transparent;
    color: var(--white);
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    text-decoration: underline;
    text-decoration-color: rgb(255 255 255 / 25%);
    text-underline-offset: 0.25rem;
    cursor: pointer;
}

.cookie-settings-button {
    border-color: var(--line);
    background: var(--white);
    color: var(--evergreen-deep);
}

.cookie-banner__actions button:focus-visible,
.footer-links button:focus-visible,
.cookie-settings-button:focus-visible {
    outline: 3px solid #7dd3fc;
    outline-offset: 3px;
}

@media (max-width: 48rem) {
    .cookie-banner {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .cookie-banner__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* Faded homepage hero video */

.hero-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: var(--cream);
    pointer-events: none;
}

.hero-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(255 253 248 / 78%) 0%, rgb(255 253 248 / 56%) 52%, rgb(255 253 248 / 40%) 100%),
        linear-gradient(to bottom, rgb(255 253 248 / 10%), rgb(255 253 248 / 28%));
}

.hero-background__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 45%;
    filter: saturate(0.78) contrast(0.94);
}

.hero-grid {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-background {
        display: none;
    }
}

/* Keep product principles aligned when a label wraps */

.proof-grid {
    align-items: stretch;
}

.proof-grid p {
    height: 100%;
}

/* Community configuration card */

.deployment-card__intro {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 0 1.5rem;
}

.deployment-card__mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 1rem;
    background: var(--evergreen-deep);
    color: var(--white);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
}

.deployment-card__intro small,
.deployment-card__intro strong {
    display: block;
}

.deployment-card__intro small {
    margin-bottom: 0.2rem;
    color: var(--teal);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.deployment-card__intro strong {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    letter-spacing: -0.035em;
}

.deployment-card__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.deployment-card__list li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 5.25rem;
    border-bottom: 1px solid var(--line);
    padding: 0.9rem 0;
}

.deployment-card__list li > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid #c9d8e7;
    border-radius: 0.7rem;
    background: #eaf0f6;
    color: var(--teal);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.deployment-card__list strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 1rem;
}

.deployment-card__list p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.deployment-card__footer {
    margin: 1.4rem 0 0;
    color: var(--evergreen-deep);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.015em;
    text-align: right;
}

@media (max-width: 42rem) {
    .deployment-card__intro {
        padding-top: 1.4rem;
    }

    .deployment-card__list li {
        min-height: 0;
    }

    .deployment-card__footer {
        text-align: left;
    }
}

.legal-page {
    min-height: 100vh;
    background: var(--cream);
    padding: 8rem 0 5rem;
}

.legal-card {
    max-width: 52rem;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 2rem;
    background: var(--white);
    padding: clamp(1.5rem, 5vw, 4rem);
    box-shadow: var(--shadow-soft);
}

.legal-card h1 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: -0.055em;
    line-height: 1;
}

.legal-card h2 {
    margin: 2.4rem 0 0.7rem;
    color: var(--evergreen-deep);
    font-size: 1.35rem;
}

.legal-card p,
.legal-card li {
    color: #4b605c;
}

.legal-card .legal-updated {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.legal-back {
    display: inline-block;
    margin-bottom: 2rem;
    color: var(--evergreen-deep);
    font-weight: 600;
    text-underline-offset: 0.3rem;
}

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

    .hero-copy {
        max-width: 46rem;
    }

    .product-stage {
        min-height: 39rem;
    }

    .browser-frame {
        width: 88%;
    }

    .phone-frame {
        width: 24%;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .showcase-copy {
        max-width: 44rem;
    }

    .mobile-gallery {
        width: min(100%, 44rem);
        margin-inline: auto;
    }

    .section-heading--benefits {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .resident-benefits-grid {
        grid-template-columns: 1fr;
    }

    .resident-benefits-copy {
        max-width: 46rem;
    }

    .operations-heading,
    .operations-dashboard,
    .audience-grid {
        grid-template-columns: 1fr;
    }

    .operations-heading {
        gap: 1.5rem;
    }

    .operations-heading > p {
        margin-bottom: 0;
    }

    .dashboard-explainer {
        min-height: 30rem;
    }
}

@media (max-width: 70rem) {
    .menu-toggle {
        position: relative;
        z-index: 102;
        width: 3rem;
        height: 3rem;
        display: grid;
        place-content: center;
        gap: 0.4rem;
        border: 0;
        border-radius: 50%;
        background: var(--white);
        color: var(--evergreen-deep);
        box-shadow: var(--shadow-soft);
        cursor: pointer;
    }

    .menu-toggle span:not(.sr-only) {
        width: 1.25rem;
        height: 2px;
        display: block;
        background: currentColor;
        transition: transform 160ms ease;
    }

    .menu-toggle[aria-expanded="true"] span:nth-of-type(2) {
        transform: translateY(0.2rem) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-of-type(3) {
        transform: translateY(-0.2rem) rotate(-45deg);
    }

    .primary-navigation {
        position: fixed;
        inset: 0;
        z-index: 101;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        background: var(--evergreen-deep);
        padding: 5.5rem 1.5rem 2rem;
    }

    .primary-navigation.is-open {
        display: flex;
    }

    .primary-navigation > a:not(.button) {
        color: var(--white);
        font-size: 1.5rem;
        text-align: center;
    }

    .primary-navigation .button {
        margin-top: 1rem;
    }

    body.menu-open {
        overflow: hidden;
    }

    .section-heading--split,
    .team-panel,
    .brand-section-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .section-heading--split {
        gap: 1.5rem;
    }

    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        min-height: 15rem;
    }

    .team-panel__visual {
        min-height: 28rem;
    }

    .brand-section-grid {
        gap: 4rem;
    }

    .contact-copy {
        max-width: 44rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-meta {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (max-width: 42rem) {
    .shell {
        width: min(calc(100% - 1.25rem), var(--shell));
    }

    .header-inner {
        min-height: 4.5rem;
    }

    .brand-word {
        font-size: 1.4rem;
    }

    .brand-mark {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
    }

    .brand-mark__letter {
        font-size: 1.5rem;
    }

    .brand-mark__signal {
        right: 0.26rem;
        top: 0.26rem;
        width: 0.36rem;
        height: 0.36rem;
    }

    .hero {
        min-height: 0;
        padding: 7.5rem 0 4.5rem;
    }

    .hero h1 {
        font-size: clamp(2.45rem, 11.5vw, 3.2rem);
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .text-link {
        justify-content: center;
    }

    .hero-points {
        gap: 0.5rem 1rem;
        font-size: 0.82rem;
    }

    .product-stage {
        min-height: 27rem;
        margin-top: 1rem;
    }

    .browser-frame {
        top: 3.2rem;
        right: -8%;
        width: 103%;
    }

    .phone-frame {
        left: -1%;
        width: 35%;
        border-width: 0.32rem;
        border-radius: 1.25rem;
    }

    .phone-frame__speaker {
        top: 0.2rem;
        height: 0.52rem;
    }

    .stage-note--top {
        right: 0;
    }

    .stage-note--bottom {
        display: none;
    }

    .proof-grid {
        grid-template-columns: repeat(2, 1fr);
        padding-block: 0.75rem;
    }

    .proof-grid p {
        min-height: 7.5rem;
        padding: 1rem 0.65rem;
        font-size: 0.86rem;
    }

    .proof-grid p:nth-child(2) {
        border-right: 0;
    }

    .proof-grid p:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .proof-grid span {
        margin-bottom: 0.5rem;
        font-size: 1.75rem;
    }

    .section {
        padding: 5rem 0;
    }

    .section-heading h2,
    .showcase-copy h2,
    .brand-section-copy h2,
    .contact-copy h2 {
        font-size: clamp(2.45rem, 12vw, 3.5rem);
    }

    .section-heading.section-heading--benefits h2 span {
        white-space: normal;
    }

    .benefit-grid {
        margin-top: 2.5rem;
    }

    .benefit-card {
        border-radius: 1.5rem;
        padding: 1.5rem;
    }

    .mobile-gallery {
        min-height: 31rem;
    }

    .mobile-card {
        width: 48%;
        border-width: 0.38rem;
        border-radius: 1.55rem;
    }

    .gallery-label {
        left: 25%;
        bottom: 0;
    }

    .tour-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tour-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .tour-actions > p {
        margin: 0;
    }

    .screen-rail {
        grid-auto-columns: min(82vw, 18rem);
        margin-right: -0.4rem;
    }

    .screen-card {
        border-radius: 1.55rem;
        padding: 0.7rem;
    }

    .screen-device {
        border-width: 0.34rem;
        border-radius: 1.35rem;
    }

    .resident-benefit-list {
        grid-template-columns: 1fr;
    }

    .resident-benefit {
        min-height: 13.5rem;
    }

    .team-panel {
        border-radius: 1.6rem;
    }

    .team-panel__visual {
        min-height: 22rem;
        padding: 1.2rem;
    }

    .admin-preview {
        min-height: 18rem;
        grid-template-columns: 4.5rem 1fr;
    }

    .admin-preview__rail {
        padding: 1rem 0.7rem;
    }

    .admin-preview__content {
        padding: 1.3rem;
    }

    .admin-preview__stats span {
        height: 3.6rem;
    }

    .operations-dashboard,
    .audience-card {
        border-radius: 1.6rem;
    }

    .dashboard-shell {
        margin: 0.8rem;
        border-width: 0.34rem;
    }

    .dashboard-bar {
        min-height: 3.8rem;
    }

    .dashboard-bar > p {
        display: none;
    }

    .dashboard-view {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .dashboard-navigation {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 0.65rem;
    }

    .dashboard-navigation strong,
    .dashboard-navigation span {
        flex: 0 0 auto;
    }

    .dashboard-title small {
        display: none;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-stats article {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0 0.8rem;
    }

    .dashboard-stats strong {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .dashboard-explainer {
        min-height: 0;
    }

    .audience-points {
        grid-template-columns: 1fr;
        margin-top: 2rem;
    }

    .team-panel__copy,
    .brand-customiser,
    .contact-form {
        padding: 1.4rem;
    }

    .customiser-list div {
        grid-template-columns: 6.8rem 1fr;
        font-size: 0.85rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-meta {
        grid-column: auto;
    }
}

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

    .motion-ready [data-reveal],
    [data-reveal] {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .product-stage:hover .browser-frame {
        transform: rotate(1.7deg);
    }

    .product-stage:hover .phone-frame {
        transform: rotate(-3deg);
    }

    .mobile-gallery:hover .mobile-card--back {
        transform: rotate(-4deg);
    }

    .mobile-gallery:hover .mobile-card--front {
        transform: rotate(3deg);
    }

    .benefit-card:hover,
    .resident-benefit:hover,
    .screen-card:hover,
    .audience-card:hover,
    .brand-customiser:hover,
    .dashboard-shell:hover,
    .proof-grid p:hover span {
        transform: none;
    }

}

@media print {
    .site-header,
    .site-footer,
    .hero-actions,
    .contact-form {
        display: none;
    }

    body,
    .hero,
    .section {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Enterprise presentation */

body {
    background: var(--white);
    color: var(--ink);
    line-height: 1.55;
}

.shell {
    width: min(calc(100% - 4rem), var(--shell));
}

.site-header,
.site-header.is-scrolled {
    border-bottom: 1px solid var(--line);
    background: rgb(255 255 255 / 96%);
    box-shadow: none;
    backdrop-filter: blur(16px);
}

.site-header.is-scrolled {
    box-shadow: 0 8px 24px rgb(10 29 49 / 5%);
}

.header-inner {
    min-height: 5rem;
}

.brand {
    gap: 0.7rem;
}

.brand-word {
    color: var(--evergreen-deep);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.brand-mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
    background: var(--evergreen-deep);
}

.brand-mark__letter {
    font-size: 1.5rem;
    transform: translate(-0.02em, -0.03em);
}

.brand-mark__signal {
    right: 0.3rem;
    top: 0.3rem;
    width: 0.38rem;
    height: 0.38rem;
    background: var(--teal);
}

.brand--light .brand-word {
    color: var(--white);
}

.brand--light .brand-mark {
    border-radius: 0.65rem;
}

.primary-navigation {
    gap: clamp(1rem, 2vw, 2rem);
}

.primary-navigation > a:not(.button) {
    border: 0;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 160ms ease;
}

.primary-navigation > a:not(.button):hover {
    color: var(--teal);
}

.button {
    min-height: 3.25rem;
    border-radius: 0.5rem;
    background: var(--teal);
    color: var(--white);
    padding: 0.82rem 1.35rem;
    font-weight: 600;
    box-shadow: none;
}

.button:hover {
    transform: translateY(-1px);
    background: var(--coral-deep);
    box-shadow: 0 10px 24px rgb(37 99 235 / 16%);
}

.button--small {
    min-height: 2.75rem;
    padding: 0.68rem 1rem;
}

.button--light {
    background: var(--white);
    color: var(--evergreen-deep);
}

.button--light:hover {
    background: var(--mint);
}

.eyebrow {
    margin-bottom: 1.15rem;
    color: var(--teal);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}

.eyebrow--light {
    color: #67e8f9;
}

.hero {
    min-height: 52rem;
    background: var(--cream);
    padding: 10.5rem 0 7rem;
}

.hero::before,
.hero-glow,
.product-stage::before {
    display: none;
}

.hero-grid {
    grid-template-columns: minmax(35rem, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3.5rem, 5vw, 5rem);
}

.hero h1,
.section h2,
.tour-heading h3,
.resident-benefits-copy h2,
.team-panel h3,
.dashboard-explainer h3,
.audience-card > h3 {
    font-family: var(--font);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.048em;
    text-wrap: balance;
}

.hero h1 {
    max-width: none;
    color: var(--evergreen-deep);
    font-size: clamp(3.7rem, 4.7vw, 4.35rem);
    line-height: 1.04;
}

.hero h1 span,
.hero h1 .hero-line-secondary {
    display: block;
    color: inherit;
    font-family: inherit;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.phrase-line {
    display: block;
    white-space: nowrap;
}

.hero-intro {
    max-width: 35rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: 1.17rem;
    line-height: 1.62;
}

.hero-actions {
    margin-top: 2.25rem;
}

.text-link {
    color: var(--evergreen-deep);
    text-decoration-color: rgb(37 99 235 / 40%);
}

.text-link span {
    color: var(--teal);
}

.hero-points {
    margin-top: 2.5rem;
    color: var(--muted);
}

.hero-points li::before {
    border-radius: 2px;
    background: var(--teal);
}

.product-stage {
    min-height: 34rem;
}

.browser-frame {
    top: 3.3rem;
    width: 94%;
    aspect-ratio: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    transform: none;
}

.browser-frame__bar {
    height: 2.35rem;
    background: var(--evergreen-deep);
    padding-inline: 0.85rem;
}

.browser-frame__bar > span {
    background: rgb(255 255 255 / 18%);
}

.browser-frame__bar > span:first-child {
    background: var(--teal);
}

.browser-frame > img {
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 932;
    object-fit: contain;
    object-position: top;
}

.phone-frame {
    left: -1.5rem;
    bottom: -0.75rem;
    width: 30%;
    aspect-ratio: auto;
    border: 0.42rem solid var(--evergreen-deep);
    border-radius: 1.7rem;
    box-shadow: 0 24px 54px rgb(10 29 49 / 20%);
    transform: none;
}

.phone-frame img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top;
}

.phone-frame__speaker {
    background: var(--evergreen-deep);
}

.stage-note {
    border-color: var(--line);
    border-radius: 0.6rem;
    color: var(--evergreen-deep);
    box-shadow: 0 10px 26px rgb(10 29 49 / 8%);
}

.stage-note--top {
    right: 0;
}

.stage-note__dot {
    border-radius: 2px;
    background: var(--teal);
    box-shadow: 0 0 0 0.22rem rgb(37 99 235 / 12%);
}

.stage-note--bottom {
    border-radius: 0.6rem;
}

.proof-strip {
    border-color: var(--line);
    background: var(--white);
}

.proof-grid {
    min-height: 9.25rem;
}

.proof-grid p {
    min-height: 6.5rem;
    display: block;
    border-color: var(--line);
    padding: 1.25rem 2rem;
    color: var(--evergreen-deep);
    font-size: 0.98rem;
    font-weight: 600;
    text-align: left;
}

.proof-grid span {
    margin-bottom: 0.75rem;
    color: var(--teal);
    font-size: clamp(2rem, 2.7vw, 2.45rem);
    font-weight: 600;
    letter-spacing: -0.045em;
}

.section {
    padding: clamp(6.5rem, 9vw, 8rem) 0;
}

.section h2 {
    font-size: clamp(3rem, 4.3vw, 3.65rem);
    line-height: 1.04;
}

.section-heading--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.65fr);
    gap: clamp(3rem, 7vw, 7rem);
}

.section-heading--benefits {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.65fr);
}

.section-heading.section-heading--benefits h2,
.section-heading h2,
.showcase-copy h2,
.brand-section-copy h2,
.contact-copy h2 {
    font-size: clamp(3rem, 4.3vw, 3.65rem);
    line-height: 1.04;
}

.section-heading--split > p,
.section-heading--centred > p,
.large-copy {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.benefit-grid {
    gap: 1.25rem;
    margin-top: 4rem;
}

.benefit-card {
    min-height: 19rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-soft);
}

.benefit-card--dark,
.benefit-card--coral {
    background: var(--white);
    color: var(--evergreen-deep);
}

.benefit-card--cream {
    border-color: var(--evergreen-deep);
    background: var(--evergreen-deep);
    color: var(--white);
}

.benefit-card .card-number {
    color: var(--teal);
}

.benefit-card--cream .card-number {
    color: #67e8f9;
}

.benefit-card h3 {
    margin-top: 3rem;
    font-size: 1.65rem;
}

.section--showcase {
    background: var(--mint);
}

.showcase-grid {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: clamp(4rem, 8vw, 8rem);
}

.feature-list li {
    border-color: var(--line);
    color: var(--muted);
    padding: 1.1rem 0;
}

.feature-list span {
    color: var(--evergreen-deep);
}

.mobile-gallery {
    min-height: 43rem;
}

.mobile-card {
    width: min(18.25rem, 46%);
    aspect-ratio: auto;
    border: 0.45rem solid var(--evergreen-deep);
    border-radius: 2rem;
    box-shadow: var(--shadow);
    transform: none;
}

.mobile-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top;
}

.mobile-card--back {
    left: 1%;
    top: 0;
    transform: none;
}

.mobile-card--front {
    right: 2%;
    top: 2.5rem;
    transform: none;
}

.gallery-label {
    left: 50%;
    bottom: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    box-shadow: var(--shadow-soft);
    transform: translateX(-50%);
}

.resident-tour {
    border-color: rgb(10 29 49 / 14%);
}

.tour-heading h3 {
    max-width: 48rem;
    font-size: clamp(2.8rem, 4vw, 3.45rem);
    line-height: 1.05;
}

.tour-heading > div:first-child > p:last-child {
    color: var(--muted);
}

.tour-controls button {
    border-color: var(--line);
    border-radius: 0.65rem;
    box-shadow: none;
}

.screen-rail {
    grid-auto-columns: minmax(17.5rem, 19rem);
    gap: 1.25rem;
    scrollbar-color: rgb(37 99 235 / 35%) transparent;
}

.screen-card {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: 0.8rem;
    box-shadow: 0 8px 24px rgb(10 29 49 / 7%);
}

.screen-device {
    aspect-ratio: auto;
    border: 0.38rem solid var(--evergreen-deep);
    border-radius: 1.5rem;
}

.screen-device img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top;
}

.screen-card figcaption span {
    color: var(--teal);
}

.screen-card figcaption p {
    color: var(--muted);
}

.section--resident-benefits {
    background: var(--white);
}

.resident-benefits-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(4rem, 8vw, 7rem);
}

.resident-benefits-copy h2 {
    font-size: clamp(3rem, 4.3vw, 3.65rem);
    line-height: 1.04;
}

.resident-benefits-note {
    border-color: var(--teal);
    color: var(--muted);
}

.resident-benefit-list {
    gap: 1.25rem;
}

.resident-benefit {
    min-height: 16rem;
    border-color: var(--line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    box-shadow: none;
}

.resident-benefit > span {
    color: var(--teal);
}

.resident-benefit h3 {
    font-size: 1.2rem;
}

.resident-benefit p {
    color: var(--muted);
}

.section--team {
    background: var(--cream);
}

.section-heading--centred {
    max-width: 64rem;
}

.section-heading--centred > p:last-child {
    max-width: 47rem;
}

.team-panel {
    grid-template-columns: 1.12fr 0.88fr;
    margin-top: 4rem;
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.team-panel__visual {
    min-height: 34rem;
    background: var(--evergreen-deep);
    padding: 3.25rem;
}

.admin-preview {
    border: 0.3rem solid #071829;
    border-radius: var(--radius-md);
    background: var(--cream);
    box-shadow: 0 24px 54px rgb(0 0 0 / 22%);
    transform: none;
}

.admin-preview__rail {
    background: #071829;
}

.mini-mark {
    border-color: var(--teal);
    border-radius: 0.5rem;
}

.admin-preview__rail i {
    border-radius: 2px;
}

.admin-preview__rail i:nth-child(3),
.admin-preview__stats span::before {
    background: var(--teal);
}

.admin-preview__stats span,
.admin-preview__rows span {
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    box-shadow: none;
}

.team-panel h3 {
    font-size: clamp(2.2rem, 3.1vw, 2.75rem);
}

.team-panel li::before {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    background: var(--teal);
    transform: none;
}

.section--operations {
    background: var(--white);
}

.operations-heading {
    gap: clamp(3rem, 7vw, 7rem);
}

.operations-heading h2 {
    max-width: 58rem;
    font-size: clamp(3rem, 4.3vw, 3.65rem);
    line-height: 1.04;
}

.operations-dashboard {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.dashboard-shell {
    border: 0.3rem solid var(--evergreen-deep);
    border-radius: var(--radius-md);
    background: var(--cream);
    box-shadow: 0 18px 42px rgb(10 29 49 / 14%);
}

.dashboard-bar > p {
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 0.4rem;
    background: transparent;
}

.dashboard-identity > span {
    border-radius: 0.45rem;
    font-family: var(--font);
    font-style: normal;
    font-weight: 600;
}

.dashboard-navigation strong,
.dashboard-navigation span {
    border-radius: 0.4rem;
}

.dashboard-stats article,
.dashboard-review {
    border-color: var(--line);
    border-radius: 0.55rem;
    box-shadow: none;
}

.dashboard-review > p {
    color: var(--muted);
}

.dashboard-review > p i {
    background: var(--positive);
}

.dashboard-review > p:last-child strong {
    color: var(--teal);
}

.dashboard-explainer {
    background: var(--evergreen-deep);
}

.dashboard-explainer h3 {
    font-size: clamp(2rem, 2.7vw, 2.35rem);
}

.dashboard-explainer ul {
    color: rgb(255 255 255 / 76%);
}

.dashboard-explainer li::before {
    border-radius: 2px;
    background: var(--teal);
}

.audience-grid {
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.audience-card {
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3.25rem);
}

.audience-card--company {
    border-color: var(--line);
    box-shadow: none;
}

.audience-card--resident {
    background: var(--teal);
    color: var(--white);
}

.audience-label,
.audience-points span {
    color: var(--teal);
}

.audience-card--resident .audience-label,
.audience-card--resident .audience-points span {
    color: rgb(255 255 255 / 68%);
}

.audience-card > h3 {
    font-size: clamp(2.25rem, 3.2vw, 2.85rem);
}

.audience-card--resident > h3,
.audience-card--resident .audience-points strong {
    color: var(--white);
}

.audience-points > div {
    border-color: var(--line);
}

.audience-card--resident .audience-points > div {
    border-color: rgb(255 255 255 / 24%);
}

.audience-points p {
    color: var(--muted);
}

.audience-card--resident .audience-points p {
    color: rgb(255 255 255 / 78%);
}

.section--brand {
    background: var(--evergreen-deep);
}

.section--brand::after {
    display: none;
}

.brand-section-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(4rem, 8vw, 8rem);
}

.brand-section-copy > p:not(.eyebrow) {
    color: rgb(255 255 255 / 70%);
    line-height: 1.65;
}

.brand-customiser {
    border-color: rgb(255 255 255 / 16%);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 54px rgb(0 0 0 / 20%);
}

.brand-customiser__top {
    border-color: var(--line);
}

.section--contact {
    background: var(--cream);
}

.contact-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(4rem, 8vw, 8rem);
}

.contact-copy h2 {
    font-size: clamp(3rem, 3.9vw, 3.3rem);
}

.contact-detail a {
    color: var(--evergreen-deep);
    text-decoration-color: var(--teal);
}

.contact-reassurance {
    border-color: var(--teal);
}

.contact-form {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.field input,
.field textarea {
    border-color: #b8c5d2;
    border-radius: 0.45rem;
    background: var(--white);
}

.field input:focus,
.field textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 14%);
}

.consent input {
    accent-color: var(--teal);
}

.form-status.is-success {
    color: var(--positive);
}

.form-status.is-error {
    color: #b42318;
}

.site-footer {
    background: var(--evergreen-deep);
    color: rgb(255 255 255 / 68%);
    padding: 5rem 0;
}

.footer-grid {
    align-items: start;
}

.legal-page {
    background: var(--cream);
}

.legal-card {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.legal-card p,
.legal-card li {
    color: var(--muted);
}

.motion-ready [data-reveal] {
    filter: none;
    transform: translate3d(0, 1.25rem, 0);
    transition:
        opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .product-stage:hover .browser-frame,
    .product-stage:hover .phone-frame,
    .mobile-gallery:hover .mobile-card--back,
    .mobile-gallery:hover .mobile-card--front {
        transform: translate3d(0, -0.25rem, 0);
    }

    .benefit-card:hover,
    .resident-benefit:hover,
    .screen-card:hover,
    .audience-card:hover,
    .brand-customiser:hover {
        border-color: #b8c5d2;
        box-shadow: 0 14px 34px rgb(10 29 49 / 10%);
        transform: translate3d(0, -0.2rem, 0);
    }

    .screen-card:hover .screen-device img {
        transform: none;
    }

    .team-panel:hover,
    .operations-dashboard:hover,
    .dashboard-shell:hover {
        box-shadow: var(--shadow-soft);
        transform: none;
    }
}

@media (max-width: 72rem) {
    .hero-grid,
    .showcase-grid,
    .resident-benefits-grid,
    .operations-heading,
    .operations-dashboard,
    .brand-section-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy,
    .showcase-copy,
    .resident-benefits-copy,
    .contact-copy {
        max-width: 46rem;
    }

    .product-stage {
        min-height: 41rem;
    }

    .browser-frame {
        width: 90%;
    }

    .phone-frame {
        left: 0;
        width: 24%;
    }

    .showcase-grid,
    .resident-benefits-grid,
    .brand-section-grid,
    .contact-grid {
        gap: 4.5rem;
    }

    .mobile-gallery {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .operations-heading {
        gap: 1.5rem;
    }

    .dashboard-explainer {
        min-height: 28rem;
    }
}

@media (max-width: 70rem) {
    .primary-navigation {
        background: var(--evergreen-deep);
    }

    .primary-navigation > a:not(.button) {
        color: var(--white);
    }

    .section-heading--split,
    .team-panel,
    .audience-grid,
    .brand-section-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .section-heading--split {
        gap: 1.5rem;
    }

    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        min-height: 15rem;
    }

    .team-panel__visual {
        min-height: 29rem;
    }
}

@media (max-width: 42rem) {
    .shell {
        width: min(calc(100% - 1.5rem), var(--shell));
    }

    .header-inner {
        min-height: 4.5rem;
    }

    .brand-mark {
        width: 2.2rem;
        height: 2.2rem;
    }

    .hero {
        min-height: 0;
        padding: 7.5rem 0 5rem;
    }

    .hero h1 {
        font-size: clamp(2.6rem, 11.8vw, 3.2rem);
    }

    .hero h1 span,
    .hero h1 .hero-line-secondary,
    .phrase-line {
        white-space: normal;
    }

    .hero-intro {
        font-size: 1.05rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .product-stage {
        min-height: 27rem;
        margin-top: 1.5rem;
    }

    .browser-frame {
        top: 3.25rem;
        right: -6%;
        width: 104%;
    }

    .phone-frame {
        left: -1%;
        width: 36%;
        border-width: 0.3rem;
        border-radius: 1.2rem;
    }

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

    .proof-grid p {
        min-height: 7.25rem;
        padding: 1rem;
        font-size: 0.84rem;
    }

    .proof-grid p:nth-child(2) {
        border-right: 0;
    }

    .proof-grid p:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .section {
        padding: 5rem 0;
    }

    .section h2,
    .section-heading.section-heading--benefits h2,
    .section-heading h2,
    .showcase-copy h2,
    .resident-benefits-copy h2,
    .brand-section-copy h2,
    .contact-copy h2 {
        font-size: clamp(2.35rem, 11vw, 3rem);
    }

    .section-heading.section-heading--benefits h2 span {
        white-space: normal;
    }

    .mobile-gallery {
        min-height: 31rem;
    }

    .mobile-card {
        width: 48%;
        border-width: 0.34rem;
        border-radius: 1.4rem;
    }

    .gallery-label {
        width: max-content;
        max-width: 80%;
    }

    .tour-heading h3 {
        font-size: clamp(2.25rem, 10vw, 2.85rem);
    }

    .screen-rail {
        grid-auto-columns: min(82vw, 18rem);
    }

    .resident-benefit-list,
    .audience-points,
    .form-row {
        grid-template-columns: 1fr;
    }

    .resident-benefit {
        min-height: 13.5rem;
    }

    .team-panel__visual {
        min-height: 22rem;
        padding: 1.25rem;
    }

    .admin-preview {
        min-height: 18rem;
        grid-template-columns: 4.5rem 1fr;
    }

    .dashboard-shell {
        margin: 0.8rem;
    }

    .dashboard-view {
        grid-template-columns: 1fr;
    }

    .dashboard-navigation {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .dashboard-navigation strong,
    .dashboard-navigation span {
        flex: 0 0 auto;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-explainer,
    .audience-card,
    .brand-customiser,
    .contact-form {
        padding: 1.5rem;
    }

    .customiser-list div {
        grid-template-columns: 6.8rem 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-stage:hover .browser-frame,
    .product-stage:hover .phone-frame,
    .mobile-gallery:hover .mobile-card--back,
    .mobile-gallery:hover .mobile-card--front,
    .benefit-card:hover,
    .resident-benefit:hover,
    .screen-card:hover,
    .audience-card:hover,
    .brand-customiser:hover {
        transform: none;
    }
}

/* Why an app page */

.primary-navigation > a[aria-current="page"] {
    border-color: var(--teal);
    color: var(--evergreen-deep);
}

.why-page {
    background: var(--white);
}

.why-hero {
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    padding: 10rem 0 6.5rem;
}

.why-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(22rem, 0.82fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.why-hero__copy {
    max-width: 48rem;
}

.why-kicker {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 600;
}

.why-hero h1 {
    max-width: 46rem;
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(3.6rem, 5.8vw, 5.8rem);
    font-weight: 600;
    letter-spacing: -0.067em;
    line-height: 0.98;
}

.why-hero__intro {
    max-width: 45rem;
    margin-top: 2.25rem;
}

.why-hero__intro p {
    margin: 0;
    color: var(--muted);
    font-size: 1.14rem;
    line-height: 1.75;
}

.why-hero__intro p + p {
    margin-top: 1.25rem;
}

.why-hero__intro .why-lead {
    border-left: 3px solid var(--teal);
    color: var(--evergreen-deep);
    padding: 0.35rem 0 0.35rem 1.35rem;
    font-size: 1.24rem;
    line-height: 1.55;
}

.why-product-preview {
    position: relative;
    min-height: 40rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #cbd7e3;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(rgb(255 255 255 / 22%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 22%) 1px, transparent 1px),
        linear-gradient(145deg, #eaf0f6, #dce6f0);
    background-size: 3rem 3rem, 3rem 3rem, auto;
}

.why-product-preview::before,
.why-product-preview::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: var(--teal);
}

.why-product-preview::before {
    width: 16rem;
    height: 1rem;
    right: -4rem;
    top: 4rem;
    transform: rotate(-20deg);
}

.why-product-preview::after {
    width: 10rem;
    height: 0.6rem;
    left: -2rem;
    bottom: 5rem;
    background: var(--cyan);
    transform: rotate(-20deg);
}

.why-phone-frame {
    position: relative;
    z-index: 1;
    width: min(18rem, 68%);
    overflow: hidden;
    border: 0.7rem solid var(--evergreen-deep);
    border-radius: 2.8rem;
    background: var(--evergreen-deep);
    box-shadow: 0 28px 60px rgb(10 29 49 / 24%);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.why-product-preview:hover .why-phone-frame {
    transform: translateY(-0.35rem);
    box-shadow: 0 34px 72px rgb(10 29 49 / 28%);
}

.why-phone-frame__speaker {
    position: absolute;
    z-index: 2;
    top: 0.45rem;
    left: 50%;
    width: 4.8rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--evergreen-deep);
    transform: translateX(-50%);
}

.why-phone-frame img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.why-article {
    background: var(--white);
    padding: 6.5rem 0 8rem;
}

.why-accordions {
    max-width: 76rem;
}

.why-accordion {
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 10px 28px rgb(10 29 49 / 5%);
}

.why-accordion.is-animating {
    will-change: height;
}

.why-accordion + .why-accordion {
    margin-top: 1.25rem;
}

.why-accordion summary {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    padding: 1.7rem 2rem;
    transition: background-color 160ms ease;
}

.why-accordion summary::-webkit-details-marker {
    display: none;
}

.why-accordion summary:hover {
    background: #f8fafc;
}

.why-accordion summary:focus-visible {
    outline: 3px solid rgb(37 99 235 / 35%);
    outline-offset: -3px;
}

.why-line-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.why-accordion__marker {
    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    display: grid;
    place-items: center;
    border: 1px solid #c9d8e7;
    border-radius: 0.85rem;
    background: #eaf0f6;
    color: var(--teal);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.why-accordion__marker > span {
    position: absolute;
    right: 0.4rem;
    bottom: 0.28rem;
    color: currentColor;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.why-accordion[open] .why-accordion__marker {
    border-color: var(--evergreen-deep);
    background: var(--evergreen-deep);
    color: var(--white);
}

.why-accordion h2 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.why-accordion__icon {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: var(--cream);
}

.why-accordion__icon::before,
.why-accordion__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.9rem;
    height: 2px;
    background: var(--evergreen-deep);
    transform: translate(-50%, -50%);
    transition: transform 180ms ease;
}

.why-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.why-accordion[open] .why-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.why-accordion[open] summary {
    background: var(--cream);
}

.why-accordion__body {
    max-width: none;
    border-top: 1px solid var(--line);
    padding: 2.2rem 2rem 2.75rem 7rem;
}

.why-accordion__body > p {
    max-width: 58rem;
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.why-accordion__body > p + p {
    margin-top: 1.2rem;
}

.why-accordion__body > p strong,
.why-feature-list strong {
    color: var(--evergreen-deep);
}

.why-accordion__body .why-list-intro {
    margin-top: 1.8rem;
    color: var(--evergreen-deep);
    font-weight: 600;
}

.why-feature-list,
.why-outcome-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.why-feature-list li,
.why-outcome-list li {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--cream);
    color: var(--muted);
    padding: 1.25rem;
    line-height: 1.65;
}

.why-feature-list li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.why-feature-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid #c9d8e7;
    border-radius: 0.7rem;
    background: var(--white);
    color: var(--teal);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.why-feature-list li:hover {
    border-color: #aebfd0;
    background: #f8fafc;
    transform: translateY(-0.12rem);
}

.why-feature-list li:hover .why-feature-icon {
    border-color: var(--teal);
    background: var(--teal);
    color: var(--white);
}

.why-outcome-list li {
    padding-left: 2.5rem;
}

.why-outcome-list li::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 1.8rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--teal);
}

.why-accordion__body .why-final {
    max-width: 62rem;
    margin-top: 2rem;
    border-radius: 0.8rem;
    background: var(--evergreen-deep);
    color: var(--white);
    padding: 1.5rem 1.7rem;
    font-size: 1.16rem;
    line-height: 1.65;
}

.why-accordion__body .why-final strong {
    color: inherit;
}

@media (max-width: 72rem) {
    .why-hero__grid {
        grid-template-columns: 1fr;
    }

    .why-product-preview {
        min-height: 34rem;
    }

    .why-phone-frame {
        width: min(15rem, 60%);
    }
}

@media (max-width: 70rem) {
    .primary-navigation > a[aria-current="page"] {
        color: var(--white);
    }
}

@media (max-width: 48rem) {
    .why-hero {
        padding: 8.5rem 0 4.5rem;
    }

    .why-hero h1 {
        font-size: clamp(2.8rem, 13.5vw, 4.2rem);
    }

    .why-hero__intro p {
        font-size: 1.04rem;
    }

    .why-product-preview {
        min-height: 28rem;
    }

    .why-phone-frame {
        width: min(13rem, 66%);
        border-width: 0.55rem;
        border-radius: 2.15rem;
    }

    .why-article {
        padding: 4rem 0 5.5rem;
    }

    .why-accordion summary {
        grid-template-columns: 3.25rem minmax(0, 1fr) 2.5rem;
        gap: 0.85rem;
        padding: 1.35rem;
    }

    .why-accordion__marker {
        grid-column: 1;
        grid-row: 1;
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 0.7rem;
    }

    .why-accordion__marker .why-line-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .why-accordion__marker > span {
        right: 0.28rem;
        bottom: 0.18rem;
        font-size: 0.5rem;
    }

    .why-accordion h2 {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.55rem;
    }

    .why-accordion__icon {
        grid-column: 3;
        grid-row: 1;
        width: 2.5rem;
        height: 2.5rem;
    }

    .why-accordion__body {
        padding: 1.6rem 1.35rem 2rem;
    }

    .why-accordion__body > p {
        font-size: 1rem;
    }

    .why-feature-list,
    .why-outcome-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-product-preview:hover .why-phone-frame {
        transform: none;
    }

    .why-feature-list li:hover {
        transform: none;
    }
}

/* Full width primary navigation */

.site-header .header-inner {
    width: 100%;
    max-width: none;
    padding-inline: clamp(1.5rem, 3.25vw, 3.75rem);
}

.primary-navigation {
    flex: 1;
    justify-content: flex-end;
    gap: clamp(1.1rem, 1.9vw, 2.3rem);
}

.primary-navigation > a:not(.button) {
    font-size: 1rem;
}

.primary-navigation .button--small {
    font-size: 0.96rem;
}

@media (max-width: 70rem) {
    .site-header .header-inner {
        padding-inline: 1rem;
    }

    .primary-navigation {
        justify-content: center;
    }

    .primary-navigation > a:not(.button) {
        font-size: 1.6rem;
    }

    .primary-navigation .button--small {
        font-size: 1.05rem;
    }
}

/* Restrained homepage icon system */

.home-line-icon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.benefit-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: auto;
}

.benefit-card .benefit-card__top .card-number {
    margin: 0;
}

.home-card-icon,
.home-list-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid #c9d8e7;
    background: #eaf0f6;
    color: var(--teal);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.home-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.8rem;
}

.benefit-card--cream .home-card-icon {
    border-color: rgb(255 255 255 / 24%);
    background: rgb(255 255 255 / 10%);
    color: #67e8f9;
}

.feature-list li {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 5.5rem;
    padding-block: 0.9rem;
}

.feature-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    margin-top: 2rem;
}

.feature-list li p {
    margin: 0;
    line-height: 1.55;
}

.feature-list li strong {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--evergreen-deep);
    font-weight: 600;
}

.home-list-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    background: var(--white);
}

.feature-list li > .home-list-icon {
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--teal);
    font-weight: inherit;
}

.section--showcase .resident-tour {
    margin-top: clamp(3rem, 5vw, 4.5rem);
}

@media (hover: hover) and (pointer: fine) {
    .feature-list li:hover {
        padding-inline: 0;
    }

    .benefit-card:hover .home-card-icon,
    .feature-list li:hover .home-list-icon {
        border-color: var(--teal);
        background: var(--teal);
        color: var(--white);
    }

    .benefit-card--cream:hover .home-card-icon {
        border-color: #67e8f9;
        background: #67e8f9;
        color: var(--evergreen-deep);
    }
}

/* Final principle row alignment */

.proof-grid {
    align-items: stretch;
}

.proof-grid p {
    display: flex;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    place-content: normal;
}

/* Screenshot rail edge fades */

.screen-rail.has-screens-after:not(.has-screens-before) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4.5rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4.5rem), transparent 100%);
}

.screen-rail.has-screens-before:not(.has-screens-after) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4.5rem, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4.5rem, #000 100%);
}

.screen-rail.has-screens-before.has-screens-after {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4.5rem, #000 calc(100% - 4.5rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4.5rem, #000 calc(100% - 4.5rem), transparent 100%);
}

@media (max-width: 42rem) {
    .screen-rail.has-screens-after:not(.has-screens-before) {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    }

    .screen-rail.has-screens-before:not(.has-screens-after) {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 100%);
    }

    .screen-rail.has-screens-before.has-screens-after {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
    }
}

/* Azure enterprise accent */

.benefit-card--coral {
    border-color: #c9e0ed;
    background: var(--azure-soft);
    box-shadow: inset 0 0.24rem 0 var(--azure), var(--shadow-soft);
}

.benefit-card--coral .card-number,
.benefit-card--coral .home-card-icon {
    color: var(--azure);
}

.benefit-card--coral .home-card-icon {
    border-color: #c9e0ed;
    background: var(--white);
}

.section--resident-benefits {
    background: #f6f9fc;
}

.section--resident-benefits .eyebrow,
.resident-benefit > span {
    color: var(--azure);
}

.resident-benefits-note {
    border-color: var(--azure);
    background: rgb(255 255 255 / 62%);
}

.section--resident-benefits .resident-benefit {
    border-color: #d9e4ee;
    background: var(--white);
}

.audience-card--resident {
    background: var(--azure);
}

.deployment-card__list li:nth-child(even) > span {
    border-color: #c9e0ed;
    background: var(--azure-soft);
    color: var(--azure-deep);
}

.why-hero__intro .why-lead {
    border-left-color: var(--azure);
}

.why-product-preview::before {
    background: var(--azure);
}

.why-accordion:nth-child(even) .why-accordion__marker {
    border-color: #c9e0ed;
    background: var(--azure-soft);
    color: var(--azure-deep);
}

.why-accordion:nth-child(even)[open] .why-accordion__marker {
    border-color: var(--azure);
    background: var(--azure);
    color: var(--white);
}

.why-outcome-list li:nth-child(even)::before {
    background: var(--azure);
}

@media (hover: hover) and (pointer: fine) {
    .benefit-card--coral:hover .home-card-icon {
        border-color: var(--azure);
        background: var(--azure);
        color: var(--white);
    }

    .audience-card--resident:hover {
        border-color: var(--azure-deep);
        box-shadow: 0 22px 55px rgb(0 115 181 / 22%);
    }
}

/* Resicoms identity v3 */

.brand {
    gap: 0;
}

.brand-word {
    display: inline-flex;
    align-items: baseline;
    color: var(--evergreen-deep);
    font-size: 1.72rem;
    font-weight: 600;
    letter-spacing: -0.065em;
    line-height: 1;
}

.brand-word__resi,
.brand-word__coms {
    display: inline-block;
}

.brand-word__coms {
    color: var(--teal);
}

.brand--light .brand-word__resi {
    color: var(--white);
}

.brand--light .brand-word__coms {
    color: #7dd3fc;
}

.deployment-card__intro {
    border-left: 0.25rem solid var(--azure);
    padding-left: 1.15rem;
}

@media (max-width: 42rem) {
    .brand-word {
        font-size: 1.5rem;
    }
}

/* Header contact bar */

.utility-bar {
    background: var(--evergreen-deep);
    color: var(--white);
}

.utility-bar__inner {
    min-height: 2.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-inline: clamp(1.5rem, 3.25vw, 3.75rem);
}

.utility-bar__company {
    margin: 0;
    color: rgb(255 255 255 / 72%);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.2;
    white-space: nowrap;
}

.utility-bar a.utility-bar__company {
    color: rgb(255 255 255 / 72%);
    font-size: 0.76rem;
    letter-spacing: 0.025em;
}

.utility-bar__links {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.utility-bar a {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
}

.utility-bar a svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.utility-bar__separator {
    color: rgb(255 255 255 / 45%);
    font-size: 0.78rem;
}

.utility-bar a:hover,
.utility-bar a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.footer-grid > div:first-child > .footer-copyright {
    margin-top: 0.35rem;
    color: rgb(255 255 255 / 56%);
    font-size: 0.78rem;
    line-height: 1.65;
}

.footer-company-link {
    display: block;
    width: fit-content;
    margin-top: 0.85rem;
    color: #7dd3fc;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    text-decoration: none;
}

.footer-company-link:hover,
.footer-company-link:focus-visible {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.hero {
    padding-top: 12.95rem;
}

.why-hero {
    padding-top: 12.45rem;
}

@media (max-width: 48rem) {
    .why-hero {
        padding-top: 10.95rem;
    }
}

@media (max-width: 42rem) {
    .utility-bar__inner {
        min-height: 2.35rem;
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }

    .utility-bar a {
        font-size: 0.76rem;
    }

    .utility-bar__company {
        font-size: 0.68rem;
        letter-spacing: 0;
    }

    .utility-bar a.utility-bar__company {
        font-size: 0.68rem;
        letter-spacing: 0;
    }

    .hero {
        padding-top: 9.85rem;
    }
}

@media (max-width: 24rem) {
    .utility-bar__inner {
        gap: 0.5rem;
    }

    .utility-bar__links {
        gap: 0.45rem;
    }

    .utility-bar a {
        gap: 0.25rem;
        font-size: 0.7rem;
    }

    .utility-bar a svg {
        width: 0.78rem;
        height: 0.78rem;
    }

    .utility-bar__company {
        font-size: 0.62rem;
    }

    .utility-bar a.utility-bar__company {
        font-size: 0.62rem;
    }
}

/* Structured footer navigation */

.footer-grid {
    grid-template-columns: minmax(13rem, 0.62fr) minmax(44rem, 1.78fr);
    gap: clamp(3rem, 6vw, 6rem);
}

.footer-menus {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.footer-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}

.footer-menu h2 {
    margin: 0 0 0.35rem;
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.footer-menu a,
.footer-menu button {
    border: 0;
    background: transparent;
    color: var(--white);
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
}

.footer-menu button {
    cursor: pointer;
}

.footer-menu a:hover,
.footer-menu button:hover,
.footer-menu a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #7dd3fc;
    text-underline-offset: 0.25rem;
}

.footer-menu a:focus-visible,
.footer-menu button:focus-visible {
    border-radius: 0.15rem;
    outline: 3px solid #7dd3fc;
    outline-offset: 3px;
}

.legal-card ul {
    margin: 0.9rem 0 0;
    padding-left: 1.3rem;
}

.legal-card li + li {
    margin-top: 0.55rem;
}

@media (max-width: 68rem) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 42rem) {
    .footer-menus {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem 1.5rem;
    }

    .footer-menu:last-child {
        grid-column: auto;
    }
}

@media (max-width: 27rem) {
    .footer-menus {
        grid-template-columns: 1fr;
    }
}

/* About page */

.about-hero {
    overflow: hidden;
    background:
        linear-gradient(135deg, rgb(0 115 181 / 8%), transparent 46%),
        var(--cream);
    padding: 14rem 0 7rem;
}

.about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.about-hero__copy {
    max-width: 47rem;
}

.about-hero h1 {
    max-width: 13ch;
    margin: 1rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(3.4rem, 6.5vw, 6.8rem);
    letter-spacing: -0.065em;
    line-height: 0.96;
}

.about-lead {
    max-width: 42rem;
    margin: 2rem 0 2.2rem;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    line-height: 1.65;
}

.about-summary {
    border: 1px solid var(--line);
    border-top: 0.3rem solid var(--azure);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    box-shadow: var(--shadow-soft);
}

.about-summary__label {
    margin: 0 0 1.35rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-summary > div {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    align-items: start;
    gap: 1rem;
    border-top: 1px solid var(--line);
    padding: 1.15rem 0;
}

.about-summary > div:last-child {
    padding-bottom: 0;
}

.about-summary span {
    color: var(--azure);
    font-size: 0.85rem;
    font-weight: 700;
}

.about-summary p {
    margin: 0;
    color: var(--evergreen-deep);
    font-weight: 600;
    line-height: 1.45;
}

.about-section {
    background: var(--white);
    padding: clamp(5rem, 9vw, 8rem) 0;
}

.about-section--tinted {
    border-block: 1px solid var(--line);
    background: var(--azure-soft);
}

.about-story,
.about-community {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.about-story h2,
.about-heading h2,
.about-community h2,
.about-cta h2 {
    margin: 0.9rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.5rem, 4.5vw, 4.8rem);
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.about-story__copy {
    max-width: 44rem;
}

.about-story__copy p,
.about-community__copy > p:last-child {
    margin: 0 0 1.35rem;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.about-heading {
    max-width: 54rem;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 3.5rem;
}

.about-values article {
    min-height: 19rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: clamp(1.6rem, 3vw, 2.3rem);
    box-shadow: 0 1rem 2.5rem rgb(10 29 49 / 6%);
}

.about-values span {
    display: block;
    color: var(--azure);
    font-size: 0.82rem;
    font-weight: 700;
}

.about-values h3,
.about-audiences h3 {
    margin: 4rem 0 0.8rem;
    color: var(--evergreen-deep);
    font-size: 1.45rem;
    letter-spacing: -0.035em;
}

.about-values p,
.about-audiences article > p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.about-community {
    align-items: start;
}

.about-community__copy h2 {
    max-width: 12ch;
    margin-bottom: 1.6rem;
}

.about-audiences {
    display: grid;
    gap: 1rem;
}

.about-audiences article {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    padding: clamp(1.6rem, 3vw, 2.3rem);
}

.about-audiences__label {
    margin: 0;
    color: var(--azure-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.about-audiences h3 {
    margin-top: 1.1rem;
}

.about-cta {
    background: var(--azure-deep);
    padding: clamp(4rem, 7vw, 6rem) 0;
}

.about-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
}

.about-cta .eyebrow {
    color: #7dd3fc;
}

.about-cta h2 {
    max-width: 17ch;
    color: var(--white);
    font-size: clamp(2.3rem, 4vw, 4.3rem);
}

.about-cta .button {
    border-color: var(--white);
    background: var(--white);
    color: var(--evergreen-deep);
}

@media (max-width: 68rem) {
    .about-hero__grid,
    .about-story,
    .about-community {
        grid-template-columns: 1fr;
    }

    .about-summary {
        max-width: 42rem;
    }

    .about-story__copy,
    .about-community__copy {
        max-width: 46rem;
    }
}

@media (max-width: 48rem) {
    .about-hero {
        padding: 11rem 0 5rem;
    }

    .about-values {
        grid-template-columns: 1fr;
    }

    .about-values article {
        min-height: 0;
    }

    .about-values h3 {
        margin-top: 2.5rem;
    }

    .about-cta__inner {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 42rem) {
    .about-hero {
        padding-top: 9.85rem;
    }

    .about-hero h1 {
        font-size: clamp(3rem, 15vw, 4.4rem);
    }
}

/* Floating contact form */

.floating-contact {
    position: fixed;
    z-index: 250;
    right: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(1rem, 2.5vw, 2rem);
    width: 3.75rem;
    height: 3.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: var(--azure-deep);
    color: var(--white);
    box-shadow: 0 1rem 2.4rem rgb(10 29 49 / 24%);
    cursor: pointer;
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.floating-contact__icon {
    position: relative;
    width: 1.45rem;
    height: 1.15rem;
    display: block;
    border: 0.13rem solid currentColor;
    border-radius: 0.38rem;
}

.floating-contact__icon::after {
    position: absolute;
    bottom: -0.35rem;
    left: 0.25rem;
    width: 0.48rem;
    height: 0.48rem;
    border-bottom: 0.13rem solid currentColor;
    border-left: 0.13rem solid currentColor;
    background: var(--azure-deep);
    content: "";
    transform: skewY(-28deg);
    transition: background-color 180ms ease;
}

.floating-contact:hover {
    background: var(--teal);
    box-shadow: 0 1.2rem 2.8rem rgb(10 29 49 / 30%);
    transform: translateY(-0.2rem);
}

.floating-contact:hover .floating-contact__icon::after {
    background: var(--teal);
}

.floating-contact:focus-visible {
    outline: 3px solid #7dd3fc;
    outline-offset: 4px;
}

.contact-dialog {
    width: min(43rem, calc(100% - 2rem));
    max-height: min(52rem, calc(100dvh - 2rem));
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background: var(--white);
    padding: 0;
    box-shadow: 0 2rem 6rem rgb(10 29 49 / 30%);
    color: var(--ink);
    overflow: auto;
}

.contact-dialog[open] {
    animation: contact-dialog-enter 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-dialog::backdrop {
    background: rgb(10 29 49 / 62%);
    backdrop-filter: blur(0.35rem);
}

.contact-dialog__panel {
    padding: clamp(1.4rem, 4vw, 2.4rem);
}

.contact-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.contact-dialog__header .eyebrow {
    margin: 0 0 0.5rem;
}

.contact-dialog__header h2 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.05em;
    line-height: 1;
}

.contact-dialog__close {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--cream);
    color: var(--evergreen-deep);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.contact-dialog__close:hover {
    border-color: var(--azure);
    background: var(--azure-soft);
}

.contact-dialog__close:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

.contact-dialog__intro {
    max-width: 35rem;
    margin: 1rem 0 1.5rem;
    color: var(--muted);
}

.contact-form--dialog {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 1.5rem 0 0;
    box-shadow: none;
}

.contact-form--dialog:focus-within {
    border-color: var(--line);
    box-shadow: none;
}

.contact-form--dialog .field textarea {
    min-height: 7rem;
}

.contact-dialog-open {
    overflow: hidden;
}

@keyframes contact-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 42rem) {
    .floating-contact {
        width: 3.4rem;
        height: 3.4rem;
    }

    .contact-dialog {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 0.85rem;
    }

    .contact-dialog__header {
        gap: 1rem;
    }

    .contact-dialog__header h2 {
        font-size: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-contact,
    .floating-contact__icon::after,
    .contact-dialog[open] {
        animation: none;
        transition: none;
    }
}

/* Secondary page heading scale */

.why-page .why-hero h1 {
    font-size: clamp(3rem, 4.8vw, 4.8rem);
    letter-spacing: -0.058em;
    line-height: 1;
}

.why-page .why-accordion h2 {
    font-size: clamp(1.45rem, 2.05vw, 1.95rem);
}

.why-page main .contact-copy h2 {
    font-size: clamp(2.35rem, 3vw, 2.8rem);
}

.about-page .about-hero h1 {
    font-size: clamp(3rem, 5vw, 5.2rem);
    letter-spacing: -0.058em;
    line-height: 0.98;
}

.about-page main .about-story h2,
.about-page main .about-heading h2,
.about-page main .about-community h2 {
    font-size: clamp(2.15rem, 3.5vw, 3.7rem);
}

.about-page main .about-cta h2 {
    font-size: clamp(2.1rem, 3.2vw, 3.35rem);
}

.about-page main .about-values h3,
.about-page main .about-audiences h3 {
    font-size: 1.25rem;
}

@media (max-width: 42rem) {
    .why-page .why-hero h1,
    .about-page .about-hero h1 {
        font-size: clamp(2.8rem, 12vw, 3.6rem);
    }

    .why-page .why-accordion h2 {
        font-size: 1.4rem;
    }
}

/* FAQs page */

.faq-hero {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgb(0 115 181 / 9%), transparent 46%),
        var(--cream);
    padding: 12.95rem 0 6.5rem;
}

.faq-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.65fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.faq-hero__copy {
    max-width: 47rem;
}

.faq-hero h1 {
    max-width: 12ch;
    margin: 0.9rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(3rem, 4.8vw, 4.8rem);
    font-weight: 600;
    letter-spacing: -0.058em;
    line-height: 1;
}

.faq-hero__copy > p:last-child {
    max-width: 42rem;
    margin: 1.8rem 0 0;
    color: var(--muted);
    font-size: 1.12rem;
    line-height: 1.7;
}

.faq-overview {
    border: 1px solid var(--line);
    border-top: 0.3rem solid var(--azure);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: 1.8rem;
    box-shadow: var(--shadow-soft);
}

.faq-overview__label {
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.faq-overview ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-overview li {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.8rem;
    border-top: 1px solid var(--line);
    padding: 0.9rem 0;
    color: var(--evergreen-deep);
    font-weight: 600;
}

.faq-overview li:last-child {
    padding-bottom: 0;
}

.faq-overview li span {
    color: var(--azure);
    font-size: 0.78rem;
}

.faq-content {
    background: var(--white);
    padding: clamp(5rem, 9vw, 8rem) 0;
}

.faq-layout {
    max-width: 72rem;
}

.faq-group {
    display: grid;
    grid-template-columns: minmax(13rem, 0.35fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.faq-group + .faq-group {
    margin-top: clamp(5rem, 9vw, 8rem);
    border-top: 1px solid var(--line);
    padding-top: clamp(5rem, 9vw, 8rem);
}

.faq-group__heading {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
}

.faq-group__heading > span {
    color: var(--azure);
    font-size: 0.82rem;
    font-weight: 700;
}

.faq-group__heading p {
    margin: 0 0 0.35rem;
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.faq-group__heading h2 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item.is-animating {
    will-change: height;
}

.faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 1.5rem;
    padding: 1.4rem 0;
    color: var(--evergreen-deep);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: var(--azure-deep);
}

.faq-item summary:focus-visible {
    border-radius: 0.25rem;
    outline: 3px solid rgb(37 99 235 / 30%);
    outline-offset: 0.3rem;
}

.faq-item__icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--cream);
}

.faq-item__icon::before,
.faq-item__icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.85rem;
    height: 2px;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
    transition: transform 180ms ease;
}

.faq-item__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__icon {
    border-color: var(--azure);
    background: var(--azure);
    color: var(--white);
}

.faq-item[open] .faq-item__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__answer {
    padding: 0 4rem 1.6rem 0;
}

.faq-item__answer p {
    max-width: 48rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

.faq-item__answer a {
    color: var(--evergreen-deep);
    font-weight: 600;
    text-decoration-color: var(--azure);
    text-underline-offset: 0.2rem;
}

.faq-cta {
    background: var(--azure-deep);
    padding: clamp(4rem, 7vw, 6rem) 0;
}

.faq-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
}

.faq-cta .eyebrow {
    color: #7dd3fc;
}

.faq-cta h2 {
    max-width: 18ch;
    margin: 0.8rem 0 0;
    color: var(--white);
    font-size: clamp(2.1rem, 3.2vw, 3.35rem);
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.faq-cta .button {
    border-color: var(--white);
    background: var(--white);
    color: var(--evergreen-deep);
}

@media (max-width: 68rem) {
    .faq-hero__grid,
    .faq-group {
        grid-template-columns: 1fr;
    }

    .faq-overview {
        max-width: 38rem;
    }

    .faq-group {
        gap: 2rem;
    }

    .faq-group__heading {
        max-width: 35rem;
    }
}

@media (max-width: 48rem) {
    .faq-hero {
        padding: 10.95rem 0 5rem;
    }

    .faq-cta__inner {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 42rem) {
    .faq-hero {
        padding-top: 9.85rem;
    }

    .faq-hero h1 {
        font-size: clamp(2.8rem, 12vw, 3.6rem);
    }

    .faq-item summary {
        gap: 1rem;
        font-size: 1rem;
    }

    .faq-item__answer {
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item__icon::before,
    .faq-item__icon::after {
        transition: none;
    }
}

/* Mobile slide out navigation */

.menu-backdrop {
    display: none;
}

@media (max-width: 70rem) {
    body.menu-open {
        position: fixed;
        inset: var(--menu-scroll-offset, 0) 0 auto;
        width: 100%;
        overflow: hidden;
    }

    body.menu-open .site-header {
        z-index: 400;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.menu-open .utility-bar,
    body.menu-open .site-header .brand {
        opacity: 0;
        pointer-events: none;
    }

    .menu-backdrop {
        position: fixed;
        z-index: 398;
        inset: 0;
        display: block;
        border: 0;
        background: rgb(10 29 49 / 58%);
        padding: 0;
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        transition:
            opacity 260ms ease,
            visibility 0s linear 260ms;
    }

    body.menu-open .menu-backdrop {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .primary-navigation {
        position: fixed;
        z-index: 399;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        width: min(26rem, 88vw);
        height: 100vh;
        height: 100dvh;
        max-height: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background: var(--white);
        padding:
            max(7.75rem, calc(env(safe-area-inset-top) + 6.75rem))
            1.5rem
            max(2rem, env(safe-area-inset-bottom));
        box-shadow: -1.5rem 0 4rem rgb(10 29 49 / 20%);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        visibility: hidden;
        transform: translateX(100%);
        transition:
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 280ms;
    }

    .primary-navigation::before {
        display: block;
        border-bottom: 1px solid var(--line);
        color: var(--azure-deep);
        padding: 0 0 0.9rem;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        content: "Menu";
    }

    .primary-navigation.is-open {
        display: flex;
        visibility: visible;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .primary-navigation > a:not(.button),
    .primary-navigation > a[aria-current="page"] {
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--line);
        color: var(--evergreen-deep);
        padding: 0.95rem 0;
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.35;
        text-align: left;
    }

    .primary-navigation > a:not(.button):hover,
    .primary-navigation > a[aria-current="page"] {
        color: var(--azure-deep);
    }

    .primary-navigation > a[aria-current="page"] {
        padding-left: 0.8rem;
        box-shadow: inset 0.2rem 0 var(--azure);
    }

    .primary-navigation .button,
    .primary-navigation .button--small {
        width: 100%;
        min-height: 3.3rem;
        margin-top: 1.5rem;
        padding-inline: 1rem;
        font-size: 0.98rem;
    }

    .menu-toggle {
        flex: 0 0 auto;
        transition:
            background-color 180ms ease,
            color 180ms ease,
            box-shadow 180ms ease;
    }

    .menu-toggle[aria-expanded="true"] {
        background: var(--azure-deep);
        color: var(--white);
        box-shadow: 0 0.8rem 2rem rgb(10 29 49 / 22%);
    }
}

@media (max-width: 30rem) {
    .primary-navigation {
        width: min(24rem, 92vw);
        padding-inline: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-backdrop,
    .primary-navigation {
        transition: none;
    }
}

/* Fictional use scenario */

.case-hero {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgb(0 115 181 / 8%), transparent 44%),
        var(--cream);
    padding: 12.95rem 0 0;
}

.case-hero__copy {
    max-width: 58rem;
}

.case-labels {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.case-labels .eyebrow {
    margin: 0;
}

.case-labels > span {
    border: 1px solid #c9d8e7;
    border-radius: 999px;
    background: var(--white);
    color: var(--azure-deep);
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case-hero h1 {
    max-width: 15ch;
    margin: 1.25rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(3.2rem, 5.2vw, 5.25rem);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 0.98;
}

.case-hero__lead {
    max-width: 48rem;
    margin: 2rem 0 0;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    line-height: 1.7;
}

.case-hero__image {
    margin: 3.5rem 0 0;
}

.case-hero__image img {
    width: 100%;
    aspect-ratio: 1.96 / 1;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    object-fit: cover;
    box-shadow: 0 1.5rem 4rem rgb(10 29 49 / 14%);
}

.case-hero__image figcaption {
    margin: 0.7rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
    text-align: right;
}

.case-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 2rem 0 0;
    border-top: 1px solid var(--line);
}

.case-facts > div {
    border-right: 1px solid var(--line);
    padding: 1.7rem 1.4rem 2rem;
}

.case-facts > div:first-child {
    padding-left: 0;
}

.case-facts > div:last-child {
    border-right: 0;
}

.case-facts dt {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-facts dd {
    margin: 0.35rem 0 0;
    color: var(--evergreen-deep);
    font-size: 1.02rem;
    font-weight: 600;
}

.case-section {
    background: var(--white);
    padding: clamp(5rem, 9vw, 8rem) 0;
}

.case-section--tinted {
    border-block: 1px solid var(--line);
    background: var(--azure-soft);
}

.case-intro-grid,
.case-objective-grid,
.case-lessons__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
}

.case-section h2,
.case-cta h2 {
    margin: 0.9rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.2rem, 3.6vw, 3.75rem);
    letter-spacing: -0.052em;
    line-height: 1.03;
}

.case-intro-copy {
    max-width: 45rem;
}

.case-intro-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.case-intro-copy p + p {
    margin-top: 1.4rem;
}

.case-challenges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 4rem;
}

.case-challenges article {
    min-height: 17rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    padding: clamp(1.5rem, 3vw, 2.2rem);
}

.case-challenges article > span,
.case-steps > li > span,
.case-lessons__list span {
    color: var(--azure);
    font-size: 0.78rem;
    font-weight: 700;
}

.case-challenges h3 {
    margin: 4rem 0 0.7rem;
    color: var(--evergreen-deep);
    font-size: 1.3rem;
    letter-spacing: -0.035em;
}

.case-challenges p,
.case-delivery__heading > p:last-child,
.case-steps p,
.case-product__copy > p,
.case-lessons__list p {
    margin: 0;
    color: var(--muted);
    line-height: 1.68;
}

.case-section--navy {
    background: var(--evergreen-deep);
}

.case-section--navy .eyebrow {
    color: #7dd3fc;
}

.case-section--navy h2 {
    color: var(--white);
}

.case-objectives {
    border-top: 1px solid rgb(255 255 255 / 18%);
}

.case-objectives p {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    margin: 0;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
    padding: 1.15rem 0;
    color: rgb(255 255 255 / 80%);
}

.case-objectives span {
    color: #7dd3fc;
    font-size: 0.78rem;
    font-weight: 700;
}

.case-delivery {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
}

.case-delivery__heading > p:last-child {
    max-width: 34rem;
    margin-top: 1.5rem;
    font-size: 1.05rem;
}

.case-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-steps li {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: 1.2rem;
    border-top: 1px solid #c9d8e7;
    padding: 1.35rem 0;
}

.case-steps li:last-child {
    border-bottom: 1px solid #c9d8e7;
}

.case-steps h3 {
    margin: 0 0 0.35rem;
    color: var(--evergreen-deep);
    font-size: 1.15rem;
}

.case-product {
    overflow: hidden;
}

.case-product__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(28rem, 1.28fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.case-product__copy > p {
    max-width: 38rem;
    margin-top: 1.5rem;
    font-size: 1.05rem;
}

.case-product__copy ul {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.case-product__copy li {
    border-top: 1px solid var(--line);
    color: var(--evergreen-deep);
    padding: 0.75rem 0;
    font-weight: 600;
}

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

.case-product__visual {
    position: relative;
    min-height: 36rem;
    border-radius: var(--radius-lg);
    background: var(--azure-soft);
    padding: 4rem 0 3rem 3rem;
}

.case-browser {
    overflow: hidden;
    border: 0.38rem solid var(--evergreen-deep);
    border-radius: 0.9rem;
    background: var(--white);
    box-shadow: 0 1.5rem 4rem rgb(10 29 49 / 18%);
}

.case-browser__bar {
    height: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--evergreen-deep);
    padding: 0 0.7rem;
}

.case-browser__bar span {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 45%);
}

.case-browser img {
    width: 100%;
    height: auto;
}

.case-phone {
    position: absolute;
    bottom: 1.8rem;
    left: 1.2rem;
    width: 24%;
    overflow: hidden;
    border: 0.38rem solid var(--evergreen-deep);
    border-radius: 1.35rem;
    background: var(--white);
    box-shadow: 0 1.3rem 3rem rgb(10 29 49 / 24%);
}

.case-phone img {
    width: 100%;
    height: auto;
}

.case-product__visual > p {
    margin: 1rem 1.5rem 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    text-align: right;
}

.case-results {
    border-block: 1px solid var(--line);
    background: var(--cream);
}

.case-results__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.65fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
}

.case-results__heading > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 4rem;
    border-block: 1px solid var(--line);
}

.case-metrics article {
    min-height: 12rem;
    border-right: 1px solid var(--line);
    padding: 1.8rem;
}

.case-metrics article:first-child {
    padding-left: 0;
}

.case-metrics article:last-child {
    border-right: 0;
}

.case-metrics strong {
    display: block;
    color: var(--azure-deep);
    font-size: clamp(2.8rem, 4.5vw, 4.4rem);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1;
}

.case-metrics span {
    display: block;
    max-width: 13rem;
    margin-top: 1.1rem;
    color: var(--muted);
    line-height: 1.5;
}

.case-voices {
    background: var(--white);
}

.case-voices__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.case-voices figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--azure-soft);
    padding: clamp(2rem, 4vw, 3.5rem);
}

.case-voices blockquote {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(1.5rem, 2.6vw, 2.35rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.3;
}

.case-voices figcaption {
    margin-top: 2rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.case-lessons {
    border-top: 1px solid var(--line);
    background: var(--white);
}

.case-lessons__list {
    border-top: 1px solid var(--line);
}

.case-lessons__list > div {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding: 1.15rem 0;
}

.case-lessons__list strong {
    color: var(--evergreen-deep);
}

.case-cta {
    background: var(--azure-deep);
    padding: clamp(4rem, 7vw, 6rem) 0;
}

.case-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
}

.case-cta .eyebrow {
    color: #7dd3fc;
}

.case-cta h2 {
    max-width: 20ch;
    color: var(--white);
    font-size: clamp(2.1rem, 3.2vw, 3.35rem);
}

.case-cta .button {
    border-color: var(--white);
    background: var(--white);
    color: var(--evergreen-deep);
}

@media (min-width: 70.0625rem) and (max-width: 82rem) {
    .primary-navigation {
        gap: 0.85rem;
    }

    .primary-navigation > a:not(.button) {
        font-size: 0.88rem;
    }

    .primary-navigation .button--small {
        font-size: 0.84rem;
    }
}

@media (max-width: 68rem) {
    .case-intro-grid,
    .case-objective-grid,
    .case-delivery,
    .case-product__grid,
    .case-lessons__grid {
        grid-template-columns: 1fr;
    }

    .case-challenges,
    .case-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-product__copy {
        max-width: 45rem;
    }

    .case-product__visual {
        width: min(100%, 48rem);
    }

    .case-results__heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .case-metrics article:nth-child(2) {
        border-right: 0;
    }

    .case-metrics article:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .case-metrics article:nth-child(3) {
        padding-left: 0;
    }
}

@media (max-width: 48rem) {
    .case-hero {
        padding-top: 10.95rem;
    }

    .case-hero__image {
        margin-top: 2.5rem;
    }

    .case-facts,
    .case-challenges,
    .case-metrics,
    .case-voices__grid {
        grid-template-columns: 1fr;
    }

    .case-facts > div,
    .case-facts > div:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 1rem 0;
    }

    .case-facts > div:last-child {
        border-bottom: 0;
    }

    .case-challenges article {
        min-height: 0;
    }

    .case-challenges h3 {
        margin-top: 2.5rem;
    }

    .case-product__visual {
        min-height: 27rem;
        padding: 2.5rem 0 2rem 1.5rem;
    }

    .case-phone {
        width: 29%;
        left: 0.5rem;
    }

    .case-metrics article,
    .case-metrics article:first-child,
    .case-metrics article:nth-child(3) {
        min-height: 0;
        border-right: 0;
        border-top: 1px solid var(--line);
        padding: 1.5rem 0;
    }

    .case-metrics article:first-child {
        border-top: 0;
    }

    .case-cta__inner {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 42rem) {
    .case-hero {
        padding-top: 9.85rem;
    }

    .case-labels {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
    }

    .case-hero h1 {
        font-size: clamp(2.8rem, 12vw, 3.65rem);
    }

    .case-hero__image img {
        aspect-ratio: 1.25 / 1;
        object-position: 64% center;
    }
}

/* Primary navigation information menu */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--evergreen-deep);
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}

.nav-dropdown__toggle:hover,
.nav-dropdown.is-open .nav-dropdown__toggle {
    border-color: var(--azure);
    color: var(--azure-deep);
}

.nav-dropdown--current .nav-dropdown__toggle {
    color: var(--azure-deep);
}

.nav-dropdown__chevron {
    width: 0.48rem;
    height: 0.48rem;
    border-right: 0.12rem solid currentColor;
    border-bottom: 0.12rem solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform 180ms ease;
}

.nav-dropdown.is-open .nav-dropdown__chevron {
    transform: translateY(0.12rem) rotate(225deg);
}

.nav-dropdown__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 1rem);
    left: 50%;
    width: 14.5rem;
    display: grid;
    gap: 0.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    padding: 0.45rem;
    box-shadow: 0 1.25rem 3rem rgb(10 29 49 / 16%);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -0.45rem);
    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 0s linear 160ms;
}

.nav-dropdown__menu--wide {
    width: 19rem;
}

.nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.nav-dropdown__menu a {
    border-radius: 0.42rem;
    color: var(--evergreen-deep);
    padding: 0.72rem 0.8rem;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a[aria-current="page"] {
    background: var(--azure-soft);
    color: var(--azure-deep);
}

@media (min-width: 70.0625rem) and (max-width: 82rem) {
    .nav-dropdown__toggle {
        font-size: 0.88rem;
    }
}

@media (max-width: 70rem) {
    .nav-dropdown {
        width: 100%;
        display: block;
    }

    .nav-dropdown__toggle {
        width: 100%;
        justify-content: space-between;
        border: 0;
        border-bottom: 1px solid var(--line);
        padding: 0.95rem 0;
        font-size: 1.05rem;
        line-height: 1.35;
        text-align: left;
    }

    .nav-dropdown--current .nav-dropdown__toggle {
        padding-left: 0.8rem;
        box-shadow: inset 0.2rem 0 var(--azure);
    }

    .nav-dropdown__menu {
        position: static;
        width: 100%;
        max-height: 0;
        gap: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: none;
        transition:
            max-height 220ms ease,
            opacity 180ms ease,
            visibility 0s linear 220ms;
    }

    .nav-dropdown.is-open .nav-dropdown__menu {
        max-height: 24rem;
        padding: 0.35rem 0 0.55rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .nav-dropdown__menu a {
        border-radius: 0;
        padding: 0.7rem 0.8rem 0.7rem 1.15rem;
        font-size: 0.98rem;
    }

    .nav-dropdown__menu--wide {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown__chevron,
    .nav-dropdown__menu {
        transition: none;
    }
}

/* App features */

.features-hero {
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    padding: 13.25rem 0 clamp(5rem, 8vw, 7.5rem);
}

.features-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(22rem, 0.82fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.features-hero__copy {
    max-width: 46rem;
}

.features-hero h1 {
    max-width: 15ch;
    margin: 1rem 0 1.5rem;
    color: var(--evergreen-deep);
    font-size: clamp(3.6rem, 5.6vw, 5.75rem);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.98;
    text-wrap: balance;
}

.features-hero__lead {
    max-width: 43rem;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.4vw, 1.25rem);
    line-height: 1.65;
}

.features-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.25rem;
}

.features-hero__actions .text-link {
    color: var(--evergreen-deep);
    font-weight: 600;
    text-decoration-color: rgb(0 115 181 / 38%);
    text-underline-offset: 0.35rem;
}

.feature-overview {
    border-radius: var(--radius-lg);
    background: var(--evergreen-deep);
    color: var(--white);
    padding: clamp(2rem, 3.4vw, 3rem);
    box-shadow: var(--shadow);
}

.feature-overview__label {
    margin: 0 0 1.5rem;
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.feature-overview__row {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgb(255 255 255 / 18%);
    padding: 1.25rem 0;
}

.feature-overview__row > span {
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
}

.feature-overview__row strong,
.feature-overview__row p {
    display: block;
    margin: 0;
}

.feature-overview__row strong {
    font-size: 1.06rem;
}

.feature-overview__row p {
    color: rgb(255 255 255 / 66%);
    font-size: 0.88rem;
}

.feature-overview__row b {
    color: rgb(255 255 255 / 45%);
    font-size: 1.75rem;
    font-weight: 500;
}

.feature-overview__note {
    margin: 1.4rem 0 0;
    color: rgb(255 255 255 / 72%);
    font-size: 0.88rem;
}

.feature-section {
    border-bottom: 1px solid var(--line);
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.feature-section--soft {
    background: var(--cream);
}

.feature-section__header {
    display: grid;
    grid-template-columns: minmax(12rem, 0.52fr) minmax(0, 1.48fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.feature-section__header .eyebrow {
    margin-top: 0.9rem;
}

.feature-section__number {
    color: var(--azure);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
}

.feature-section__header h2 {
    max-width: 22ch;
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.4rem, 4vw, 4.25rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.05;
    text-wrap: balance;
}

.feature-section__header > div:last-child > p {
    max-width: 46rem;
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: 1.08rem;
}

.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.feature-card-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
    min-height: 24rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: clamp(1.5rem, 2.5vw, 2.15rem);
    box-shadow: 0 0.5rem 1.5rem rgb(10 29 49 / 4%);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

a.feature-card {
    color: inherit;
    text-decoration: none;
}

.feature-card:hover {
    border-color: rgb(0 115 181 / 40%);
    box-shadow: 0 1rem 2.5rem rgb(10 29 49 / 9%);
    transform: translateY(-0.2rem);
}

.feature-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid #c8d8e7;
    border-radius: var(--radius-sm);
    background: var(--azure-soft);
    color: var(--azure-deep);
}

.feature-card__icon svg {
    width: 1.55rem;
    height: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.feature-card__category {
    margin: 2rem 0 0.45rem;
    color: var(--azure-deep);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.feature-card h3 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: 1.55rem;
    line-height: 1.2;
}

.feature-card h3 + p {
    margin: 1rem 0 1.5rem;
    color: var(--muted);
    line-height: 1.65;
}

.feature-card__benefit {
    margin-top: auto;
    border-top: 1px solid var(--line);
    color: var(--evergreen-deep);
    padding-top: 1rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.feature-card--dark {
    border-color: var(--evergreen-deep);
    background: var(--evergreen-deep);
    box-shadow: var(--shadow-soft);
}

.feature-card--dark .feature-card__icon {
    border-color: rgb(255 255 255 / 20%);
    background: rgb(255 255 255 / 10%);
    color: #7dd3fc;
}

.feature-card--dark .feature-card__category,
.feature-card--dark h3,
.feature-card--dark .feature-card__benefit {
    color: var(--white);
}

.feature-card--dark h3 + p {
    color: rgb(255 255 255 / 68%);
}

.feature-card--dark .feature-card__benefit {
    border-color: rgb(255 255 255 / 18%);
}

.feature-principles {
    background: var(--azure-soft);
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.feature-principles__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(4rem, 9vw, 9rem);
}

.feature-principles h2 {
    max-width: 14ch;
    margin: 1rem 0 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.05;
    text-wrap: balance;
}

.feature-principles__list article {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1.25rem;
    border-top: 1px solid #c8d8e7;
    padding: 1.5rem 0;
}

.feature-principles__list article:last-child {
    border-bottom: 1px solid #c8d8e7;
}

.feature-principles__list article > span {
    color: var(--azure);
    font-size: 0.76rem;
    font-weight: 700;
}

.feature-principles__list h3,
.feature-principles__list p {
    margin: 0;
}

.feature-principles__list h3 {
    color: var(--evergreen-deep);
    font-size: 1.15rem;
}

.feature-principles__list p {
    margin-top: 0.35rem;
    color: var(--muted);
}

.features-cta {
    background: var(--evergreen-deep);
    padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}

.features-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
}

.features-cta .eyebrow {
    color: #7dd3fc;
}

.features-cta h2 {
    max-width: 23ch;
    margin: 1rem 0 0;
    color: var(--white);
    font-size: clamp(2.25rem, 3.6vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.08;
    text-wrap: balance;
}

.features-cta .button {
    border: 1px solid var(--white);
    background: var(--white);
    color: var(--evergreen-deep);
}

@media (max-width: 72rem) {
    .feature-card-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 64rem) {
    .features-hero__grid,
    .feature-section__header,
    .feature-principles__grid {
        grid-template-columns: 1fr;
    }

    .features-hero__grid {
        gap: 3.5rem;
    }

    .feature-overview {
        max-width: 42rem;
    }

    .feature-section__header {
        gap: 2rem;
    }

    .feature-card-grid,
    .feature-card-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-principles__grid {
        gap: 3rem;
    }
}

@media (max-width: 42rem) {
    .features-hero {
        padding-top: 10rem;
    }

    .features-hero h1 {
        font-size: clamp(3rem, 14vw, 4rem);
    }

    .features-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .features-hero__actions .text-link {
        align-self: center;
    }

    .feature-overview {
        padding: 1.5rem;
    }

    .feature-overview__row {
        grid-template-columns: 1.7rem minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .feature-card-grid,
    .feature-card-grid--four,
    .feature-card-grid--three {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-height: 21rem;
    }

    .features-cta__inner {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-card:hover {
        transform: none;
    }
}

/* How it works */

.workflow-hero,
.companies-hero {
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    padding: 13.25rem 0 clamp(5rem, 8vw, 7.5rem);
}

.workflow-hero__grid,
.companies-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.workflow-hero__copy,
.companies-hero__copy {
    max-width: 48rem;
}

.workflow-hero h1,
.companies-hero h1 {
    margin: 1rem 0 1.5rem;
    color: var(--evergreen-deep);
    font-size: clamp(3.55rem, 5.5vw, 5.65rem);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.98;
    text-wrap: balance;
}

.workflow-hero h1 {
    max-width: 15ch;
}

.companies-hero h1 {
    max-width: 17ch;
}

.workflow-hero__lead,
.companies-hero__lead {
    max-width: 44rem;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.4vw, 1.25rem);
    line-height: 1.65;
}

.workflow-hero__actions,
.companies-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.25rem;
}

.workflow-hero__actions .text-link,
.companies-hero__actions .text-link {
    color: var(--evergreen-deep);
    font-weight: 600;
    text-decoration-color: rgb(0 115 181 / 38%);
    text-underline-offset: 0.35rem;
}

.workflow-brief,
.companies-summary {
    border-radius: var(--radius-lg);
    background: var(--evergreen-deep);
    color: var(--white);
    padding: clamp(2rem, 3.4vw, 3rem);
    box-shadow: var(--shadow);
}

.workflow-brief__label,
.companies-summary__label {
    margin: 0 0 1.4rem;
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.workflow-brief__item {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
    border-top: 1px solid rgb(255 255 255 / 18%);
    padding: 1.2rem 0;
}

.workflow-brief__item > span {
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
}

.workflow-brief__item strong,
.workflow-brief__item p {
    display: block;
    margin: 0;
}

.workflow-brief__item p,
.workflow-brief__note {
    color: rgb(255 255 255 / 66%);
    font-size: 0.88rem;
}

.workflow-brief__note {
    margin: 1.35rem 0 0;
}

.workflow-process {
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.workflow-process__heading {
    display: grid;
    grid-template-columns: minmax(11rem, 0.45fr) minmax(0, 0.75fr) minmax(18rem, 0.8fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.workflow-process__heading h2,
.workflow-responsibilities__heading h2,
.workflow-principles h2,
.company-dashboard__heading h2,
.company-benefits__heading h2,
.company-roles h2,
.company-governance h2 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.05;
    text-wrap: balance;
}

.workflow-process__heading > p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.workflow-steps {
    border-top: 1px solid var(--line);
}

.workflow-step {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) minmax(14rem, 0.38fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    border-bottom: 1px solid var(--line);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.workflow-step__number {
    color: var(--azure);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.workflow-step__content {
    position: relative;
    padding-left: 5rem;
}

.workflow-step__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid #c8d8e7;
    border-radius: var(--radius-sm);
    background: var(--azure-soft);
    color: var(--azure-deep);
}

.workflow-step__icon svg,
.company-benefit__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.workflow-step__phase {
    margin: 0 0 0.45rem;
    color: var(--azure-deep);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.workflow-step h3 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.workflow-step__content > p:last-child {
    max-width: 43rem;
    margin: 1rem 0 0;
    color: var(--muted);
}

.workflow-step aside {
    border-left: 0.18rem solid var(--azure);
    background: var(--cream);
    padding: 1.1rem 1.25rem;
}

.workflow-step aside strong,
.workflow-step aside p {
    display: block;
    margin: 0;
}

.workflow-step aside strong {
    color: var(--azure-deep);
    font-size: 0.71rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.workflow-step aside p {
    margin-top: 0.3rem;
    color: var(--evergreen-deep);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.workflow-responsibilities {
    border-top: 1px solid var(--line);
    background: var(--cream);
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.workflow-responsibilities__heading {
    display: grid;
    grid-template-columns: minmax(12rem, 0.45fr) minmax(0, 1.55fr);
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.workflow-responsibilities__heading h2 {
    max-width: 21ch;
}

.responsibility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.responsibility-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: clamp(2rem, 4vw, 3.5rem);
}

.responsibility-card--dark {
    border-color: var(--evergreen-deep);
    background: var(--evergreen-deep);
    color: var(--white);
}

.responsibility-card__label {
    margin: 0;
    color: var(--azure-deep);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.responsibility-card--dark .responsibility-card__label {
    color: #7dd3fc;
}

.responsibility-card h3 {
    margin: 0.75rem 0 1.6rem;
    color: var(--evergreen-deep);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -0.045em;
}

.responsibility-card--dark h3 {
    color: var(--white);
}

.responsibility-card ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.responsibility-card li {
    border-top: 1px solid var(--line);
    padding: 0.9rem 0;
    color: var(--muted);
}

.responsibility-card--dark li {
    border-color: rgb(255 255 255 / 18%);
    color: rgb(255 255 255 / 72%);
}

.workflow-principles,
.company-governance {
    background: var(--azure-soft);
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.workflow-principles__grid,
.company-governance__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(4rem, 9vw, 9rem);
}

.workflow-principles h2,
.company-governance h2 {
    max-width: 16ch;
    margin-top: 1rem;
}

.workflow-principles__list article,
.company-role-list article {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1.25rem;
    border-top: 1px solid #c8d8e7;
    padding: 1.5rem 0;
}

.workflow-principles__list article:last-child,
.company-role-list article:last-child {
    border-bottom: 1px solid #c8d8e7;
}

.workflow-principles__list article > span,
.company-role-list article > span {
    color: var(--azure);
    font-size: 0.76rem;
    font-weight: 700;
}

.workflow-principles__list h3,
.workflow-principles__list p,
.company-role-list h3,
.company-role-list p {
    margin: 0;
}

.workflow-principles__list h3,
.company-role-list h3 {
    color: var(--evergreen-deep);
    font-size: 1.15rem;
}

.workflow-principles__list p,
.company-role-list p {
    margin-top: 0.35rem;
    color: var(--muted);
}

.workflow-cta,
.companies-cta {
    background: var(--evergreen-deep);
    padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}

.workflow-cta__inner,
.companies-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
}

.workflow-cta .eyebrow,
.companies-cta .eyebrow {
    color: #7dd3fc;
}

.workflow-cta h2,
.companies-cta h2 {
    max-width: 24ch;
    margin: 1rem 0 0;
    color: var(--white);
    font-size: clamp(2.25rem, 3.6vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.08;
    text-wrap: balance;
}

.workflow-cta .button,
.companies-cta .button {
    border: 1px solid var(--white);
    background: var(--white);
    color: var(--evergreen-deep);
}

/* For companies */

.companies-summary > div {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
    border-top: 1px solid rgb(255 255 255 / 18%);
    padding: 1.1rem 0;
}

.companies-summary > div > span {
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
}

.companies-summary > div p,
.companies-summary > div strong {
    display: block;
    margin: 0;
}

.companies-summary > div p {
    color: rgb(255 255 255 / 66%);
    font-size: 0.88rem;
}

.companies-summary > div strong {
    margin-bottom: 0.15rem;
    color: var(--white);
    font-size: 1rem;
}

.company-outcomes {
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.company-outcomes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-outcomes article {
    min-height: 15rem;
    border-right: 1px solid var(--line);
    padding: clamp(2rem, 4vw, 3.5rem);
}

.company-outcomes article:first-child {
    border-left: 1px solid var(--line);
}

.company-outcomes article > span,
.company-benefit__number {
    color: var(--azure);
    font-size: 0.76rem;
    font-weight: 700;
}

.company-outcomes h2 {
    margin: 1.5rem 0 0.65rem;
    color: var(--evergreen-deep);
    font-size: 1.45rem;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

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

.company-dashboard {
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.company-dashboard__heading {
    display: grid;
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1.58fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
}

.company-dashboard__heading h2 {
    max-width: 21ch;
}

.company-dashboard__heading > div > p {
    max-width: 50rem;
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: 1.08rem;
}

.company-benefits {
    border-top: 1px solid var(--line);
    background: var(--cream);
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.company-benefits__heading {
    display: grid;
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1.58fr);
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.company-benefits__heading h2 {
    max-width: 22ch;
}

.company-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.company-benefit-grid article {
    min-height: 24rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: clamp(1.5rem, 2.5vw, 2.15rem);
}

.company-benefit__icon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid #c8d8e7;
    border-radius: var(--radius-sm);
    background: var(--azure-soft);
    color: var(--azure-deep);
}

.company-benefit__number {
    margin: 2rem 0 0.5rem;
}

.company-benefit-grid h3 {
    margin: 0;
    color: var(--evergreen-deep);
    font-size: 1.45rem;
    line-height: 1.2;
}

.company-benefit-grid h3 + p {
    margin: 1rem 0 0;
    color: var(--muted);
}

.company-roles {
    padding: clamp(5rem, 8vw, 8rem) 0;
}

.company-roles__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(4rem, 9vw, 9rem);
}

.company-roles__intro h2 {
    max-width: 16ch;
    margin-top: 1rem;
}

.company-roles__intro > p:last-child {
    max-width: 35rem;
    margin: 1.4rem 0 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.company-role-list article {
    border-color: var(--line);
}

.company-governance__content > p {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
}

.company-governance__content ul {
    display: grid;
    gap: 0;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.company-governance__content li {
    border-top: 1px solid #c8d8e7;
    color: var(--evergreen-deep);
    padding: 1rem 0;
    font-weight: 600;
}

.company-governance__content li:last-child {
    border-bottom: 1px solid #c8d8e7;
}

.companies-cta__inner > div:last-child {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.companies-cta__secondary {
    color: rgb(255 255 255 / 75%);
    font-size: 0.9rem;
    font-weight: 600;
    text-underline-offset: 0.3rem;
}

@media (max-width: 72rem) {
    .company-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 64rem) {
    .workflow-hero__grid,
    .companies-hero__grid,
    .workflow-process__heading,
    .workflow-responsibilities__heading,
    .workflow-principles__grid,
    .company-dashboard__heading,
    .company-benefits__heading,
    .company-roles__grid,
    .company-governance__grid {
        grid-template-columns: 1fr;
    }

    .workflow-hero__grid,
    .companies-hero__grid {
        gap: 3.5rem;
    }

    .workflow-brief,
    .companies-summary {
        max-width: 42rem;
    }

    .workflow-process__heading,
    .workflow-responsibilities__heading,
    .company-dashboard__heading,
    .company-benefits__heading {
        gap: 2rem;
    }

    .workflow-step {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .workflow-step aside {
        grid-column: 2;
    }

    .workflow-principles__grid,
    .company-roles__grid,
    .company-governance__grid {
        gap: 3rem;
    }
}

@media (max-width: 50rem) {
    .responsibility-grid,
    .company-outcomes__grid,
    .company-benefit-grid {
        grid-template-columns: 1fr;
    }

    .company-outcomes article,
    .company-outcomes article:first-child {
        min-height: 0;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .company-outcomes article:last-child {
        border-bottom: 0;
    }

    .company-benefit-grid article {
        min-height: 21rem;
    }
}

@media (max-width: 42rem) {
    .workflow-hero,
    .companies-hero {
        padding-top: 10rem;
    }

    .workflow-hero h1,
    .companies-hero h1 {
        font-size: clamp(3rem, 14vw, 4rem);
    }

    .workflow-hero__actions,
    .companies-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .workflow-hero__actions .text-link,
    .companies-hero__actions .text-link {
        align-self: center;
    }

    .workflow-brief,
    .companies-summary {
        padding: 1.5rem;
    }

    .workflow-step {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .workflow-step__content {
        padding-left: 0;
    }

    .workflow-step__icon {
        position: static;
        margin-bottom: 1.4rem;
    }

    .workflow-step aside {
        grid-column: auto;
    }

    .workflow-cta__inner,
    .companies-cta__inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .companies-cta__inner > div:last-child {
        width: 100%;
        align-items: stretch;
    }

    .companies-cta__secondary {
        text-align: center;
    }
}

/* Contextual page journeys */
.related-pages {
    padding: clamp(4.5rem, 7vw, 6.5rem) 0;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.related-pages__header {
    display: grid;
    grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr);
    align-items: end;
    gap: 3rem;
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.related-pages__header .eyebrow {
    margin: 0;
}

.related-pages__header h2 {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.related-pages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.related-page-card {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.25rem;
    min-height: 14rem;
    padding: 2rem;
    border-right: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.related-page-card:first-child {
    border-left: 1px solid var(--line);
}

.related-page-card:hover,
.related-page-card:focus-visible {
    background: var(--azure-soft);
    box-shadow: inset 0 0 0 1px rgb(0 115 181 / 8%);
}

.related-page-card__number {
    color: var(--azure);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.related-page-card strong {
    display: block;
    margin-bottom: 0.65rem;
    font-size: 1.3rem;
    line-height: 1.2;
}

.related-page-card p {
    max-width: 28ch;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.related-page-card__arrow {
    color: var(--azure);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 180ms ease;
}

.related-page-card:hover .related-page-card__arrow,
.related-page-card:focus-visible .related-page-card__arrow {
    transform: translateX(0.3rem);
}

.section-context-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.section-context-link p {
    margin: 0;
    color: var(--muted);
}

.section-context-link a {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--azure-deep);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.section-context-link a:hover,
.section-context-link a:focus-visible {
    border-color: var(--azure);
    background: var(--azure-soft);
    color: var(--azure-deep);
}

.section-context-link--compact {
    align-items: flex-start;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

.section-context-link--compact p {
    max-width: 17rem;
    font-size: 0.9rem;
}

.section-context-link--compact a {
    font-size: 0.88rem;
}

@media (max-width: 64rem) {
    .related-pages__header {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .related-pages__grid {
        grid-template-columns: 1fr;
    }

    .related-page-card,
    .related-page-card:first-child {
        min-height: 0;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        border-left: 1px solid var(--line);
    }

    .related-page-card:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 42rem) {
    .related-page-card {
        grid-template-columns: 1.6rem minmax(0, 1fr) auto;
        gap: 0.9rem;
        padding: 1.5rem 1.25rem;
    }

    .section-context-link,
    .section-context-link--compact {
        align-items: stretch;
        flex-direction: column;
    }

    .section-context-link a {
        justify-content: space-between;
    }
}

/* Buyer guide */
.guide-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(12rem, 15vw, 14rem) 0 clamp(5rem, 8vw, 7rem);
    background: var(--cream);
}

.guide-hero::after {
    position: absolute;
    z-index: 0;
    right: -8rem;
    bottom: -12rem;
    width: 34rem;
    height: 34rem;
    border: 6rem solid rgb(37 99 235 / 6%);
    border-radius: 50%;
    content: "";
}

.guide-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.72fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.guide-hero h1 {
    max-width: 12ch;
    margin: 1.2rem 0 1.75rem;
    font-size: clamp(4rem, 7vw, 6.8rem);
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.guide-hero__lead {
    max-width: 37rem;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.1rem, 1.5vw, 1.28rem);
    line-height: 1.65;
}

.guide-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.25rem;
}

.guide-hero__actions > span {
    color: var(--muted);
    font-size: 0.88rem;
}

.guide-cover {
    position: relative;
    width: min(100%, 23rem);
    margin-inline: auto;
    padding: 1.25rem;
}

.guide-cover__accent {
    position: absolute;
    inset: 0 3rem 3rem 0;
    border-radius: var(--radius-lg);
    background: var(--azure);
}

.guide-cover img {
    position: relative;
    display: block;
    width: calc(100% - 2rem);
    height: auto;
    aspect-ratio: 720 / 1018;
    margin-left: 2rem;
    border: 1px solid rgb(10 29 49 / 14%);
    border-radius: 0.4rem;
    object-fit: contain;
    box-shadow: 0 30px 70px rgb(10 29 49 / 22%);
}

.guide-cover__note {
    position: absolute;
    right: -1rem;
    bottom: 0.35rem;
    display: grid;
    max-width: 16rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.guide-cover__note strong {
    font-size: 0.88rem;
}

.guide-cover__note span {
    color: var(--muted);
    font-size: 0.76rem;
}

.guide-contents {
    padding: clamp(5rem, 8vw, 7.5rem) 0;
    background: var(--white);
}

.guide-contents__header {
    display: grid;
    grid-template-columns: 0.62fr 1.38fr;
    align-items: end;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.guide-contents__header h2 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.5rem, 4vw, 4.1rem);
    letter-spacing: -0.05em;
    line-height: 1;
}

.guide-contents__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.guide-contents__grid article {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1.1rem;
    min-height: 14rem;
    padding: 2rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
    transition: background-color 180ms ease;
}

.guide-contents__grid article:hover {
    background: var(--azure-soft);
}

.guide-content-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid #bfd3e7;
    border-radius: var(--radius-sm);
    background: var(--azure-soft);
    color: var(--azure-deep);
}

.guide-content-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.guide-contents__grid small {
    color: var(--azure);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.guide-contents__grid h3 {
    margin: 0.7rem 0 0.65rem;
    font-size: 1.25rem;
}

.guide-contents__grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.guide-download {
    padding: clamp(5rem, 8vw, 7.5rem) 0;
    background: var(--evergreen-deep);
    color: var(--white);
}

.guide-download__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(32rem, 1.22fr);
    align-items: start;
    gap: clamp(4rem, 8vw, 8rem);
}

.guide-download__copy {
    position: sticky;
    top: 9rem;
}

.guide-download__copy .eyebrow {
    color: #68d6ee;
}

.guide-download__copy h2 {
    margin: 1rem 0 1.5rem;
    color: var(--white);
    font-size: clamp(2.5rem, 4vw, 4rem);
    letter-spacing: -0.05em;
    line-height: 1;
}

.guide-download__copy > p:last-of-type {
    color: rgb(255 255 255 / 70%);
    font-size: 1.03rem;
}

.guide-download__copy ul {
    display: grid;
    gap: 0.85rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.guide-download__copy li {
    position: relative;
    padding-left: 1.6rem;
    color: rgb(255 255 255 / 84%);
}

.guide-download__copy li::before {
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #68d6ee;
    content: "";
}

.guide-form {
    display: grid;
    gap: 1.15rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 28px 70px rgb(0 0 0 / 22%);
}

.guide-form__reassurance {
    margin: -0.3rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.guide-download-ready {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #8cc9b9;
    border-radius: var(--radius-sm);
    background: #edf9f5;
}

.guide-download-ready[hidden] {
    display: none;
}

.guide-download-ready > span {
    color: #0b644f;
    font-weight: 600;
}

.guide-download-ready .button {
    padding: 0.7rem 1rem;
}

.buyer-guide-promo {
    padding: clamp(4.5rem, 7vw, 6.5rem) 0;
    background: var(--azure-soft);
}

.buyer-guide-promo__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.45fr);
    align-items: center;
    gap: 3rem;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid #bfd3e7;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.buyer-guide-promo h2 {
    max-width: 18ch;
    margin: 0.9rem 0 1rem;
    font-size: clamp(2.4rem, 4vw, 4rem);
    letter-spacing: -0.05em;
    line-height: 1;
}

.buyer-guide-promo p:last-child {
    max-width: 42rem;
    margin-bottom: 0;
    color: var(--muted);
}

.buyer-guide-promo__action {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
}

.buyer-guide-promo__action span {
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 64rem) {
    .guide-hero__grid,
    .guide-download__grid,
    .guide-contents__header,
    .buyer-guide-promo__inner {
        grid-template-columns: 1fr;
    }

    .guide-cover {
        width: min(100%, 22rem);
    }

    .guide-contents__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-download__copy {
        position: static;
        max-width: 42rem;
    }
}

@media (max-width: 42rem) {
    .guide-hero {
        padding-top: 10rem;
    }

    .guide-hero h1 {
        font-size: clamp(3.35rem, 15vw, 4.5rem);
    }

    .guide-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .guide-hero__actions > span {
        text-align: center;
    }

    .guide-cover__note {
        right: 0;
    }

    .guide-contents__grid {
        grid-template-columns: 1fr;
    }

    .guide-contents__grid article {
        min-height: 0;
        padding: 1.5rem;
    }

    .guide-download__grid {
        gap: 2.5rem;
    }

    .guide-download-ready {
        align-items: stretch;
        flex-direction: column;
    }

    .guide-download-ready .button {
        text-align: center;
    }
}

/* Resident photography */
.resident-stories {
    padding: clamp(5rem, 8vw, 7.5rem) 0;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.resident-stories__header {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.resident-stories__header h2 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.75rem, 4.5vw, 4.75rem);
    font-weight: 600;
    letter-spacing: -0.052em;
    line-height: 0.98;
}

.resident-stories__header > p {
    max-width: 31rem;
    margin: 0 0 0.25rem;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.resident-stories__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(20rem, 0.76fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    height: clamp(39rem, 55vw, 47rem);
}

.resident-story {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    border-radius: var(--radius-md);
    background: var(--evergreen-deep);
}

.resident-story--featured {
    grid-row: 1 / span 2;
}

.resident-story img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.resident-story:hover img {
    transform: scale(1.025);
}

.resident-story figcaption {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 1rem;
    padding: 5.5rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, transparent, rgb(10 29 49 / 92%));
    color: var(--white);
}

.resident-story figcaption > span {
    padding-top: 0.28rem;
    color: #68d6ee;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.resident-story figcaption strong {
    display: block;
    font-size: 1.2rem;
    line-height: 1.2;
}

.resident-story--featured figcaption strong {
    font-size: clamp(1.45rem, 2vw, 1.8rem);
}

.resident-story figcaption p {
    max-width: 34rem;
    margin: 0.45rem 0 0;
    color: rgb(255 255 255 / 72%);
    font-size: 0.88rem;
    line-height: 1.5;
}

.resident-stories__note {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.76rem;
}

@media (max-width: 64rem) {
    .resident-stories__header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .resident-stories__grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
    }

    .resident-story,
    .resident-story--featured {
        grid-row: auto;
        height: clamp(19rem, 62vw, 30rem);
    }
}

@media (max-width: 42rem) {
    .resident-story,
    .resident-story--featured {
        height: 21rem;
    }

    .resident-story figcaption {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: 0.65rem;
        padding: 5rem 1.1rem 1.15rem;
    }

    .resident-story--featured figcaption strong,
    .resident-story figcaption strong {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .resident-story img {
        transition: none;
    }

    .resident-story:hover img {
        transform: none;
    }
}

/* Editorial page photography */

.page-visual {
    border-bottom: 1px solid var(--line);
    background: var(--white);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4.5rem, 7vw, 6.5rem);
}

.page-visual--soft {
    background: var(--cream);
}

.page-visual__figure {
    margin: 0;
}

.page-visual__figure img {
    width: 100%;
    aspect-ratio: 2.05 / 1;
    display: block;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.page-visual__figure figcaption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2rem;
    padding-top: 1rem;
}

.page-visual__figure figcaption strong {
    max-width: 52rem;
    color: var(--evergreen-deep);
    font-size: 1rem;
    line-height: 1.5;
}

.page-visual__figure figcaption span {
    color: var(--muted);
    font-size: 0.76rem;
}

@media (max-width: 48rem) {
    .page-visual {
        padding-top: 1rem;
    }

    .page-visual__figure img {
        aspect-ratio: 4 / 3;
    }

    .page-visual__figure figcaption {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}