/* Reusable components. Desktop navigation starts at 1100px. */

@layer components {

    /* ---------- Icon ---------- */

    .icon {
        width: 1.25em;
        height: 1.25em;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .icon-sm {
        width: 1em;
        height: 1em;
    }

    .icon-lg {
        width: 1.5em;
        height: 1.5em;
    }

    .icon-fill {
        fill: currentColor;
    }

    /* Keeps the 2.75rem footprint so rows of icons still line up, but draws
       nothing behind the glyph. The glyph carries the meaning, not a plate. */
    .icon-box {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
        color: var(--heading);
    }

    .icon-box .icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .icon-box-green {
        color: var(--green);
    }

    .icon-box-brand {
        color: var(--brand);
    }

    /* ---------- Button ---------- */

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 2.75rem;
        max-width: 100%;
        padding: 0.55rem 1.15rem;
        border: 1px solid var(--heading);
        border-radius: var(--radius-full);
        background: var(--heading);
        color: var(--white);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
        transition:
            background-color var(--fast) var(--ease),
            border-color var(--fast) var(--ease),
            color var(--fast) var(--ease);
    }

    .button:hover {
        background: var(--dark-surface);
        border-color: var(--dark-surface);
        color: var(--white);
    }

    .button .icon {
        width: 1.05em;
        height: 1.05em;
        transition: translate var(--base) var(--ease);
    }

    .button:hover .icon-arrow {
        translate: 3px 0;
    }

    .button-outline {
        background: var(--surface);
        border-color: var(--border-strong);
        color: var(--heading);
    }

    .button-outline:hover {
        background: var(--surface-muted);
        border-color: var(--border-strong);
        color: var(--heading);
    }

    /* The brand red as a button is now the exception, not the default, so it
       still means something where it is used */
    .button-brand {
        background: var(--brand);
        border-color: var(--brand);
    }

    .button-brand:hover {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
    }

    .button-light {
        background: var(--white);
        border-color: var(--white);
        color: var(--heading);
    }

    .button-light:hover {
        background: var(--warm-strong);
        border-color: var(--warm-strong);
        color: var(--heading);
    }

    .button-small {
        min-height: 2.25rem;
        padding: 0.4rem 0.95rem;
        font-size: var(--text-xs);
    }

    .button-large {
        min-height: 3rem;
        padding: 0.7rem 1.4rem;
        font-size: var(--text-base);
    }

    .button:disabled,
    .button[aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Round icon-only button. Set the size with --size. */
    .icon-button {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: var(--size, 2.5rem);
        height: var(--size, 2.5rem);
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        color: var(--text-muted);
        transition:
            background-color var(--fast) var(--ease),
            border-color var(--fast) var(--ease),
            color var(--fast) var(--ease);
    }

    .icon-button:hover:not(:disabled) {
        background: var(--warm-strong);
        color: var(--heading);
    }

    /* ---------- Labels and tags ---------- */

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        width: fit-content;
        padding: 0.3rem 0.8rem 0.3rem 0.65rem;
        border: var(--line);
        border-radius: var(--radius-full);
        background: var(--surface);
        color: var(--heading);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        line-height: 1.4;
    }

    .eyebrow::before {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        border-radius: var(--radius-full);
        background: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
    }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.75rem;
        border-radius: var(--radius-full);
        background: var(--surface-muted);
        color: var(--text);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        line-height: 1.3;
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    a.tag {
        text-decoration: none;
        transition: color var(--fast) var(--ease);
    }

    a.tag:hover {
        color: var(--green);
    }

    /* ---------- Marquee ---------- */

    .marquee-band {
        padding-block: var(--space-6);
    }

    .marquee {
        overflow: hidden;
    }

    /* Fade both ends so items appear and leave instead of being cut off */
    .marquee[data-ready] {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    }

    .marquee-inner {
        display: flex;
        width: max-content;
    }

    .marquee[data-ready] .marquee-inner {
        animation: marquee var(--marquee-time, 45s) linear infinite;
    }

    .marquee-inner:hover {
        animation-play-state: paused;
    }

    .marquee-track {
        display: flex;
        align-items: center;
        gap: var(--space-7);
        padding-right: var(--space-7);
    }

    .marquee-item {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    .marquee-item .icon {
        color: var(--green);
    }

    /* The second copy sits exactly one row along, so -50% is a seamless loop */
    @keyframes marquee {
        to {
            translate: -50% 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .marquee[data-ready] .marquee-inner {
            animation: none;
        }

        .marquee {
            overflow-x: auto;
        }
    }

    /* ---------- Client logos ---------- */

    /* One sentence in the muted colour, with the key phrase in the heading colour */
    .logo-band-title {
        color: var(--text-muted);
        font-size: var(--text-3xl);
        font-weight: var(--weight-medium);
        line-height: var(--leading-snug);
    }

    .logo-band-title strong {
        color: var(--heading);
        font-weight: var(--weight-medium);
    }

    .logo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }

    /* Three by two on show. The rest are the pool logo-swap.js rotates in, and stay
       in the page as links without it. */
    .logo-grid > li:nth-child(n + 7) {
        display: none;
    }

    .logo-art {
        display: flex;
        justify-content: center;
        max-width: 100%;
    }

    .logo-tile {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 3 / 2;
        padding: var(--space-3);
        border: var(--line);
        border-radius: var(--radius-sm);
        background: var(--surface);
        transition: border-color var(--base) var(--ease);
    }

    .logo-tile:hover {
        border-color: var(--border-strong);
    }

    /* Logos arrive in every shape, so they share one height. They show in their own
       colours and turn grey on hover. */
    .logo-tile img {
        width: auto;
        height: var(--space-7);
        max-width: 100%;
        object-fit: contain;
        transition:
            filter var(--base) var(--ease),
            opacity var(--base) var(--ease);
    }

    .logo-tile:hover img,
    .logo-tile:focus-visible img {
        filter: grayscale(1);
        opacity: 0.65;
    }

    @media (min-width: 600px) {
        .logo-tile {
            padding: var(--space-5);
        }
    }

    @media (min-width: 900px) {
        .logo-tile {
            aspect-ratio: 2 / 1;
        }

        .logo-tile img {
            height: var(--space-8);
        }
    }

    /* ---------- Card ---------- */

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-6);
        border: var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }

    .card > * {
        margin: 0;
    }

    .card-muted {
        border-color: transparent;
        background: var(--surface-muted);
    }

    /* Closing card in a slider: no media, so the content sits centred */
    .card-end {
        justify-content: center;
        background: var(--warm);
    }

    .card-hover {
        transition: border-color var(--base) var(--ease);
    }

    .card-hover:hover {
        border-color: var(--border-strong);
    }

    .card-media {
        display: block;
        aspect-ratio: 16 / 10;
        margin: -0.5rem -0.5rem var(--space-2);
        overflow: hidden;
        border-radius: calc(var(--radius-lg) - 8px);
        background: var(--surface-muted);
    }

    .card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: scale var(--slow) var(--ease-out);
    }

    .card-hover:hover .card-media img {
        scale: 1.04;
    }

    .card-title {
        color: var(--heading);
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    .card-title a {
        color: inherit;
        text-decoration: none;
    }

    .card-title a:hover {
        color: var(--green);
    }

    .card-text {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .card-foot {
        margin-top: auto;
        padding-top: var(--space-2);
    }

    .more-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--green);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-decoration: none;
    }

    .more-link:hover {
        color: var(--green-dark);
    }

    .more-link .icon {
        transition: translate var(--base) var(--ease);
    }

    .more-link:hover .icon {
        translate: 3px 0;
    }

    /* A card that is one big link */
    .link-card {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--heading);
        /* A navigation link, so it takes the same step as the nav and buttons
           rather than body size, which reads heavy once it wraps on a phone */
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        text-decoration: none;
        transition: border-color var(--base) var(--ease);
    }

    .link-card > .icon {
        margin-left: auto;
        color: var(--text-muted);
        transition: translate var(--base) var(--ease), color var(--base) var(--ease);
    }

    .link-card:hover {
        border-color: var(--border-strong);
        color: var(--heading);
    }

    .link-card:hover > .icon {
        translate: 3px 0;
        color: var(--green);
    }

    /* ---------- Lists ---------- */

    .check-list {
        display: grid;
        gap: var(--space-3);
    }

    .check-list li {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .check-list .icon {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.15em;
        padding: 0.2rem;
        border-radius: var(--radius-full);
        background: var(--green-soft);
        color: var(--green);
        stroke-width: 2.5;
    }

    /* Icon above a short title and a line or two of text, three across, with a
       thin rule down the left of each column. For sections meant to be scanned
       rather than read. No border box, so it stays lighter than .card. */
    .feature {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding-inline: var(--space-6);
        border-left: var(--line);
    }

    /* .icon-box centres its glyph in a 2.75rem box, which reads as an indent
       once the icon sits above the text rather than beside it. */
    .feature > .icon-box {
        justify-items: start;
        margin-bottom: var(--space-2);
    }

    /* Pushed to the bottom so the links line up across a row whose items have
       different amounts of text. Grid items already stretch to equal height. */
    .feature > .more-link {
        margin-top: auto;
        padding-top: var(--space-2);
    }

    .feature-title {
        display: block;
        color: var(--heading);
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    .feature-text {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /* 19rem lands three across at the 1200px content width and two on a tablet. */
    .feature-grid {
        display: grid;
        row-gap: var(--space-8);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    }

    /* One column on a phone, where a rule down the left of every item reads as
       an indent. Separate them with a rule above instead. */
    @media (max-width: 639px) {
        .feature-grid {
            row-gap: var(--space-5);
        }

        .feature {
            padding-inline: 0;
            padding-top: var(--space-5);
            border-left: 0;
            border-top: var(--line);
        }
    }

    /* Big numbers */
    .stats {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    }

    .stat {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-1);
    }

    .stat dt {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
    }

    .stat dd {
        margin: 0;
        color: var(--heading);
        font-size: var(--text-3xl);
        font-weight: var(--weight-semibold);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    /* ---------- Rating and avatar ---------- */

    .stars {
        display: inline-flex;
        gap: 0.1rem;
        color: var(--gold);
    }

    .star-empty {
        color: var(--border-strong);
    }

    .avatar {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
        border-radius: var(--radius-full);
        background: var(--green-soft);
        color: var(--green-dark);
        font-weight: var(--weight-semibold);
    }

    /* ---------- Header ---------- */

    .header {
        position: sticky;
        top: 0;
        z-index: var(--z-header);
        isolation: isolate;
        border-bottom: 1px solid transparent;
        transition: border-color var(--base) var(--ease);
        /* Settles in ahead of the hero, so the page assembles from the top down.
           Shorter than --enter: this is chrome, and it should be ready to click
           before content has finished arriving. No blur, which smears the logo. */
        animation: bar-in var(--menu-time) var(--sheet-ease) backwards;
    }

    .bottom-bar {
        animation: bar-in var(--menu-time) var(--sheet-ease) backwards;
    }

    @keyframes bar-in {
        from {
            opacity: 0;
            translate: 0 calc(var(--bar-from, -1) * 0.75rem);
        }
    }

    /* The blur sits on a pseudo-element so the fixed mobile menu is not trapped by it */
    .header::before,
    .bottom-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--bar-bg);
        -webkit-backdrop-filter: var(--bar-blur);
        backdrop-filter: var(--bar-blur);
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .header::before,
        .bottom-bar::before {
            background: var(--bar-bg-solid);
        }
    }

    .header[data-scrolled],
    .header:has(.nav[data-menu-open]) {
        border-bottom-color: var(--border);
    }

    .header-inner {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        height: var(--header-height);
    }

    .logo {
        display: block;
        flex-shrink: 0;
        padding: var(--space-1) 0;
        border-radius: var(--radius-sm);
    }

    .logo img {
        width: 156px;
        height: auto;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-left: auto;
    }

    .header-cta {
        white-space: nowrap;
    }

    /* ---------- Navigation: shared ---------- */

    .nav-list {
        display: flex;
        align-items: center;
        gap: 0.125rem;
    }

    .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.45rem 0.8rem;
        border-radius: var(--radius-full);
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
    }

    .nav-link:hover,
    .nav-toggle[aria-expanded="true"] {
        background: var(--surface-muted);
        color: var(--heading);
    }

    .nav-link[aria-current="page"] {
        color: var(--heading);
        font-weight: var(--weight-semibold);
    }

    .nav-link .icon {
        width: 0.9rem;
        height: 0.9rem;
        color: var(--text-muted);
        transition: rotate var(--base) var(--ease);
    }

    .nav-toggle[aria-expanded="true"] .icon {
        rotate: 180deg;
    }

    .mega-label {
        margin-bottom: var(--space-3);
        padding-inline: 0.75rem;
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .mega-list {
        display: grid;
        gap: 0.125rem;
    }

    .mega-link {
        display: block;
        padding: 0.6rem 0.75rem;
        border-radius: var(--radius-sm);
        color: var(--heading);
        text-decoration: none;
        transition: background-color var(--fast) var(--ease);
    }

    .mega-link:hover,
    .mega-link:focus-visible {
        background: var(--surface-muted);
        color: var(--heading);
    }

    .mega-side .mega-link:hover,
    .mega-side .mega-link:focus-visible {
        background: rgb(18 21 29 / 0.06);
    }

    .mega-title {
        display: block;
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: 1.35;
    }

    .mega-link[aria-current="page"] .mega-title {
        color: var(--green);
    }

    .mega-text {
        display: block;
        margin-top: 0.15rem;
        color: var(--text-muted);
        font-size: var(--text-xs);
        line-height: 1.4;
    }

    .nav-extra,
    .nav-surface {
        display: none;
    }

    /* ---------- Navigation: desktop mega menu ---------- */

    @media (min-width: 1100px) {
        .nav {
            margin-left: auto;
        }

        .header-actions {
            margin-left: var(--space-2);
        }

        .nav-group {
            position: static;
        }

        /* Shared white box that slides and resizes between menus */
        .nav-surface {
            display: block;
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            width: var(--surface-width, 40rem);
            height: var(--surface-height, 16rem);
            border: var(--line);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-lg);
            translate: var(--surface-x, 0) 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform-origin: top center;
            scale: 0.98;
            transition:
                translate var(--menu-time) var(--sheet-ease),
                width var(--menu-time) var(--sheet-ease),
                height var(--menu-time) var(--sheet-ease),
                opacity 220ms var(--ease),
                scale 220ms var(--ease),
                visibility 0s linear 220ms;
        }

        .nav[data-menu-open] .nav-surface {
            opacity: 1;
            visibility: visible;
            scale: 1;
            transition:
                translate var(--menu-time) var(--sheet-ease),
                width var(--menu-time) var(--sheet-ease),
                height var(--menu-time) var(--sheet-ease),
                opacity 220ms var(--ease),
                scale 220ms var(--ease);
        }

        /* First open: appear in place without sliding */
        .nav-surface[data-jump] {
            transition: opacity 220ms var(--ease), scale 220ms var(--ease);
        }

        .nav-menu {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            z-index: 1;
            translate: var(--menu-x, 0) 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity var(--menu-time) var(--ease), visibility 0s linear var(--menu-time);
        }

        /* Bridge the gap so the pointer can travel from the button to the menu */
        .nav-menu::before {
            content: "";
            position: absolute;
            inset: -0.75rem 0 100% 0;
        }

        .nav-menu[data-active] {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity var(--menu-time) var(--ease) 60ms;
        }

        .nav-menu[data-active] .mega {
            animation: mega-in var(--enter) var(--sheet-ease) both;
        }

        .nav-menu[data-from="left"] .mega {
            --mega-from: -1.5rem;
        }

        .nav-menu[data-from="right"] .mega {
            --mega-from: 1.5rem;
        }

        .mega {
            display: flex;
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .mega-main {
            padding: var(--space-6) var(--space-5);
        }

        .mega-side {
            width: 17rem;
            padding: var(--space-6) var(--space-5);
            background: var(--warm);
        }

        .mega-main .mega-list {
            width: 17rem;
        }

        .mega-side .mega-note {
            margin-inline: 0.25rem;
        }

        .mega-main .mega-list-2 {
            grid-template-columns: repeat(2, 15.5rem);
            grid-template-rows: repeat(4, auto);
            grid-auto-flow: column;
            column-gap: var(--space-3);
            width: auto;
        }

        /* Without JS, fall back to a plain hover menu */
        .nav:not([data-enhanced]) .nav-group {
            position: relative;
        }

        .nav:not([data-enhanced]) .nav-group:hover > .nav-menu,
        .nav:not([data-enhanced]) .nav-group:focus-within > .nav-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            border: var(--line);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-lg);
        }
    }

    @keyframes mega-in {
        from {
            opacity: 0;
            translate: var(--mega-from, 0) 0.75rem;
            filter: blur(4px);
        }
    }

    /* Shared entrance, used wherever something arrives on screen */
    @keyframes enter {
        from {
            opacity: 0;
            translate: 0 1.5rem;
            filter: blur(6px);
        }
    }

    /* Same entrance, without the blur: for the hero, which is part of LCP.
       filter is not a compositor-only property, so animating it forces a
       main-thread repaint on every frame - fine below the fold, not for the
       element the browser is timing. */
    @keyframes hero-enter {
        from {
            opacity: 0;
            translate: 0 1rem;
        }
    }

    /* Not enough room beside the full nav until 1280px; Contact is in the nav */
    @media (min-width: 1100px) and (max-width: 1279.98px) {
        .header-cta {
            display: none;
        }
    }

    /* ---------- Navigation: small screens (opened from the bottom bar) ---------- */

    .menu-top,
    .nav-head {
        display: none;
    }

    .mega-note {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-4);
        padding: var(--space-3);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text-muted);
        font-size: var(--text-xs);
        line-height: 1.45;
    }

    .mega-note .icon {
        margin-top: 0.1em;
        color: var(--brand);
    }

    @media (max-width: 1099.98px) {
        /* The whole menu slides in from the right */
        .nav {
            position: fixed;
            top: var(--header-height);
            right: 0;
            bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));
            left: 0;
            z-index: var(--z-menu);
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: var(--space-3) var(--gutter) var(--space-7);
            background: var(--warm);
            border-top: var(--line);
            translate: 100% 0;
            visibility: hidden;
            transition:
                translate var(--sheet-time) var(--sheet-ease),
                visibility 0s linear var(--sheet-time);
        }

        .nav[data-open] {
            translate: 0 0;
            visibility: visible;
            transition: translate var(--sheet-time) var(--sheet-ease);
        }

        /* While a section is open, its own screen scrolls instead */
        .nav[data-sub-open] {
            overflow-y: hidden;
        }

        .nav-list,
        .nav-extra {
            max-width: 40rem;
            margin-inline: auto;
        }

        /* The list moves aside while a section screen is open.
           Only the links move: the section screens live inside the list items. */
        .nav-list > li > .nav-link,
        .nav-extra {
            transition:
                translate var(--sheet-time) var(--sheet-ease),
                opacity 350ms var(--ease);
        }

        .nav[data-sub-open] .nav-list > li > .nav-link,
        .nav[data-sub-open] > .nav-extra {
            translate: -30% 0;
            opacity: 0;
        }

        .nav[data-sub-open] .nav-list > li {
            border-color: transparent;
        }

        .nav-list {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        .nav-list > li {
            border-bottom: var(--line);
        }

        /* Items slide in one after another when the menu opens */
        .nav[data-open] .nav-list > li > .nav-link,
        .nav[data-open] > .nav-extra {
            animation: sheet-item 650ms var(--sheet-ease) backwards;
        }

        .nav[data-open] .nav-list > li:nth-child(1) > .nav-link { animation-delay: 140ms; }
        .nav[data-open] .nav-list > li:nth-child(2) > .nav-link { animation-delay: 200ms; }
        .nav[data-open] .nav-list > li:nth-child(3) > .nav-link { animation-delay: 260ms; }
        .nav[data-open] .nav-list > li:nth-child(4) > .nav-link { animation-delay: 320ms; }
        .nav[data-open] .nav-list > li:nth-child(5) > .nav-link { animation-delay: 380ms; }
        .nav[data-open] .nav-list > li:nth-child(6) > .nav-link { animation-delay: 440ms; }
        .nav[data-open] > .nav-extra { animation-delay: 500ms; }

        .nav-link {
            justify-content: space-between;
            width: 100%;
            padding: 1rem 0.25rem;
            border-radius: 0;
            color: var(--heading);
            font-size: var(--text-xl);
            font-weight: var(--weight-semibold);
        }

        .nav-link:hover,
        .nav-toggle[aria-expanded="true"] {
            background: none;
            color: var(--heading);
        }

        /* The chevron points right: sections open as their own screen */
        .nav-link .icon,
        .nav-toggle[aria-expanded="true"] .icon {
            width: 1.25rem;
            height: 1.25rem;
            color: var(--text-muted);
            rotate: -90deg;
        }

        /* Section screens slide in over the list */
        .nav-menu {
            position: absolute;
            inset: 0;
            z-index: 1;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: var(--space-3) var(--gutter) var(--space-7);
            background: var(--warm);
            translate: 100% 0;
            visibility: hidden;
            transition:
                translate var(--sheet-time) var(--sheet-ease),
                visibility 0s linear var(--sheet-time);
        }

        .nav-toggle[aria-expanded="true"] + .nav-menu {
            translate: 0 0;
            visibility: visible;
            transition: translate var(--sheet-time) var(--sheet-ease);
        }

        .menu-top,
        .mega {
            max-width: 40rem;
            margin-inline: auto;
        }

        .nav-head {
            display: flex;
            justify-content: flex-end;
            margin-bottom: var(--space-2);
        }

        .menu-top {
            display: grid;
            gap: var(--space-1);
            margin-bottom: var(--space-4);
        }

        .menu-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
        }

        .menu-back {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            width: fit-content;
            margin-left: -0.5rem;
            padding: 0.5rem;
            border-radius: var(--radius-full);
            color: var(--text-muted);
            font-size: var(--text-sm);
            font-weight: var(--weight-medium);
        }

        .menu-back:hover {
            background: var(--warm-strong);
            color: var(--heading);
        }

        .menu-heading {
            color: var(--heading);
            font-size: var(--text-2xl);
            font-weight: var(--weight-semibold);
            letter-spacing: -0.015em;
        }

        .nav-toggle[aria-expanded="true"] + .nav-menu .mega > * {
            animation: sheet-item 650ms var(--sheet-ease) backwards;
            animation-delay: 140ms;
        }

        .nav-toggle[aria-expanded="true"] + .nav-menu .mega > :nth-child(2) {
            animation-delay: 240ms;
        }

        .mega-main {
            padding: 0 0 var(--space-5);
        }

        .mega-side {
            padding: var(--space-4);
            border-radius: var(--radius);
            background: var(--warm-strong);
        }

        .mega-link:hover,
        .mega-link:focus-visible {
            background: var(--warm-strong);
        }

        .mega-side .mega-link:hover,
        .mega-side .mega-link:focus-visible {
            background: rgb(18 21 29 / 0.05);
        }

        .mega-main > .mega-label:first-child {
            margin-top: 0;
        }

        .mega-label {
            margin-bottom: var(--space-1);
            padding-inline: 0;
        }

        /* A thin line between items makes the long list easier to scan */
        .mega-list li + li {
            border-top: var(--line);
        }

        .mega-side .mega-list li + li {
            border-top-color: var(--border-strong);
        }

        .mega-link {
            padding: 0.7rem 0.5rem;
            border-radius: var(--radius-sm);
        }

        .mega-title {
            font-size: var(--text-base);
        }

        .mega-list-2 {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        }

        .nav-extra {
            display: grid;
            justify-items: start;
            gap: var(--space-5);
            margin-top: var(--space-6);
        }

        .nav-phone {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--heading);
            font-weight: var(--weight-semibold);
            text-decoration: none;
        }

        body[data-menu-open] {
            overflow: hidden;
        }
    }

    @keyframes sheet-item {
        from {
            opacity: 0;
            translate: 1.5rem 0;
        }
    }

    @media (max-width: 359.98px) {
        .header-cta {
            display: none;
        }
    }

    .menu-close {
        margin-right: -0.5rem;
    }

    /* ---------- Bottom bar (small screens) ---------- */

    .bottom-bar {
        --bar-from: 1;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-bar);
        isolation: isolate;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: var(--line);
    }

    .bottom-bar-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: var(--bottom-bar-height);
    }

    .bottom-bar-link {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        width: 100%;
        height: 100%;
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--fast) var(--ease);
    }

    .bar-icon {
        display: grid;
        place-items: center;
        width: 3.25rem;
        height: 1.9rem;
        border-radius: var(--radius-full);
        transition: background-color var(--base) var(--ease);
    }

    .bar-label {
        font-size: 0.6875rem;
        font-weight: var(--weight-medium);
        letter-spacing: 0.005em;
        line-height: 1;
    }

    .bottom-bar-link .icon {
        width: 1.3rem;
        height: 1.3rem;
        stroke-width: 1.9;
    }

    .bottom-bar-link:hover,
    .bottom-bar-link[aria-expanded="true"] {
        color: var(--heading);
    }

    .bottom-bar-link:active .bar-icon {
        background: var(--warm-strong);
    }

    .bottom-bar-link[aria-current="page"] {
        color: var(--heading);
    }

    .bottom-bar-link[aria-current="page"] .icon {
        color: var(--brand);
    }

    /* A short line on the bar's top edge marks the current page */
    .bottom-bar-link[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: -1px;
        width: 2.25rem;
        height: 2px;
        border-radius: var(--radius-full);
        background: var(--brand);
    }

    /* Menu button: four squares, like the logo, that fold into a close mark */
    .menu-icon {
        position: relative;
        display: block;
        width: 1.3rem;
        height: 1.3rem;
        transition: rotate 450ms var(--ease-out), scale 450ms var(--ease-out);
    }

    .menu-icon span {
        position: absolute;
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 0.15rem;
        background: currentColor;
        transition:
            translate 450ms var(--ease-out),
            border-radius 450ms var(--ease-out),
            background-color var(--fast) var(--ease);
    }

    .menu-icon span:nth-child(1) { top: 0; left: 0.05rem; }
    .menu-icon span:nth-child(2) { top: 0; right: 0.05rem; background: var(--brand); }
    .menu-icon span:nth-child(3) { bottom: 0; left: 0.05rem; }
    .menu-icon span:nth-child(4) { bottom: 0; right: 0.05rem; }

    .menu-button[aria-expanded="true"] .menu-icon {
        rotate: 45deg;
        scale: 0.9;
    }

    .menu-button[aria-expanded="true"] .menu-icon span {
        border-radius: var(--radius-full);
    }

    .menu-label-open,
    .menu-button[aria-expanded="true"] .bar-label {
        display: none;
    }

    .menu-button[aria-expanded="true"] .menu-label-open {
        display: block;
    }

    @media (min-width: 1100px) {
        .bottom-bar {
            display: none;
        }
    }

    @media (max-width: 1099.98px) {
        body {
            padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));
        }
    }

    /* ---------- FAQ ---------- */

    .faq {
        display: grid;
        gap: var(--space-3);
    }

    /* FAQs split under topic headings: a wider gap between topics than between questions */
    .faq-groups {
        display: grid;
        gap: var(--space-8);
    }

    .faq-groups section {
        display: grid;
        gap: var(--space-4);
    }

    .faq-groups h3 {
        scroll-margin-top: calc(var(--header-height) + var(--space-6));
    }

    .faq-item {
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
    }

    .faq-item[open] {
        border-color: var(--border-strong);
        box-shadow: var(--shadow);
    }

    .faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: 1.05rem 1.25rem;
        color: var(--heading);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        cursor: pointer;
        list-style: none;
        border-radius: var(--radius);
    }

    .faq-item summary::-webkit-details-marker {
        display: none;
    }

    .faq-item summary .icon {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0.3rem;
        border-radius: var(--radius-full);
        background: var(--surface-muted);
        color: var(--heading);
        transition: rotate var(--base) var(--ease), background-color var(--base) var(--ease);
    }

    .faq-item[open] summary .icon {
        rotate: 180deg;
        background: var(--heading);
        color: var(--white);
    }

    .faq-answer {
        padding: 0 1.25rem 1.25rem;
        color: var(--text-muted);
    }

    .faq-answer > * + * {
        margin-top: var(--space-3);
    }

    @supports (interpolate-size: allow-keywords) {
        .faq-item {
            interpolate-size: allow-keywords;
        }

        .faq-item::details-content {
            height: 0;
            overflow: clip;
            transition:
                height var(--base) var(--ease),
                content-visibility var(--base) allow-discrete;
        }

        .faq-item[open]::details-content {
            height: auto;
        }
    }

    /* ---------- Slider ---------- */

    .slider {
        position: relative;
    }

    .slider-track {
        position: relative;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--slide-width, min(85%, 22rem));
        gap: var(--space-4);
        margin: -8px;
        padding: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 8px;
        scrollbar-width: none;
        border-radius: var(--radius-lg);
    }

    /* While slider.js is driving the scroll position itself */
    .slider-track[data-gliding] {
        scroll-snap-type: none;
    }

    .slider-track::-webkit-scrollbar {
        display: none;
    }

    .slider-track > * {
        display: flex;
        scroll-snap-align: start;
    }

    .slider-track > * > * {
        flex: 1;
    }

    /* Every card in a slider gives its title and text the same number of lines,
       so the cards line up whatever the content length. Paired with the fixed
       character limits in the template. */
    .slider-track .card-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .slider-track .card-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .slider-wide {
        --slide-width: min(90%, 30rem);
    }

    .slider-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }

    .slider[data-static] .slider-controls {
        display: none;
    }

    .slider-button {
        --size: 2.25rem;
        border-color: var(--border);
        background: var(--surface);
        color: var(--heading);
    }

    .slider-button .icon {
        width: 1rem;
        height: 1rem;
    }

    .slider-button:hover:not(:disabled) {
        border-color: var(--heading);
        background: var(--heading);
        color: var(--white);
    }

    .slider-button:disabled {
        opacity: 0.4;
        cursor: default;
    }

    .slider-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 24px square at minimum: the WCAG 2.2 target size for something tapped */
    .slider-dot {
        display: grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
    }

    .slider-dot::before {
        content: "";
        width: 0.4rem;
        height: 0.4rem;
        border-radius: var(--radius-full);
        background: var(--border-strong);
        transition: width var(--base) var(--ease), background-color var(--base) var(--ease);
    }

    .slider-dot:hover::before {
        background: var(--text-muted);
    }

    .slider-dot[aria-current="true"] {
        width: 2rem;
    }

    .slider-dot[aria-current="true"]::before {
        width: 1.4rem;
        background: var(--heading);
    }

    /* ---------- Modal ---------- */

    .modal {
        width: min(40rem, 100% - 2 * var(--gutter));
        max-width: none;
        max-height: min(88dvh, 46rem);
        margin: auto;
        padding: 0;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow-lg);
    }

    .modal[open] {
        display: flex;
        flex-direction: column;
        animation: modal-in var(--base) var(--ease-out);
    }

    .modal::backdrop {
        background: rgb(18 21 29 / 0.5);
    }

    .modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-6) var(--space-3);
    }

    .modal-body {
        display: grid;
        gap: var(--space-4);
        padding: 0 var(--space-6) var(--space-6);
        overflow-y: auto;
        color: var(--text-muted);
    }

    .modal-foot {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-6);
        border-top: var(--line);
    }

    .modal-title {
        font-size: var(--text-2xl);
    }

    body:has(.modal[open]) {
        overflow: hidden;
    }

    @keyframes modal-in {
        from {
            opacity: 0;
            scale: 0.97;
        }
    }

    /* ---------- Toast messages ---------- */

    .toasts {
        position: fixed;
        top: calc(var(--header-height) + var(--space-3));
        right: var(--gutter);
        z-index: var(--z-toast);
        display: grid;
        gap: var(--space-2);
        width: min(24rem, 100% - 2 * var(--gutter));
    }

    .toast {
        --toast-color: var(--info);
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        animation: toast-in var(--base) var(--ease-out);
        transition: opacity var(--base) var(--ease), translate var(--base) var(--ease);
    }

    .toast > .icon {
        margin-top: 0.1em;
        color: var(--toast-color);
    }

    .toast-success {
        --toast-color: var(--success);
    }

    .toast-warning {
        --toast-color: var(--warning);
    }

    .toast-error {
        --toast-color: var(--error);
    }

    .toast-body {
        flex: 1;
        font-size: var(--text-sm);
    }

    .toast-title {
        display: block;
        color: var(--heading);
    }

    .toast .icon-button {
        --size: 2rem;
        margin: -0.35rem -0.35rem 0 0;
    }

    .toast[data-leaving] {
        opacity: 0;
        translate: 1rem 0;
    }

    @keyframes toast-in {
        from {
            opacity: 0;
            translate: 1rem 0;
        }
    }

    /* ---------- Cookie banner ---------- */

    .cookie-banner {
        position: fixed;
        bottom: var(--gutter);
        left: var(--gutter);
        z-index: var(--z-toast);
        display: grid;
        gap: var(--space-3);
        width: min(24rem, 100% - 2 * var(--gutter));
        padding: var(--space-5);
        border: var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        animation: modal-in var(--base) var(--ease-out);
    }

    .cookie-banner-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .cookie-banner-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-base);
    }

    .cookie-banner-title .icon {
        color: var(--brand);
    }

    .cookie-banner p {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .cookie-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .cookie-actions .button {
        white-space: normal;
    }

    .link-button {
        display: inline;
        padding: 0;
        text-align: left;
        color: var(--green);
        font-size: inherit;
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .link-button:hover {
        color: var(--green-dark);
    }

    .cookie-group {
        padding: var(--space-4);
        border: var(--line);
        border-radius: var(--radius);
    }

    .cookie-group-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .cookie-group-name {
        display: block;
        color: var(--heading);
        font-weight: var(--weight-semibold);
    }

    .cookie-group-text {
        display: block;
        font-size: var(--text-sm);
    }

    .cookie-group details {
        margin-top: var(--space-3);
        font-size: var(--text-sm);
    }

    .cookie-group summary {
        width: fit-content;
        color: var(--green);
        font-weight: var(--weight-semibold);
        cursor: pointer;
    }

    .always-on {
        flex-shrink: 0;
        color: var(--green);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
    }

    .table-wrap {
        margin-top: var(--space-3);
        overflow-x: auto;
        border: var(--line);
        border-radius: var(--radius-sm);
    }

    .table {
        width: 100%;
        font-size: var(--text-xs);
        text-align: left;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.65rem;
        border-bottom: var(--line);
        vertical-align: top;
    }

    .table th {
        background: var(--surface-muted);
        color: var(--heading);
    }

    .table tr:last-child td {
        border-bottom: 0;
    }

    /* On/off switch */
    .switch {
        position: relative;
        flex-shrink: 0;
        width: 2.75rem;
        height: 1.6rem;
        appearance: none;
        border-radius: var(--radius-full);
        background: var(--border-strong);
        cursor: pointer;
        transition: background-color var(--fast) var(--ease);
    }

    .switch::before {
        content: "";
        position: absolute;
        top: 0.2rem;
        left: 0.2rem;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: var(--radius-full);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        transition: translate var(--fast) var(--ease);
    }

    .switch:checked {
        background: var(--green);
    }

    .switch:checked::before {
        translate: 1.15rem 0;
    }

    /* ---------- WhatsApp chat ---------- */

    .chat {
        position: fixed;
        right: var(--gutter);
        bottom: var(--gutter);
        z-index: var(--z-float);
        display: flex;
        align-items: center;
        gap: var(--space-1);
        animation: modal-in var(--menu-time) var(--sheet-ease);
    }

    .chat-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.55rem 1rem 0.55rem 0.7rem;
        border-radius: var(--radius-full);
        background: var(--whatsapp);
        color: var(--white);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-decoration: none;
        box-shadow: var(--shadow);
        transition: background-color var(--fast) var(--ease);
    }

    .chat-link:hover {
        background: var(--whatsapp-dark);
        color: var(--white);
    }

    .chat-hide {
        --size: 2rem;
        border-color: var(--border);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .chat-show {
        --size: 3rem;
        display: grid;
        background: var(--whatsapp);
        color: var(--white);
        box-shadow: var(--shadow);
    }

    .chat-show:hover {
        background: var(--whatsapp-dark);
        color: var(--white);
    }

    @media (max-width: 1099.98px) {
        .chat,
        .cookie-banner {
            bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom) + var(--space-3));
        }
    }

    /* Keep the chat out of the way while the cookie banner or menu is showing */
    body:has(.cookie-banner:not([hidden])) .chat,
    body[data-menu-open] .chat,
    body[data-menu-open] .cookie-banner {
        display: none;
    }

    /* ---------- Footer ---------- */

    .footer {
        padding-top: var(--space-9);
        background: var(--dark);
        color: var(--dark-muted);
        font-size: var(--text-sm);
    }

    .footer-grid {
        display: grid;
        gap: var(--space-7) var(--space-6);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    }

    @media (min-width: 1000px) {
        .footer-grid {
            grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr;
        }
    }

    .footer-title {
        margin-bottom: var(--space-4);
        color: var(--white);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        letter-spacing: 0;
    }

    .footer-list {
        display: grid;
        gap: var(--space-2);
        font-style: normal;
    }

    .footer a,
    .footer .link-button {
        color: var(--dark-muted);
        text-decoration: none;
        transition: color var(--fast) var(--ease);
    }

    .footer a:hover,
    .footer .link-button:hover {
        color: var(--white);
    }

    .social-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .social-link {
        border-color: var(--border);
        color: var(--heading);
    }

    .social-link .icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    .social-link:hover {
        border-color: var(--brand);
        background: var(--brand);
        color: var(--white);
    }

    .footer .social-link {
        border-color: rgb(255 255 255 / 0.14);
        color: var(--dark-text);
    }

    .footer .social-link:hover {
        border-color: var(--brand);
        background: var(--brand);
        color: var(--white);
    }

    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-3);
        margin-top: var(--space-9);
        padding-block: var(--space-5);
        border-top: 1px solid rgb(255 255 255 / 0.08);
    }

    /* ---------- Scroll reveal ---------- */

    .reveal-ready {
        opacity: 0;
        translate: 0 2rem;
        filter: blur(6px);
        transition:
            opacity var(--enter) var(--sheet-ease),
            translate var(--enter) var(--sheet-ease),
            filter var(--enter) var(--sheet-ease);
        transition-delay: var(--reveal-delay, 0ms);
        pointer-events: none;
    }

    .reveal-ready.is-visible {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
    }

    /* Items arriving together come in one after another. reveal.js decides
       which items share a batch and numbers them. */
    .reveal-1 { --reveal-delay: calc(var(--stagger) * 1); }
    .reveal-2 { --reveal-delay: calc(var(--stagger) * 2); }
    .reveal-3 { --reveal-delay: calc(var(--stagger) * 3); }
    .reveal-4 { --reveal-delay: calc(var(--stagger) * 4); }
    .reveal-5 { --reveal-delay: calc(var(--stagger) * 5); }


    /* ==========================================================================
       Hero, moved out of pages/home.css on 18 September 2026 so every page can use
       it. @keyframes enter and the --enter / --stagger / --sheet-ease tokens were
       already here and in tokens.css, loaded on every page, so only the rules that
       apply them were stranded. The stacked browser mockups stay in home.css: they
       are the homepage's own and a subpage should not copy them.
       Appended at the end because these were written in @layer pages, which outranks
       components, so equal-specificity rules keep winning on source order.
       ========================================================================== */

    /* ---------- Hero ---------- */

    .hero {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
        background: var(--warm);
    }

    /* Faint grid that fades out towards the edges */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            linear-gradient(var(--warm-strong) 1px, transparent 1px),
            linear-gradient(90deg, var(--warm-strong) 1px, transparent 1px);
        background-size: 64px 64px;
        -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 20%, transparent 75%);
        mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 20%, transparent 75%);
    }

    .hero-grid {
        display: grid;
        gap: clamp(2.5rem, 6vw, 4rem);
        align-items: center;
    }

    @media (min-width: 1000px) {
        .hero-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        }
    }

    .hero-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }

    .hero-text > * {
        animation: hero-enter var(--enter-hero) var(--sheet-ease) backwards;
    }

    .hero-text > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
    .hero-text > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
    .hero-text > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
    .hero-text > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
    .hero-text > :nth-child(n + 6) { animation-delay: calc(var(--stagger) * 5); }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.35rem 0.85rem 0.35rem 0.6rem;
        border: var(--line);
        border-radius: var(--radius-full);
        background: rgb(255 255 255 / 0.8);
        color: var(--heading);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        text-decoration: none;
        box-shadow: var(--shadow-sm);
        transition: border-color var(--base) var(--ease);
    }

    .hero-badge > .icon {
        color: var(--text-muted);
        transition: translate var(--base) var(--ease);
    }

    .hero-badge:hover {
        border-color: var(--border-strong);
        color: var(--heading);
    }

    .hero-badge:hover > .icon {
        translate: 2px 0;
    }

    .hero-title {
        max-width: 16ch;
    }

    .hero-kicker {
        display: block;
        margin-bottom: var(--space-3);
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        letter-spacing: 0.02em;
    }

    .hero-lead {
        max-width: 34rem;
        color: var(--text-muted);
        font-size: var(--text-lg);
    }

    .hero-stats {
        display: grid;
        gap: var(--space-3);
        width: 100%;
        margin-top: var(--space-2);
    }

    .hero-stats .stat {
        flex-direction: row-reverse;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .hero-stats .stat dd {
        font-size: var(--text-base);
    }

    .hero-stats .stat dt {
        font-size: var(--text-xs);
        text-align: right;
    }

    /* Wide enough to sit side by side: stack the value over its label again.
       auto-fit so the row stays full whether there are two stats or three. */
    @media (min-width: 30rem) {
        .hero-stats {
            grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        }

        .hero-stats .stat {
            flex-direction: column-reverse;
            align-items: flex-start;
            gap: var(--space-1);
            padding: var(--space-4);
        }

        .hero-stats .stat dd {
            font-size: var(--text-2xl);
        }

        .hero-stats .stat dt {
            text-align: left;
        }
    }


    /* The browser frame itself is shared: a subpage hero can show one screenshot
       in it. The stacking that puts two of them behind each other stays in
       pages/home.css, since that arrangement is the homepage's own. */

    .browser {
        overflow: hidden;
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-lg);
    }

    .browser-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 1.75rem;
        padding-inline: 0.75rem;
        border-bottom: var(--line);
        background: var(--surface-muted);
    }

    .browser-bar span {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: var(--radius-full);
        background: var(--border-strong);
    }

    .browser img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: top;
    }

    /* A hero figure sits beside .hero-text rather than inside it, so it needs its
       own entrance. Same timing as the homepage's visual. */
    .hero-figure {
        animation: hero-enter var(--enter-hero) calc(var(--stagger) * 3) var(--sheet-ease) backwards;
    }


    /* Centred hero for child pages. The two-column .hero-grid assumes a visual
       beside the text; child pages have no image of their own, so they centre
       the text instead. Keeps the same entrance and stagger as .hero-text. */
    .hero-center {
        align-items: center;
        max-width: var(--width-narrow);
        margin-inline: auto;
        text-align: center;
    }

    .hero-center .breadcrumb,
    .hero-center .hero-stats,
    .hero-center .actions {
        justify-content: center;
    }

    .hero-center .hero-stats {
        display: flex;
        flex-wrap: wrap;
    }


    /* Two browser frames stacked, the smaller one overlapping at the bottom left.
       Shared so a subpage hero can use the same arrangement. .hero-note, the
       floating stat card, stays in pages/home.css: it is the homepage's own. */

    /* Stacked browser windows showing real projects */
    .hero-visual {
        position: relative;
        padding: 0 0 12% 8%;
        animation: hero-enter var(--enter-hero) calc(var(--stagger) * 3) var(--sheet-ease) backwards;
    }


    .browser-main {
        position: relative;
        z-index: 1;
    }

    .browser-back {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 52%;
    }


    /* ==========================================================================
       Page sections the homepage introduced, shared so every page can use them:
       service list, pricing panel, results stats, help card, reviews and the
       closing call to action. Appended at the end because they were written in
       @layer pages, which outranks components, so .review over .card and
       .button-ghost over .button keep winning on source order.
       ========================================================================== */


    /* ---------- Services ---------- */

    .service-list {
        display: grid;
        gap: var(--space-3);
    }

    /* ---------- Pricing ---------- */

    .pricing {
        display: grid;
        gap: var(--space-7);
        padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
        border: var(--line);
        border-radius: var(--radius-lg);
        background: var(--warm);
        color: var(--text);
    }

    @media (min-width: 900px) {
        .pricing {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            align-items: center;
        }
    }

    .pricing h2,
    .pricing strong {
        color: var(--heading);
    }

    .price-box {
        padding: var(--space-3);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .price-list {
        display: grid;
    }

    .price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    @media (max-width: 519.98px) {
        .price {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-1);
        }
    }

    .price + .price {
        border-top: var(--line);
    }

    .price dt {
        color: var(--heading);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    .price dt a {
        color: var(--green);
    }

    .price dt a:hover {
        color: var(--green-dark);
    }

    .price dt span {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-regular);
    }

    .price dd {
        margin: 0;
        color: var(--heading);
        font-size: var(--text-2xl);
        font-weight: var(--weight-semibold);
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .price dd small {
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-regular);
        letter-spacing: 0;
    }

    .price-note {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-sm);
        background: var(--warm);
        color: var(--heading);
        font-size: var(--text-sm);
    }

    .price-note .icon {
        color: var(--green);
    }

    /* ---------- Results ---------- */

    .results {
        padding: var(--space-6);
        border: var(--line);
        border-radius: var(--radius-lg);
        background:
            radial-gradient(30rem 18rem at 0% 0%, var(--warm), transparent 70%),
            var(--surface);
    }

    .results .card-head {
        flex-wrap: wrap;
        margin-bottom: var(--space-4);
    }

    .results-lead {
        margin-bottom: var(--space-6);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .results-title {
        font-size: var(--text-xl);
    }

    .results-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    @media (max-width: 519.98px) {
        .results {
            padding: var(--space-5);
        }

        .results-grid .stat {
            padding: var(--space-4);
        }

        .results-grid .stat dd {
            font-size: var(--text-2xl);
        }
    }

    .results-grid .stat {
        padding: var(--space-5);
        border-radius: var(--radius);
        background: var(--surface-muted);
    }

    .results-grid .stat:last-child {
        background: var(--heading);
    }

    .results-grid .stat:last-child dd,
    .results-grid .stat:last-child dt {
        color: var(--white);
    }

    cite {
        font-style: normal;
    }

    /* ---------- Testimonials ---------- */

    .review {
        gap: var(--space-5);
    }

    .review-text {
        flex: 1;
        color: var(--heading);
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    .review-author {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-top: var(--space-4);
        border-top: var(--line);
        line-height: var(--leading-snug);
    }

    .review-author a {
        color: var(--green);
    }

    .review-author a:hover {
        color: var(--green-dark);
    }

    /* ---------- Closing call to action ---------- */

    .cta-band {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: grid;
        gap: var(--space-7);
        align-items: center;
        padding: clamp(2rem, 1.25rem + 3.5vw, 4rem);
        border-radius: var(--radius-lg);
        background: var(--green-dark);
        color: var(--green-soft);
    }

    .cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(36rem 22rem at 100% 100%, rgb(111 211 179 / 0.28), transparent 70%);
    }

    /* The price box is a white card in the pricing section; on the green band it
       darkens the green instead, so it reads as part of the band. */
    .cta-band .price-box {
        border-color: rgb(255 255 255 / 0.12);
        background: rgb(0 0 0 / 0.16);
    }

    .cta-band .price-note {
        background: rgb(255 255 255 / 0.08);
        color: var(--white);
    }

    .cta-band .price-note .icon {
        color: var(--green-bright);
    }

    @media (min-width: 860px) {
        .cta-band {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        }
    }

    .cta-title {
        color: var(--white);
        font-size: var(--text-3xl);
    }

    .cta-band p {
        max-width: 32rem;
        font-size: var(--text-lg);
    }

    .cta-image {
        width: 100%;
        max-width: 26rem;
        margin-inline: auto;
        border-radius: var(--radius);
    }

    /* Light version of the closing band, for a note that wants a surface of its
       own without the weight of the dark one. Warm rather than --surface,
       because --surface and --page are both white and the band would vanish.
       Declared after the 860px rule above so the single column wins at every
       width: both selectors are one class, so source order decides. */
    .cta-band-warm {
        grid-template-columns: minmax(0, 1fr);
        margin-top: var(--space-8);
        border: var(--line);
        background: var(--warm);
        color: var(--text);
    }

    /* No radial glow: it belongs to the dark band and reads as a stain on warm. */
    .cta-band-warm::before {
        background: none;
    }

    .cta-band-warm .cta-title {
        color: var(--heading);
    }

    /* Wider than the dark band's 32rem, which is set for a column beside a panel
       rather than a line running the full width of the band. */
    .cta-band-warm p {
        max-width: 52rem;
    }

    .button-ghost {
        border-color: rgb(255 255 255 / 0.2);
        background: transparent;
        color: var(--white);
    }

    .button-ghost:hover {
        border-color: rgb(255 255 255 / 0.35);
        background: rgb(255 255 255 / 0.08);
    }


    /* ==========================================================================
       The last of pages/home.css, merged here on 18 September 2026. Every page now
       gets the same components from one file and there are no per-page stylesheets.
       .hero-note and .founder* are still only used by the homepage; they live here
       so a second page can pick them up without moving CSS again.
       ========================================================================== */




    .hero-note {
        position: absolute;
        top: 10%;
        left: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 0.7rem 1.1rem 0.7rem 0.7rem;
        border: var(--line);
        border-radius: var(--radius);
        background: rgb(255 255 255 / 0.92);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: var(--shadow);
        line-height: var(--leading-snug);
    }

    .hero-note-title {
        display: block;
        font-size: var(--text-sm);
    }

    .hero-note-text {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    /* ---------- Founder ---------- */

    .founder {
        display: grid;
        gap: var(--space-7);
        align-items: center;
    }

    @media (min-width: 900px) {
        .founder {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
            gap: clamp(2.5rem, 5vw, 5rem);
        }
    }

    .founder-quote {
        display: grid;
        gap: var(--space-5);
        padding: var(--space-7);
        border-radius: var(--radius-lg);
        background: var(--warm);
        border: 1px solid var(--warm-strong);
    }

    .founder-quote-mark {
        width: 2.25rem;
        height: 2.25rem;
        color: var(--green);
    }

    .founder-quote blockquote {
        color: var(--heading);
        font-size: var(--text-xl);
        line-height: 1.5;
        letter-spacing: -0.01em;
    }

    .founder-quote figcaption {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        line-height: var(--leading-snug);
    }

    /* ---------- Breadcrumb ---------- */

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .breadcrumb li + li::before {
        content: "/";
        margin-right: var(--space-2);
    }

    .breadcrumb a {
        color: inherit;
    }

    .breadcrumb a:hover {
        color: var(--green);
    }

    /* ---------- Pagination ---------- */

    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
        margin-top: var(--space-8);
    }

    .pagination a,
    .pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        padding-inline: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        color: var(--heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        text-decoration: none;
        transition:
            border-color var(--fast) var(--ease),
            color var(--fast) var(--ease);
    }

    .pagination a:hover {
        border-color: var(--green);
        color: var(--green);
    }

    .pagination [aria-current="page"] {
        border-color: var(--heading);
        background: var(--heading);
        color: var(--white);
    }

    .pagination .pagination-gap {
        border-color: transparent;
    }

    /* ---------- Card lists ---------- */

    /* Cards in a grid are the same height, with the link pinned to the bottom */
    .grid > li {
        display: grid;
    }

    .card-meta {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }
}