/* ==========================================================================
   The Life Code — responsive layer
   Each breakpoint is a deliberate layout decision, not a scaled-down desktop.

   >= 1600   large desktop
   1201-1440 desktop
   1025-1200 small laptop / tablet landscape
    901-1024 tablet landscape lower bound
    769-900  tablet portrait (iPad)
    601-768  small tablet
    481-600  large phone
      <= 480 phone
   ========================================================================== */

/* -------------------------------------------------- >= 1600 large desktop */
@media (min-width: 1600px) {
    :root {
        --container: 1400px;
        --container-wide: 1520px;
        --gutter: 64px;
    }
    .hero__figure { height: clamp(520px, 62vh, 760px); }
}

/* -------------------------------------------------- <= 1400 */
@media (max-width: 1400px) {
    .project__meta > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* -------------------------------------------------- <= 1200 small laptop */
@media (max-width: 1200px) {
    :root {
        --container: 1120px;
        /* The hero column narrows here, so the headline steps down with it to
           keep the same three-line composition. */
        --display-hero: clamp(2.125rem, 1.1rem + 3.6vw, 3.625rem);
    }

    .hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
    .hero__content { max-width: 38rem; }

    .positioning__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
    .positioning__figure { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

    .stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }

    /* The detail column drops beneath the title once the row gets tight. */
    .service {
        grid-template-columns: 3.25rem minmax(0, 1fr) 44px;
        grid-template-areas: 'n title arrow' '. detail .';
        row-gap: 14px;
    }
    .service__detail { padding-top: 0; }

    .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-xl); }

    .performance__stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }

    .project { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
    .project--reverse { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

    .legal__grid { grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); }
}

/* -------------------------------------------------- <= 1024 tablet landscape */
@media (max-width: 1024px) {
    :root {
        --header-h: 76px;
        --header-h-compact: 62px;
    }

    .hero { padding-bottom: clamp(56px, 7vw, 88px); }
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(36px, 5vw, 56px);
        align-items: start;
    }
    .hero__content { max-width: 40rem; }
    .hero__actions { margin-bottom: var(--space-lg); }
    .hero__index { max-width: none; }

    /* A landscape crop reads better than a tall portrait once the hero stacks. */
    .hero__figure {
        width: 100%;
        height: auto;
        margin-right: 0;
        aspect-ratio: 16 / 10;
        max-height: 520px;
        margin-right: 0;
    }
    .hero__figure img { object-position: 30% 42%; }

    .positioning__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
    .positioning__lead .display-2 { max-width: 26ch; }
    .positioning__body { max-width: 58ch; padding-top: 0; }

    .services__preview { display: none; }

    .reasons__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .reasons__aside { position: static; }
    .reasons__aside .display-2 { max-width: 22ch; }
    .reasons__note { max-width: 52ch; }
    .reason { grid-template-columns: 3.25rem minmax(0, 1fr); }

    .process__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .process__sticky { position: static; }
    .process__sticky .display-2 { max-width: 20ch; }
    .process__note { max-width: 52ch; }
    .process__figure {
        max-width: 420px;
        margin-top: var(--space-md);
    }
    .process__progress { display: none; }

    .performance__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .performance__pillars li:nth-child(3n) { border-right: 1px solid var(--ink-border); padding-right: clamp(20px, 2.4vw, 36px); }
    .performance__pillars li:nth-child(odd) { padding-left: 0; }
    .performance__pillars li:nth-child(even) {
        border-right: 0;
        padding-right: 0;
        padding-left: clamp(20px, 2.4vw, 36px);
    }

    .about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .about__media { aspect-ratio: 16 / 9; max-height: 440px; }
    .about__body { max-width: 58ch; }

    .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .contact__aside .display-2 { max-width: 24ch; }
    .contact__lead { max-width: 54ch; }
    .contact__details { max-width: 44rem; }

    .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .site-footer__brand { max-width: 34rem; }
    .site-footer__wordmark { transform: translateY(20%); }

    .legal__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .legal__toc { position: static; max-width: 34rem; }
    .legal__body { max-width: none; }
}

/* -------------------------------------------------- <= 900 switch to mobile nav */
@media (max-width: 900px) {
    .site-nav { display: none; }
    .site-header__actions { margin-left: auto; }
    .site-header__actions .btn--primary { display: none; }
    .menu-toggle { display: inline-flex; }

    .section-head--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
    .section-head--split .section-head__note { padding-bottom: 0; max-width: 54ch; }

    /* Projects stack with the image leading, regardless of desktop order. */
    .project,
    .project--reverse {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
        padding: clamp(32px, 5vw, 48px) 0;
    }
    .project--reverse .project__media { order: 1; }
    .project--reverse .project__info { order: 2; }
    .project__copy { max-width: 54ch; }
    .project__meta { max-width: 40rem; }

    .positioning__figure {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
        margin-top: clamp(44px, 6vw, 64px);
        padding-top: clamp(32px, 4vw, 48px);
    }
    .positioning__image {
        aspect-ratio: 16 / 10;
        max-height: 460px;
    }
    .positioning__image img { object-position: 50% 24%; }

    .service {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        grid-template-areas: 'n title' '. detail' '. arrow';
        gap: 14px var(--space-sm);
    }
    .service__arrow { width: 38px; height: 38px; }
    .service:hover .service__title { transform: none; }

    .cta__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .cta__next { padding-top: 0; }
    .cta__steps p { max-width: 52ch; }
}

/* -------------------------------------------------- <= 768 small tablet */
@media (max-width: 768px) {
    .hero { padding-top: var(--space-md); }
    .hero__figure { aspect-ratio: 3 / 2; max-height: 400px; }

    .metrics__item {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-sm);
    }
    .metrics__value { font-size: clamp(1.375rem, 1.1rem + 1.6vw, 1.875rem); }

    .capabilities__list li { padding: 15px clamp(16px, 4vw, 26px); gap: 12px; }

    .performance__pillars { grid-template-columns: minmax(0, 1fr); }
    .performance__pillars li,
    .performance__pillars li:nth-child(odd),
    .performance__pillars li:nth-child(even) {
        padding: var(--space-md) 0;
        border-right: 0;
    }
    .performance__pillars p { max-width: 46ch; }

    .contact__form-wrap {
        margin-inline: calc(var(--gutter) * -1);
        padding: var(--gutter) var(--gutter) calc(var(--gutter) + 4px);
        border-left: 0;
        border-right: 0;
    }

    .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
    .site-footer__meta { gap: var(--space-xs) var(--space-sm); }
}

/* -------------------------------------------------- <= 600 large phone */
@media (max-width: 600px) {
    :root { --gutter: clamp(20px, 5.6vw, 24px); }

    .announce__link { display: none; }
    .announce__inner { min-height: 36px; padding: 8px 0; }
    .announce__text { font-size: 10px; letter-spacing: .08em; }
    .announce__text--long { display: none; }
    .announce__text--short { display: block; }
    .eyebrow--dotted { font-size: 10px; letter-spacing: .1em; }

    .hero__title { letter-spacing: -0.028em; }
    .hero__lead { margin-bottom: var(--space-md); }
    .hero__actions { gap: 10px; }
    .hero__actions .btn { flex: 1 1 100%; }
    .hero__figure { aspect-ratio: 4 / 3; max-height: 340px; }
    .hero__figcaption { padding: 10px 14px; font-size: 9.5px; gap: 9px; }

    .hero__index { grid-template-columns: minmax(0, 1fr); }
    .hero__index li:nth-child(odd) { padding-right: 0; }
    .hero__index li:nth-child(even) { padding-left: 0; border-left: 0; }

    .form__row { grid-template-columns: minmax(0, 1fr); }
    .form__footer { flex-direction: column; align-items: stretch; }
    .form__footer .btn { width: 100%; }
    .form__footer-note { text-align: center; }

    .service {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'n arrow' 'title title' 'detail detail';
        gap: 12px var(--space-sm);
        padding: var(--space-md) 0;
    }
    .service__n { padding-top: 6px; }
    .service__arrow { justify-self: end; align-self: start; }
    .service__tags { gap: 5px 14px; }
    .cta__steps li { grid-template-columns: 2.25rem minmax(0, 1fr); }

    .project__meta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }

    .reason { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .reason__n { padding-top: 0; }

    .step { padding-left: var(--space-sm); }
    .step__head { flex-direction: column; gap: 6px; align-items: flex-start; }

    .stack__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }

    .performance__stats dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .performance__stats > dl > div {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-sm);
        padding: 14px 0;
        border-bottom: 1px solid var(--ink-border);
    }
    .performance__stats > dl > div:first-child { border-top: 1px solid var(--ink-border); }
    .performance__stats dt { order: 0; margin-top: 0; }
    .performance__stats dd { font-size: 1.75rem; }

    .about__media { aspect-ratio: 4 / 3; max-height: 340px; }

    .cta__title { letter-spacing: -0.03em; }
    .cta__inner .btn { width: 100%; }

    .contact__details > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }

    .site-footer { padding-top: var(--space-2xl); }
    .site-footer__wordmark {
        font-size: 17vw;
        -webkit-text-stroke-width: .75px;
        transform: translateY(22%);
    }
}

/* -------------------------------------------------- <= 400 small phone */
@media (max-width: 400px) {
    .brand__word { font-size: .875rem; }
    .menu-toggle { padding-left: 8px; }
    /* Hidden visually but kept as the button's accessible name. */
    .menu-toggle__label {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .hero__figure { max-height: 300px; }
    .service__arrow { margin-left: 0; }
    .site-footer__nav { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}

/* -------------------------------------------------- touch: no hover affordances */
@media (hover: none) {
    .services__preview { display: none; }
    .service:hover { background: none; }
    .service:hover .service__title { transform: none; }
    .service:hover .service__arrow {
        background: none;
        border-color: var(--color-border-strong);
        color: var(--color-primary);
        transform: none;
    }
    .reason:hover { padding-left: 0; }
    .stack__items li:hover { padding-left: 0; color: var(--color-primary); }
    .capabilities:hover .capabilities__track { animation-play-state: running; }
}

/* -------------------------------------------------- short viewports */
@media (min-width: 1025px) and (max-height: 820px) {
    .hero { padding-top: var(--space-md); }
    .hero__figure { height: clamp(420px, 66vh, 560px); }
    .hero__actions { margin-bottom: var(--space-lg); }
}

/* -------------------------------------------------- print */
@media print {
    .announce, .site-header, .mobile-menu, .capabilities, .cta,
    .contact__form-wrap, .site-footer__wordmark { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .performance { background: #fff; color: #000; }
    .performance__bg { display: none; }
    [data-reveal], .media-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}