/* =========================================================================
   ÉLAN — launch landing page
   -------------------------------------------------------------------------
   1.  Tokens
   2.  Reset and base
   3.  Utilities
   4.  Chrome: masthead, instrument scale, gauge
   5.  Stage shell
   6.  01 — Hero
   7.  02 — Panel
   8.  03 — Proof (the light section)
   9.  04 — Registration
   10. Form
   11. Footer
   12. Privacy policy
   13. Motion
   14. Responsive
   ========================================================================= */


/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
    /* Dark surfaces and ink */
    --graphite:      #0E1113;
    --graphite-lift: #14181B;
    --bone:          #EDEAE4;
    --alloy:         #97A1A7;
    --oxide-bright:  #C1C8CB;

    /* Champagne accent — borders, labels, the call to action */
    --gold:        #C7A86B;
    --gold-bright: #E2C994;
    --gold-line:   rgba(199, 168, 107, 0.42);
    --gold-faint:  rgba(199, 168, 107, 0.2);

    /* Light surfaces, section 03 */
    --ink:      #17140F;
    --ink-soft: #5C544A;
    --ink-line: rgba(23, 20, 15, 0.16);

    --hairline:      rgba(237, 234, 228, 0.16);
    --hairline-soft: rgba(237, 234, 228, 0.07);

    /* Type */
    --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
    --font-ui:      "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-data:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --t-display: clamp(2.6rem, 7vw, 6rem);
    --t-title:   clamp(1.95rem, min(5vw, 7.5vh), 4.2rem);
    --t-lead:    clamp(1rem, 1.4vw, 1.2rem);
    --t-body:    clamp(0.95rem, 1.1vw, 1.05rem);
    --t-micro:   0.6875rem;

    /* Space */
    --gutter: clamp(1.5rem, 5vw, 5.5rem);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* =========================================================================
   2. RESET AND BASE
   ========================================================================= */

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

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

body,
h1, h2, h3, p, ol, ul, dl, dd, figure {
    margin: 0;
    padding: 0;
}

ol, ul { list-style: none; }

.page {
    background: var(--graphite);
    color: var(--bone);
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: 100%;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button, input, textarea {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--gold);
    color: var(--graphite);
}

:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 4px;
}


/* =========================================================================
   3. UTILITIES
   ========================================================================= */

.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: 100;
    padding: 0.85rem 1.6rem;
    background: var(--bone);
    color: var(--graphite);
    font-family: var(--font-data);
    font-size: var(--t-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: transform 0.25s var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

/* Shown only when JavaScript can dismiss it after the page is ready. */
.loader { display: none; }

.js .loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    background: var(--graphite);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
}

.js .loader.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.loader__mark {
    width: clamp(14rem, 32vw, 22rem);
    animation: loader-pulse 1.6s ease-in-out infinite;
}

.loader__mark img {
    width: 100%;
    height: auto;
    filter: grayscale(1) invert(1) brightness(2);
}

.loader__line {
    position: relative;
    width: clamp(5rem, 12vw, 7rem);
    height: 1px;
    overflow: hidden;
    background: var(--hairline);
}

.loader__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold);
    animation: loader-sweep 1.3s var(--ease) infinite;
}

@keyframes loader-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.98); }
    50%      { opacity: 1; transform: scale(1); }
}

@keyframes loader-sweep {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

body.has-privacy-consent { overflow: hidden; }

/* Displayed after the loader, until the visitor acknowledges both documents. */
.privacy-consent { display: none; }

.js .privacy-consent {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(14, 17, 19, 0.84);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

.js .privacy-consent.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.privacy-consent__dialog {
    width: min(100%, 34rem);
    padding: clamp(1.75rem, 5vw, 3rem);
    border: 1px solid var(--gold-line);
    background: var(--graphite-lift);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.38);
}

.privacy-consent__eyebrow {
    font-family: var(--font-data);
    font-size: var(--t-micro);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.privacy-consent__title {
    margin-top: 0.75rem;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    font-weight: 400;
    line-height: 0.98;
}

.privacy-consent__copy {
    margin-top: 1.25rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #DAD5CC;
}

.privacy-consent__copy a {
    border-bottom: 1px solid var(--gold);
    color: var(--bone);
}

.privacy-consent__check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.75rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--bone);
    cursor: pointer;
}

.privacy-consent__check input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.2rem 0 0;
    accent-color: var(--gold);
    flex: 0 0 auto;
}

.privacy-consent__button {
    width: 100%;
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--graphite);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.privacy-consent__button:hover,
.privacy-consent__button:focus-visible {
    border-color: var(--gold-bright);
    background: var(--gold-bright);
}

.privacy-consent__button:disabled {
    border-color: var(--hairline);
    background: transparent;
    color: var(--alloy);
    cursor: not-allowed;
}

/* Honeypot — off-screen but not display:none, so bots still find it */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* =========================================================================
   4. CHROME
   ========================================================================= */

/* --- Masthead ---------------------------------------------------------- */

.masthead {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(0.9rem, 2vw, 1.5rem) var(--gutter);
    background: linear-gradient(to bottom, rgba(14, 17, 19, 0.86), rgba(14, 17, 19, 0));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition:
        opacity 0.5s var(--ease),
        transform 0.5s var(--ease),
        visibility 0.5s,
        background-color 0.6s var(--ease),
        color 0.6s var(--ease);
}

.masthead.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Over the light section the whole bar flips to ink */
.masthead.is-inverted {
    background: linear-gradient(to bottom, rgba(246, 239, 231, 0.92), rgba(246, 239, 231, 0));
    color: var(--ink);
}

/* --- Brand lockup -------------------------------------------------------- */

.brand {
    display: block;
    width: clamp(7rem, 10vw, 9rem);
    line-height: 0;
}

.masthead.is-inverted .masthead__date { color: var(--ink); }

.brand__mark {
    width: 100%;
    height: auto;
    filter: grayscale(1) invert(1) brightness(2);
    transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
}

.masthead.is-inverted .brand__mark { filter: grayscale(1) brightness(0.35); }

.masthead__date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-data);
    font-size: var(--t-micro);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bone);
}

.masthead__cta {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--gold);
    font-family: var(--font-ui);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.masthead__cta:hover,
.masthead__cta:focus-visible {
    color: var(--gold-bright);
    border-bottom-color: var(--gold-bright);
}

.masthead.is-inverted .masthead__cta {
    color: var(--ink);
    border-bottom-color: rgba(150, 118, 52, 0.8);
}

/* --- Gauge (small-screen progress bar) --------------------------------- */

.gauge {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: 2px;
    background: rgba(126, 122, 116, 0.22);
}

.gauge__fill {
    display: block;
    height: 100%;
    background: var(--gold);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    transition: background-color 0.5s var(--ease);
}

.gauge.is-redline .gauge__fill { background: var(--gold-bright); }


/* =========================================================================
   5. STAGE SHELL
   ========================================================================= */

.stage {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

/* The photographic sections layer over one another, like a curtain. The light
   section and the form stay in normal flow: both can grow past the viewport on
   a short screen, and a sticky element taller than the viewport strands its own
   lower half out of reach. */
@media (prefers-reduced-motion: no-preference) {
    .stage--hero,
    .stage--panel {
        position: sticky;
        top: 0;
    }
}

.stage__media {
    position: absolute;
    inset: -8% 0;   /* slack top and bottom, so the parallax never shows an edge */
    z-index: 0;
    will-change: transform;
}

.stage__picture,
.stage__image {
    display: block;
    width: 100%;
    height: 100%;
}

.stage__image {
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
}

.stage__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.stage--center .stage__scrim {
    background:
        radial-gradient(115% 85% at 50% 58%, rgba(14, 17, 19, 0.08), rgba(14, 17, 19, 0.72) 78%),
        linear-gradient(to bottom, rgba(14, 17, 19, 0.7), rgba(14, 17, 19, 0) 30%, rgba(14, 17, 19, 0) 60%, rgba(14, 17, 19, 0.9));
}

.stage--left .stage__scrim {
    background: linear-gradient(101deg,
        rgba(14, 17, 19, 0.94) 0%,
        rgba(14, 17, 19, 0.78) 34%,
        rgba(14, 17, 19, 0.1) 68%,
        rgba(14, 17, 19, 0.48) 100%);
}

.stage--right .stage__scrim {
    background: linear-gradient(259deg,
        rgba(14, 17, 19, 0.94) 0%,
        rgba(14, 17, 19, 0.78) 34%,
        rgba(14, 17, 19, 0.1) 68%,
        rgba(14, 17, 19, 0.48) 100%);
}

.stage__inner {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: clamp(5rem, 11vh, 8rem) var(--gutter);
}

.stage--center .stage__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stage--left .stage__inner  { justify-content: flex-start; }
.stage--right .stage__inner { justify-content: flex-end; }


/* =========================================================================
   6. 01 — HERO
   ========================================================================= */

/* The copy occupies the clear wall above the car and the boy. */
.stage--hero .stage__inner {
    align-self: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(4.5rem, 12vh, 8.5rem);
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__eyebrow {
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
    font-family: var(--font-ui);
    /* The floor holds the line on one row at 360px wide; the ceiling is what
       carries the line on a laptop and up. */
    font-size: clamp(0.72rem, 1.25vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-align: center;
    text-transform: uppercase;
    text-indent: 0.42em;
    color: var(--bone);
}

.hero__wordmark {
    width: clamp(14rem, 30vw, 26rem);
    line-height: 0;
}

.hero__wordmark img { width: 100%; height: auto; }

.hero__body {
    margin-top: clamp(1.1rem, 2.4vh, 1.9rem);
    font-size: clamp(1rem, 1.55vw, 1.4rem);
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--bone);
}

.hero__date {
    margin-top: clamp(0.9rem, 2vh, 1.5rem);
    font-family: var(--font-ui);
    font-size: clamp(0.7rem, 1vw, 0.875rem);
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-indent: 0.4em;
    color: var(--gold-bright);
}

/* --- Scroll cue -------------------------------------------------------- */

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(1.8rem, 4vh, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transform: translateX(-50%);
}

.scroll-cue__label {
    font-family: var(--font-data);
    font-size: 0.625rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--bone);
    text-indent: 0.34em;
    opacity: 0.75;
    transition: opacity 0.3s var(--ease);
}

.scroll-cue:hover .scroll-cue__label { opacity: 1; }

.scroll-cue__line {
    position: relative;
    width: 1px;
    height: 30px;
    overflow: hidden;
    background: var(--hairline);
}

.scroll-cue__line::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 40%;
    background: var(--gold);
    animation: cue 2.4s var(--ease) infinite;
}


/* =========================================================================
   7. 02 — PANEL
   ========================================================================= */

.panel { max-width: min(36rem, 100%); }

.panel__title {
    font-family: var(--font-display);
    font-size: var(--t-display);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.012em;
    white-space: pre-line;
    color: #F6F1E8;
}

.panel__rule {
    display: block;
    width: 3.5rem;
    height: 1px;
    margin: clamp(1.5rem, 3vw, 2.4rem) 0;
    background: var(--bone);
    opacity: 0.7;
}

/* pre-line so the newlines in the config land where the mockup breaks the
   sentence. Turned off on phones, where a fixed break leaves orphans. */
.panel__body {
    max-width: 34ch;
    font-size: var(--t-lead);
    line-height: 1.75;
    white-space: pre-line;
    color: #E6E1D8;
}

.panel__kicker {
    position: relative;
    margin-top: clamp(2rem, 4vw, 3.2rem);
    padding-top: clamp(1.4rem, 3vw, 2.2rem);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--bone);
}

.panel__kicker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background: var(--bone);
    opacity: 0.55;
}


/* =========================================================================
   8. 03 — PROOF (the light section)
   ========================================================================= */

/* The photograph's studio backdrop *is* this section's background, so the
   image runs full bleed like sections 01 and 02 and there is no join to
   disguise. The flat colour underneath only shows while the JPEG loads. */
.stage--proof {
    background: #EFE7DD;
    color: var(--ink);
}

/* The backdrop is already bright enough for ink, so this is a light lift for
   legibility rather than a scrim, and it clears entirely where the line-up
   sits. The two shapes put the cars in different places, so each gets its own
   stops. Deepen the end stops if a future photograph is busier. */

/* Landscape: the line-up is pinned at 48%-76%. */
@media (min-aspect-ratio: 13/10) {
    .stage--proof .stage__scrim {
        background: linear-gradient(to bottom,
            rgba(246, 239, 231, 0.55) 0%,
            rgba(246, 239, 231, 0.32) 27%,
            rgba(246, 239, 231, 0) 45%,
            rgba(246, 239, 231, 0) 79%,
            rgba(246, 239, 231, 0.32) 88%,
            rgba(246, 239, 231, 0.5) 100%);
    }
}

/* Narrower shapes: the crop centres the line-up instead. */
@media (max-aspect-ratio: 13/10) {
    .stage--proof .stage__scrim {
        background: linear-gradient(to bottom,
            rgba(246, 239, 231, 0.62) 0%,
            rgba(246, 239, 231, 0.36) 22%,
            rgba(246, 239, 231, 0) 34%,
            rgba(246, 239, 231, 0) 66%,
            rgba(246, 239, 231, 0.36) 78%,
            rgba(246, 239, 231, 0.58) 100%);
    }
}

.stage--proof .stage__inner {
    align-self: stretch;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(3.5rem, 9vh, 6rem);
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* Keep the full landscape composition visible: the cars stay below the copy. */
@media (min-aspect-ratio: 13/10) {
    .stage--proof .stage__media--static { inset: 0; }

    .stage--proof .stage__picture {
        position: relative;
        overflow: hidden;
        background: #E9DACE;
    }

    .stage--proof .stage__picture::before,
    .stage--proof .stage__picture::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .stage--proof .stage__picture::before {
        background: linear-gradient(to bottom, #E6D0C3 0%, #F2E8DF 48%, #F2E8DF 100%);
    }

    .stage--proof .stage__picture::after {
        background: linear-gradient(to bottom, #CFB9AB 0%, #E2D1C7 50%, #E3D6CD 100%);
        clip-path: inset(0 0 0 50%);
    }

    .stage--proof .stage__image {
        position: relative;
        z-index: 1;
        object-fit: contain;
    }

    /* The roofline starts at 48% of the frame and the photograph is height
       limited here, so 48% of the section is 48% of the picture. Hang the
       badge off that line rather than letting the head stack down into it:
       stacked, its bottom edge lands within a few pixels of the roof on a
       900px tall window and below it on anything shorter. */
    .stage--proof .proof__badge {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(52% + clamp(0.55rem, 1.6vh, 1.25rem));
        margin: 0 auto;
    }
}

/* Head at the top, closing lines at the foot, cars in the gap between. */
.proof {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vh, 3rem);
    width: 100%;
    text-align: center;
}

.proof__head,
.proof__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.proof__title {
    font-family: var(--font-display);
    font-size: var(--t-title);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.008em;
    text-wrap: balance;
    color: var(--ink);
}

.proof__eyebrow {
    margin-top: clamp(0.5rem, 1.25vh, 0.95rem);
    font-family: var(--font-ui);
    font-size: clamp(0.75rem, 1.05vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-indent: 0.28em;
    color: var(--ink);
}

.proof__assurances {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem 0.9rem;
    margin-top: clamp(0.35rem, 1.05vh, 0.75rem);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
    color: var(--ink);
}

.proof__dot {
    color: var(--ink-soft);
    opacity: 0.7;
}

.proof__ruled {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.4vw, 2rem);
    width: min(100%, 40rem);
    margin-top: clamp(0.5rem, 1.25vh, 0.95rem);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
    color: var(--ink);
}

.proof__ruled::before,
.proof__ruled::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
}

.proof__ruled::after { background: linear-gradient(to left, transparent, var(--gold)); }

/* Width also tracks viewport height so the badge gives ground on short
   landscape windows, where the head block has least room above the cars. */
.proof__badge {
    width: clamp(5rem, min(7.5vw, 11vh), 6.5rem);
    height: auto;
    margin-top: clamp(0.7rem, 1.6vh, 1.25rem);
}

.proof__closing {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    font-weight: 400;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--ink);
}

.proof__closing em {
    display: block;
    font-style: italic;
}

.proof__note {
    max-width: 42ch;
    margin-top: clamp(0.7rem, 1.6vh, 1.1rem);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    line-height: 1.65;
    color: var(--ink-soft);
}


/* =========================================================================
   9. 04 — REGISTRATION
   ========================================================================= */

.register {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(5.5rem, 12vh, 8.5rem) var(--gutter) clamp(1.5rem, 3vh, 2.5rem);
    background: var(--graphite);
    overflow: hidden;
}

/* --- The photograph down the left-hand side ---------------------------- */

.register__media {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    width: min(46vw, 38rem);
}

.register__media picture,
.register__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.register__media img {
    object-fit: cover;
    object-position: 46% 50%;
}

.register__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            rgba(14, 17, 19, 0.42) 0%,
            rgba(14, 17, 19, 0.28) 34%,
            rgba(14, 17, 19, 0.88) 76%,
            var(--graphite) 100%),
        linear-gradient(to bottom,
            rgba(14, 17, 19, 0.72) 0%,
            rgba(14, 17, 19, 0) 22%,
            rgba(14, 17, 19, 0) 72%,
            rgba(14, 17, 19, 0.78) 100%);
}

.register__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
    align-content: center;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-left: clamp(0rem, 27vw, 24rem);   /* clear the photograph */
    flex: 1 1 auto;
}

/* Smaller than the section titles: it sits in a column, not across the page. */
.register__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.01em;
    white-space: pre-line;
    color: #F6F1E8;
}

.register__rule {
    display: block;
    width: 3.5rem;
    height: 1px;
    margin: clamp(1.4rem, 2.8vw, 2.2rem) 0;
    background: var(--gold);
}

.register__lead {
    max-width: 30ch;
    font-size: var(--t-lead);
    line-height: 1.7;
    color: #E6E1D8;
}

/* --- WhatsApp ---------------------------------------------------------- */

.contact {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.9rem, 1.6vw, 1.3rem);
    margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
}

.contact__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    color: var(--gold);
    transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.contact__icon svg { width: 1.4rem; height: 1.4rem; }

.contact:hover .contact__icon,
.contact:focus-within .contact__icon {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

.contact__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact__label {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
}

.contact__note {
    max-width: 24ch;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #DAD5CC;
}

/* One line per country. They wrap onto separate rows when the column is
   narrow, so a third number can be added without touching this. */
.contact__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem clamp(1.25rem, 2.6vw, 2.25rem);
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.contact__number {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gold);
    color: var(--bone);
    transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.contact__country {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    transition: color 0.35s var(--ease);
}

.contact__digits {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.contact__number:hover,
.contact__number:focus-visible {
    border-bottom-color: var(--gold-bright);
    color: var(--gold-bright);
}

.contact__number:hover .contact__country,
.contact__number:focus-visible .contact__country { color: var(--gold-bright); }



/* =========================================================================
   10. FORM
   ========================================================================= */

.form__status {
    margin-bottom: 1.75rem;
    padding: 1rem 0 1rem 1.25rem;
    border-left: 2px solid var(--gold);
    font-size: 0.95rem;
    line-height: 1.6;
}

.form__status:empty { display: none; }

.form__status.is-ok    { border-left-color: var(--gold-bright); color: var(--gold-bright); }
.form__status.is-error { border-left-color: var(--oxide-bright); color: var(--oxide-bright); }

.form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 2rem);
}

.field--wide { grid-column: 1 / -1; }

.field__label {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--font-ui);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #D5D0C7;
}

.field__optional {
    font-weight: 300;
    letter-spacing: 0.16em;
    opacity: 0.7;
}

.field__input {
    width: 100%;
    padding: 0.4rem 0 0.7rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(237, 234, 228, 0.32);
    border-radius: 0;
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    font-weight: 300;
    color: var(--bone);
    transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.field__input:hover { border-bottom-color: var(--gold-line); }

.field__input:focus {
    outline: none;
    border-bottom-color: var(--gold);
    box-shadow: 0 1px 0 0 var(--gold);
}

.field__input--area {
    resize: vertical;
    min-height: 3rem;
    line-height: 1.6;
}

.field__input::placeholder { color: rgba(151, 161, 167, 0.55); }

/* Keep the dark treatment when the browser autofills */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bone);
    -webkit-box-shadow: 0 0 0 1000px var(--graphite) inset, 0 1px 0 0 var(--gold);
    caret-color: var(--bone);
}

.field__error {
    min-height: 1.1rem;
    margin-top: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--oxide-bright);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.field.is-invalid .field__error {
    opacity: 1;
    transform: none;
}

.field.is-invalid .field__input { border-bottom-color: var(--oxide-bright); }

/* --- Consent ----------------------------------------------------------- */

.field--check {
    position: relative;
    margin-top: 0.25rem;
}

.check__input {
    position: absolute;
    top: 0.2rem;
    left: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.check__label {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #DAD5CC;
}

.check__box {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    border: 1px solid var(--gold-line);
    transition: border-color 0.3s var(--ease);
}

.check__box::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--gold);
    transform: scale(0);
    transition: transform 0.2s var(--ease);
}

.check__label:hover .check__box { border-color: var(--gold); }

.check__input:checked + .check__label .check__box { border-color: var(--gold); }
.check__input:checked + .check__label .check__box::after { transform: scale(1); }

.check__input:focus-visible + .check__label .check__box {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
}

.field--check.is-invalid .check__box { border-color: var(--oxide-bright); }

.check__privacy {
    display: inline-block;
    margin: 0.5rem 0 0 1.9rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.8125rem;
    color: #C9C4BA;
    transition: color 0.3s var(--ease);
}

.check__privacy:hover,
.check__privacy:focus-visible { color: var(--gold-bright); }

/* --- Submit ------------------------------------------------------------ */

.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-width: min(100%, 20rem);
    margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
    padding: 1.15rem 1.9rem;
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 0;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-indent: 0.3em;
    color: var(--gold-bright);
    cursor: pointer;
    overflow: hidden;
    transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}

.btn:hover,
.btn:focus-visible {
    color: var(--graphite);
    border-color: var(--gold);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn__arrow {
    display: block;
    width: 28px;
    transition: transform 0.35s var(--ease);
}

.btn__arrow svg { width: 100%; height: auto; }

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

.btn[disabled],
.btn.is-busy {
    opacity: 0.5;
    cursor: progress;
}

.btn.is-busy::before { transform: scaleX(0); }

/* Once the registration lands, the fields step out of the way */
.form.is-done .form__grid,
.form.is-done .btn { display: none; }


/* =========================================================================
   11. FOOTER
   ========================================================================= */

.footer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    width: 100%;
    max-width: 1500px;
    margin: clamp(2.5rem, 5vh, 4rem) auto 0;
    padding-top: clamp(1.25rem, 2.4vh, 1.75rem);
    border-top: 1px solid var(--hairline-soft);
}

.footer__legal {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #A9A49B;
}

.footer__middle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.footer__follow,
.footer__links a {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #A9A49B;
}

.footer__social {
    display: flex;
    gap: 0.75rem;
}

.footer__social a {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    color: var(--gold);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.footer__social a:hover,
.footer__social a:focus-visible {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    transform: translateY(-2px);
}

.footer__social svg { width: 1.15rem; height: 1.15rem; }

.footer__links {
    display: flex;
    gap: 1.75rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--hairline-soft);
}

.footer__links a { transition: color 0.3s var(--ease); }
.footer__links a:hover { color: var(--gold-bright); }

.footer__badge {
    width: clamp(2.75rem, 4vw, 3.5rem);
    height: auto;
}


/* =========================================================================
   12. PRIVACY POLICY
   ========================================================================= */

.privacy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter);
    border-bottom: 1px solid var(--hairline-soft);
}

.privacy-header__brand {
    display: block;
    width: clamp(9rem, 14vw, 12rem);
    line-height: 0;
}

.privacy-header__brand img {
    width: 100%;
    height: auto;
    filter: grayscale(1) invert(1) brightness(2);
}

.privacy-header__back {
    border-bottom: 1px solid var(--gold-line);
    padding-bottom: 0.2rem;
    font-family: var(--font-data);
    font-size: var(--t-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--alloy);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.privacy-header__back:hover,
.privacy-header__back:focus-visible {
    border-color: var(--gold);
    color: var(--gold-bright);
}

.privacy {
    width: min(100% - (var(--gutter) * 2), 58rem);
    margin: 0 auto;
    padding: clamp(4rem, 10vh, 8rem) 0 clamp(5rem, 12vh, 9rem);
}

.privacy__eyebrow,
.privacy__updated {
    font-family: var(--font-data);
    font-size: var(--t-micro);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--alloy);
}

.privacy__title {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 400;
    line-height: 0.95;
}

.privacy__updated { margin-top: 1.5rem; }

.privacy__lead {
    max-width: 48ch;
    margin-top: clamp(1.75rem, 3vw, 2.75rem);
    font-size: var(--t-lead);
    line-height: 1.7;
    color: var(--bone);
}

.privacy__content { margin-top: clamp(3.5rem, 8vw, 6rem); }

.privacy__section {
    padding: clamp(1.75rem, 3.6vw, 2.75rem) 0;
    border-top: 1px solid var(--hairline-soft);
}

.privacy__section h2 {
    font-family: var(--font-ui);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 500;
    line-height: 1.3;
}

.privacy__section p,
.privacy__section li {
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--alloy);
}

.privacy__section p + p,
.privacy__section p + ul,
.privacy__section ul + p { margin-top: 1rem; }

.privacy__section ul {
    list-style: disc;
    margin-top: 1rem;
    padding-left: 1.25rem;
}

.privacy__section a {
    border-bottom: 1px solid currentColor;
    color: var(--bone);
}

.privacy__section a:hover,
.privacy__section a:focus-visible { color: var(--gold-bright); }


/* =========================================================================
   13. MOTION
   ========================================================================= */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.9s var(--ease) var(--delay, 0ms),
        transform 0.9s var(--ease) var(--delay, 0ms);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .js .stage__image {
        transform: scale(1.045);
        transition: transform 1.4s cubic-bezier(0.16, 0.84, 0.24, 1);
        will-change: transform;
    }

    .js .stage.is-current .stage__image { transform: scale(1); }

    .js .panel.reveal > *,
    .js .proof__head.reveal > *,
    .js .register__intro.reveal > * {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 0.7s var(--ease) var(--item-delay, 0ms),
            transform 0.7s var(--ease) var(--item-delay, 0ms);
    }

    .js .panel.reveal > :nth-child(2),
    .js .proof__head.reveal > :nth-child(2),
    .js .register__intro.reveal > :nth-child(2) { --item-delay: 90ms; }

    .js .panel.reveal > :nth-child(3),
    .js .proof__head.reveal > :nth-child(3),
    .js .register__intro.reveal > :nth-child(3) { --item-delay: 160ms; }

    .js .panel.reveal > :nth-child(4),
    .js .proof__head.reveal > :nth-child(4),
    .js .register__intro.reveal > :nth-child(4) { --item-delay: 230ms; }

    .js .proof__head.reveal > :nth-child(5),
    .js .register__intro.reveal > :nth-child(5) { --item-delay: 300ms; }

    .js .panel.reveal.is-in > *,
    .js .proof__head.reveal.is-in > *,
    .js .register__intro.reveal.is-in > * {
        opacity: 1;
        transform: none;
    }

    .brand:hover .brand__mark,
    .brand:focus-visible .brand__mark { transform: scale(1.05); }

    .btn { transition: transform 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); }
    .btn:hover,
    .btn:focus-visible { transform: translateY(-2px); }

    .contact__number { transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }
    .contact__number:hover,
    .contact__number:focus-visible { transform: translateX(4px); }
}

/* Hero entrance, only staged when JavaScript is running */
.js [data-hero] { opacity: 0; }

.is-ready [data-hero="eyebrow"]  { animation: rise 0.8s 0.10s both var(--ease); }
.is-ready [data-hero="wordmark"] { animation: settle 1.4s 0.24s both cubic-bezier(0.16, 0.84, 0.24, 1); }
.is-ready [data-hero="body"]     { animation: rise 0.8s 0.62s both var(--ease); }
.is-ready [data-hero="date"]     { animation: rise 0.9s 0.80s both var(--ease); }
.is-ready [data-hero="cue"]      { animation: rise-centered 0.8s 1.05s both var(--ease); }

@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rise-centered {
    from { opacity: 0; transform: translate(-50%, 18px); }
    to   { opacity: 1; transform: translateX(-50%); }
}

@keyframes settle {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes cue {
    0%   { transform: translateY(-100%); }
    55%  { transform: translateY(150%); }
    100% { transform: translateY(150%); }
}

/* Gentle vertical snapping on desktop pointers only */
@media (min-width: 900px) and (pointer: fine) {
    html { scroll-snap-type: y proximity; }

    .stage,
    .register { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }

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

    .js [data-hero],
    .reveal {
        opacity: 1;
        transform: none;
    }

    .stage__media { will-change: auto; }
    .loader__mark { animation: none; }
    .loader__line::after { animation: none; transform: none; }
}


/* =========================================================================
   14. RESPONSIVE
   ========================================================================= */

/* Tablet and below: the instrument scale gives way to the top gauge */
@media (max-width: 1023px) {
    .register__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.4rem, 6vw, 3.4rem);
        padding-left: 0;
    }

    /* The photograph becomes the backdrop for the whole section */
    .register__media { width: 100%; }
    .register__media img { object-position: 50% 38%; }

    .register__veil {
        background:
            linear-gradient(to bottom,
                rgba(14, 17, 19, 0.82) 0%,
                rgba(14, 17, 19, 0.6) 26%,
                rgba(14, 17, 19, 0.94) 62%,
                var(--graphite) 100%);
    }

    .register__lead,
    .contact__note { max-width: 46ch; }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .stage--left .stage__inner,
    .stage--right .stage__inner {
        justify-content: flex-start;
        align-items: flex-end;
    }

    .stage--left .stage__scrim,
    .stage--right .stage__scrim {
        background: linear-gradient(to bottom,
            rgba(14, 17, 19, 0.55) 0%,
            rgba(14, 17, 19, 0.2) 30%,
            rgba(14, 17, 19, 0.85) 78%,
            rgba(14, 17, 19, 0.96) 100%);
    }

    .panel { max-width: 40ch; }
}

/* Phone */
@media (max-width: 640px) {
    .stage__image { object-position: var(--focus-mobile, var(--focus, 50% 50%)); }

    .panel__body { white-space: normal; }

    .stage__inner { padding-bottom: clamp(4rem, 12vh, 6rem); }

    .stage--proof .stage__inner { padding-top: clamp(4rem, 9vh, 5.5rem); }

    .masthead__date { display: none; }

    .proof__ruled::before,
    .proof__ruled::after { display: none; }

    .proof__assurances { gap: 0.55rem 0.2rem; }

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

    .btn {
        width: 100%;
        min-width: 0;
    }

    .footer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "badge legal"
            "middle middle";
        align-items: center;
        gap: 1.5rem 1rem;
    }

    .footer__legal {
        grid-area: legal;
        letter-spacing: 0.16em;
    }

    .footer__badge {
        grid-area: badge;
        width: 2.5rem;
    }

    .footer__middle {
        grid-area: middle;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 1rem;
        width: 100%;
    }

    .footer__follow { grid-column: 1; }

    .footer__social {
        grid-column: 2;
        justify-self: start;
    }

    .footer__links {
        grid-column: 1 / -1;
        margin-top: 1.25rem;
        padding: 1.25rem 0 0;
        border-top: 1px solid var(--hairline-soft);
        border-left: 0;
        gap: 1.25rem;
    }
}

/* Short landscape screens: stop the hero from overflowing */
@media (max-height: 560px) and (orientation: landscape) {
    .hero__wordmark { width: 10rem; }
    .hero__eyebrow { margin-bottom: 1rem; }
    .scroll-cue { display: none; }
    .stage--proof .proof__note { display: none; }
}