:root {
        --ink: #0d767b;
        --ink-2: #56488b;
        --ink-soft: #53505f;
        --ink-faint: #8B85A6;
        --ground: #FFFCF4;
        --paper: #FFFFFF;
        --line: #E9E3D3;
        --line-soft: #F2EDE1;
        --gold: #ffc000;
        --gold-soft: #FFF2CC;
        --gold-deep: #E0A800;
        --flame: #261d4b;
        --flame-wash: #FDEAE4;
        --indigo: #0d767b;
        --indigo-wash: #EEE8FD;
        --jade: #0E9E74;
        --jade-wash: #E1F5EE;
        /* --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; */
        --maxw: 1200px;
        --gut: clamp(20px, 5vw, 62px);
        --sec: clamp(68px, 9vw, 40px);
        --display: "Bricolage Grotesque", sans-serif;
        --body: "Newsreader", Georgia, serif;
        --mono: "IBM Plex Mono", monospace;
    }

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

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%
    }

    body {
        margin: 0;
        background: var(--ground) !important;
        color: var(--ink) !important;
        font-family: var(--body) !important;
        font-size: clamp(17px, 1.03vw, 18.5px) !important;
        line-height: 1.64 !important;
        overflow-x: hidden !important;
        -webkit-font-smoothing: antialiased !important;
    }

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

    a {
        color: inherit
    }

    .wrap {
        max-width: var(--maxw) !important;
        margin-inline: auto;
        padding-inline: var(--gut) !important
    }

    .sec {
        padding-block: var(--sec) !important
    }

    .sec--paper {
        background: var(--paper)!important
    }

    .sec--gold {
        background: var(--gold-soft)!important
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--display);
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: -.035em;
        margin: 0
    }

    h1 {
        font-size: clamp(2.5rem, 5.6vw, 4.2rem)!important
    }

    h2 {
        font-size: clamp(2rem, 4.4vw, 3.2rem)!important
    }

    h3 {
        font-size: clamp(1.0rem, 2vw, 1rem)!important;
        letter-spacing: -.024em;
        line-height: 1.06
    }

    .h3 {
        font-size: clamp(1.0rem, 2vw, 1rem)!important;
        letter-spacing: -.024em;
        line-height: 1.06!important;
        font-family: var(--display)!important;
        font-weight: 800!important;
        line-height: 1.02;
        letter-spacing: -.035em;
        margin: 0
    }

    p {
        margin: 0 0 1.12em
    }

    p:last-child {
        margin-bottom: 0
    }
    .rv .in{
     color:var(--ink);
    }

    .eyebrow {
        font-family: var(--mono)!important;
        font-size: .69rem;
        font-weight: 600;
        letter-spacing: .19em;
        text-transform: uppercase;
        color: var(--ink-faint) !important;
        display: flex;
        align-items: center;
        gap: .65rem;
        margin: 0 0 1.6rem
    }

    .eyebrow::before {
        content: "";
        width: 22px;
        height: 3px;
        background: currentColor;
        flex: none;
        border-radius: 2px
    }

    .lede {
        font-size: clamp(1.1rem, 1.6vw, 1.34rem)!important;
        line-height: 1.58!important;
        color: var(--ink-soft)!important;
        max-width: 62ch
    }

    .num {
        font-family: var(--mono)!important;
        font-variant-numeric: tabular-nums
    }

    mark {
        background: linear-gradient(to top, var(--gold) 40%, transparent 40%);
        color: inherit;
        padding: 0 .1em
    }

    .answer {
        font-size: clamp(1.06rem, 1.42vw, 1.22rem)!important;
        line-height: 1.6!important;
        /* color: var(--ink)!important; */
        border-left: 4px solid var(--gold)!important;
        padding-left: 1.3rem!important;
        max-width: 64ch!important;
        margin: 0 0 2rem!important
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-family: var(--mono)!important;
        font-size: .76rem!important;
        font-weight: 600!important;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 1rem 1.6rem;
        border: 2px solid var(--ink);
        border-radius: 100px;
        background: var(--ink);
        color: var(--ground);
        transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease
    }

    .btn:hover {
        background: var(--flame);
        border-color: var(--flame);
        color: #fff;
        transform: translateY(-2px)
    }

    .btn--ghost {
        background: transparent;
        color: var(--ink)
    }

    .btn--ghost:hover {
        background: var(--ink);
        color: var(--ground);
        border-color: var(--ink)
    }

    .btn__arrow {
        transition: transform .2s ease
    }

    .btn:hover .btn__arrow {
        transform: translateX(4px)
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible {
        outline: 3px solid var(--indigo);
        outline-offset: 3px;
        border-radius: 4px
    }

    .skip {
        position: absolute;
        left: -9999px
    }

    .skip:focus {
        left: 8px;
        top: 8px;
        z-index: 99;
        background: var(--ink);
        color: var(--ground);
        padding: .7rem 1rem;
        font-family: var(--mono);
        font-size: .8rem
    }

    /* ---------- ribbon ---------- */
    .ribbon {
        background: var(--gold);
        border-bottom: 3px solid var(--ink);
        overflow: hidden;
        padding-block: .78rem;
        position: relative;
        z-index: 60
    }

    .ribbon__track {
        display: flex;
        width: max-content;
        animation: slide 50s linear infinite
    }

    .ribbon:hover .ribbon__track {
        animation-play-state: paused
    }

    @keyframes slide {
        from {
            transform: translateX(0)
        }

        to {
            transform: translateX(-50%)
        }
    }

    .ribbon__set {
        display: flex;
        align-items: center;
        flex: none
    }

    .ribbon__item {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding-inline: 1.45rem;
        font-family: var(--mono);
        font-size: .76rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink);
        white-space: nowrap
    }

    .ribbon__item b {
        font-size: .92rem;
        letter-spacing: -.01em
    }

    .ribbon__item::after {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--ink);
        border-radius: 50%;
        margin-left: 1.45rem;
        flex: none
    }

    /* ---------- header + nav ---------- */
    .hdr {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 252, 244, .92);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
        transition: background .3s ease, border-color .3s ease
    }

    .hdr.on-dark {
        background: rgb(236 254 255);
        border-bottom-color: rgba(255, 252, 244, .16)
    }

    .hdr__in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.6rem;
        padding-block: .9rem
    }

    .logo {
        font-family: var(--display);
        font-weight: 800;
        font-size: 1.08rem;
        letter-spacing: -.038em;
        text-decoration: none;
        line-height: 1.06;
        color: var(--ink);
        transition: color .3s
    }

    .hdr.on-dark .logo {
        color: var(--ground)
    }

    .logo span {
        display: block;
        font-family: var(--mono);
        font-size: .53rem;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--flame);
        margin-top: .16rem
    }

    .hdr.on-dark .logo span {
        color: var(--gold)
    }

    .nav {
        display: flex;
        gap: 1.55rem;
        align-items: center;
        margin: 0;
        padding: 0
    }

    .nav>li {
        list-style: none;
        position: relative
    }

    .nav ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    .navlink {
        font-family: var(--mono);
        font-size: .73rem;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--ink-soft);
        background: none;
        border: 0;
        padding: .4rem 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        transition: color .2s
    }

    .navlink:hover {
        color: var(--flame)
    }

    /* .hdr.on-dark .navlink{color:rgba(255,252,244,.74)} */
    .hdr.on-dark .navlink:hover {
        color: var(--gold)
    }

    .navlink .car {
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-1px) rotate(45deg);
        transition: transform .2s
    }

    .nav>li.open .navlink .car {
        transform: translateY(1px) rotate(225deg)
    }

    .mega {
        position: absolute;
        top: calc(100% + .9rem);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        background: var(--paper);
        border: 2px solid var(--ink);
        border-radius: 10px;
        box-shadow: 0 18px 44px -30px rgba(20, 16, 36, .55);
        padding: 1.6rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(182px, 1fr));
        gap: 1.6rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
        z-index: 70
    }

    .nav>li.open .mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0)
    }

    .mega__col h4 {
        font-family: var(--mono);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .15em;
        text-transform: uppercase;
        margin: 0 0 .8rem;
        padding-bottom: .6rem;
        border-bottom: 2px solid var(--line)
    }

    .mega__col--c h4 {
        color: var(--indigo)
    }

    .mega__col--v h4 {
        color: var(--jade)
    }

    .mega__col--d h4 {
        color: var(--flame)
    }

    .mega__col a {
        display: block;
        text-decoration: none;
        font-family: var(--body);
        font-size: .95rem;
        line-height: 1.35;
        color: var(--ink);
        padding: .42rem .55rem;
        margin-inline: -.55rem;
        border-radius: 5px;
        transition: background .16s, color .16s
    }

    .mega__col--c a:hover {
        background: var(--indigo-wash);
        color: var(--indigo)
    }

    .mega__col--v a:hover {
        background: var(--jade-wash);
        color: var(--jade)
    }

    .mega__col--d a:hover {
        background: var(--flame-wash);
        color: var(--flame)
    }

    .hdr .btn {
        padding: .68rem 1.1rem;
        font-size: .68rem
    }

    .hdr.on-dark .btn {
        background: var(--gold);
        color: var(--ink);
        border-color: var(--gold)
    }

    .hdr.on-dark .btn:hover {
        background: var(--flame);
        border-color: var(--flame);
        color: #fff
    }

    .burger {
        display: none;
        background: none;
        border: 2px solid var(--ink);
        border-radius: 6px;
        padding: .5rem .65rem;
        cursor: pointer;
            background:var(--ink);;
    }

    .burger span {
        display: block;
        width: 16px;
        height: 2px;
        background: var(--ink);
        margin: 3px 0;
        border-radius: 2px
    }

  
    .hdr.on-dark .burger span {
        background: var(--ground)
    }

    @media(max-width:1040px) {
        .nav {
            display: none
        }

        .burger {
            display: block
        }

        .hdr .btn {
            display: none
        }
    }

    .mnav {
        display: none;
        background: var(--paper);
        border-bottom: 3px solid var(--ink);
        padding: 1.1rem var(--gut) 1.6rem
    }

    .mnav.is-open {
        display: block
    }

    .mnav ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    .mnav__g {
        border-bottom: 1px solid var(--line);
        padding-block: .85rem
    }

    .mnav__g:last-of-type {
        border-bottom: 0
    }

    .mnav__h {
        font-family: var(--mono);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: var(--flame);
        margin-bottom: .5rem
    }

    .mnav a {
        display: block;
        text-decoration: none;
        padding: .42rem 0;
        font-size: .98rem;
        color: var(--ink)
    }

    .mnav .btn {
        margin-top: 1.1rem;
        width: 100%;
        justify-content: center
    }

    /* ---------- banner ---------- */
    .banner {
        position: relative;
        background: var(--ink);
        color: var(--ground);
        overflow: hidden;
        padding-block: clamp(54px, 7vw, 84px) 0
    }

    .banner__field {
        position: absolute;
        inset: -24%;
        z-index: 0;
        filter: blur(78px);
        opacity: .46;
        pointer-events: none
    }

    .blob {
        position: absolute;
        border-radius: 50%
    }

    .blob--a {
        width: 46vw;
        height: 46vw;
        background: var(--flame);
        top: 2%;
        left: -5%;
        animation: d1 22s ease-in-out infinite alternate
    }

    .blob--b {
        width: 42vw;
        height: 42vw;
        background: var(--indigo);
        top: 26%;
        right: -6%;
        animation: d2 27s ease-in-out infinite alternate
    }

    .blob--c {
        width: 26vw;
        height: 26vw;
        background: var(--gold);
        bottom: -5%;
        left: 40%;
        opacity: .5;
        animation: d3 31s ease-in-out infinite alternate
    }

    @keyframes d1 {
        to {
            transform: translate(14%, 12%) scale(1.14)
        }
    }

    @keyframes d2 {
        to {
            transform: translate(-13%, -9%) scale(1.1)
        }
    }

    @keyframes d3 {
        to {
            transform: translate(-10%, -14%) scale(1.18)
        }
    }

    .banner__lines {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: linear-gradient(rgba(255, 252, 244, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 252, 244, .05) 1px, transparent 1px);
        background-size: 70px 70px;
        -webkit-mask-image: radial-gradient(ellipse at 50% 36%, #000 24%, transparent 76%);
        mask-image: radial-gradient(ellipse at 50% 36%, #000 24%, transparent 76%)
    }

    .banner__in {
        position: relative;
        z-index: 2
    }

    .banner__grid {
        display: grid;
        grid-template-columns: 1.03fr .97fr;
        gap: clamp(36px, 4.4vw, 64px);
        align-items: center
    }

    @media(max-width:1000px) {
        .banner__grid {
            grid-template-columns: 1fr;
            gap: 42px
        }
    }

    .chips {
        display: flex;
        gap: .46rem;
        flex-wrap: wrap;
        margin-bottom: 1.6rem
    }

    .chip {
        font-family: var(--mono);
        font-size: .65rem;
        font-weight: 600;
        letter-spacing: .11em;
        text-transform: uppercase;
        padding: .4rem .8rem;
        border-radius: 100px;
        border: 1.5px solid currentColor
    }

    .chip--1 {
        color: var(--gold)
    }

    .chip--2 {
        color: #B79BFF
    }

    .chip--3 {
        color: #FF8A6B
    }

    .banner h1 {
        font-size: clamp(2.6rem, 6.6vw, 5rem);
        color: var(--ground);
        margin-bottom: 1.4rem
    }

    .banner h1 .ln {
        display: block;
        overflow: hidden
    }

    .banner h1 .ln>span {
        display: block;
        transform: translateY(105%);
        transition: transform .98s cubic-bezier(.19, 1, .22, 1)
    }

    .banner.is-on h1 .ln>span {
        transform: none
    }

    .banner h1 .ln:nth-child(2)>span {
        transition-delay: .09s
    }

    .banner h1 .ln:nth-child(3)>span {
        transition-delay: .18s
    }

    .banner h1 .hl {
        color: var(--gold)
    }

    .banner__sub {
        font-size: clamp(1.06rem, 1.45vw, 1.26rem);
        line-height: 1.58;
        color: rgba(255, 252, 244, .74);
        max-width: 50ch;
        margin-bottom: 2.1rem;
        opacity: 0;
        transform: translateY(15px);
        transition: opacity .8s ease .34s, transform .8s ease .34s
    }

    .banner.is-on .banner__sub {
        opacity: 1;
        transform: none
    }

    .banner__cta {
        display: flex;
        gap: .72rem;
        flex-wrap: wrap;
        opacity: 0;
        transform: translateY(15px);
        transition: opacity .8s ease .44s, transform .8s ease .44s
    }

    .banner.is-on .banner__cta {
        opacity: 1;
        transform: none
    }

    .banner .btn {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--ink)
    }

    .banner .btn:hover {
        background: var(--flame);
        border-color: var(--flame);
        color: #fff
    }

    .banner .btn--ghost {
        background: transparent;
        color: var(--ground);
        border-color: rgba(255, 252, 244, .4)
    }

    .banner .btn--ghost:hover {
        background: var(--ground);
        color: var(--ink);
        border-color: var(--ground)
    }

    .insp {
        background: rgba(255, 252, 244, .055);
        border: 1.5px solid rgba(255, 252, 244, .2);
        border-radius: 16px;
        padding: 1.05rem;
        backdrop-filter: blur(7px);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .9s cubic-bezier(.19, 1, .22, 1) .28s, transform .9s cubic-bezier(.19, 1, .22, 1) .28s
    }

    .banner.is-on .insp {
        opacity: 1;
        transform: none
    }

    .insp__bar {
        display: flex;
        align-items: center;
        gap: .6rem;
        background: rgba(20, 16, 36, .55);
        border: 1px solid rgba(255, 252, 244, .16);
        border-radius: 100px;
        padding: .76rem 1.05rem;
        margin-bottom: .95rem
    }

    .insp__ico {
        width: 14px;
        height: 14px;
        flex: none;
        border: 2px solid var(--gold);
        border-radius: 50%;
        position: relative
    }

    .insp__ico::after {
        content: "";
        position: absolute;
        right: -6px;
        bottom: -3px;
        width: 8px;
        height: 2px;
        background: var(--gold);
        transform: rotate(45deg);
        border-radius: 2px
    }

    .insp__q {
        font-family: var(--mono);
        font-size: .82rem;
        color: var(--ground);
        white-space: nowrap;
        overflow: hidden
    }

    .caret {
        display: inline-block;
        width: 2px;
        height: 1em;
        background: var(--gold);
        vertical-align: -.13em;
        margin-left: 2px;
        animation: blink 1.05s step-end infinite
    }

    @keyframes blink {
        50% {
            opacity: 0
        }
    }

    .insp__label {
        font-family: var(--mono);
        font-size: .57rem;
        font-weight: 600;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: rgba(255, 252, 244, .4);
        padding-inline: .3rem;
        margin-bottom: .55rem
    }

    .insp__card {
        background: rgba(20, 16, 36, .5);
        border: 1px solid rgba(255, 252, 244, .14);
        border-radius: 11px;
        padding: 1.05rem;
        min-height: 146px;
        opacity: 0;
        transform: translateY(9px);
        transition: opacity .45s ease, transform .45s ease
    }

    .insp__card.is-on {
        opacity: 1;
        transform: none
    }

    .insp__site {
        font-family: var(--display);
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: -.028em;
        color: var(--gold);
        display: flex;
        align-items: center;
        gap: .55rem;
        flex-wrap: wrap
    }

    .insp__badge {
        font-family: var(--mono);
        font-size: .55rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: .22rem .55rem;
        border-radius: 100px;
        border: 1px solid currentColor;
        color: #4FD9A8
    }

    .insp__badge.is-base {
        color: rgba(255, 252, 244, .5)
    }

    .insp__desc {
        font-family: var(--mono);
        font-size: .65rem;
        color: rgba(255, 252, 244, .48);
        margin-top: .4rem
    }

    .insp__stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .68rem;
        margin-top: 1.05rem;
        padding-top: .92rem;
        border-top: 1px solid rgba(255, 252, 244, .14)
    }

    .insp__stat b {
        display: block;
        font-family: var(--mono);
        font-size: 1.14rem;
        font-weight: 600;
        letter-spacing: -.03em;
        color: var(--ground);
        font-variant-numeric: tabular-nums
    }

    .insp__stat span {
        display: block;
        font-family: var(--mono);
        font-size: .54rem;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: rgba(255, 252, 244, .4);
        margin-top: .34rem;
        line-height: 1.5
    }

    .insp__dots {
        display: flex;
        gap: .38rem;
        justify-content: center;
        margin-top: .95rem
    }

    .insp__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 252, 244, .26);
        transition: background .3s, width .3s;
        border: 0;
        padding: 0;
        cursor: pointer
    }

    .insp__dot.is-on {
        background: var(--gold);
        width: 19px;
        border-radius: 100px
    }

    .odorow {
        position: relative;
        z-index: 2;
        margin-top: clamp(42px, 5.5vw, 72px);
        border-top: 1px solid rgba(255, 252, 244, .16);
        display: grid;
        grid-template-columns: repeat(4, 1fr)
    }

    @media(max-width:860px) {
        .odorow {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:430px) {
        .odorow {
            grid-template-columns: 1fr
        }
    }

    .odo {
        padding: 1.7rem 1.25rem 2.1rem;
        border-right: 1px solid rgba(255, 252, 244, .16)
    }

    .odo:last-child {
        border-right: 0
    }

    @media(max-width:860px) {
        .odo:nth-child(2) {
            border-right: 0
        }

        .odo:nth-child(1),
        .odo:nth-child(2) {
            border-bottom: 1px solid rgba(255, 252, 244, .16)
        }
    }

    @media(max-width:430px) {
        .odo {
            border-right: 0;
            border-bottom: 1px solid rgba(255, 252, 244, .16)
        }

        .odo:last-child {
            border-bottom: 0
        }
    }

    .odo__v {
        font-family: var(--mono);
        font-size: clamp(1.7rem, 3.5vw, 2.55rem);
        font-weight: 600;
        letter-spacing: -.045em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        color: var(--gold)
    }

    .odo__l {
        font-family: var(--mono);
        font-size: .62rem;
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255, 252, 244, .5);
        margin-top: .8rem;
        line-height: 1.6
    }

    /* ---------- fork ---------- */
    .fork {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: var(--paper);
    }

    @media(max-width:820px) {
        .fork {
            grid-template-columns: 1fr
        }
    }

    .fork__card {
        padding: clamp(32px, 4.3vw, 58px);
        display: flex;
        flex-direction: column;
        gap: 1.05rem;
        text-decoration: none;
        transition: background .32s ease
    }

    .fork__card:last-child {
        border-right: 0
    }

    @media(max-width:820px) {
        .fork__card {
            border-right: 0;
            border-bottom: 3px solid var(--ink)
        }

        .fork__card:last-child {
            border-bottom: 0
        }
    }

    /* .fork__card--c{background:var(--indigo-wash)} */
    /* .fork__card--c:hover{background:var(--flame)} */
    /* .fork__card--m{background:var(--flame-wash)} */
    /* .fork__card--m:hover{background:var(--flame)} */
    .fork__tag {
        font-family: var(--mono);
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: uppercase
    }

    .fork__card--c .fork__tag {
        color: var(--indigo)
    }

    .fork__card--m .fork__tag {
        color: var(--flame)
    }

    .fork__card h3 {
        font-size: clamp(1.5rem, 2.7vw, 2.15rem);
        color: var(--ink)
    }

    .fork__card p {
        color: var(--ink-soft);
        font-size: 1.01rem;
        margin: 0
    }

    .fork__go {
        margin-top: auto;
        padding-top: 1.15rem;
        font-family: var(--mono);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: .45rem;
        color: var(--ink)
    }

    /* .fork__card:hover .fork__tag,.fork__card:hover h3,.fork__card:hover p,.fork__card:hover .fork__go{color:#fff} */
    .fork__list {
        list-style: none;
        margin: .34rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: .38rem
    }

    .fork__list li {
        font-family: var(--mono);
        font-size: .66rem;
        font-weight: 500;
        color: var(--ink);
        border: 1.5px solid var(--ink);
        padding: .28rem .58rem;
        border-radius: 100px;
        background: rgba(255, 255, 255, .6);
        transition: background .25s, color .25s, border-color .25s
    }

    /* .fork__card:hover .fork__list li{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)} */

    /* ---------- walls / stats ---------- */
    .dark {
        /*background: var(--ink);*/
        background: linear-gradient(135deg, #1b5163 0%, var(--ink) 100%);
         /*padding: 80px 0;*/
        color: var(--ground)
    }

    .dark h2 {
        color: var(--ground)
    }

    .dark .eyebrow {
        color: var(--gold)
    }

    .dark .lede,
    .dark p {
        color: rgba(255, 252, 244, .7)
    }

    .wall {
        background: var(--indigo);
        color: #fff;
        border-block: 3px solid var(--ink)
    }

    .wall h2 {
        color: #fff
    }

    .wall .eyebrow {
        color: rgba(255, 255, 255, .72)
    }

    .wall .lede,
    .wall p {
        color: rgba(255, 255, 255, .84)
    }

    .panel {
        background: rgba(255, 255, 255, .11);
        border: 2px solid rgba(255, 255, 255, .34);
        border-radius: 14px;
        padding: 1.6rem 1.5rem
    }

    .panel .odo__v {
        color: var(--gold)
    }

    .panel .odo__l {
        color: rgba(59, 59, 59, 0.72)
    }

    .statgrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        background: var(--ink);
        margin-top: 2.5rem;
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden
    }

    @media(max-width:820px) {
        .statgrid {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:450px) {
        .statgrid {
            grid-template-columns: 1fr
        }
    }

    .stat {
        background: var(--paper);
        padding: 1.8rem 1.4rem
    }

    .stat__v {
        font-family: var(--mono);
        font-size: clamp(1.8rem, 3.6vw, 2.5rem);
        font-weight: 600;
        letter-spacing: -.04em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        color: var(--flame)
    }

    .stat__l {
        font-family: var(--mono);
        font-size: .63rem;
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-top: .85rem;
        line-height: 1.6
    }

    .statgrid--dark {
        background: rgba(255, 252, 244, .16);
        border-color: rgba(255, 252, 244, .2)
    }

    .statgrid--dark .stat {
        background: var(--ink)
    }

    .statgrid--dark .stat__v {
        color: var(--gold)
    }

    .statgrid--dark .stat__l {
        color: rgba(255, 252, 244, .5)
    }

    .statgrid--wall {
        background: rgba(255, 255, 255, .3);
        border-color: rgba(255, 255, 255, .36)
    }

    .statgrid--wall .stat {
        background: var(--indigo)
    }

    .statgrid--wall .stat__v {
        color: var(--gold)
    }

    .statgrid--wall .stat__l {
        color: rgba(255, 255, 255, .72)
    }

    /* ---------- board ---------- */
    .board {
        margin-top: 3.1rem;
        background: rgba(255, 252, 244, .05);
        border: 1.5px solid rgba(255, 252, 244, .2);
        border-radius: 14px;
        overflow: hidden
    }

    .board__hd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .9rem 1.15rem;
        border-bottom: 1px solid rgba(255, 252, 244, .16)
    }

    .board__title {
        font-family: var(--mono);
        font-size: .65rem;
        font-weight: 600;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: rgba(255, 252, 244, .8)
    }

    .board__live {
        display: flex;
        align-items: center;
        gap: .42rem;
        font-family: var(--mono);
        font-size: .57rem;
        font-weight: 600;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--gold)
    }

    .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
        animation: pulse 2.3s ease-in-out infinite
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .32;
            transform: scale(.78)
        }
    }

    .board__body {
        padding: .65rem .55rem .85rem
    }

    .row {
        display: grid;
        grid-template-columns: minmax(96px, 1fr) 3fr 60px;
        gap: .78rem;
        align-items: center;
        padding: .44rem .68rem;
        border-radius: 5px
    }

    .row--hd {
        padding-block: .28rem .56rem;
        border-bottom: 1px solid rgba(255, 252, 244, .13);
        margin-bottom: .35rem
    }

    .row--hd span {
        font-family: var(--mono);
        font-size: .55rem;
        font-weight: 600;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: rgba(255, 252, 244, .4)
    }

    .row--hd span:last-child {
        text-align: right
    }

    .row__name {
        font-family: var(--mono);
        font-size: .73rem;
        color: rgba(255, 252, 244, .56);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .row__val {
        font-family: var(--mono);
        font-size: .75rem;
        font-variant-numeric: tabular-nums;
        text-align: right;
        color: rgba(255, 252, 244, .56)
    }

    .bar {
        height: 12px;
        background: rgba(255, 252, 244, .09);
        border-radius: 100px;
        overflow: hidden
    }

    .bar i {
        display: block;
        height: 100%;
        width: 0;
        background: rgba(255, 252, 244, .22);
        transition: width 1.15s cubic-bezier(.22, 1, .36, 1)
    }

    .row.is-you {
        background: rgba(255, 200, 30, .14)
    }

    .row.is-you .row__name {
        color: var(--ground);
        font-weight: 600
    }

    .row.is-you .row__val {
        color: var(--gold);
        font-weight: 600
    }

    .row.is-you .bar i {
        background: var(--gold)
    }

    .bar i.capped {
        background-image: repeating-linear-gradient(45deg, rgba(255, 252, 244, .24) 0 5px, rgba(255, 252, 244, .06) 5px 10px)
    }

    .board__ft {
        padding: .82rem 1.15rem;
        border-top: 1px solid rgba(255, 252, 244, .16);
        font-family: var(--mono);
        font-size: .59rem;
        line-height: 1.75;
        color: rgba(255, 252, 244, .46)
    }

    .board__ft b {
        color: var(--gold);
        font-weight: 600
    }

    /* ---------- tables ---------- */
    .ledger {
        width: 100%;
        border-collapse: collapse;
        margin-top: 2.5rem;
        background: var(--paper);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden
    }

    .ledger caption {
        caption-side: bottom;
        text-align: left;
        font-family: var(--mono);
        font-size: .63rem;
        color: var(--ink-faint);
        padding-top: 1rem;
        line-height: 1.75
    }

    .ledger th,
    .ledger td {
        text-align: left;
        padding: 1rem 1.1rem;
        border-bottom: 1px solid var(--line-soft);
        vertical-align: top
    }

    .ledger thead th {
        font-family: var(--mono);
        font-size: .57rem;
        font-weight: 600;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--ground);
        background: var(--ink);
        border-bottom: 0
    }

    .ledger tbody tr:last-child td {
        border-bottom: 0
    }

    .ledger tbody tr:hover {
        background: var(--gold-soft)
    }

    .site {
        font-family: var(--display);
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: -.024em
    }

    .site small {
        display: block;
        font-family: var(--mono);
        font-weight: 400;
        font-size: .63rem;
        color: var(--ink-faint);
        margin-top: .24rem
    }

    .yrs,
    .metric {
        font-family: var(--mono);
        font-size: .89rem;
        font-variant-numeric: tabular-nums;
        white-space: nowrap
    }

    .metric small {
        display: block;
        font-size: .56rem;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-top: .27rem
    }

    .lead-row {
        background: var(--jade-wash)
    }

    .lead-row:hover {
        background: var(--jade-wash)
    }

    .lead-row .metric {
        color: var(--jade);
        font-weight: 600
    }

    .is-base td {
        background: #FAF7EE
    }

    .is-base .metric,
    .is-base .site {
        color: var(--ink-faint)
    }

    .pill {
        display: inline-block;
        font-family: var(--mono);
        font-size: .58rem;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        padding: .28rem .58rem;
        border-radius: 100px;
        white-space: nowrap;
        border: 1.5px solid currentColor
    }

    .pill--live {
        color: var(--jade)
    }

    .pill--build {
        color: var(--flame)
    }

    .pill--base {
        color: var(--ink-faint)
    }

    @media(max-width:800px) {
        .ledger thead {
            position: absolute;
            left: -9999px
        }

        .ledger tr {
            display: block;
            border-bottom: 2px solid var(--line)
        }

        .ledger tbody tr:last-child {
            border-bottom: 0
        }

        .ledger td {
            display: block;
            border: 0;
            padding: .3rem 1.1rem
        }

        .ledger td:first-child {
            padding-top: 1rem
        }

        .ledger td:last-child {
            padding-bottom: 1rem
        }

        .metric {
            display: inline-flex;
            align-items: baseline;
            gap: .45rem
        }

        .metric small {
            display: inline;
            margin: 0
        }
    }

    .mtable {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1.6rem;
        background: var(--paper);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden
    }

    .mtable th,
    .mtable td {
        text-align: left;
        padding: .92rem 1.1rem;
        border-bottom: 1px solid var(--line-soft);
        vertical-align: top;
        font-size: .95rem
    }

    .mtable thead th {
        font-family: var(--mono);
        font-size: .56rem;
        font-weight: 600;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--ground);
        background: var(--ink);
        border-bottom: 0
    }

    .mtable tbody tr:last-child td {
        border-bottom: 0
    }

    .mtable tbody tr:hover {
        background: var(--gold-soft)
    }

    .mtable td:first-child {
        font-family: var(--display);
        font-weight: 700;
        font-size: .97rem;
        letter-spacing: -.02em;
        white-space: nowrap
    }

    .mtable td:nth-child(2),
    .mtable td:nth-child(3) {
        color: var(--ink-soft)
    }

    @media(max-width:720px) {
        .mtable thead {
            position: absolute;
            left: -9999px
        }

        .mtable tr {
            display: block;
            border-bottom: 2px solid var(--line)
        }

        .mtable tbody tr:last-child {
            border-bottom: 0
        }

        .mtable td {
            display: block;
            border: 0;
            padding: .28rem 1.1rem
        }

        .mtable td:first-child {
            padding-top: .95rem
        }

        .mtable td:last-child {
            padding-bottom: .95rem
        }
    }

    /* ---------- method / svc ---------- */
    .method {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        background: var(--ink);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden;
        margin-top: 2.6rem
    }

    @media(max-width:900px) {
        .method {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:560px) {
        .method {
            grid-template-columns: 1fr
        }
    }

    .step {
        background: var(--paper);
        padding: 1.85rem 1.45rem;
        display: flex;
        flex-direction: column;
        gap: .85rem
    }

    .step__n {
        font-family: var(--mono);
        font-size: .63rem;
        font-weight: 600;
        letter-spacing: .14em;
        color: var(--flame)
    }

    .step h3 {
        font-size: 1.16rem
    }

    .step p {
        font-size: .94rem;
        color: var(--ink-soft);
        line-height: 1.56;
        margin: 0
    }

    .dive__grid {
        display: grid;
        grid-template-columns: .85fr 1.15fr;
        gap: clamp(30px, 4.6vw, 66px);
        align-items: start
    }

    @media(max-width:900px) {
        .dive__grid {
            grid-template-columns: 1fr;
            gap: 32px
        }
    }

    .dive__sticky {
        position: sticky;
        top: 98px
    }

    @media(max-width:900px) {
        .dive__sticky {
            position: static
        }
    }

    .dive h2 {
        margin-bottom: 1.25rem
    }
.dive--m{
    background-color: white;
}
    .dive--m .eyebrow,
    .dive--m .svc__k {
        color: var(--flame)
    }

    .dive--c .eyebrow,
    .dive--c .svc__k {
        color: var(--indigo)
    }

    .svc {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 3px solid var(--ink)
    }

    .svc li {
        border-bottom: 1px solid var(--line);
        padding: 1.4rem 0;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1.15rem;
        align-items: start
    }

    .svc__k {
        font-family: var(--mono);
        font-size: .63rem;
        font-weight: 600;
        letter-spacing: .12em;
        padding-top: .4rem;
        min-width: 30px
    }

    .svc h4 {
        font-family: var(--display);
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: -.022em;
        margin: 0 0 .35rem
    }

    .svc p {
        font-size: .96rem;
        color: var(--ink-soft);
        line-height: 1.56;
        margin: 0;
        max-width: 58ch
    }

    /* ---------- manifesto / faq / cta ---------- */
    .manifesto__q {
        font-family: var(--display);
        font-weight: 800;
        font-size: clamp(1.75rem, 4.1vw, 3rem);
        line-height: 1.04;
        letter-spacing: -.038em;
        max-width: 21ch;
        margin: 0;
        color: var(--gold)
    }

    .manifesto__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 4vw, 62px);
        align-items: start
    }

    @media(max-width:880px) {
        .manifesto__grid {
            grid-template-columns: 1fr
        }
    }

    .sign {
        font-family: var(--mono);
        font-size: .65rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--gold);
        margin-top: 1.8rem;
        padding-top: 1.15rem;
        border-top: 2px solid rgba(255, 252, 244, .2)
    }

    .faq {
        margin-top: 2.4rem;
        border-top: 3px solid var(--ink)
    }

    .faq details {
        border-bottom: 1px solid var(--line)
    }

    .faq summary {
        cursor: pointer;
        list-style: none;
        padding: 1.3rem 2.7rem 1.3rem 0;
        position: relative;
        font-family: var(--display);
        font-weight: 700;
        font-size: clamp(1.02rem, 1.55vw, 1.24rem);
        letter-spacing: -.024em;
        line-height: 1.32
    }

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

    .faq summary::after {
        content: "";
        position: absolute;
        right: .5rem;
        top: 50%;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--ink);
        border-bottom: 2px solid var(--ink);
        transform: translateY(-70%) rotate(45deg);
        transition: transform .25s ease
    }

    .faq details[open] summary {
        color: var(--flame)
    }

    .faq details[open] summary::after {
        transform: translateY(-25%) rotate(225deg);
        border-color: var(--flame)
    }

    .faq__a {
        padding: 0 clamp(0px, 6vw, 88px) 1.7rem 0
    }

    .faq__a p {
        font-size: .99rem;
        color: var(--ink-soft);
        line-height: 1.64
    }

    .cta h2 {
        max-width: 16ch;
        margin-bottom: 1.35rem
    }

    .cta h2 span {
        color: var(--gold)
    }

    .cta__grid {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: clamp(30px, 4.6vw, 66px);
        align-items: end
    }

    @media(max-width:880px) {
        .cta__grid {
            grid-template-columns: 1fr;
            align-items: start
        }
    }

    .cta .btn {
        background: var(--gold);
        color: var(--ink);
        border-color: var(--gold)
    }

    .cta .btn:hover {
        background: var(--flame);
        border-color: var(--flame);
        color: #fff
    }

    .cta .btn--ghost {
        background: transparent;
        color: var(--ground);
        border-color: rgba(255, 252, 244, .42)
    }

    .cta .btn--ghost:hover {
        background: var(--ground);
        color: var(--ink);
        border-color: var(--ground)
    }

    .cta__acts {
        display: flex;
        gap: .68rem;
        flex-wrap: wrap;
        margin-top: 1.8rem
    }

    .cta__meta {
        font-family: var(--mono);
        font-size: .71rem;
        line-height: 2;
        color: rgba(255, 252, 244, .62)
    }

    .cta__meta a {
        color: var(--gold);
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 200, 30, .4)
    }

    .cta__meta b {
        display: block;
        font-weight: 600;
        font-size: .56rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(255, 252, 244, .38);
        margin-top: 1.2rem
    }

    .cta__meta b:first-child {
        margin-top: 0
    }

    /* ---------- inner page ---------- */
    .crumb {
        font-family: var(--mono);
        font-size: .64rem;
        font-weight: 500;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--ink-faint);
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 1.5rem
    }

    .crumb a {
        text-decoration: none;
        color: var(--flame-wash)
    }

    .crumb a:hover {
        color: var(--flame-wash)
    }

    .phead {
        padding-block: clamp(40px, 5.2vw, 66px) clamp(30px, 4vw, 52px);
        border-bottom: 3px solid var(--ink)
    }

    .phead h1 {
        max-width: 19ch;
        margin-bottom: 1.35rem
    }

    .byline {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        font-family: var(--mono);
        font-size: .64rem;
        letter-spacing: .06em;
        color: var(--ink-faint);
        margin-top: 2rem;
        padding-top: 1.2rem;
        border-top: 1px solid var(--line)
    }

    .byline b {
        font-weight: 600;
        color: var(--flame-wash)
    }

    .prose {
        max-width: 68ch
    }

    .prose h2 {
        margin: 0 0 1rem
    }

    .prose p {
        color: var(--ink-soft)
    }

    .prose>p:first-of-type {
        color: var(--ink)
    }

    .block {
        padding-block: clamp(46px, 5.8vw, 80px);
        border-bottom: 1px solid var(--line)
    }

    .block:last-of-type {
        border-bottom: 0
    }

    .deliv {
        list-style: none;
        margin: 1.5rem 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        background: var(--ink);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden
    }

    @media(max-width:680px) {
        .deliv {
            grid-template-columns: 1fr
        }
    }

    .deliv li {
        background: var(--paper);
        padding: 1.3rem 1.3rem;
        font-size: .95rem;
        color: var(--ink-soft);
        line-height: 1.55
    }

    .deliv b {
        display: block;
        font-family: var(--display);
        font-weight: 700;
        font-size: 1.02rem;
        color: var(--ink);
        letter-spacing: -.022em;
        margin-bottom: .3rem
    }

    .sibs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        background: var(--ink);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden;
        margin-top: 2rem
    }

    @media(max-width:820px) {
        .sibs {
            grid-template-columns: 1fr
        }
    }

    .sibs a {
        background: var(--paper);
        padding: 1.4rem 1.35rem;
        text-decoration: none;
        display: block;
        transition: background .22s
    }

    .sibs a:hover {
        background: var(--indigo-wash)
    }

    .sibs b {
        display: block;
        font-family: var(--display);
        font-weight: 700;
        font-size: 1.03rem;
        letter-spacing: -.024em;
        margin-bottom: .35rem
    }

    .sibs span {
        font-size: .9rem;
        color: var(--ink-soft);
        line-height: 1.5
    }

    .ftr {
        background: var(--ink);
        color: rgba(255, 252, 244, .5);
        border-top: 3px solid var(--gold)
    }

    .ftr__cols {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 2rem;
        padding-block: 3rem 2.2rem
    }

    @media(max-width:880px) {
        .ftr__cols {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:520px) {
        .ftr__cols {
            grid-template-columns: 1fr
        }
    }

    .ftr h5 {
        font-family: var(--mono);
        font-size: .57rem;
        font-weight: 600;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: var(--gold);
        margin: 0 0 .9rem
    }

    .ftr ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    .ftr li {
        margin-bottom: .4rem
    }

    .ftr a {
        color: rgba(255, 252, 244, .64);
        text-decoration: none;
        font-size: .92rem
    }

    .ftr a:hover {
        color: var(--gold)
    }

    .ftr__blurb {
        font-size: .93rem;
        line-height: 1.6;
        color: rgba(255, 252, 244, .52);
        max-width: 34ch
    }

    .ftr__bot {
        display: flex;
        justify-content: space-between;
        gap: 1.2rem;
        flex-wrap: wrap;
        padding-block: 1.4rem;
        border-top: 1px solid rgba(255, 252, 244, .14);
        font-family: var(--mono);
        font-size: .63rem;
        letter-spacing: .05em
    }

    /* blog grid (extends the design system for listing cards) */
    .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        border-radius: 12px;
        overflow: hidden;
        margin-top: 2.4rem
    }

    @media(max-width:900px) {
        .blog-grid {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:600px) {
        .blog-grid {
            grid-template-columns: 1fr
        }
    }

    .blog-card {
        background: var(--paper);
        border: 2px solid var(--ink);
        text-decoration: none;
        color: var(--ink);
        display: flex;
        flex-direction: column;
        transition: background .2s
    }

    .blog-card:hover {
        background: var(--gold-soft)
    }

    .blog-card__img {
        aspect-ratio: 16/10;
        overflow: hidden;
        background: var(--line-soft)
    }

    .blog-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease
    }

    .blog-card:hover .blog-card__img img {
        transform: scale(1.06)
    }

    .blog-card__body {
        padding: 1.3rem 1.35rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: .65rem;
        flex: 1
    }

    .blog-card__cat {
        font-family: var(--mono);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--flame)
    }

    .blog-card h3 {
        font-family: var(--display);
        font-weight: 700;
        font-size: 1.14rem;
        letter-spacing: -.024em;
        line-height: 1.28
    }

    .blog-card p {
        font-size: .92rem;
        color: var(--ink-soft);
        line-height: 1.55;
        margin: 0
    }

    .blog-card__meta {
        margin-top: auto;
        padding-top: .9rem;
        border-top: 1px solid var(--line-soft);
        display: flex;
        justify-content: space-between;
        font-family: var(--mono);
        font-size: .62rem;
        color: var(--ink-faint)
    }

    .pager {
        display: flex;
        justify-content: center;
        gap: .5rem;
        margin-top: 2.6rem
    }

    .pager a,
    .pager span {
        font-family: var(--mono);
        font-size: .75rem;
        font-weight: 600;
        padding: .6rem 1rem;
        border: 2px solid var(--ink);
        border-radius: 100px;
        text-decoration: none;
        color: var(--ink)
    }

    .pager a:hover {
        background: var(--ink);
        color: var(--ground)
    }

    .pager .active {
        background: var(--ink);
        color: var(--ground)
    }

    .ftr {
        background: var(--ink);
        color: rgba(255, 252, 244, .5);
        border-top: 3px solid var(--gold);
        margin-top: 4rem
    }

    .ftr__bot {
        display: flex;
        justify-content: space-between;
        gap: 1.2rem;
        flex-wrap: wrap;
        padding: 1.4rem var(--gut);
        font-family: var(--mono);
        font-size: .63rem;
        letter-spacing: .05em
    }

    .rv {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
    }

    .rv.in {
        opacity: 1;
        transform: none
    }

    @media(prefers-reduced-motion:reduce) {

        *,
        *::before,
        *::after {
            animation-duration: .001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .001ms !important
        }

        html {
            scroll-behavior: auto
        }

        .rv,
        .banner__sub,
        .banner__cta,
        .insp,
        .insp__card {
            opacity: 1 !important;
            transform: none !important
        }

        .banner h1 .ln>span {
            transform: none !important
        }

        .ribbon__track,
        .blob,
        .caret {
            animation: none
        }

        .ribbon {
            overflow-x: auto
        }
    }

    /* ---------- property spotlight cards ---------- */
    .props {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        background: var(--ink);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden;
        margin-top: 2.6rem
    }

    @media(max-width:820px) {
        .props {
            grid-template-columns: 1fr
        }
    }

    .prop {
        background: var(--paper);
        padding: 1.9rem 1.75rem;
        display: flex;
        flex-direction: column;
        gap: .9rem
    }

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

    .prop h3 {
        font-size: 1.28rem;
        letter-spacing: -.026em
    }

    .prop h3 small {
        display: block;
        font-family: var(--mono);
        font-weight: 500;
        font-size: .66rem;
        letter-spacing: .04em;
        text-transform: none;
        color: var(--ink-faint);
        margin-top: .35rem
    }

    .prop p {
        font-size: .95rem;
        color: var(--ink-soft);
        line-height: 1.58;
        margin: 0
    }

    .prop__stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .7rem;
        margin-top: .3rem;
        padding-top: .95rem;
        border-top: 1px solid var(--line-soft)
    }

    .prop__stats b {
        display: block;
        font-family: var(--mono);
        font-size: 1.1rem;
        font-weight: 600;
        letter-spacing: -.03em;
        color: var(--flame);
        font-variant-numeric: tabular-nums
    }

    .prop__stats span {
        display: block;
        font-family: var(--mono);
        font-size: .55rem;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-top: .32rem;
        line-height: 1.5
    }

    .prop--base {
        background: #FAF7EE
    }

    .prop--base .prop__stats b {
        color: var(--ink-faint)
    }

    /* ---------- method / svc ---------- */
    .method {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        background: var(--ink);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden;
        margin-top: 2.6rem
    }

    @media(max-width:900px) {
        .method {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:560px) {
        .method {
            grid-template-columns: 1fr
        }
    }

    .step {
        background: var(--paper);
        padding: 1.85rem 1.45rem;
        display: flex;
        flex-direction: column;
        gap: .85rem
    }

    .step__n {
        font-family: var(--mono);
        font-size: .63rem;
        font-weight: 600;
        letter-spacing: .14em;
        color: var(--flame)
    }

    .step h3 {
        font-size: 1.16rem
    }

    .step p {
        font-size: .94rem;
        color: var(--ink-soft);
        line-height: 1.56;
        margin: 0
    }

    /* ============================================================
   pages.css — additions only.
   Everything else (header, phead, prose, ledger, faq, cta, ftr,
   btn, eyebrow, lede, block, sibs, deliv…) already lives in
   style.css and is reused as-is on these pages.
   ============================================================ */

    /* ---------- contact: two-column layout ---------- */
    .contact-grid {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: clamp(30px, 4.6vw, 66px);
        align-items: start;
        margin-top: 2.6rem
    }

    @media(max-width:880px) {
        .contact-grid {
            grid-template-columns: 1fr
        }
    }

    /* ---------- contact: form ---------- */
    .form {
        display: flex;
        flex-direction: column;
        gap: 1.2rem
    }

    .form__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem
    }

    @media(max-width:540px) {
        .form__row {
            grid-template-columns: 1fr
        }
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: .5rem
    }

    .field label {
        font-family: var(--mono);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-faint)
    }

    .field input,
    .field select,
    .field textarea {
        font-family: var(--body);
        font-size: 1rem;
        color: var(--ink);
        background: var(--paper);
        border: 2px solid var(--line);
        border-radius: 8px;
        padding: .85rem 1rem;
        transition: border-color .2s;
        width: 100%
    }

    .field textarea {
        resize: vertical;
        min-height: 140px
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        outline: none;
        border-color: var(--ink)
    }

    .form__note {
        font-family: var(--mono);
        font-size: .66rem;
        color: var(--ink-faint);
        line-height: 1.7
    }

    /* ---------- contact: info cards ---------- */
    .info-stack {
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--ink);
        border: 2px solid var(--ink);
        border-radius: 12px;
        overflow: hidden
    }

    .info-card {
        background: var(--paper);
        padding: 1.5rem 1.6rem;
        display: flex;
        gap: 1rem;
        align-items: flex-start
    }

    .info-card__ico {
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--gold-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--mono);
        font-size: .8rem;
        font-weight: 700;
        color: var(--flame)
    }

    .info-card h4 {
        font-family: var(--display);
        font-weight: 700;
        font-size: .98rem;
        letter-spacing: -.02em;
        margin: 0 0 .3rem
    }

    .info-card p {
        font-size: .92rem;
        color: var(--ink-soft);
        margin: 0;
        line-height: 1.55
    }

    .info-card a {
        color: var(--ink);
        text-decoration: underline;
        text-decoration-color: var(--line);
        text-underline-offset: 3px
    }

    .info-card a:hover {
        color: var(--flame)
    }

    /* ---------- legal pages: sidebar TOC + numbered sections ---------- */
    .legal-grid {
        display: grid;
        grid-template-columns: .7fr 2fr;
        gap: clamp(30px, 4.6vw, 60px);
        align-items: start;
        margin-top: 1rem
    }

    @media(max-width:880px) {
        .legal-grid {
            grid-template-columns: 1fr
        }
    }

    .toc {
        position: sticky;
        top: 98px;
        border-left: 2px solid var(--line);
        padding-left: 1.2rem
    }

    @media(max-width:880px) {
        .toc {
            position: static;
            border-left: 0;
            padding-left: 0;
            border-top: 2px solid var(--line);
            padding-top: 1rem
        }
    }

    .toc__label {
        font-family: var(--mono);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-bottom: .9rem
    }

    .toc ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .55rem
    }

    .toc a {
        text-decoration: none;
        font-family: var(--mono);
        font-size: .78rem;
        color: var(--ink-soft);
        line-height: 1.5
    }

    .toc a:hover {
        color: var(--flame)
    }

    .legal-sec {
        padding-block: 2.2rem;
        border-bottom: 1px solid var(--line-soft)
    }

    .legal-sec:first-child {
        padding-top: 0
    }

    .legal-sec:last-child {
        border-bottom: 0;
        padding-bottom: 0
    }

    .legal-sec__n {
        font-family: var(--mono);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .12em;
        color: var(--flame);
        display: block;
        margin-bottom: .6rem
    }

    .legal-sec h2 {
        font-size: clamp(1.25rem, 2.2vw, 1.6rem);
        margin-bottom: .9rem;
        scroll-margin-top: 110px
    }

    .legal-sec p {
        color: var(--ink-soft)
    }

    .legal-sec ul {
        margin: 0 0 1.12em;
        padding-left: 1.3rem;
        color: var(--ink-soft)
    }

    .legal-sec li {
        margin-bottom: .5rem;
        line-height: 1.6
    }

    .legal-sec li:last-child {
        margin-bottom: 0
    }

    .updated-tag {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-family: var(--mono);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--jade);
        background: var(--jade-wash);
        padding: .45rem .85rem;
        border-radius: 100px;
        margin-bottom: 1.3rem
    }

    .ftr__bot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .ftr__social {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ftr__social a {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid currentColor;
        border-radius: 50%;
        color: inherit;
        text-decoration: none;
        transition: 0.2s ease;
    }

    .ftr__social a:hover {
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .ftr__bot {
            flex-wrap: wrap;
        }
    }

          /* =========================================
   SERVICES SECTION
========================================= */

.services-section {
    background: #faf8f1;
    padding: 110px 0;
}


/* =========================================
   SECTION INTRO
========================================= */

.services-heading {
    max-width: 650px;
    margin-bottom: 55px;
}

.services-eyebrow {
    display: inline-block;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #087f83;

    margin-bottom: 16px;
}

.services-heading h2 {
    margin: 0;

    font-size: clamp(38px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -2px;

    color: #087f83;
}

.services-heading h2 span {
    color: #ffbd00;
}

.services-heading p {
    max-width: 520px;

    margin-top: 22px;
    margin-bottom: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #526366;
}


/* =========================================
   CARDS GRID
========================================= */

.services-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================
   SERVICE CARD
========================================= */

.service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 450px;

    padding: 38px;

    background: #ffffff;

    border: 1px solid rgba(8, 127, 131, .16);
    border-radius: 4px;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Yellow top line */

.service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: #ffbd00;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .3s ease;
}


.service-card:hover {
    transform: translateY(-7px);

    border-color: rgba(8, 127, 131, .35);

    box-shadow: 0 20px 50px rgba(8, 127, 131, .10);
}


.service-card:hover::before {
    transform: scaleX(1);
}


/* =========================================
   CARD TOP
========================================= */

.service-card__top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 55px;
}

.service-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #ffbd00;
}

.service-tag {
    display: inline-flex;

    align-items: center;

    padding: 7px 11px;

    border: 1px solid rgba(8, 127, 131, .25);
    border-radius: 50px;

    color: #087f83;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================
   TITLE
========================================= */

.service-card h3 {
    margin: 0;

    max-width: 430px;

    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;

    letter-spacing: -1.5px;

    color: #087f83;
}


/* =========================================
   DESCRIPTION
========================================= */

.service-description {
    max-width: 480px;

    margin: 20px 0 25px;

    font-size: 14px;
    line-height: 1.65;

    color: #59686a;
}


/* =========================================
   FEATURES
========================================= */

.service-list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.service-list li {
    display: inline-flex;

    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    border: 1px solid rgba(8, 127, 131, .20);

    border-radius: 50px;

    color: #087f83;

    font-size: 10px;
    font-weight: 600;
}

.service-check {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #087f83;

    color: #fff;

    font-size: 8px;
}


/* =========================================
   CARD BOTTOM
========================================= */

.service-card__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 35px;
}

.service-cta {
    color: #087f83;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.service-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #087f83;

    color: #fff;

    font-size: 18px;

    transition:
        background .3s ease,
        transform .3s ease;
}

.service-card:hover .service-arrow {
    background: #ffbd00;
    color: #087f83;

    transform: rotate(-45deg);
}


/* =========================================
   SECOND CARD
========================================= */

.service-card:nth-child(2) {
    background: #087f83;
}

.service-card:nth-child(2) h3 {
    color: #ffffff;
}

.service-card:nth-child(2) .service-description {
    color: rgba(255,255,255,.78);
}

.service-card:nth-child(2) .service-tag {
    border-color: rgba(255,255,255,.35);
    color: #ffffff;
}

.service-card:nth-child(2) .service-list li {
    border-color: rgba(255,255,255,.30);
    color: #ffffff;
}

.service-card:nth-child(2) .service-check {
    background: #ffbd00;
    color: #087f83;
}

.service-card:nth-child(2) .service-cta {
    color: #ffbd00;
}

.service-card:nth-child(2) .service-arrow {
    background: #ffbd00;
    color: #087f83;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .services-section {
        padding: 75px 0;
    }

    .services-heading {
        margin-bottom: 35px;
    }

    .services-heading h2 {
        font-size: 42px;
    }

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

    .service-card {
        min-height: 400px;
        padding: 28px;
    }

    .service-card__top {
        margin-bottom: 40px;
    }

}
  /* =========================================
           SECTION SPACING
        ========================================= */

        .sec.sec--paper {
            padding-top: 3.5rem;
            padding-bottom: 3.5rem;
        }

        .method-eyebrow {
            margin-bottom: 0.6rem;
        }

        .method-lead {
            margin-top: 0.8rem;
            margin-bottom: 0;
        }


        /* =========================================
           SERVICES GRID
           3 CARDS PER ROW
        ========================================= */

        .method {
            display: grid;

            grid-template-columns: repeat(3, minmax(0, 1fr));

            margin-top: 2rem;

            border: 1px solid rgba(23, 91, 96, 0.85);

            border-radius: 12px;

            overflow: hidden;
        }


        /* =========================================
           CARD
        ========================================= */

        .method .step {
            position: relative;

            min-height: 245px;

            padding: 1.7rem 2rem;

            display: flex;
            flex-direction: column;

            border-right: 1px solid rgba(23, 91, 96, 0.85);
            border-bottom: 1px solid rgba(23, 91, 96, 0.85);

            transition:
                background 0.25s ease,
                color 0.25s ease;
        }


        /* =========================================
           REMOVE RIGHT BORDER
           EVERY 3RD CARD
        ========================================= */

        .method .step:nth-child(3n) {
            border-right: 0;
        }


        /* =========================================
           REMOVE BOTTOM BORDER
           LAST ROW
        ========================================= */

        .method .step:nth-last-child(-n + 3) {
            border-bottom: 0;
        }


        /* =========================================
           NUMBER
        ========================================= */

        .method .step__n {
            display: block;

            margin-bottom: 1.4rem;

            font-size: 0.7rem;
            font-weight: 500;

            letter-spacing: 0.14em;

            line-height: 1;

            color: rgba(30, 43, 58, 0.55);
        }


        /* =========================================
           CONTENT
        ========================================= */

        .method .step__content {
            max-width: 30rem;
        }


        /* =========================================
           TITLE
        ========================================= */

        .method .step h3 {
            margin: 0 0 0.75rem;

            font-size: clamp(1.05rem, 1.25vw, 1.25rem);

            line-height: 1.3;

            font-weight: 700;

            color: #1f5960;
        }


        /* =========================================
           DESCRIPTION
        ========================================= */

        .method .step p {
            margin: 0;

            font-size: 0.92rem;

            line-height: 1.55;

            color: rgba(35, 45, 58, 0.82);
        }


        /* =========================================
           HOVER
        ========================================= */

        .method .step:hover {
            background: rgba(31, 89, 96, 0.035);
        }

        .method .step:hover .step__n {
            color: #ffffff;
        }

        .method .step:hover .step__n {
            color: #1f5960;
        }

        .method .step:hover h3 {
            color: #1f5960;
        }

        .method .step:hover .step__content p {
            color: #ffffff;
        }

        .method .step:hover .step__content h3 {
            color: #ffffff;
        }


        /* =========================================
           1 CARD
        ========================================= */

        .method .step:only-child {
            grid-column: 1 / -1;

            border-right: 0;
            border-bottom: 0;

            min-height: auto;
        }


        /* =========================================
           4 CARDS
           3 + 1 FULL WIDTH
        ========================================= */

        .method .step:nth-child(4):last-child {
            grid-column: 1 / -1;

            border-right: 0;
            border-bottom: 0;

            min-height: auto;

            display: grid;
            grid-template-columns: 90px 1fr 2fr;

            gap: 1.5rem;

            align-items: start;
        }

        .method .step:nth-child(4):last-child .step__n {
            margin-bottom: 0;
        }


        /* =========================================
           5 CARDS
           3 + 2
        ========================================= */

        .method .step:nth-child(5):last-child {
            border-bottom: 0;
        }


        .method .step:nth-child(4):nth-last-child(2) {
            border-bottom: 0;
        }


        /* =========================================
           6 CARDS
           3 + 3
           
           No card spans full width.
        ========================================= */

        .method .step:nth-child(6):last-child {
            grid-column: auto;
            border-right: 0;
            border-bottom: 0;
            min-height: 245px;
            display: flex;
        }


        /* =========================================
           TABLET
           2 CARDS PER ROW
        ========================================= */

        @media (max-width: 1050px) {

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

            .method .step {
                min-height: 230px;

                padding: 1.6rem 1.7rem;
            }


            .method .step:nth-child(3n) {
                border-right: 1px solid rgba(23, 91, 96, 0.85);
            }

            .method .step:nth-child(2n) {
                border-right: 0;
            }


            /* Bottom row */

            .method .step:nth-last-child(-n + 2) {
                border-bottom: 0;
            }


            /* Reset special desktop layouts */

            .method .step:nth-child(4):last-child {
                grid-column: auto;

                display: flex;

                border-right: 0;

                min-height: 230px;
            }

            .method .step:nth-child(6):last-child {
                grid-column: auto;

                display: flex;

                min-height: 230px;
            }
        }


        /* =========================================
           MOBILE
           1 CARD PER ROW
        ========================================= */

        @media (max-width: 700px) {

            .sec.sec--paper {
                padding-top: 2.5rem;
                padding-bottom: 2.5rem;
            }


            .method {
                grid-template-columns: 1fr;

                margin-top: 1.5rem;

                border-radius: 10px;
            }


            .method .step,
            .method .step:nth-child(2n),
            .method .step:nth-child(3n),
            .method .step:nth-last-child(-n + 2),
            .method .step:nth-last-child(-n + 3) {

                grid-column: auto;

                min-height: auto;

                padding: 1.45rem 1.35rem;

                border-right: 0;

                border-bottom: 1px solid rgba(23, 91, 96, 0.85);
            }


            .method .step:last-child {
                border-bottom: 0;
            }


            .method .step__n {
                margin-bottom: 1rem;

                font-size: 0.68rem;
            }


            .method .step h3 {
                margin-bottom: 0.6rem;

                font-size: 1.08rem;
            }


            .method .step p {
                font-size: 0.9rem;

                line-height: 1.5;
            }


            /* Reset 4-card desktop layout */

            .method .step:nth-child(4):last-child {
                display: flex;

                grid-template-columns: none;

                gap: 0;

                min-height: auto;
            }
        }


        /* =========================================
           VERY SMALL MOBILE
        ========================================= */

        @media (max-width: 420px) {

            .sec.sec--paper {
                padding-top: 2rem;
                padding-bottom: 2rem;
            }

            .method .step {
                padding: 1.3rem 1.15rem;
            }

            .method .step h3 {
                font-size: 1rem;
            }

            .method .step p {
                font-size: 0.88rem;
            }
        }

         /* ── Layout width: full-bleed hero band ── */
        .page-full {
            width: 100%;
        }

        .page-eligibility h1, .page-eligibility h2, .page-eligibility h3,
        .page-eligibility [class*="title"], .page-eligibility [class*="heading"],
        .page-eligibility [class*="eyebrow"], .page-eligibility [class*="badge"] {
            font-family: var(--display);
        }
        .page-eligibility p, .page-eligibility span, .page-eligibility li, .page-eligibility td, .page-eligibility th, .page-eligibility a {
            font-family: var(--body);
        }

        .page-eligibility {
            background: linear-gradient(135deg, var(--flame) 0%, var(--ink) 100%);
            padding: 60px 0; position: relative; overflow: hidden;
        }
        .page-eligibility::before {
            content: ''; position: absolute; top: -80px; right: -80px;
            width: 360px; height: 360px;
            background: radial-gradient(circle, rgba(255,192,0,.18) 0%, transparent 70%);
            border-radius: 50%;
        }
        .page-eligibility__inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }

        .page-eligibility__badge {
            display: inline-flex; align-items: center; gap: .4rem;
            font-size: .75rem; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--gold);
            background: rgba(255,192,0,.15); border: 1px solid rgba(255,192,0,.3);
            padding: .35rem .9rem; border-radius: 999px; margin-bottom: 1.1rem;
        }

        .page-eligibility__inner .page-page-eligibility__heading {
            font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700;
            color: var(--paper); line-height: 1.25; margin: 0 0 1.2rem;
        }
       
        .page-eligibility__inner p {
            color: rgba(255,255,255,.82); font-size: 1.02rem;
            line-height: 1.9; margin: 0 0 1.75rem;
        }

        .page-eligibility__tags { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
        .page-eligibility__tag {
            background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
            border-radius: 999px; padding: .55rem 1.25rem; font-size: .88rem;
            font-weight: 600; color: var(--paper);
        }
        /* =========================================
   COMPACT WHY SECTION
   ========================================= */

.page-why {
    position: relative;
    padding: 48px 0;
    background: var(--ground);
    overflow: hidden;
}

.page-why .page-container {
    max-width: var(--maxw);
    margin: auto;
    padding-left: var(--gut);
    padding-right: var(--gut);
}


/* MAIN LAYOUT */

.why-compact {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    gap: 55px;
    align-items: center;
}


/* EYEBROW */

.why-compact__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;

    color: var(--ink);

    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.why-compact__eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft);
}


/* HEADING */

.why-compact__main h2,
.why-compact__main .page-heading {
    max-width: 650px;

    margin: 0 0 24px;

    color: var(--flame);

    font-family: var(--display);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.055em;
}


/* PARAGRAPH LIST */

.why-compact__list {
    border-top: 1px solid var(--line);
}

.why-compact__item {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 15px;

    padding: 13px 0;

    border-bottom: 1px solid var(--line-soft);
}

.why-compact__count {
    padding-top: 3px;

    color: var(--ink);

    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
}

.why-compact__item p {
    margin: 0;

    color: var(--ink-soft);

    font-family: var(--body);
    font-size: 16px;
    line-height: 1.4;
}


/* RIGHT SIDE */

.why-compact__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* CARDS */

.why-compact__card {
    padding: 21px 22px;
    border-radius: 17px;
}


/* DARK CARD */

.why-compact__card--dark {
    position: relative;
    overflow: hidden;

    background: var(--flame);
    color: #fff;

    box-shadow: 0 12px 30px rgba(38, 29, 75, .13);
}

.why-compact__card--dark::after {
    content: "";

    position: absolute;
    width: 110px;
    height: 110px;

    right: -50px;
    bottom: -50px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.why-compact__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.why-compact__card-head span {
    color: var(--gold);

    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

.why-compact__card-head b {
    color: rgba(255,255,255,.65);
    font-size: 18px;
    font-weight: 400;
}

.why-compact__card--dark h3 {
    margin: 0 0 8px;

    color: #fff;

    font-family: var(--display);
    font-size: 21px;
    line-height: 1.1;
}

.why-compact__card--dark p {
    margin: 0;

    color: rgba(255,255,255,.72);

    font-family: var(--body);
    font-size: 14px;
    line-height: 1.45;
}


/* AI NOTE */

.why-compact__card--note {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    border: 1px solid rgba(13,118,123,.15);

    background: var(--indigo-wash);
}

.why-compact__ai {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--ink);
    color: #fff;

    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
}

.why-compact__card--note small {
    display: block;
    margin-bottom: 5px;

    color: var(--ink);

    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
}

.why-compact__card--note h3 {
    margin: 0 0 5px;

    color: var(--flame);

    font-family: var(--display);
    font-size: 18px;
    line-height: 1.1;
}

.why-compact__card--note p {
    margin: 0;

    color: var(--ink-soft);

    font-family: var(--body);
    font-size: 13px;
    line-height: 1.4;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 850px) {

    .page-why {
        padding: 40px 0;
    }

    .why-compact {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .why-compact__side {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 560px) {

    .why-compact__main h2,
    .why-compact__main .page-heading {
        font-size: 34px;
    }

    .why-compact__side {
        display: flex;
    }

    .why-compact__item {
        grid-template-columns: 25px 1fr;
        gap: 10px;
    }

    .why-compact__item p {
        font-size: 15px;
    }

    .why-compact__card {
        padding: 18px;
    }
}

/* =========================================================
   ACADEMIC MANTRA — DISCOVER SECTION
   ========================================================= */

.am-discover {
    position: relative;
    overflow: hidden;

    padding: clamp(55px, 7vw, 90px) 0;

    background: var(--ground);

    color: var(--flame);
}


/* subtle brand background */

.am-discover::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -220px;
    right: -130px;

    border-radius: 50%;

    background: var(--indigo-wash);

    opacity: .7;
}

.am-discover::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -100px;
    bottom: -100px;

    border-radius: 50%;

    background: var(--gold-soft);
}


.am-discover__container {
    position: relative;

    z-index: 2;

    max-width: var(--maxw);

    margin: 0 auto;

    padding-left: var(--gut);
    padding-right: var(--gut);
}


/* =========================================================
   HEADER
   ========================================================= */

.am-discover__header {
    max-width: 850px;

    margin-bottom: 38px;
}


.am-discover__eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color: var(--ink);

    font-family: var(--mono);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.am-discover__eyebrow-line {
    width: 25px;
    height: 3px;

    border-radius: 10px;

    background: var(--gold);
}


/* =========================================================
   HEADING
   ========================================================= */

.am-discover .am-discover__title,
.am-discover h2 {
    max-width: 800px;

    margin: 0;

    color: var(--flame);

    font-family: var(--display);

    font-size: clamp(38px, 4.8vw, 60px);

    font-weight: 700;

    line-height: .98;

    letter-spacing: -.055em;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.am-discover__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, .65fr);

    gap: clamp(35px, 6vw, 80px);

    align-items: start;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.am-discover__lead {
    max-width: 720px;

    margin: 0 0 25px;

    color: var(--ink-soft);

    font-family: var(--body);

    font-size: clamp(17px, 1.6vw, 20px);

    line-height: 1.5;
}


/* =========================================================
   CONTENT BLOCKS
   ========================================================= */

.am-discover__blocks {
    border-top: 1px solid var(--line);
}


.am-discover__block {
    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 18px;

    padding: 18px 0;

    border-bottom: 1px solid var(--line-soft);
}


.am-discover__block-number {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    border-radius: 9px;

    background: var(--indigo-wash);

    color: var(--ink-2);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;
}


.am-discover__block-content h3 {
    margin: 0 0 6px;

    color: var(--ink);

    font-family: var(--display);

    font-size: 20px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.02em;
}


.am-discover__block-content p {
    margin: 0;

    color: var(--ink-soft);

    font-family: var(--body);

    font-size: 15px;

    line-height: 1.5;
}


/* =========================================================
   RIGHT FEATURE BOX
   ========================================================= */

.am-discover__side {
    position: relative;
}


.am-discover__box {
    position: relative;

    overflow: hidden;

    padding: 26px;

    border-radius: 22px;

    background: var(--ink);

    color: #fff;

    box-shadow:
        0 18px 45px rgba(13,118,123,.16);
}


/* yellow corner */

.am-discover__box::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -48px;
    bottom: -48px;

    border-radius: 50%;

    background: var(--gold);

    opacity: .9;
}


/* =========================================================
   BOX HEADER
   ========================================================= */

.am-discover__box-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 32px;
}


.am-discover__box-top span {
    color: var(--gold-soft);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .14em;
}


.am-discover__box-top b {
    color: var(--gold);

    font-size: 20px;

    font-weight: 400;
}


.am-discover__box-title {
    position: relative;

    z-index: 2;

    margin: 0 0 22px;

    color: #fff;

    font-family: var(--display);

    font-size: 27px;

    line-height: 1.05;

    letter-spacing: -.035em;
}


/* =========================================================
   BOX ITEMS
   ========================================================= */

.am-discover__box-items {
    position: relative;

    z-index: 2;

    border-top: 1px solid rgba(255,255,255,.18);
}


.am-discover__box-item {
    display: grid;

    grid-template-columns: 28px 1fr;

    gap: 12px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(255,255,255,.12);
}


.am-discover__box-number {
    padding-top: 2px;

    color: var(--gold);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;
}


.am-discover__box-text {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.am-discover__box-text strong {
    color: #fff;

    font-family: var(--display);

    font-size: 16px;

    line-height: 1.15;
}


.am-discover__box-text span {
    color: rgba(255,255,255,.68);

    font-family: var(--body);

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .am-discover__layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .am-discover__side {
        max-width: 600px;
    }

}


@media (max-width: 560px) {

    .am-discover {
        padding: 48px 0;
    }

    .am-discover .am-discover__title,
    .am-discover h2 {
        font-size: 36px;
    }

    .am-discover__block {
        grid-template-columns: 34px 1fr;

        gap: 12px;

        padding: 15px 0;
    }

    .am-discover__block-number {
        width: 28px;
        height: 28px;
    }

    .am-discover__block-content h3 {
        font-size: 18px;
    }

    .am-discover__block-content p {
        font-size: 14px;
    }

    .am-discover__box {
        padding: 21px;

        border-radius: 18px;
    }

}
/* =========================================================
   PROCESS FLOW
   DISTINCT DESIGN
   ========================================================= */

.process-flow-section {
    position: relative;
    overflow: hidden;

    padding: clamp(55px, 7vw, 85px) 0;

    background: var(--ground);
    color: var(--flame);
}


/* =========================================================
   BACKGROUND DETAILS
   ========================================================= */

.process-flow-section::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -180px;
    top: -150px;

    border-radius: 50%;

    border: 1px solid var(--line);
}

.process-flow-section::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: -80px;
    bottom: -70px;

    border-radius: 50%;

    background: var(--gold-soft);
}


.process-flow-wrap {
    position: relative;
    z-index: 2;

    max-width: var(--maxw);

    margin: 0 auto;

    padding-left: var(--gut);
    padding-right: var(--gut);
}


/* =========================================================
   INTRO
   ========================================================= */

.process-flow-intro {
    max-width: 760px;

    margin-bottom: 38px;
}


/* =========================================================
   KICKER
   ========================================================= */

.process-flow-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color: var(--ink);

    font-family: var(--mono);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.process-flow-kicker-mark {
    position: relative;

    width: 18px;
    height: 8px;

    display: inline-block;

    background: var(--gold);

    border-radius: 10px;
}


.process-flow-kicker-mark::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    right: -3px;
    top: 1.5px;

    border-radius: 50%;

    background: var(--flame);
}


/* =========================================================
   HEADING
   ========================================================= */

.process-flow-section .process-flow-heading,
.process-flow-section h2 {

    max-width: 760px;

    margin: 0 0 14px;

    color: var(--flame);

    font-family: var(--display);

    font-size: clamp(36px, 4.5vw, 58px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.055em;
}


/* =========================================================
   LEAD
   ========================================================= */

.process-flow-lead {

    max-width: 650px;

    margin: 0;

    color: var(--ink-soft);

    font-family: var(--body);

    font-size: clamp(16px, 1.5vw, 19px);

    line-height: 1.5;
}


/* =========================================================
   PROCESS LIST
   ========================================================= */

.process-flow-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 22px;

    row-gap: 16px;
}


/* =========================================================
   ITEM
   ========================================================= */

.process-flow-item {

    position: relative;

    display: grid;

    grid-template-columns: 48px 1fr 8px;

    gap: 15px;

    align-items: center;
}


/* =========================================================
   NUMBER
   ========================================================= */

.process-flow-index {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--ink);

    color: #FFFFFF;

    font-family: var(--mono);

    font-size: 10px;

    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(13,118,123,.16);
}


.process-flow-index span {
    transform: translateY(1px);
}


/* =========================================================
   CARD
   ========================================================= */

.process-flow-card {

    min-height: 112px;

    padding: 20px 22px;

    background: var(--paper);

    border: 1px solid var(--line);

    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(38,29,75,.045);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.process-flow-card:hover {

    transform: translateY(-3px);

    border-color: rgba(13,118,123,.28);

    box-shadow:
        0 15px 35px rgba(38,29,75,.09);
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.process-flow-card h3 {

    margin: 0 0 7px;

    color: var(--ink);

    font-family: var(--display);

    font-size: 20px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.025em;
}


/* =========================================================
   CARD TEXT
   ========================================================= */

.process-flow-card p {

    margin: 0;

    color: var(--ink-soft);

    font-family: var(--body);

    font-size: 14px;

    line-height: 1.48;
}


/* =========================================================
   RIGHT ACCENT
   ========================================================= */

.process-flow-accent {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--gold);

    box-shadow:
        0 0 0 4px var(--gold-soft);
}


/* =========================================================
   CONNECTOR
   ========================================================= */

.process-flow-connector {
    display: none;
}


/* =========================================================
   SPECIAL ALTERNATING ACCENTS
   ========================================================= */

.process-flow-item:nth-child(2n) .process-flow-index {

    background: var(--ink-2);
}


.process-flow-item:nth-child(3n) .process-flow-index {

    background: var(--jade);
}


.process-flow-item:nth-child(4n) .process-flow-index {

    background: var(--flame);
}


.process-flow-item:nth-child(2n) .process-flow-accent {

    background: var(--jade);
}


/* =========================================================
   LAST CARD
   ========================================================= */

.process-flow-item:last-child .process-flow-card {

    background: var(--gold-soft);

    border-color: rgba(255,192,0,.32);
}


.process-flow-item:last-child .process-flow-card h3 {

    color: var(--flame);
}


.process-flow-item:last-child .process-flow-index {

    background: var(--gold);

    color: var(--flame);
}


.process-flow-item:last-child .process-flow-accent {

    background: var(--ink);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .process-flow-list {

        grid-template-columns: 1fr;

        row-gap: 13px;
    }

    .process-flow-intro {

        margin-bottom: 30px;
    }

}


@media (max-width: 560px) {

    .process-flow-section {

        padding: 48px 0;
    }

    .process-flow-section .process-flow-heading,
    .process-flow-section h2 {

        font-size: 36px;
    }

    .process-flow-item {

        grid-template-columns: 40px 1fr;

        gap: 11px;
    }

    .process-flow-index {

        width: 40px;
        height: 40px;

        border-radius: 11px;
    }

    .process-flow-card {

        min-height: auto;

        padding: 17px 18px;
    }

    .process-flow-card h3 {

        font-size: 18px;
    }

    .process-flow-card p {

        font-size: 14px;
    }

    .process-flow-accent {

        display: none;
    }

}