/* ==========================================================================
   Home page
   ========================================================================== */

/* Hero
   ========================================================================== */
.home-hero {
    padding: clamp(130px, 17vh, 190px) 0 clamp(60px, 8vh, 96px);
}

.home-hero__grid {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}

.home-hero__kicker {
    margin-bottom: clamp(26px, 4vh, 40px);
    max-width: 26ch;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 2;
    text-transform: uppercase;
    color: var(--color-muted);
}

.home-hero__kicker span {
    display: inline-block;
}

.home-hero__title {
    font-size: clamp(44px, 6.4vw, 92px);
    font-weight: 700;
    line-height: .99;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.home-hero__intro {
    margin-top: clamp(26px, 4vh, 38px);
    max-width: 46ch;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: clamp(30px, 4vh, 42px);
}

.home-hero__note {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: clamp(46px, 7vh, 76px);
    padding-top: 22px;
    border-top: 1px solid var(--color-line);
}

.home-hero__note-services {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.9;
}

.home-hero__note-text {
    padding-left: 18px;
    border-left: 1px solid var(--color-line);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
    max-width: 30ch;
}

.home-hero__stack {
    position: relative;
    height: clamp(460px, 44vw, 580px);
}

.home-hero__vertical {
    position: absolute;
    left: -14px;
    top: 38%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.28);
    transform: rotate(-90deg);
    transform-origin: left center;
    white-space: nowrap;
}

/* Hero cards */
.hero-card {
    position: absolute;
    border-radius: var(--radius);
}

.hero-card--placement {
    top: 0;
    right: 0;
    width: min(100%, 430px);
    padding: 26px 26px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    box-shadow: 0 26px 60px -34px rgba(13, 24, 20, 0.28);
}

.hero-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}

.hero-card__label,
.hero-card__status {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.hero-card__status {
    letter-spacing: .14em;
    color: var(--color-forest);
}

.hero-card__headline {
    margin: 18px 0 6px;
    font-family: var(--font-serif);
    font-size: 27px;
    line-height: 1.16;
    letter-spacing: -.01em;
}

.hero-card__source {
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--color-muted);
}

.hero-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--color-line);
}

.hero-card__stat {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.hero-card__stat-label {
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.hero-card--draft {
    left: 0;
    bottom: clamp(62px, 9vw, 96px);
    width: min(100%, 332px);
    padding: 24px;
    background: var(--color-forest);
    color: var(--color-paper);
}

.hero-card__draft-label {
    margin-bottom: 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-mint);
}

.hero-card__draft-title {
    margin-bottom: 18px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.hero-card__lines {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.hero-card__lines span {
    display: block;
    height: 1px;
    background: rgba(245, 245, 239, 0.34);
}

.hero-card__lines span:nth-child(2) {
    background: rgba(245, 245, 239, 0.26);
}

.hero-card__lines span:nth-child(3) {
    width: 72%;
    background: rgba(245, 245, 239, 0.18);
}

.hero-card__draft-meta {
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(245, 245, 239, 0.7);
}

.hero-card--badge {
    right: clamp(0px, 3vw, 40px);
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
}

.hero-card--badge p {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

.hero-card--badge .text-soft {
    font-weight: 500;
}

.hero-card__dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--color-mint);
}

/* Trust + marquee
   ========================================================================== */
.home-trust {
    padding: clamp(58px, 8vh, 96px) 0 clamp(42px, 6vh, 64px);
}

.home-trust__title {
    font-size: clamp(30px, 4.2vw, 58px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.035em;
    max-width: 18ch;
}

.home-trust__text {
    margin-bottom: 6px;
    line-height: 1.6;
    max-width: 34ch;
}

.marquee {
    margin-top: clamp(44px, 7vh, 76px);
    padding: clamp(18px, 2.4vw, 26px) 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    overflow: hidden;
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 46s linear infinite;
}

.marquee__group {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 44px);
    padding-right: clamp(24px, 3vw, 44px);
}

.marquee__item {
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.marquee__item--muted {
    color: var(--color-muted);
}

.marquee__item--serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 38px);
    letter-spacing: 0;
}

.marquee__separator {
    color: var(--color-mint);
    font-size: 20px;
}

@keyframes marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }
}

/* Services overview
   ========================================================================== */
.home-services {
    padding: clamp(58px, 8vh, 100px) 0 0;
}

.home-services__title {
    font-size: clamp(30px, 4.4vw, 60px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.035em;
    max-width: 17ch;
}

.service-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: clamp(48px, 7vh, 80px);
    border-top: 1px solid var(--color-line);
}

.service-panel {
    display: block;
    padding: clamp(34px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(38px, 5vw, 64px);
    color: var(--color-ink);
    transition: background-color .6s var(--ease-out), opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

.service-panel + .service-panel {
    border-left: 1px solid var(--color-line);
}

.service-panel:hover {
    background-color: var(--color-white);
    color: var(--color-ink);
}

.service-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.service-panel__number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--color-muted);
}

.service-panel__arrow {
    display: inline-block;
    font-size: 22px;
    color: var(--color-forest);
    transition: transform .5s var(--ease-out);
}

.service-panel__title {
    margin-top: clamp(26px, 4vw, 44px);
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
    transition: transform .5s var(--ease-out);
}

.service-panel:hover .service-panel__arrow {
    transform: translate3d(6px, 0, 0);
}

.service-panel:hover .service-panel__title {
    transform: translate3d(8px, 0, 0);
}

.service-panel__description {
    margin: 18px 0 clamp(26px, 3.4vw, 40px);
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.62;
    color: var(--color-muted);
}

.service-panel__list {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--color-line);
}

.service-panel__list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 15px;
    font-weight: 500;
}

.service-panel__list li:last-child {
    border-bottom: 0;
}

.service-panel__list li span {
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: .1em;
}

.service-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(26px, 3.4vw, 38px);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-forest);
}

/* Principles
   ========================================================================== */
.home-principles {
    padding: clamp(62px, 8.5vh, 104px) 0;
}

.home-principles__eyebrow {
    margin-bottom: clamp(26px, 4vh, 40px);
}

.home-principles .split-grid {
    gap: clamp(28px, 5vw, 72px);
}

.home-principles__title {
    font-size: clamp(30px, 4.6vw, 62px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.04em;
    max-width: 16ch;
}

.home-principles__intro {
    max-width: 40ch;
    color: rgba(245, 245, 239, 0.76);
}

.home-principles__note {
    margin-top: clamp(20px, 2.6vh, 28px);
    padding-top: 18px;
    border-top: 1px solid var(--color-line-light-strong);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(245, 245, 239, 0.6);
    max-width: 40ch;
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    margin-top: clamp(40px, 5.5vh, 68px);
    border-top: 1px solid var(--color-line-light-strong);
}

.principle {
    padding: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 32px) clamp(34px, 4vw, 48px) 0;
}

.principle__tag {
    margin-bottom: clamp(24px, 3vw, 38px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-mint);
}

.principle__title {
    margin-bottom: 14px;
    font-size: clamp(19px, 1.5vw, 23px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.principle__body {
    font-size: 15px;
    line-height: 1.62;
    color: var(--color-text-light);
    max-width: 32ch;
}

/* Process
   ========================================================================== */
.home-process {
    padding: clamp(62px, 8.5vh, 104px) 0;
}

.home-process__header {
    gap: clamp(28px, 5vw, 64px);
    padding-bottom: clamp(40px, 6vh, 64px);
}

.home-process__eyebrow {
    margin-bottom: 22px;
}

.home-process__title {
    font-size: clamp(30px, 4.2vw, 56px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.035em;
}

.home-process__intro {
    margin: 0 0 6px clamp(0px, 6vw, 90px);
    font-size: 16px;
    line-height: 1.62;
    color: var(--color-text-light);
    max-width: 32ch;
}

.process-track {
    position: relative;
    height: 1px;
    background: var(--color-line-light-strong);
}

.process-track__bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 0;
    background: var(--color-mint);
    transition: width .25s linear;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--color-line-light);
    border-radius: var(--radius);
    overflow: hidden;
}

.process-step {
    padding: clamp(26px, 2.6vw, 38px) clamp(16px, 1.8vw, 26px) clamp(26px, 2.6vw, 34px);
}

.process-step + .process-step {
    border-left: 1px solid var(--color-line-light);
}

.process-step__number {
    margin-bottom: clamp(20px, 3vw, 34px);
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    color: rgba(245, 245, 239, 0.24);
}

.process-step__title {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.process-step__body {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(245, 245, 239, 0.7);
}

/* Metrics
   ========================================================================== */
.home-metrics {
    padding: clamp(58px, 8vh, 96px) 0;
}

.home-metrics__title {
    margin-bottom: clamp(40px, 6vh, 68px);
    font-size: clamp(14px, 1vw, 15px);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(24px, 3vw, 40px);
}

.metric {
    padding-top: 22px;
    border-top: 1px solid var(--color-line);
}

.metric__value {
    font-size: clamp(46px, 5.6vw, 80px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
}

.metric__value--serif {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -.02em;
}

.metric__label {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-muted);
}

.home-metrics__note {
    margin-top: clamp(30px, 4vh, 44px);
    font-size: 13px;
    color: var(--color-muted);
}

/* Link network
   ========================================================================== */
.home-network {
    padding: clamp(58px, 8vh, 100px) 0;
}

.home-network__grid {
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}

.home-network__eyebrow {
    margin-bottom: 26px;
}

.home-network__title {
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.03em;
    max-width: 24ch;
}

.home-network__text {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.62;
    color: var(--color-muted);
    max-width: 36ch;
}

.link-network {
    position: relative;
    height: clamp(340px, 32vw, 420px);
}

.link-network__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.link-network__svg path {
    fill: none;
    stroke: rgba(17, 17, 17, 0.22);
    stroke-width: 1;
}

.link-network__svg path.is-highlighted {
    stroke: var(--color-mint);
}

.link-node {
    position: absolute;
    padding: 10px 14px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.link-node span {
    display: block;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.link-node--one { left: 4%; top: 16%; }
.link-node--two { right: 6%; top: 6%; }
.link-node--three { left: 2%; bottom: 14%; }
.link-node--four { right: 2%; bottom: 6%; }

.link-node--target {
    left: 38%;
    top: 48%;
    padding: 14px 18px;
    background: var(--color-forest);
    border-color: var(--color-forest);
    color: var(--color-paper);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.link-node--target span {
    color: var(--color-mint);
}

/* Content philosophy
   ========================================================================== */
.home-philosophy {
    padding: clamp(62px, 8.5vh, 104px) 0;
}

.home-philosophy__title {
    max-width: 20ch;
    font-size: clamp(32px, 5.2vw, 74px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.04em;
}

.home-philosophy__body {
    gap: clamp(30px, 5vw, 72px);
    margin-top: clamp(40px, 6vh, 68px);
    align-items: start;
}

.home-philosophy__text {
    margin-left: clamp(0px, 8vw, 120px);
    max-width: 40ch;
}

.home-philosophy__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-philosophy__pills .pill:nth-child(2) { transition-delay: .06s; }
.home-philosophy__pills .pill:nth-child(3) { transition-delay: .12s; }
.home-philosophy__pills .pill:nth-child(4) { transition-delay: .18s; }
.home-philosophy__pills .pill:nth-child(5) { transition-delay: .24s; }
.home-philosophy__pills .pill:nth-child(6) { transition-delay: .3s; }

/* Commitments
   ========================================================================== */
.home-commitments {
    padding: clamp(50px, 7vh, 82px) 0 clamp(62px, 9vh, 104px);
}

.home-commitments__header {
    gap: 30px;
    margin-bottom: clamp(36px, 5vh, 56px);
}

.home-commitments__title {
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.04;
    max-width: 20ch;
}

.home-commitments__note {
    font-size: 13px;
    color: var(--color-muted);
    max-width: 32ch;
}

.commitment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 1px;
    background: var(--color-line);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
}

.commitment {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
    min-height: 248px;
    padding: clamp(26px, 3vw, 38px);
    background: var(--color-paper);
}

.commitment:nth-child(2) { transition-delay: .08s; }
.commitment:nth-child(3) { transition-delay: .16s; }

.commitment__quote {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.35;
}

.commitment__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
}

.commitment__title span {
    display: block;
    font-weight: 500;
    color: var(--color-muted);
}

/* Responsive
   ========================================================================== */
@media (max-width: 960px) {
    .home-hero__grid {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .home-hero__stack {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .hero-card,
    .home-hero__vertical {
        position: static;
        width: auto;
        max-width: none;
    }

    .hero-card[data-parallax] {
        transform: none;
    }

    .home-hero__vertical {
        display: none;
    }

    .service-panels,
    .home-network__grid {
        grid-template-columns: 1fr;
    }

    .service-panel + .service-panel {
        border-left: 0;
        border-top: 1px solid var(--color-line);
    }

    .process-track {
        display: none;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .process-step {
        padding: 26px 22px;
    }

    .process-step + .process-step {
        border-left: 0;
        border-top: 1px solid var(--color-line-light);
    }

    .home-process__intro,
    .home-philosophy__text {
        margin-left: 0;
    }

    .link-network {
        height: auto;
    }

    .link-network__svg {
        display: none;
    }

    .link-node {
        position: static;
        margin-bottom: 12px;
    }

    .link-node--target {
        display: inline-block;
    }
}