@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --vayume-bg: #F3F1EC;
    --vayume-ink: #111111;
    --vayume-accent: #e93323;
    --vayume-shell: 1440px;

    /*
     * Desktop composition coordinates.
     *
     * Header and Hero copy deliberately occupy
     * independent horizontal axes.
     */
    --vayume-gutter: clamp(32px, 3.2vw, 52px);
    --vayume-header-edge: 52px;

    /*
     * Hero copy remains deliberately inset from the brand.
     * Current position includes the approved 24px
     * rightward adjustment.
     */
    --vayume-hero-copy-edge: clamp(68px, calc(5vw + 24px), 100px);
}

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

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

body {
    margin: 0;
    background: var(--vayume-bg);
    color: var(--vayume-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

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

a {
    color: inherit;
}

.site-shell {
    width: min(100%, var(--vayume-shell));
    margin-inline: auto;
    padding-inline: var(--vayume-gutter);
}


/* ---------------------------------------------------------
   Site header

   Header geometry remains independent from Hero copy.
   --------------------------------------------------------- */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;

    padding-top: clamp(84px, calc(5.7vh + 24px), 88px);
    padding-bottom: 24px;

    background: transparent;
    color: #ffffff;
}

.site-header__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;

    padding-left: var(--vayume-header-edge);
    padding-right: var(--vayume-header-edge);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

.site-brand__mark {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: contain;
}

.site-brand__name {
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(28px, 3vw, 48px);
    transform: translateY(-2px);
}

.site-nav a {
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}


/* ---------------------------------------------------------
   Home — Hero
   --------------------------------------------------------- */

.hero {
    position: relative;

    width: 100%;
    min-height: 100svh;
    overflow: hidden;

    background: #111111;
    color: #ffffff;
}

.hero__media {
    position: absolute;
    inset: 0;
}

.hero__image {
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.hero__content {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: none;
    margin-inline: 0;

    min-height: 100svh;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding-top: clamp(150px, 17vh, 200px);
    padding-right: var(--vayume-hero-copy-edge);
    padding-bottom: clamp(64px, 8vh, 110px);
    padding-left: var(--vayume-hero-copy-edge);
}

.hero__title {
    margin: -96px 0 0;

    font-size: 90px;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.hero__entry {
    margin: 42px 0 0;

    font-size: 37px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.hero__product {
    margin: 112px 0 0;

    font-size: 26px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.02em;
}


/* ---------------------------------------------------------
   Home — Product Establishment
   ---------------------------------------------------------

   The outer section carries the canonical VayuMe page field.
   The inner field carries the established material surface.

   Desktop uses the same 16:9 presentation frame as the
   surrounding Home sections. The material field is inset
   exactly 60px on all four sides.

   Mobile deliberately changes to document flow rather than
   mechanically shrinking desktop coordinates.
   --------------------------------------------------------- */

.product-establishment {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 720px;

    padding: 60px;

    background: var(--vayume-bg);
    color: var(--vayume-ink);
}

.product-establishment__field {
    position: relative;

    width: 100%;
    height: 100%;
    margin-inline: auto;

    overflow: hidden;

    border: none;
    border-radius: 72px;

    background: #E4E1DA;
}


/*
 * Opening language remains an authored object on desktop.
 */

.product-establishment__statement {
    position: absolute;

    top: 13.6%;
    left: 6%;

    width: 40%;
}

.product-establishment__title {
    margin: 0;

    font-size: clamp(38px, 3.05vw, 52px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.product-establishment__practice {
    margin: 0.34em 0 0;

    font-size: clamp(38px, 3.05vw, 52px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.035em;
}


/*
 * Home-local VayuMe punctuation.
 *
 * The dot remains an independent compositional object.
 * Its desktop registration is centered on the language
 * region rather than on the complete material field.
 */

.product-establishment__dot {
    position: absolute;

    top: 43%;
    left: 24%;

    width: 14px;
    height: 14px;

    border-radius: 50%;
    background: var(--vayume-accent);

    transform: translateX(-50%);
}


.product-establishment__description {
    position: absolute;

    top: 50%;
    left: 6%;

    margin: 0;

    font-size: clamp(21px, 1.75vw, 29px);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -0.025em;
}


/*
 * Existing Watch/iPhone pair remains one product object.
 *
 * The complete pair is raised 20px together. The Watch
 * retains its independent -6px optical correction so the
 * visible hardware bottoms preserve their approved relation.
 */

.product-establishment__devices {
    position: absolute;

    top: 9.4%;
    right: 11%;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: clamp(22px, 2.4vw, 42px);

    width: 40%;
    height: 68%;

    transform: translateY(-20px);
}

.product-establishment__watch {
    width: 37.5%;
    max-width: none;
    height: auto;

    filter: drop-shadow(0 10px 14px rgba(17, 17, 17, 0.16));
    transform: translateY(-6px);
}

.product-establishment__iphone {
    width: 36%;
    max-width: none;
    height: auto;

    filter: drop-shadow(0 10px 14px rgba(17, 17, 17, 0.16));
}


/*
 * The loop belongs to the complete product composition,
 * not to either the language or device side.
 */

.product-establishment__loop {
    position: absolute;

    left: 50%;
    bottom: 8.6%;

    display: flex;
    align-items: center;
    gap: 0.28em;

    width: max-content;
    margin: 0;

    font-size: clamp(14px, 1.1vw, 18px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;

    white-space: nowrap;

    transform: translateX(-50%);
}


/* ---------------------------------------------------------
   Home — Product Establishment — Tablet / intermediate
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .product-establishment {
        aspect-ratio: auto;
        min-height: 0;
        padding: 32px;
    }

    .product-establishment__field {
        width: 100%;
        height: auto;
        min-height: 680px;

        border-radius: 56px;
    }

    .product-establishment__statement {
        left: 6%;
        width: 43%;
    }

    .product-establishment__dot {
        left: 27.5%;
    }

    .product-establishment__description {
        left: 6%;
    }

    .product-establishment__devices {
        top: 16%;
        right: 4%;
        width: 42%;
        height: 62%;
    }

    .product-establishment__loop {
        bottom: 8%;
    }
}


/* ---------------------------------------------------------
   Home — Product Establishment — Mobile
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .product-establishment {
        padding: 16px;
    }

    .product-establishment__field {
        width: 100%;
        min-height: 0;

        padding: 7.4vw 6.2vw 8.6vw;

        overflow: hidden;

        border-radius: 36px;
    }

    .product-establishment__statement,
    .product-establishment__description,
    .product-establishment__devices,
    .product-establishment__loop,
    .product-establishment__dot {
        position: static;
    }

    .product-establishment__statement {
        width: 100%;
        margin-top: 4.6vw;
    }

    .product-establishment__title,
    .product-establishment__practice {
        font-size: 4.0741vw;
        font-weight: 300;
        line-height: 1.12;
        letter-spacing: -0.025em;
    }

    .product-establishment__practice {
        margin-top: 0.72em;
    }

    .product-establishment__dot {
        width: 1.76vw;
        height: 1.76vw;

        margin: 6.2vw auto 5.7vw;

        transform: translateX(-50px);
    }

    .product-establishment__description {
        margin: 0;

        font-size: 3.0556vw;
        font-weight: 400;
        line-height: 1.22;
        letter-spacing: -0.02em;
    }

    .product-establishment__description br {
        display: block;
    }

    .product-establishment__devices {
        width: 69%;
        height: auto;
        margin: 10.6vw auto 0;

        justify-content: center;
        gap: 1.7vw;

        transform: none;
    }

    .product-establishment__watch {
        width: 43%;
        transform: none;
    }

    .product-establishment__iphone {
        width: 38%;
    }

    .product-establishment__loop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.1vw;

        width: 100%;
        margin-top: 10.6vw;
        margin-bottom: 5.1vw;

        font-size: 2.30vw;
        line-height: 1;
        text-align: center;
        white-space: nowrap;

        transform: none;
    }

    .product-establishment__loop-line {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.55vw;
    }
}


/* ---------------------------------------------------------
   Home — Breathe

   Desktop composition follows the approved Keynote
   reference. The photograph is the visual field.
   Motion and responsive/mobile behavior come later.
   --------------------------------------------------------- */

.breathe {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 720px;
    overflow: hidden;

    background: #111111;
    color: #ffffff;
}

.breathe__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.breathe__context {
    position: absolute;
    z-index: 1;

    top: 67.5%;
    left: 13.2%;

    display: flex;
    align-items: center;
    gap: clamp(14px, 1.2vw, 20px);

    width: max-content;
    margin: 0;

    font-size: clamp(25px, 2.07vw, 36px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;

    white-space: nowrap;
}

.breathe__context-dot {
    width: auto;
    height: auto;
    flex: 0 0 auto;

    border-radius: 0;
    background: none;

    line-height: inherit;
}

.breathe__timing {
    position: absolute;
    z-index: 1;

    top: 44%;
    left: 75%;

    width: 20%;
}

.breathe__timing p {
    margin: 0;

    font-size: clamp(19.55px, 1.564vw, 26.35px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.02em;

    white-space: nowrap;
}

.breathe__timing p + p {
    margin-top: clamp(18px, 1.6vw, 27px);
}

.breathe__watches {
    position: absolute;
    z-index: 1;

    right: 5.2%;
    bottom: 11.8%;

    display: flex;
    align-items: flex-end;
    gap: clamp(12px, 1.2vw, 20px);

    width: 17.5%;

    pointer-events: none;
}

.breathe__watch {
    width: calc(50% - 10px);
    max-width: none;
    height: auto;
}

.breathe__watch--full {
    transform: translateX(8px);
}


/* ---------------------------------------------------------
   Home — Reflect
   --------------------------------------------------------- */

.reflect {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 720px;
    overflow: hidden;

    background: #111111;
    color: #ffffff;
}

.reflect__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.reflect__statement {
    position: absolute;
    z-index: 1;

    left: 68%;
    top: 70%;

    margin: 0;

    font-size: clamp(30px, 2.62vw, 45px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Home — Continue
   --------------------------------------------------------- */

.continue {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 720px;
    overflow: hidden;

    background: #111111;
    color: #ffffff;
}

.continue__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.continue__statement {
    position: absolute;
    z-index: 1;

    left: 5.3%;
    top: 72.5%;

    margin: 0;

    font-size: clamp(32.04px, 2.7145vw, 45.39px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.015em;

    text-align: center;
    white-space: nowrap;

    transform: translateY(-50%);
}

.continue__statement-line {
    display: block;
}

.continue__statement-line--second {
    margin-top: 38px;
}

.continue__footer {
    display: contents;
}

.continue__early-access {
    position: absolute;
    z-index: 1;

    right: 13.3%;
    top: 82%;

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

    padding: 18px 28px;

    border: 1px solid rgba(247, 245, 240, 0.72);
    border-radius: 999px;

    background: rgba(247, 245, 240, 0.25);
    color: var(--vayume-bg);

    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;

    transform: translateY(-50%);

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.continue__early-access:hover,
.continue__early-access:focus-visible {
    background: rgba(247, 245, 240, 0.38);
    border-color: rgba(247, 245, 240, 0.90);
}

.continue__early-access:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.continue__copyright {
    position: absolute;
    z-index: 1;

    left: 7.1%;
    top: 92%;
    transform: translateY(-50%);

    margin: 0;

    color: rgba(247, 245, 240, 0.74);

    font-size: clamp(11px, 0.88vw, 14px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;

    white-space: nowrap;
}

.continue__footer-nav {
    position: absolute;
    z-index: 1;

    right: 20%;
    top: 92%;

    display: flex;
    align-items: center;
    gap: 8px;

    width: max-content;

    color: rgba(247, 245, 240, 0.91);

    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;

    white-space: nowrap;

    transform: translate(50%, -50%);
}

.continue__footer-link {
    color: inherit;
    text-decoration: none;

    transition: color 160ms ease;
}

.continue__footer-link:hover,
.continue__footer-link:focus-visible {
    color: #ffffff;
}

.continue__footer-link:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}

.continue__footer-separator {
    color: rgba(247, 245, 240, 0.72);
}


/* ---------------------------------------------------------
   About — A lifetime in practice — Desktop
   --------------------------------------------------------- */

.about-origin {
    --about-origin-title-left: 9.4%;
    --about-origin-title-top: 19%;
    --about-origin-title-width: 38%;

    --about-origin-founder-left: var(--about-origin-title-left);
    --about-origin-founder-width: var(--about-origin-title-width);

    --about-origin-narrative-left: 3.2%;
    --about-origin-narrative-top: 37.3%;
    --about-origin-narrative-width: 47%;

    --about-origin-credit-right: 1.6%;
    --about-origin-credit-bottom: 2.6%;

    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 720px;
    overflow: hidden;

    background: #111111;
    color: #ffffff;
}

.about-origin__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.about-origin__title {
    position: absolute;
    z-index: 1;

    top: var(--about-origin-title-top);
    left: var(--about-origin-title-left);

    width: var(--about-origin-title-width);
    margin: 0;

    font-size: clamp(35px, 3vw, 50px);
    font-weight: 250;
    line-height: 1;
    letter-spacing: 0.005em;

    white-space: nowrap;
}

.about-origin__founder {
    position: absolute;
    z-index: 1;

    top: calc(
        var(--about-origin-title-top) +
        clamp(41.36px, 3.545vw, 59.09px)
    );
    left: var(--about-origin-founder-left);

    width: var(--about-origin-founder-width);
    margin: 0;

    font-size: clamp(24.82px, 2.127vw, 35.45px);
    font-weight: 250;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.005em;

    white-space: nowrap;
}

.about-origin__narrative {
    --about-origin-spacing: 0.975em;

    position: absolute;
    z-index: 1;

    top: var(--about-origin-narrative-top);
    left: var(--about-origin-narrative-left);

    width: var(--about-origin-narrative-width);

    font-size: clamp(26px, 2.2vw, 37px);
    font-weight: 250;
    line-height: calc(1em + var(--about-origin-spacing));
    letter-spacing: 0.005em;
}

.about-origin__copy {
    margin: 0;

    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.about-origin__dot {
    display: flex;
    align-items: center;
    position: relative;

    width: 100%;
    height: calc(1em + var(--about-origin-spacing));
    margin: 0;
}

.about-origin__dot::before {
    content: "";

    position: absolute;
    left: 37.5%;
    transform: translateX(-50%);

    display: block;

    width: 14px;
    height: 14px;
    flex: 0 0 14px;

    border-radius: 50%;
    background: var(--vayume-accent);
}

.about-origin__credit {
    position: absolute;
    z-index: 1;

    right: var(--about-origin-credit-right);
    bottom: var(--about-origin-credit-bottom);

    margin: 0;

    color: rgba(143, 95, 80, 0.95);

    font-size: clamp(11px, 0.88vw, 14px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   About — Teaching — Desktop
   --------------------------------------------------------- */

.about-teaching {
    --about-teaching-copy-left: 3.2%;
    --about-teaching-copy-top: 8.3333%;
    --about-teaching-copy-width: 44%;

    --about-teaching-paragraph-gap: 3.125vw;
    --about-teaching-dot-gap: 2.20052vw;

    --about-teaching-credit-right: 3.1%;
    --about-teaching-credit-bottom: 4.6%;

    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 720px;
    overflow: hidden;

    background: #111111;
    color: #ffffff;
}

.about-teaching__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.about-teaching__narrative {
    position: absolute;
    z-index: 1;

    top: var(--about-teaching-copy-top);
    left: var(--about-teaching-copy-left);

    width: var(--about-teaching-copy-width);

    font-size: clamp(24.624px, 2.1105vw, 35.181px);
    font-weight: 250;
    line-height: 1.368;
    letter-spacing: 0.005em;
}

.about-teaching__copy {
    margin: 0;

    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.about-teaching__copy--separated {
    margin-top: var(--about-teaching-paragraph-gap);
}

.about-teaching__dot {
    display: flex;
    align-items: center;
    position: relative;

    width: 100%;
    height: 14px;

    margin-top: var(--about-teaching-dot-gap);
    margin-bottom: var(--about-teaching-dot-gap);
}

.about-teaching__dot::before {
    content: "";

    position: absolute;
    left: 40.0568%;
    transform: translateX(-50%);

    display: block;

    width: 14px;
    height: 14px;
    flex: 0 0 14px;

    border-radius: 50%;
    background: var(--vayume-accent);
}

.about-teaching__credit {
    position: absolute;
    z-index: 1;

    right: var(--about-teaching-credit-right);
    bottom: var(--about-teaching-credit-bottom);

    margin: 0;

    color: rgba(247, 245, 240, 0.74);

    font-size: clamp(11px, 0.88vw, 14px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   About — Exhale to Begin — Desktop
   --------------------------------------------------------- */

.about-practice {
    --about-practice-copy-left: 58.85%;
    --about-practice-title-top: 16.67%;
    --about-practice-title-width: 37%;

    --about-practice-narrative-top: 32.4036%;
    --about-practice-narrative-width: 39%;

    --about-practice-dot-gap: 3.0104vw;
    --about-practice-dot-leading-compensation: 0.23em;

    /*
     * Photography credit moved exactly one Keynote inch
     * right and one-half Keynote inch up from the previous
     * validated registration.
     */
    --about-practice-credit-left: 5.95%;
    --about-practice-credit-bottom: 9.0%;

    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 720px;
    overflow: hidden;

    background: #111111;
    color: #ffffff;
}

.about-practice__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.about-practice__title {
    position: absolute;
    z-index: 1;

    top: var(--about-practice-title-top);
    left: var(--about-practice-copy-left);

    width: var(--about-practice-title-width);
    margin: 0;

    font-size: clamp(31.5px, 2.7vw, 45px);
    font-weight: 250;
    line-height: 1;
    letter-spacing: 0.015em;

    white-space: nowrap;
}

.about-practice__narrative {
    position: absolute;
    z-index: 1;

    top: var(--about-practice-narrative-top);
    left: var(--about-practice-copy-left);

    width: var(--about-practice-narrative-width);

    font-size: clamp(24.624px, 2.1105vw, 35.181px);
    font-weight: 250;
    line-height: 1.69;
    letter-spacing: 0.015em;
}

.about-practice__copy {
    margin: 0;

    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.about-practice__dot {
    display: flex;
    align-items: center;

    position: relative;
    width: 100%;
    height: 14px;
    transform: none;
    margin-top: calc(
        var(--about-practice-dot-gap) -
        var(--about-practice-dot-leading-compensation)
    );
    margin-bottom: calc(
        var(--about-practice-dot-gap) -
        var(--about-practice-dot-leading-compensation)
    );
}

.about-practice__dot::before {
    content: "";

    position: absolute;
    left: 28%;
    top: 50%;
    display: block;

    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: var(--vayume-accent);
}

.about-practice__credit {
    position: absolute;
    z-index: 1;

    left: var(--about-practice-credit-left);
    bottom: var(--about-practice-credit-bottom);

    margin: 0;

    color: #3D2B17;

    font-size: clamp(11px, 0.88vw, 14px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;

    white-space: nowrap;
}


/*
 * About-specific integrated page-ending footer.
 *
 * Initial registration and appearance deliberately match
 * the established Home Continue footer. These controls are
 * independent so future About refinement cannot alter Home.
 */

.about-practice__copyright {
    position: absolute;
    z-index: 1;

    left: 7.1%;
    top: 92%;
    transform: translateY(-50%);

    margin: 0;

    color: rgba(247, 245, 240, 0.74);

    font-size: clamp(11px, 0.88vw, 14px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;

    white-space: nowrap;
}

.about-practice__footer-nav {
    position: absolute;
    z-index: 1;

    right: 20%;
    top: 92%;

    display: flex;
    align-items: center;
    gap: 8px;

    width: max-content;

    color: rgba(247, 245, 240, 0.91);

    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;

    white-space: nowrap;

    transform: translate(50%, -50%);
}

.about-practice__footer-link {
    color: inherit;
    text-decoration: none;

    transition: color 160ms ease;
}

.about-practice__footer-link:hover,
.about-practice__footer-link:focus-visible {
    color: #ffffff;
}

.about-practice__footer-link:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}

.about-practice__footer-separator {
    color: rgba(247, 245, 240, 0.72);
}


/* ---------------------------------------------------------
   Temporary narrow/mobile scaffold
   --------------------------------------------------------- */

@media (max-width: 800px) {

    :root {
        --vayume-gutter: 24px;
        --vayume-header-edge: 24px;
        --vayume-hero-copy-edge: 24px;
    }

    .site-header {
        padding-top: 24px;
    }

    .site-header__inner {
        padding-left: var(--vayume-header-edge);
        padding-right: var(--vayume-header-edge);
    }

    .site-brand {
        gap: 7px;
        font-size: 28px;
    }

    .site-brand__mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .site-nav {
        display: none;
    }

    .hero__image {
        object-position: center center;
    }

    .hero__content {
        justify-content: flex-start;

        padding-top: clamp(120px, 17vh, 180px);
        padding-right: var(--vayume-hero-copy-edge);
        padding-bottom: 48px;
        padding-left: var(--vayume-hero-copy-edge);
    }

    .hero__title {
        margin: 0;
        font-size: clamp(2.75rem, 13vw, 4.25rem);
        line-height: 0.98;
    }

    .hero__entry {
        margin-top: 26px;
        font-size: clamp(1rem, 4.5vw, 1.25rem);
    }

    .hero__product {
        margin-top: 42px;
        max-width: 18rem;
        font-size: clamp(0.85rem, 3.7vw, 1rem);
    }
}


/* ---------------------------------------------------------
   General page baseline
   --------------------------------------------------------- */

.content-page {
    padding-block: 80px;
}


/* ---------------------------------------------------------
   Privacy — Document
   ---------------------------------------------------------

   Privacy is a continuous document surface, not a sequence
   of presentation panels.

   This system is deliberately isolated from the established
   Home and About compositions.
   --------------------------------------------------------- */


/*
 * Privacy page background.
 *
 * The shared header remains structurally unchanged.
 * Privacy supplies only the light-page color treatment.
 */

body:has(.privacy-page) {
    background: #F3F1EC;
}

body:has(.privacy-page) .site-header {
    color: var(--vayume-ink);
}


/*
 * Privacy page geometry.
 *
 * The shared header is absolutely positioned. The document
 * begins below the established desktop header geometry with
 * the specified 48px separation.
 */

.privacy-page {
    width: 100%;
    min-height: 100svh;

    padding-top: calc(
        clamp(84px, calc(5.7vh + 24px), 88px) +
        52px +
        24px +
        48px
    );

    background: #F3F1EC;
    color: var(--vayume-ink);
}

.privacy-page__shell {
    width: 100%;
}


/*
 * One continuous rounded document field.
 *
 * No border.
 * No shadow.
 */

.privacy-document {
    width: calc(100% - 120px);
    max-width: 1280px;
    margin-inline: auto;

    padding-top: 64px;
    padding-right: 72px;
    padding-bottom: 72px;
    padding-left: 72px;

    border: none;
    border-radius: 72px;

    background: #E4E1DA;
}


/*
 * The field is intentionally wider than the copy.
 * Unused width to the right is intentional negative space.
 */

.privacy-document__text {
    width: 100%;
    max-width: 820px;
}


/* ---------------------------------------------------------
   Privacy — Typography and vertical rhythm
   --------------------------------------------------------- */

.privacy-section {
    margin: 0;
}

.privacy-section + .privacy-section {
    margin-top: 34px;
}

.privacy-section__heading {
    margin: 0 0 22px;

    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.privacy-section p {
    margin: 0;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.privacy-section > p + p {
    margin-top: 26px;
}


/*
 * Closely related lines/items form a semantic group.
 */

.privacy-group {
    margin: 0;
}

.privacy-group p {
    margin: 0;
}

.privacy-group--close p + p {
    margin-top: 4px;
}


/*
 * Paragraph-to-paragraph spacing within a section.
 */

.privacy-group + p,
.privacy-section > p + .privacy-group {
    margin-top: 26px;
}


/* ---------------------------------------------------------
   Privacy — Opening statement
   ---------------------------------------------------------

   The opening deliberately breathes more than the
   informational sections below it.
   --------------------------------------------------------- */

.privacy-section--opening .privacy-section__heading {
    margin-bottom: 22px;
}

.privacy-section--opening .privacy-group + p {
    margin-top: 32px;
}

.privacy-section--opening .privacy-dot {
    margin-top: 32px;
    margin-bottom: 30px;
}

.privacy-section--opening + .privacy-section {
    margin-top: 35px;
}


/* ---------------------------------------------------------
   Privacy — VayuMe punctuation
   --------------------------------------------------------- */

.privacy-dot {
    width: 14px;
    height: 14px;

    border-radius: 50%;
    background: var(--vayume-accent);
}

.privacy-section--age .privacy-dot {
    margin-top: 30px;
    margin-bottom: 30px;
}


/* ---------------------------------------------------------
   Privacy — Links
   --------------------------------------------------------- */

.privacy-section a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

.privacy-section a:focus-visible {
    outline: 2px solid var(--vayume-ink);
    outline-offset: 4px;
}


/* ---------------------------------------------------------
   Privacy — Integrated page-ending footer
   ---------------------------------------------------------

   Footer content follows the established site language,
   while Privacy owns its presentation independently from
   the photographic Home and About footer systems.
   --------------------------------------------------------- */

.privacy-footer {
    width: calc(100% - 120px);
    max-width: 1280px;

    margin: 64px auto 0;
    padding: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    color: rgba(17, 17, 17, 0.72);
}

.privacy-footer__copyright {
    margin: 0;

    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;

    white-space: nowrap;
}

.privacy-footer__nav {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;

    white-space: nowrap;
}

.privacy-footer__link {
    color: inherit;
    text-decoration: none;

    transition: color 160ms ease;
}

.privacy-footer__link:hover,
.privacy-footer__link:focus-visible {
    color: var(--vayume-ink);
}

.privacy-footer__link:focus-visible {
    outline: 1px solid var(--vayume-ink);
    outline-offset: 4px;
}

.privacy-footer__separator {
    color: rgba(17, 17, 17, 0.48);
}


/* ---------------------------------------------------------
   Privacy — Tablet geometry
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .privacy-document {
        width: calc(100% - 64px);

        padding: 56px;

        border-radius: 56px;
    }

    .privacy-footer {
        width: calc(100% - 64px);
    }
}


/* ---------------------------------------------------------
   Privacy — Mobile geometry
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .privacy-page {
        padding-top: calc(
            24px +
            34px +
            24px
        );
    }

    .privacy-document {
        width: calc(100% - 72px);

        padding-top: 28px;
        padding-right: 28px;
        padding-bottom: 40px;
        padding-left: 28px;

        border-radius: 36px;
    }

    /*
     * WEB v7 — Privacy mobile document rhythm.
     * Desktop values remain unchanged.
     */
    .privacy-section__heading,
    .privacy-section--opening .privacy-section__heading {
        margin-bottom: 16px;
    }

    .privacy-section--opening .privacy-section__heading {
        font-size: 4.0741vw;
        font-weight: 400;
        line-height: 1.12;
    }

    .privacy-section > p + p,
    .privacy-group + p,
    .privacy-section > p + .privacy-group {
        margin-top: 16px;
    }

    .privacy-section--opening .privacy-group + p {
        margin-top: 16px;
    }

    /*
     * WEB v7 — Privacy mobile: Your Choices paragraph rhythm.
     * The three choice statements remain a semantic group while
     * reading as distinct short paragraphs.
     */
    #privacy-choices + .privacy-group--close p + p {
        margin-top: 8px;
    }

    /*
     * WEB v7 — Privacy mobile overall typography scale.
     * Quiet informational scale; desktop remains unchanged.
     */
    .privacy-section__heading {
        font-size: 4.0741vw;
        font-weight: 400;
        line-height: 1.12;
    }

    .privacy-section p {
        font-size: 3.0556vw;
        font-weight: 300;
        line-height: 1.22;
    }

    .privacy-dot {
        width: 12px;
        height: 12px;
    }

    .privacy-footer__copyright {
        font-size: 12px;
    }

    .privacy-footer__nav {
        font-size: 16px;
    }

    .privacy-footer {
        width: calc(100% - 32px);

        margin-top: 64px;
        padding-bottom: 32px;

        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}


/* ---------------------------------------------------------
   Contact — Compact communication surface
   ---------------------------------------------------------

   Contact deliberately reproduces the locked Privacy
   utility-page material language without altering Privacy.

   The field is content-driven:
   no fixed height,
   no minimum height,
   no aspect ratio.
   --------------------------------------------------------- */

body:has(.contact-page) {
    background: #F3F1EC;
}

body:has(.contact-page) .site-header {
    color: var(--vayume-ink);
}


/*
 * Contact page geometry.
 *
 * Registration below the shared absolute header matches
 * the established Privacy page exactly.
 */

.contact-page {
    width: 100%;
    min-height: 100svh;

    padding-top: calc(
        clamp(84px, calc(5.7vh + 24px), 88px) +
        52px +
        24px +
        48px
    );

    background: #F3F1EC;
    color: var(--vayume-ink);
}

.contact-page__shell {
    width: 100%;
}


/*
 * One continuous rounded material field.
 *
 * Same desktop geometry as Privacy.
 * Height comes only from content plus internal padding.
 * No border.
 * No shadow.
 */

.contact-document {
    width: calc(100% - 120px);
    max-width: 1280px;
    margin-inline: auto;

    padding-top: 64px;
    padding-right: 72px;
    padding-bottom: 72px;
    padding-left: 72px;

    border: none;
    border-radius: 72px;

    background: #E4E1DA;
}


/*
 * Preserve the established Privacy text measure.
 * The unused field width remains intentional negative space.
 */

.contact-document__text {
    width: 100%;
    max-width: 820px;
}


/* ---------------------------------------------------------
   Contact — Typography and rhythm
   --------------------------------------------------------- */

.contact-document__title {
    margin: 0 0 22px;

    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.contact-document__intro {
    margin: 0;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}


/*
 * VayuMe punctuation between the introductory thought
 * and the contact-method group.
 */

.contact-dot {
    width: 14px;
    height: 14px;

    margin-top: 32px;
    margin-bottom: 30px;

    border-radius: 50%;
    background: var(--vayume-accent);
}


/*
 * Contact methods form one coherent informational group.
 * Labels remain within the document type system rather than
 * becoming Privacy-style section headings.
 */

.contact-methods {
    margin: 32px 0 0;
}

.contact-method {
    margin: 0;
}

.contact-method + .contact-method {
    margin-top: 26px;
}

.contact-method__label {
    margin: 0;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.contact-method__value {
    margin: 4px 0 0;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}


/* ---------------------------------------------------------
   Contact — Links
   --------------------------------------------------------- */

.contact-method__value a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

.contact-method__value a:focus-visible {
    outline: 2px solid var(--vayume-ink);
    outline-offset: 4px;
}


/* ---------------------------------------------------------
   Contact — Integrated page-ending footer
   ---------------------------------------------------------

   Presentation reproduces the locked Privacy footer.
   --------------------------------------------------------- */

.contact-footer {
    width: calc(100% - 120px);
    max-width: 1280px;

    margin: 64px auto 0;
    padding: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    color: rgba(17, 17, 17, 0.72);
}

.contact-footer__copyright {
    margin: 0;

    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;

    white-space: nowrap;
}

.contact-footer__nav {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;

    white-space: nowrap;
}

.contact-footer__link {
    color: inherit;
    text-decoration: none;

    transition: color 160ms ease;
}

.contact-footer__link:hover,
.contact-footer__link:focus-visible {
    color: var(--vayume-ink);
}

.contact-footer__link:focus-visible {
    outline: 1px solid var(--vayume-ink);
    outline-offset: 4px;
}

.contact-footer__separator {
    color: rgba(17, 17, 17, 0.48);
}


/* ---------------------------------------------------------
   Contact — Tablet geometry
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .contact-document {
        width: calc(100% - 64px);

        padding: 56px;

        border-radius: 56px;
    }

    .contact-footer {
        width: calc(100% - 64px);
    }
}


/* ---------------------------------------------------------
   Contact — Mobile geometry
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .contact-page {
        padding-top: calc(
            24px +
            34px +
            24px
        );
    }

    .contact-document {
        width: calc(100% - 72px);

        padding-top: 28px;
        padding-right: 28px;
        padding-bottom: 40px;
        padding-left: 28px;

        border-radius: 36px;
    }

    /*
     * WEB v7 — Contact mobile typography follows the
     * browser-validated Privacy mobile utility system.
     */
    .contact-document__title {
        margin-bottom: 16px;
        font-size: 17.5px;
        font-weight: 400;
        line-height: 1.12;
    }

    .contact-document__intro,
    .contact-method__label,
    .contact-method__value {
        font-size: 16px;
        font-weight: 300;
        line-height: 1.22;
    }

    .contact-dot {
        width: 1.85vw;
        height: 1.85vw;
    }

    .contact-footer {
        width: calc(100% - 32px);

        margin-top: 64px;
        padding-bottom: 32px;

        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}


/* ---------------------------------------------------------
   WEB v7 — Home mobile endpoint: Hero + header/menu

   Bounded construction increment.
   Existing RP05 breakpoint architecture is preserved.
   These rules refine only the Home endpoint inside the
   existing <= 600px mobile context.
   --------------------------------------------------------- */

.site-menu-toggle,
.site-mobile-menu {
    display: none;
}

@media (max-width: 800px) {

    body.home.site-menu-open {
        overflow: visible;
    }

    body.home .site-header {
        z-index: 30;
        padding-top: 24px;
        padding-bottom: 0;
    }

    body.home .site-header__inner {
        position: relative;
        z-index: 32;
        padding-left: 3.9815vw;
        padding-right: 3.9815vw;
    }

    body.home .site-brand {
        position: relative;
        z-index: 32;
    }

    body.home .site-menu-toggle {
        position: relative;
        z-index: 32;
        display: inline-flex;
        width: 34px;
        height: 34px;
        padding: 5px 2px;
        border: 0;
        background: transparent;
        color: #ffffff;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    body.home .site-menu-toggle__line {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    /*
     * Compact navigation layer. The panel shares the hamburger's
     * upper-right registration and leaves the Hero visible around it.
     */
    body.home .site-mobile-menu {
        position: fixed;
        z-index: 31;
        top: 12px;
        right: 2.8vw;
        display: block;
        width: 154px;
        padding: 60px 20px 22px;
        border-radius: 22px;
        background: rgba(24, 24, 24, 0.75);
        color: #ffffff;
    }

    body.home .site-mobile-menu[hidden] {
        display: none;
    }

    body.home .site-mobile-menu__links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    body.home .site-mobile-menu a {
        display: flex;
        align-items: center;
        min-height: 34px;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.15;
        text-decoration: none;
    }

    @media (prefers-reduced-motion: reduce) {
        body.home .site-menu-toggle__line {
            transition: none;
        }
    }

    /*
     * The mobile Hero is governed by the authored portrait image,
     * not by viewport height. The picture participates in normal
     * document flow, so the Hero ends when the complete image ends.
     */
    body.home .hero {
        min-height: 0;
        overflow: hidden;
    }

    body.home .hero__media {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
    }

    body.home .hero__image {
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        object-fit: initial;
        object-position: initial;
    }

    body.home .hero__content {
        position: absolute;
        z-index: 1;
        inset: 0;
        min-height: 0;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /*
     * Initial registrations translated from the approved
     * 1080-point Keynote mobile design field.
     * These are calibration positions for browser review.
     */
    body.home .hero__title {
        position: absolute;
        top: 24.4444vw;
        left: 10.3704vw;
        margin: 0;
        font-size: 10vw;
        font-weight: 400;
        line-height: 1.03;
        letter-spacing: -0.035em;
    }

    body.home .hero__entry {
        position: absolute;
        top: 90.1852vw;
        left: 9.4444vw;
        margin: 0;
        font-size: 4.0741vw;
        font-weight: 300;
        line-height: 1.12;
        letter-spacing: -0.025em;
    }

    body.home .hero__product {
        position: absolute;
        top: 149.8148vw;
        left: 55.4630vw;
        margin: 0;
        max-width: none;
        font-size: 3.0556vw;
        font-weight: 400;
        line-height: 1.22;
        letter-spacing: -0.02em;
    }

    body.home .hero__product-break::after {
        content: "";
        display: block;
    }
}

/* ---------------------------------------------------------
   WEB v7 — Home desktop Hero optical registration

   Bounded desktop refinement following mobile endpoint lock.
   Mobile endpoint and breakpoint architecture remain unchanged.
   --------------------------------------------------------- */

@media (min-width: 801px) {
    body.home .site-brand,
    body:has(.about-origin) .site-brand,
    body:has(.privacy-page) .site-brand,
    body:has(.contact-page) .site-brand {
        transform: translate(45px, -30px);
    }

    body.home .site-nav,
    body:has(.about-origin) .site-nav,
    body:has(.privacy-page) .site-nav,
    body:has(.contact-page) .site-nav {
        transform: translate(-45px, -32px);
    }

    body.home .hero__title {
        font-size: 81px;
        line-height: 1.03;
        letter-spacing: -0.02em;
        transform: translate(87px, -30px);
    }

    body.home .hero__entry {
        font-weight: 300;
        letter-spacing: 0.02em;
        transform: translate(200px, 60px);
    }

    body.home .hero__product {
        font-weight: 300;
        transform: translate(117px, 120px);
    }
}

/* ---------------------------------------------------------
   WEB v7 — Home mobile Breathe endpoint

   Hero-derived mobile composition. The authored portrait
   image establishes the section height in normal flow; live
   copy and Watch imagery register to the same 1080-point
   mobile design field using width-relative geometry.
   --------------------------------------------------------- */

@media (max-width: 800px) {
    body.home .breathe {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: hidden;
    }

    body.home .breathe > picture {
        position: relative;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body.home .breathe__background {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
        object-fit: initial;
        object-position: initial;
    }

    body.home .breathe__timing {
        position: absolute;
        z-index: 1;
        top: 71.7593vw;
        left: 59.3519vw;
        width: max-content;
        margin: 0;
    }

    body.home .breathe__timing p {
        margin: 0;
        font-size: 3.2695vw;
        font-weight: 400;
        line-height: 1.22;
        letter-spacing: 0;
        white-space: nowrap;
    }

    body.home .breathe__timing p + p {
        margin-top: 2.0371vw;
    }

    body.home .breathe__watches {
        position: absolute;
        z-index: 1;
        top: 91.8519vw;
        left: 66.8519vw;
        right: auto;
        bottom: auto;
        display: flex;
        align-items: flex-start;
        gap: 1.7593vw;
        width: auto;
        pointer-events: none;
        transform: scale(0.75);
        transform-origin: center center;
    }

    body.home .breathe__watch {
        display: block;
        width: 15.5vw;
        max-width: none;
        height: auto;
        flex: 0 0 15.5vw;
    }

    body.home .breathe__watch--full {
        transform: none;
    }

    body.home .breathe__context {
        position: absolute;
        z-index: 1;
        top: 137.3148vw;
        left: 3.9815vw;
        display: flex;
        align-items: center;
        gap: 1.65vw;
        width: max-content;
        margin: 0;
        font-size: 4.1464vw;
        font-weight: 400;
        line-height: 1.22;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    body.home .breathe__context-dot {
        width: auto;
        height: auto;
        flex: 0 0 auto;
        border-radius: 0;
        background: none;
        line-height: inherit;
    }
}

/* ---------------------------------------------------------
   WEB v7 — Home mobile Reflect endpoint

   Hero-derived mobile composition. The authored portrait
   image establishes the section height in normal flow; the
   live reflection statement registers to the same 1080-point
   mobile design field using width-relative geometry.
   --------------------------------------------------------- */

@media (max-width: 800px) {
    body.home .reflect {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: hidden;
    }

    body.home .reflect > picture {
        position: relative;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body.home .reflect__background {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
        object-fit: initial;
        object-position: initial;
    }

    body.home .reflect__statement {
        position: absolute;
        z-index: 1;
        top: 138.9815vw;
        left: 25.9259vw;
        margin: 0;
        font-size: 5.2778vw;
        font-weight: 300;
        line-height: 1.1;
        letter-spacing: 0;
        white-space: nowrap;
    }
}


/* ---------------------------------------------------------
   WEB v7 — Home mobile Continue endpoint — first pass

   The authored portrait image establishes the section height
   in normal flow. The closing statement remains one centered
   two-line object, registered independently over the image.
   Desktop Continue rules remain unchanged.
   --------------------------------------------------------- */

@media (max-width: 800px) {
    body.home .continue {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: hidden;
    }

    body.home .continue > picture {
        position: relative;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body.home .continue__background {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
        object-fit: initial;
        object-position: initial;
    }

    body.home .continue__statement {
        position: absolute;
        z-index: 1;
        top: 144.87vw;
        left: 54.63%;
        width: max-content;
        margin: 0;
        font-size: 5.47vw;
        font-weight: 300;
        line-height: 1.12;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        transform: translateX(-50%);
    }

    body.home .continue__statement-line {
        display: block;
    }

    body.home .continue__statement-line--second {
        margin-top: 3.15vw;
    }

    /* Mobile Home footer — separate black block after Continue image. */
    body.home .continue__footer {
        display: flex;
        position: relative;
        width: 100%;
        min-height: 47.22vw;
        padding: 7.4vw 4vw 6.5vw;
        background: #111111;
        color: #ffffff;
        flex-direction: column;
        align-items: center;
    }

    body.home .continue__early-access {
        position: static;
        order: 1;
        margin: 0;
        padding: 2.3vw 4.6vw;
        font-size: 3.3333vw;
        line-height: 1;
        transform: none;
    }

    body.home .continue__footer-nav {
        position: static;
        order: 2;
        margin-top: 6.7vw;
        gap: 1.85vw;
        width: max-content;
        font-size: 4.1667vw;
        line-height: 1;
        transform: none;
    }

    body.home .continue__copyright {
        position: static;
        order: 3;
        margin: 6.7vw 0 0;
        font-size: 3.0556vw;
        line-height: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------
   WEB v7 — About mobile endpoint: Card 1

   About reuses the validated Home mobile header geometry.
   Unlike Home, the header sits on its own black field above
   the authored square Warrior image. Card 1 narrative then
   continues in normal document flow on black.
   --------------------------------------------------------- */

@media (max-width: 800px) {

    body:has(.about-origin) {
        background: #111111;
    }

    body:has(.about-origin).site-menu-open {
        overflow: visible;
    }

    body:has(.about-origin) .site-header {
        z-index: 30;
        padding-top: 24px;
        padding-bottom: 0;
        background: #000000;
        color: #ffffff;
    }

    body:has(.about-origin) .site-header__inner {
        position: relative;
        z-index: 32;
        padding-left: 3.9815vw;
        padding-right: 3.9815vw;
    }

    body:has(.about-origin) .site-brand {
        position: relative;
        z-index: 32;
    }

    body:has(.about-origin) .site-menu-toggle {
        position: relative;
        z-index: 32;
        display: inline-flex;
        width: 34px;
        height: 34px;
        padding: 5px 2px;
        border: 0;
        background: transparent;
        color: #ffffff;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    body:has(.about-origin) .site-menu-toggle__line {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    body:has(.about-origin) .site-mobile-menu {
        position: fixed;
        z-index: 31;
        top: 12px;
        right: 2.8vw;
        display: block;
        width: 154px;
        padding: 60px 20px 22px;
        border-radius: 22px;
        background: rgba(24, 24, 24, 0.75);
        color: #ffffff;
    }

    body:has(.about-origin) .site-mobile-menu[hidden] {
        display: none;
    }

    body:has(.about-origin) .site-mobile-menu__links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    body:has(.about-origin) .site-mobile-menu a {
        display: flex;
        align-items: center;
        min-height: 34px;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.15;
        text-decoration: none;
    }

    body:has(.about-origin) .about-origin {
        display: flex;
        width: 100%;
        min-height: 0;
        aspect-ratio: auto;
        padding-top: 82px;
        overflow: visible;
        background: #000000;
        flex-direction: column;
    }

    body:has(.about-origin) .about-origin__media {
        position: relative;
        display: block;
        order: 1;
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    body:has(.about-origin) .about-origin__background {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        object-fit: contain;
    }

    body:has(.about-origin) .about-origin__title {
        z-index: 2;
        top: calc(82px + 69.9vw);
        left: 19.03%;
        width: 61.94%;
        font-size: 5.2778vw;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0;
    }

    body:has(.about-origin) .about-origin__founder {
        z-index: 2;
        top: calc(82px + 81.2vw);
        left: 19.03%;
        width: 61.94%;
        font-size: 4.4444vw;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0;
    }

    body:has(.about-origin) .about-origin__narrative {
        position: relative;
        z-index: 1;
        order: 2;
        top: auto;
        left: auto;
        width: 100%;
        padding: 11.11vw 9.91vw 10.74vw;
        background: #000000;
        font-size: 3.9815vw;
        font-weight: 300;
        line-height: 1.85;
        letter-spacing: 0;
    }

    body:has(.about-origin) .about-origin__copy {
        width: 100%;
        margin-inline: 0;
    }

    body:has(.about-origin) .about-origin__dot {
        position: relative;
        display: block;
        width: 100%;
        height: 1.85vw;
        margin: 5.0vw 0;
    }

    body:has(.about-origin) .about-origin__dot::before {
        position: absolute;
        left: 43.04%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1.85vw;
        height: 1.85vw;
        flex-basis: 1.85vw;
    }

    @media (prefers-reduced-motion: reduce) {
        body:has(.about-origin) .site-menu-toggle__line {
            transition: none;
        }
    }
}

/* ---------------------------------------------------------
   WEB v7 — About mobile endpoint: Teaching

   Founder-derived mobile composition. The authored Teaching
   image establishes its own natural-height field; one black
   narrative field follows in normal document flow. Copy remains
   one narrative object. The red dot retains independent horizontal
   registration within that field. Desktop Teaching is unchanged.
   --------------------------------------------------------- */

@media (max-width: 800px) {

    body:has(.about-origin) .about-teaching {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: visible;
        background: #000000;
        flex-direction: column;
    }

    body:has(.about-origin) .about-teaching__media {
        position: relative;
        display: block;
        order: 1;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body:has(.about-origin) .about-teaching__background {
        position: static;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
        object-fit: initial;
        object-position: initial;
    }

    body:has(.about-origin) .about-teaching__narrative {
        position: relative;
        z-index: 1;
        order: 2;
        top: auto;
        left: auto;
        width: 100%;
        padding: 11.11vw 9.91vw 11.11vw;
        background: #000000;
        font-size: 3.9815vw;
        font-weight: 300;
        line-height: 1.85;
        letter-spacing: 0;
    }

    body:has(.about-origin) .about-teaching__copy {
        width: 100%;
        margin-inline: 0;
    }

    body:has(.about-origin) .about-teaching__copy--separated {
        margin-top: 6.5vw;
    }

    body:has(.about-origin) .about-teaching__dot {
        position: relative;
        display: block;
        width: 100%;
        height: 1.85vw;
        margin: 6.5vw 0;
    }

    body:has(.about-origin) .about-teaching__dot::before {
        position: absolute;
        left: 36.08%;
        top: 50%;
        width: 1.85vw;
        height: 1.85vw;
        flex-basis: 1.85vw;
        transform: translate(-50%, -50%);
    }
}

/* ---------------------------------------------------------
   WEB v7 — About mobile endpoint: Havasupai
   Final image/copy content block. Footer is a later bounded pass.
   --------------------------------------------------------- */

@media (max-width: 800px) {

    body:has(.about-origin) .about-practice {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: visible;
        background: #000000;
        flex-direction: column;
    }

    body:has(.about-origin) .about-practice__media {
        position: relative;
        display: block;
        order: 1;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body:has(.about-origin) .about-practice__background {
        position: static;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
        object-fit: initial;
        object-position: initial;
    }

    body:has(.about-origin) .about-practice__title {
        position: relative;
        z-index: 1;
        order: 2;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
        padding: 11.76vw 0 0;
        background: #000000;
        font-size: 5.2778vw;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
    }

    body:has(.about-origin) .about-practice__narrative {
        position: relative;
        z-index: 1;
        order: 3;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
        padding: 13vw 9.91vw 13.89vw;
        background: #000000;
        font-size: 3.9815vw;
        font-weight: 300;
        line-height: 1.85;
        letter-spacing: 0;
    }

    body:has(.about-origin) .about-practice__copy {
        width: 100%;
        margin-inline: 0;
    }

    body:has(.about-origin) .about-practice__dot {
        position: relative;
        display: block;
        width: 100%;
        height: 1.85vw;
        margin: 5vw 0;
    }

    body:has(.about-origin) .about-practice__dot::before {
        position: absolute;
        left: 29%;
        top: 50%;
        width: 1.85vw;
        height: 1.85vw;
        flex-basis: 1.85vw;
        transform: translate(-50%, -50%);
    }

    body:has(.about-origin) .about-practice__credit,
    body:has(.about-origin) .about-practice__copyright,
    body:has(.about-origin) .about-practice__footer-nav {
        display: none;
    }
}

/* ---------------------------------------------------------
   WEB v7 — About mobile footer
   Direct adaptation of the validated Home mobile footer.
   --------------------------------------------------------- */

.about-mobile-footer {
    display: none;
}

@media (max-width: 800px) {

    body:has(.about-origin) .about-mobile-footer {
        display: flex;
        position: relative;
        width: 100%;
        min-height: 47.22vw;
        padding: 7.4vw 4vw 6.5vw;
        background: #111111;
        color: #ffffff;
        flex-direction: column;
        align-items: center;
    }

    body:has(.about-origin) .about-mobile-footer__early-access {
        display: inline-flex;
        position: static;
        order: 1;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 2.3vw 4.6vw;
        border: 1px solid rgba(247, 245, 240, 0.72);
        border-radius: 999px;
        background: rgba(247, 245, 240, 0.25);
        color: var(--vayume-bg);
        font-size: 3.3333vw;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.01em;
        text-decoration: none;
        transform: none;
        transition:
            background-color 160ms ease,
            border-color 160ms ease;
    }

    body:has(.about-origin) .about-mobile-footer__early-access:hover,
    body:has(.about-origin) .about-mobile-footer__early-access:focus-visible {
        background: rgba(247, 245, 240, 0.38);
        border-color: rgba(247, 245, 240, 0.90);
    }

    body:has(.about-origin) .about-mobile-footer__early-access:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 4px;
    }

    body:has(.about-origin) .about-mobile-footer__nav {
        display: flex;
        position: static;
        order: 2;
        align-items: center;
        gap: 1.85vw;
        width: max-content;
        margin-top: 6.7vw;
        color: rgba(247, 245, 240, 0.91);
        font-size: 4.1667vw;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.02em;
        white-space: nowrap;
        transform: none;
    }

    body:has(.about-origin) .about-mobile-footer__link {
        color: inherit;
        text-decoration: none;
        transition: color 160ms ease;
    }

    body:has(.about-origin) .about-mobile-footer__link:hover,
    body:has(.about-origin) .about-mobile-footer__link:focus-visible {
        color: #ffffff;
    }

    body:has(.about-origin) .about-mobile-footer__link:focus-visible {
        outline: 1px solid rgba(255, 255, 255, 0.9);
        outline-offset: 4px;
    }

    body:has(.about-origin) .about-mobile-footer__separator {
        color: rgba(247, 245, 240, 0.72);
    }

    body:has(.about-origin) .about-mobile-footer__copyright {
        position: static;
        order: 3;
        margin: 6.7vw 0 0;
        color: rgba(247, 245, 240, 0.74);
        font-size: 3.0556vw;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.01em;
        white-space: nowrap;
        transform: none;
    }
}

/* WEB v7 — Privacy mobile red-dot standard */
@media (max-width: 800px) {
    .privacy-dot {
        width: 1.85vw;
        height: 1.85vw;
    }
}

/* WEB v7 — Privacy mobile typography pass */
@media (max-width: 800px) {
    .privacy-section p {
        font-size: 16px;
    }
}



/* ---------------------------------------------------------
   WEB v8 — Privacy / Contact mobile header navigation

   Reuses the validated shared mobile navigation behavior
   while preserving the established light utility-page header
   registration and page geometry.
   --------------------------------------------------------- */

@media (max-width: 800px) {

    body:has(.privacy-page).site-menu-open,
    body:has(.contact-page).site-menu-open {
        overflow: visible;
    }

    body:has(.privacy-page) .site-header,
    body:has(.contact-page) .site-header {
        z-index: 30;
    }

    body:has(.privacy-page) .site-header__inner,
    body:has(.contact-page) .site-header__inner {
        position: relative;
        z-index: 32;
    }

    body:has(.privacy-page) .site-brand,
    body:has(.contact-page) .site-brand {
        position: relative;
        z-index: 32;
    }

    body:has(.privacy-page) .site-menu-toggle,
    body:has(.contact-page) .site-menu-toggle {
        position: relative;
        z-index: 32;
        display: inline-flex;
        width: 34px;
        height: 34px;
        padding: 5px 2px;
        border: 0;
        background: transparent;
        color: var(--vayume-ink);
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    body:has(.privacy-page) .site-menu-toggle__line,
    body:has(.contact-page) .site-menu-toggle__line {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    body:has(.privacy-page).site-menu-open .site-menu-toggle,
    body:has(.contact-page).site-menu-open .site-menu-toggle {
        color: #ffffff;
    }

    body:has(.privacy-page) .site-mobile-menu,
    body:has(.contact-page) .site-mobile-menu {
        position: fixed;
        z-index: 31;
        top: 12px;
        right: 2.8vw;
        display: block;
        width: 154px;
        padding: 60px 20px 22px;
        border-radius: 22px;
        background: rgba(24, 24, 24, 0.75);
        color: #ffffff;
    }

    body:has(.privacy-page) .site-mobile-menu[hidden],
    body:has(.contact-page) .site-mobile-menu[hidden] {
        display: none;
    }

    body:has(.privacy-page) .site-mobile-menu__links,
    body:has(.contact-page) .site-mobile-menu__links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    body:has(.privacy-page) .site-mobile-menu a,
    body:has(.contact-page) .site-mobile-menu a {
        display: flex;
        align-items: center;
        min-height: 34px;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.15;
        text-decoration: none;
    }

    @media (prefers-reduced-motion: reduce) {
        body:has(.privacy-page) .site-menu-toggle__line,
        body:has(.contact-page) .site-menu-toggle__line {
            transition: none;
        }
    }
}


/* ---------------------------------------------------------
   WEB v8 — Privacy / Contact mobile light footer

   Direct structural adaptation of the validated Home/About
   mobile footer. Utility pages retain their established cream
   page field and dark-ink material language. Desktop remains
   unchanged; the Early Access control is mobile-only.
   --------------------------------------------------------- */

.privacy-footer__early-access,
.contact-footer__early-access {
    display: none;
}

@media (max-width: 800px) {

    .privacy-footer,
    .contact-footer {
        width: 100%;
        min-height: 47.22vw;
        margin-top: 16px;
        padding: 7.4vw 4vw 6.5vw;
        background: var(--vayume-bg);
        color: var(--vayume-ink);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
    }

    .privacy-footer__early-access,
    .contact-footer__early-access {
        display: inline-flex;
        position: static;
        order: 1;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 2.3vw 4.6vw;
        border: 1px solid rgba(17, 17, 17, 0.72);
        border-radius: 999px;
        background: rgba(17, 17, 17, 0.04);
        color: var(--vayume-ink);
        font-size: 3.3333vw;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.01em;
        text-decoration: none;
        transform: none;
        transition:
            background-color 160ms ease,
            border-color 160ms ease;
    }

    .privacy-footer__early-access:hover,
    .privacy-footer__early-access:focus-visible,
    .contact-footer__early-access:hover,
    .contact-footer__early-access:focus-visible {
        background: rgba(17, 17, 17, 0.08);
        border-color: rgba(17, 17, 17, 0.90);
    }

    .privacy-footer__early-access:focus-visible,
    .contact-footer__early-access:focus-visible {
        outline: 2px solid var(--vayume-ink);
        outline-offset: 4px;
    }

    .privacy-footer__nav,
    .contact-footer__nav {
        order: 2;
        align-items: center;
        width: max-content;
        margin-top: 6.7vw;
        gap: 1.85vw;
        color: rgba(17, 17, 17, 0.91);
        font-size: 4.1667vw;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .privacy-footer__copyright,
    .contact-footer__copyright {
        order: 3;
        margin: 6.7vw 0 0;
        color: rgba(17, 17, 17, 0.74);
        font-size: 3.0556vw;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    .privacy-footer__separator,
    .contact-footer__separator {
        color: rgba(17, 17, 17, 0.72);
    }
}


/* ---------------------------------------------------------
   WEB v8 — Desktop Early Access CTA: About + Privacy

   Home .continue__early-access is the canonical visual reference.
   About adapts that established CTA within its dark photographic
   ending. Privacy uses the same component scale with the established
   light-page material treatment. Contact intentionally has no
   desktop Early Access CTA. Mobile remains owned by existing rules.
   --------------------------------------------------------- */

.about-practice__early-access {
    position: absolute;
    z-index: 1;

    right: 13.3%;
    top: 82%;

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

    padding: 18px 28px;

    border: 1px solid rgba(247, 245, 240, 0.72);
    border-radius: 999px;

    background: rgba(247, 245, 240, 0.25);
    color: var(--vayume-bg);

    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;

    transform: translateY(-50%);

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.about-practice__early-access:hover,
.about-practice__early-access:focus-visible {
    background: rgba(247, 245, 240, 0.38);
    border-color: rgba(247, 245, 240, 0.90);
}

.about-practice__early-access:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.privacy-desktop-early-access {
    display: flex;
    width: max-content;
    margin: 64px 12.5% 0 auto;
    padding: 18px 28px;

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

    border: 1px solid rgba(17, 17, 17, 0.72);
    border-radius: 999px;

    background: rgba(17, 17, 17, 0.04);
    color: var(--vayume-ink);

    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.privacy-desktop-early-access:hover,
.privacy-desktop-early-access:focus-visible {
    background: rgba(17, 17, 17, 0.08);
    border-color: rgba(17, 17, 17, 0.90);
}

.privacy-desktop-early-access:focus-visible {
    outline: 2px solid var(--vayume-ink);
    outline-offset: 4px;
}

.privacy-desktop-early-access + .privacy-footer {
    margin-top: 40px;
}

@media (max-width: 800px) {
    .about-practice__early-access,
    .privacy-desktop-early-access {
        display: none;
    }
}