/* ==========================================================================
   YEV v9.12.0: new components
   --------------------------------------------------------------------------
   Everything introduced with the four services and the First 10 lives here:
   home services grid, First 10, Build. Launch. Expand. lettering, and the
   service page template. Loaded after tokens.css / nav.css / pathway.css.

   Rules this file keeps:
   - Locked palette only (tokens.css). Gold is an accent and a background,
     never small text on a light ground.
   - Body text never below 16px. Mobile first; min-width queries build up.
   - Every motion effect is opt-in behind prefers-reduced-motion:
     no-preference, and content is fully visible without it.
   - Container queries drive component layout, so a card lays itself out
     by the space it actually gets, not by the viewport.
   - Ad-blocker-safe names: no ad/ads/advert/promo/banner/sponsor tokens.
   ========================================================================== */

:root {
    --v9-radius: 20px;
    --v9-radius-sm: 12px;
    --v9-line: rgba(255, 255, 255, 0.14);
    --v9-line-ink: rgba(0, 33, 97, 0.12);
    --v9-ease: cubic-bezier(.2, .8, .2, 1);
    --v9-shadow: 0 1px 0 rgba(0, 33, 97, 0.04), 0 18px 40px -18px rgba(0, 33, 97, 0.28);
    --v9-wrap: min(1180px, 100% - 2 * clamp(20px, 5vw, 48px));
}

/* ---------- shared primitives ---------- */

.v9-wrap { width: var(--v9-wrap); margin-inline: auto; }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yev-royal);
    margin: 0 0 14px;
}
.kicker::before {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.6;
}
.on-dark .kicker { color: var(--yev-gold); }

.v9-h2 {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--yev-navy);
    text-wrap: balance;
    margin: 0 0 18px;
}
.on-dark .v9-h2 { color: #fff; }

.v9-lede {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
    max-width: 62ch;
    margin: 0;
}
.on-dark .v9-lede { color: rgba(255, 255, 255, 0.82); }

.v9-section { padding-block: clamp(64px, 9vw, 120px); }

.tick {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.tick li {
    position: relative;
    padding-left: 30px;
    line-height: 1.5;
    font-size: 1rem;
}
.tick li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background:
        linear-gradient(135deg, transparent 0 40%, var(--yev-navy) 40% 60%, transparent 60%) center / 0 0 no-repeat,
        var(--yev-gold);
    box-shadow: inset 0 0 0 1.5px rgba(0, 33, 97, 0.18);
}
.tick li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: calc(0.3em + 3px);
    width: 5px;
    height: 9px;
    border: solid var(--yev-navy);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Links that read as a quiet arrow */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--yev-royal);
    text-decoration: none;
    min-height: 44px;
}
.arrow-link::after {
    content: '';
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: width .3s var(--v9-ease);
}
.arrow-link:hover::after,
.arrow-link:focus-visible::after { width: 30px; }
.arrow-link:focus-visible { outline: 3px solid var(--yev-royal); outline-offset: 4px; border-radius: 6px; }
.on-dark .arrow-link { color: var(--yev-gold); }
.on-dark .arrow-link:focus-visible { outline-color: var(--yev-gold); }

/* ==========================================================================
   BUILD. LAUNCH. EXPAND. lettering
   Mat's idea: the three words run down the page, one letter per line.
   The visual copy is aria-hidden; the real words are in the heading next to
   it, so screen readers never spell B, U, I, L, D.
   ========================================================================== */
.ble {
    display: flex;
    gap: clamp(10px, 2.2cqi, 22px);
    align-items: flex-start;
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: 0;
    user-select: none;
}
.ble > span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(1.5rem, 7cqi, 3.25rem);
    text-transform: uppercase;
}
.ble > span::first-letter { color: var(--ble-first, currentColor); }
.ble > span:nth-child(2) { padding-top: 0.9em; }
.ble > span:nth-child(3) { padding-top: 1.8em; }

/* ==========================================================================
   HOME HERO (v9 adjustments only; the base hero stays in home.css)
   ========================================================================== */
.hero h1 { letter-spacing: -0.02em; }
.hero-actions { margin-top: 4px; }

/* ==========================================================================
   HOME: FOUR WAYS TO WORK WITH ME
   A dark navy field with a faint grid, four doors. Holistic Business
   Development is the gold one.
   ========================================================================== */
.svc {
    position: relative;
    color: #fff;
    background:
        linear-gradient(var(--v9-line) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, var(--v9-line) 1px, transparent 1px) 0 0 / 64px 64px,
        radial-gradient(1200px 600px at 85% -10%, rgba(1, 65, 162, 0.9), transparent 60%),
        var(--yev-navy);
    background-blend-mode: normal;
    padding-block: clamp(72px, 10vw, 128px);
    overflow: clip;
}
.svc::before {
    /* fade the grid out toward the edges so it reads as texture, not graph paper */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 40%, transparent 40%, var(--yev-navy) 95%);
    pointer-events: none;
}
.svc > * { position: relative; }

.svc-head {
    display: grid;
    gap: 18px;
    margin-bottom: clamp(36px, 5vw, 56px);
}
.svc-quote {
    margin: 0;
    padding-left: 18px;
    border-left: 3px solid var(--yev-gold);
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
    line-height: 1.5;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    max-width: 52ch;
    text-wrap: pretty;
}
@media (min-width: 900px) {
    .svc-head { grid-template-columns: 1.1fr 0.9fr; align-items: end; column-gap: 56px; }
    .svc-head .svc-quote { justify-self: end; }
}

.svc-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    grid-template-areas: "hbd" "id" "mm" "sp";
}
@media (min-width: 700px) {
    .svc-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "hbd hbd" "id mm" "sp sp";
    }
}
@media (min-width: 1080px) {
    .svc-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "hbd id mm" "hbd sp sp";
    }
}

.svc-tile {
    --tile-pad: clamp(22px, 3vw, 34px);
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--tile-pad);
    border-radius: var(--v9-radius);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--v9-line);
    backdrop-filter: blur(2px);
    transition: transform .45s var(--v9-ease), background-color .3s ease, border-color .3s ease, box-shadow .45s var(--v9-ease);
    min-height: 100%;
}
.svc-tile--hbd { grid-area: hbd; }
.svc-tile--id  { grid-area: id; }
.svc-tile--mm  { grid-area: mm; }
.svc-tile--sp  { grid-area: sp; }

.svc-tile:hover,
.svc-tile:focus-within {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(254, 212, 42, 0.55);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
/* Quiet the other doors while one is being considered. Brightness, not
   opacity, so text contrast never drops below AA. */
@media (hover: hover) {
    .svc-grid:has(.svc-tile:hover) .svc-tile:not(:hover) { filter: saturate(0.7) brightness(0.9); }
}

.svc-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.svc-num {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--yev-gold);
}
.svc-for {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    text-align: right;
}
.svc-name {
    margin: 0;
    font-size: clamp(1.375rem, 1.1rem + 2.2cqi, 2rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
/* stretched link: the whole tile is clickable, the link name stays short */
.svc-link { color: inherit; text-decoration: none; }
.svc-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.svc-link:focus-visible { outline: none; }
.svc-tile:has(.svc-link:focus-visible) { outline: 3px solid var(--yev-gold); outline-offset: 3px; }

.svc-line {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.84);
    text-wrap: pretty;
}
.svc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.svc-chips li {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--v9-line);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
.svc-go {
    margin-top: auto;
    padding-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--yev-gold);
}
.svc-go::after {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: width .35s var(--v9-ease);
}
.svc-tile:hover .svc-go::after,
.svc-tile:focus-within .svc-go::after { width: 38px; }

/* The flagship door */
.svc-tile--hbd {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
        var(--yev-gold);
    border-color: transparent;
    color: var(--yev-navy);
    overflow: hidden;
}
.svc-tile--hbd:hover,
.svc-tile--hbd:focus-within {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.45), transparent 60%),
        var(--yev-gold);
    border-color: transparent;
}
.svc-tile--hbd .svc-num,
.svc-tile--hbd .svc-go { color: var(--yev-navy); }
.svc-tile--hbd .svc-for { color: rgba(0, 33, 97, 0.78); }
.svc-tile--hbd .svc-line { color: rgba(0, 33, 97, 0.9); font-size: clamp(1rem, 0.95rem + 0.6cqi, 1.1875rem); }
.svc-tile--hbd:has(.svc-link:focus-visible) { outline-color: #fff; }
.svc-badge {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--yev-navy);
    color: var(--yev-gold);
}
.svc-tile--hbd .ble {
    --ble-first: var(--yev-royal);
    color: rgba(0, 33, 97, 0.9);
    margin: 8px 0 4px;
}
.svc-tile--hbd .ble > span { font-size: clamp(1.5rem, 6.5cqi, 2.5rem); }
.svc-tile--hbd .ble > span:nth-child(2) { padding-top: 0.6em; }
.svc-tile--hbd .ble > span:nth-child(3) { padding-top: 1.2em; }
@container (min-width: 400px) {
    .svc-hbd-body {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 28px;
        align-items: end;
    }
}

.svc-foot {
    margin-top: clamp(28px, 4vw, 40px);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.82);
}
.svc-foot p { margin: 0; font-size: 1rem; }

/* ==========================================================================
   THE FIRST 10
   The count is rendered by site.js from ONE config value (FIRST10).
   ========================================================================== */
.f10 {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(254, 212, 42, 0.18), transparent 60%),
        var(--paper);
    color: var(--ink);
}
.f10-grid {
    display: grid;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}
@media (min-width: 960px) {
    .f10-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.f10-copy .v9-lede { margin-bottom: 26px; }
.f10-points { margin-bottom: 26px; }
.f10-why {
    margin: 0 0 30px;
    padding: 18px 20px;
    border-radius: var(--v9-radius-sm);
    background: rgba(0, 33, 97, 0.045);
    border: 1px solid var(--v9-line-ink);
    line-height: 1.6;
    color: var(--ink);
}
.f10-why strong { color: var(--yev-navy); }
.f10-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    align-items: center;
}

/* the pass */
.f10-pass {
    container-type: inline-size;
    position: relative;
    border-radius: 28px;
    padding: clamp(26px, 4vw, 40px);
    color: #fff;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(1, 65, 162, 0.95), transparent 55%),
        var(--yev-navy);
    box-shadow: 0 40px 80px -40px rgba(0, 33, 97, 0.65);
    isolation: isolate;
    overflow: hidden;
}
.f10-perf {
    /* perforation between the rate and the seats, notched like a real pass */
    position: relative;
    border: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.24);
    margin: clamp(26px, 6cqi, 40px) calc(-1 * clamp(26px, 4vw, 40px));
    overflow: visible;
}
.f10-perf::before,
.f10-perf::after {
    content: '';
    position: absolute;
    top: -13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--paper);
}
.f10-perf::before { left: -12px; }
.f10-perf::after { right: -12px; }
.f10-pass-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yev-gold);
    margin: 0 0 18px;
}
.f10-rate {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 0.85;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.f10-rate .cur { font-size: clamp(1.75rem, 8cqi, 3rem); font-weight: 800; color: var(--yev-gold); padding-top: 0.2em; }
.f10-rate .amt { font-size: clamp(5rem, 36cqi, 10rem); font-weight: 900; letter-spacing: -0.04em; }
.f10-rate .per {
    align-self: flex-end;
    padding-bottom: 0.9em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.82);
}
.f10-rate-note {
    margin: 14px 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.82);
}
.f10-seat-area { margin: 0; }
.f10-seats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.f10-seat {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    position: relative;
}
.f10-seat.is-taken {
    background: var(--yev-gold);
    border-color: var(--yev-gold);
}
.f10-seat.is-taken::after {
    /* a small check so "taken" does not rely on colour alone */
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 22%;
    height: 38%;
    border: solid var(--yev-navy);
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
.f10-count {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + 1.2cqi, 1.375rem);
    font-weight: 600;
}
.f10-count strong { color: var(--yev-gold); font-size: 1.35em; font-variant-numeric: tabular-nums; }
.f10-fallback { margin: 0; font-size: 1rem; color: rgba(255, 255, 255, 0.85); }
.f10-ready .f10-fallback { display: none; }
.f10-seats:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .f10-ready .f10-seat.is-taken {
        animation: f10Take .7s var(--v9-ease) both;
        animation-delay: calc(var(--i) * 140ms + 200ms);
    }
    @keyframes f10Take {
        from { transform: scale(0.4); background: transparent; border-color: rgba(255, 255, 255, 0.45); }
        to   { transform: scale(1); }
    }
}

/* compact strip, used on the service pages */
.f10-strip {
    background: var(--yev-navy);
    color: #fff;
    padding-block: 26px;
}
.f10-strip .v9-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
}
.f10-strip p { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.f10-strip .rate { color: var(--yev-gold); font-weight: 800; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.f10-strip .f10-count { font-size: 1.0625rem; }
.f10-strip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.f10-strip .arrow-link { color: var(--yev-gold); }
.f10-strip .arrow-link:focus-visible { outline-color: var(--yev-gold); }

/* ==========================================================================
   SERVICE PAGE TEMPLATE
   ========================================================================== */
.op-hero {
    position: relative;
    color: #fff;
    background:
        linear-gradient(var(--v9-line) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, var(--v9-line) 1px, transparent 1px) 0 0 / 64px 64px,
        radial-gradient(1000px 520px at 100% 0%, rgba(1, 65, 162, 0.95), transparent 60%),
        var(--yev-navy);
    padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px);
    overflow: clip;
}
.op-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 100% at 30% 30%, transparent 35%, var(--yev-navy) 95%);
    pointer-events: none;
}
.op-hero > * { position: relative; }
.op-hero-grid {
    display: grid;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
@media (min-width: 960px) {
    .op-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}
.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 22px;
}
.crumbs a { color: #fff; text-underline-offset: 3px; }
.crumbs a:focus-visible { outline: 2px solid var(--yev-gold); outline-offset: 3px; border-radius: 4px; }
.op-hero h1 {
    font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    text-wrap: balance;
}
.op-hero h1 em { font-style: normal; color: var(--yev-gold); }
.op-line {
    font-size: clamp(1.125rem, 1rem + 0.7vw, 1.4rem);
    line-height: 1.5;
    font-weight: 600;
    margin: 0 0 14px;
    max-width: 38ch;
    text-wrap: pretty;
}
.op-for {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 30px;
    max-width: 56ch;
}
.op-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    align-items: center;
}
.op-art {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--v9-line);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
    transform: rotate(-1.2deg);
}
.op-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.op-hero .ble {
    --ble-first: var(--yev-gold);
    color: rgba(255, 255, 255, 0.92);
    justify-content: center;
}
.op-hero .ble > span { font-size: clamp(2.5rem, 1rem + 6vw, 5.25rem); }

/* section heads on light pages */
.op-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.op-light { background: var(--paper); }
.op-mist { background: linear-gradient(180deg, #f4f1e8 0%, var(--paper) 100%); }

/* Build / Launch / Expand columns on the HBD page */
.ble-cols {
    display: grid;
    gap: 16px;
    counter-reset: ble;
}
@media (min-width: 900px) {
    .ble-cols { grid-template-columns: repeat(3, 1fr); }
}
.ble-col {
    container-type: inline-size;
    position: relative;
    background: #fff;
    border: 1px solid var(--v9-line-ink);
    border-radius: var(--v9-radius);
    padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--v9-shadow);
    overflow: hidden;
}
.ble-col::before {
    /* the giant initial */
    content: attr(data-letter);
    position: absolute;
    right: -0.06em;
    top: -0.22em;
    font-size: clamp(7rem, 60cqi, 11rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(254, 212, 42, 0.32);
    pointer-events: none;
}
.ble-col > * { position: relative; }
.ble-step {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yev-royal);
    margin: 0 0 6px;
}
.ble-col h3 {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--yev-navy);
    margin: 0 0 6px;
}
.ble-col .ble-promise {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 18px;
}

/* "Where are you right now?" */
.where {
    display: grid;
    gap: 14px;
}
@media (min-width: 900px) {
    .where { grid-template-columns: repeat(3, 1fr); }
}
.where-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    border-radius: var(--v9-radius);
    background: var(--yev-navy);
    color: #fff;
}
.where-card blockquote {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
    line-height: 1.45;
    font-weight: 600;
    text-wrap: pretty;
}
.where-card p { margin: 0; color: rgba(255, 255, 255, 0.84); line-height: 1.55; }
.where-card .where-step {
    margin-top: auto;
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--yev-gold);
    letter-spacing: 0.02em;
}

/* numbered capability list */
.caps {
    display: grid;
    gap: 0;
    counter-reset: cap;
    border-top: 1px solid var(--v9-line-ink);
}
@media (min-width: 820px) {
    .caps { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
.cap {
    counter-increment: cap;
    display: grid;
    grid-template-columns: 3.2ch 1fr;
    gap: 6px 14px;
    padding: 22px 0;
    border-bottom: 1px solid var(--v9-line-ink);
}
.cap::before {
    content: counter(cap, decimal-leading-zero);
    grid-row: span 2;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--yev-royal);
    padding-top: 2px;
}
.cap h3 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 800;
    color: var(--yev-navy);
    line-height: 1.25;
}
.cap p { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: 1rem; }

/* standards band */
.standards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.standards li {
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--yev-navy);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}
.standards li span { color: var(--yev-gold); }

/* proof numbers */
.proofs {
    display: grid;
    gap: 14px;
}
@media (min-width: 820px) {
    .proofs { grid-template-columns: repeat(3, 1fr); }
}
.proof {
    padding: 26px;
    border-radius: var(--v9-radius);
    background: #fff;
    border: 1px solid var(--v9-line-ink);
    box-shadow: var(--v9-shadow);
}
.proof strong {
    display: block;
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--yev-navy);
    line-height: 1.05;
    margin-bottom: 8px;
}
.proof p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* two modes (Specialized Projects) */
.modes {
    display: grid;
    gap: 16px;
}
@media (min-width: 960px) {
    .modes { grid-template-columns: 1fr 1fr; }
}
.mode {
    container-type: inline-size;
    border-radius: 24px;
    padding: clamp(24px, 3.5vw, 40px);
    background: #fff;
    border: 1px solid var(--v9-line-ink);
    box-shadow: var(--v9-shadow);
}
.mode--dark {
    background: var(--yev-navy);
    color: #fff;
    border-color: transparent;
}
.mode-label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yev-royal);
    margin: 0 0 8px;
}
.mode--dark .mode-label { color: var(--yev-gold); }
.mode h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--yev-navy);
}
.mode--dark h3 { color: #fff; }
.mode > p { margin: 0 0 22px; line-height: 1.6; color: var(--ink-soft); }
.mode--dark > p { color: rgba(255, 255, 255, 0.84); }
.mode--dark .tick li::after { border-color: var(--yev-navy); }

.project-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.project-list li {
    padding: 16px 0;
    border-top: 1px solid var(--v9-line-ink);
}
.project-list strong { display: block; color: var(--yev-navy); font-size: 1.0625rem; margin-bottom: 4px; }
.project-list span { color: var(--ink-soft); line-height: 1.55; font-size: 1rem; }

.perk-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.perk-row li {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(254, 212, 42, 0.6);
    color: var(--yev-gold);
    font-weight: 600;
    font-size: 0.875rem;
}

/* feature narrative quote */
.story {
    display: grid;
    gap: 22px;
    align-items: center;
}
@media (min-width: 900px) {
    .story { grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
}
.story blockquote {
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
    line-height: 1.5;
    font-weight: 600;
    color: var(--yev-navy);
    text-wrap: pretty;
}

/* add-ons */
.addons {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 820px) {
    .addons { grid-template-columns: 1fr 1fr; }
}
.addons li {
    padding: 16px 18px;
    border-radius: var(--v9-radius-sm);
    background: #fff;
    border: 1px solid var(--v9-line-ink);
    line-height: 1.55;
}
.addons strong { color: var(--yev-navy); }

/* FAQ spacing on the new pages (styles come from pathway.css) */
.op-faq .faq-list { max-width: 820px; }

/* ==========================================================================
   Scroll reveal. Progressive: only where scroll-driven animations exist and
   motion is welcome. Without either, everything is simply there.
   ========================================================================== */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            animation: v9Reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 28%;
        }
        @keyframes v9Reveal {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: none; }
        }
    }
}