/* ==========================================================================
   Lucélie — High Jewellery
   Palette: white · malachite #31E1AE · espresso brown · champagne gold
   ========================================================================== */

:root {
    --white: #FFFFFF;
    --ivory: #F3EEE7;           /* brand-guide paper */
    --ivory-2: #EAE3D9;
    --malachite: #31E1AE;
    --malachite-deep: #1BA982;
    --espresso: #21160F;
    --espresso-2: #2E2018;
    --espresso-3: #4A372B;
    --champagne: #D9C29A;
    --champagne-light: #EFE2C8;
    --champagne-deep: #B4976A;
    --ink: #0B0B0B;              /* logo black */

    --serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --wordmark: 'Marcellus', 'Cormorant Garamond', serif;
    --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

    --gutter: clamp(20px, 5vw, 72px);
    --ease: cubic-bezier(.22, .8, .2, 1);
    --ease-in-out: cubic-bezier(.76, 0, .24, 1);
}

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

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
    margin: 0;
    background: var(--ivory);
    color: var(--espresso);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
::selection { background: var(--malachite); color: var(--ink); }

.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 1040px; }

.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 1000;
    padding: 10px 16px; background: var(--white); color: var(--ink);
    transform: translateY(-200%); transition: transform .3s;
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

/* ---------- Wordmark (black / white only — never coloured) ---------- */
.wordmark {
    display: inline-flex; flex-direction: column; align-items: center;
    color: var(--ink); line-height: 1; user-select: none;
}
.wordmark__name {
    font-family: var(--wordmark);
    font-size: 1em; letter-spacing: .06em;
    padding-left: .06em; /* optically re-centre tracking */
}
.wordmark__desc {
    font-family: var(--sans); font-weight: 500;
    font-size: .15em; letter-spacing: .12em;   /* ≈ 1/3 of wordmark width, per guide */
    margin-top: .34em; padding-left: .12em;
}
.wordmark--vector {
    width: 6.2em; aspect-ratio: 4.2 / 1;
    background: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat;
            mask: var(--logo) center / contain no-repeat;
}
[data-on="dark"] .wordmark, .is-dark .wordmark { color: var(--white); }

/* ---------- Eyebrow / titles ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    margin: 0 0 28px;
    font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
    color: var(--champagne);
}
.eyebrow__rule { width: 40px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--dark { color: var(--champagne-deep); }

.section-title {
    margin: 0 0 24px;
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(42px, 6vw, 88px); line-height: 1.02; letter-spacing: -.01em;
    color: var(--espresso);
}
.section-title em { color: var(--champagne-deep); font-weight: 300; }
.section-title--light { color: var(--white); }
.section-title--light em { color: var(--champagne); }

.section-head { display: grid; gap: 0; max-width: 760px; margin-bottom: clamp(48px, 7vw, 96px); }
.section-intro { margin: 0; font-size: 18px; color: var(--espresso-3); max-width: 520px; }

/* ---------- Buttons ---------- */
.btn {
    --bg: transparent; --fg: currentColor; --bd: currentColor; --fill: var(--champagne);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 56px; padding: 0 34px;
    border: 1px solid var(--bd); border-radius: 999px;
    background: var(--bg); color: var(--fg);
    font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
    cursor: pointer; transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--fill); border-radius: inherit;
    transform: translateY(101%); transition: transform .6s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn span { position: relative; }

.btn--gold { --bg: var(--champagne); --fg: var(--espresso); --bd: var(--champagne); --fill: var(--white); }
.btn--ghost { --fg: var(--white); --bd: rgba(255,255,255,.35); --fill: var(--white); }
.btn--ghost:hover { color: var(--espresso); border-color: var(--white); }
.btn--dark { --bg: var(--espresso); --fg: var(--white); --bd: var(--espresso); --fill: var(--champagne); }
.btn--dark:hover { color: var(--espresso); }
.btn--line { --fg: currentColor; --bd: currentColor; --fill: var(--champagne); }
.btn--line:hover { color: var(--espresso); border-color: var(--champagne); }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 11px; }

/* ---------- Loader ---------- */
.loader {
    position: fixed; inset: 0; z-index: 900;
    display: grid; place-items: center;
    background: var(--espresso); color: var(--white);
}
.loader .wordmark { color: var(--white); font-size: clamp(48px, 9vw, 110px); }
.loader__inner { display: grid; justify-items: center; gap: 36px; }
.loader__line { width: 160px; height: 1px; background: rgba(255,255,255,.12); overflow: hidden; }
.loader__line span { display: block; height: 100%; width: 100%; background: var(--champagne); transform: scaleX(0); transform-origin: left; }
.no-js .loader, .loader.is-done { display: none; }

/* ---------- Cursor ---------- */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 800; pointer-events: none; display: none; }
.cursor {
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border: 1px solid var(--champagne); border-radius: 50%;
    display: grid; place-items: center;
    transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .45s var(--ease), border-color .45s;
}
.cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--champagne); }
.cursor__label { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--espresso); opacity: 0; transition: opacity .3s; }
.cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(217,194,154,.12); }
.cursor.is-view { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--champagne); border-color: var(--champagne); }
.cursor.is-view .cursor__label { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .has-cursor .cursor, .has-cursor .cursor-dot { display: grid; }
    .has-cursor .cursor-dot { display: block; }
}

/* ---------- Header ---------- */
.site-header {
    position: fixed; inset: 0 0 auto; z-index: 500;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
    padding: 22px var(--gutter);
    color: var(--white);
    transition: color .5s var(--ease), background .5s var(--ease), padding .5s var(--ease), transform .6s var(--ease);
}
.site-header::after {
    content: ''; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px;
    background: currentColor; opacity: 0; transition: opacity .5s;
}
.site-header.is-scrolled { padding-top: 14px; padding-bottom: 14px; }
.site-header.is-scrolled::after { opacity: .12; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.on-light { color: var(--espresso); }
.site-header.on-light .wordmark { color: var(--ink); }
.site-header.on-dark .wordmark { color: var(--white); }
.site-header.on-light.is-scrolled { background: rgba(243,238,231,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.on-dark.is-scrolled { background: rgba(33,22,15,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.on-malachite { color: var(--ink); }
.site-header.on-malachite .wordmark { color: var(--ink); }
.site-header.on-malachite.is-scrolled { background: rgba(49,225,174,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* 40 mm minimum ≈ 152 CSS px — never render smaller */
.site-header__logo { grid-column: 2; justify-self: center; }
.site-header__logo .wordmark { font-size: 38px; min-width: 156px; }
.site-header__cta { justify-self: end; grid-column: 3; grid-row: 1; }
.site-nav { grid-column: 1; grid-row: 1; }
.site-nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); white-space: nowrap; margin: 0; padding: 0; list-style: none; }
.site-nav a, .mobile-menu a {
    position: relative; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
}
.site-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-toggle { display: none; }

.mobile-menu {
    position: fixed; inset: 0; z-index: 450; background: var(--espresso); color: var(--white);
    display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; gap: 18px; }
.mobile-menu nav a { font-family: var(--serif); font-size: 44px; font-weight: 300; letter-spacing: 0; text-transform: none; }
.mobile-menu__foot { position: absolute; bottom: 40px; font-size: 13px; color: var(--champagne); }

@media (max-width: 1020px) {
    .site-header { grid-template-columns: auto 1fr auto; }
    .site-nav, .site-header__cta { display: none; }
    .site-header__logo { grid-column: 1; justify-self: start; }
    .site-header__logo .wordmark { font-size: 34px; }
    .menu-toggle {
        grid-column: 3; display: grid; gap: 7px; width: 44px; height: 44px; place-content: center;
        border: 0; background: none; color: inherit; cursor: pointer;
    }
    .menu-toggle span { display: block; width: 26px; height: 1px; background: currentColor; transition: transform .4s var(--ease); }
    .menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
    .menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .menu-open .site-header { color: var(--white); background: transparent !important; }
    .menu-open .site-header .wordmark { color: var(--white); }
}

/* ---------- Hero ---------- */
.hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    background: radial-gradient(120% 90% at 70% 40%, #3A281D 0%, var(--espresso) 55%, #140D09 100%);
    color: var(--white); overflow: hidden; isolation: isolate;
}
.hero__glow {
    position: absolute; z-index: -2; width: 70vmax; height: 70vmax; right: -12vmax; top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(217,194,154,.28) 0%, rgba(217,194,154,.06) 35%, transparent 65%);
    animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .65; transform: translateY(-50%) scale(1.06); } }
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; }
.hero__grain {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__content { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 140px; pointer-events: none; }
.hero__content a { pointer-events: auto; }
.hero__title {
    margin: 0 0 32px;
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(64px, 11vw, 176px); line-height: .92; letter-spacing: -.02em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { color: var(--champagne); }
.hero__lede { max-width: 420px; margin: 0 0 44px; font-size: 18px; color: rgba(255,255,255,.72); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__meta {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 34px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.scroll-cue { display: block; width: 1px; height: 56px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
.scroll-cue span { position: absolute; inset: 0; background: var(--champagne); animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

@media (max-width: 700px) {
    .hero__content { padding-top: max(300px, 44svh); padding-bottom: 110px; }
    .site-header .wordmark { min-width: 152px; }
    .hero__meta span { display: none; }
    .hero__meta { justify-content: center; }
    .hero__lede { font-size: 16px; }
}

/* ---------- Manifesto ---------- */
.manifesto { padding: clamp(110px, 16vw, 220px) 0 clamp(90px, 12vw, 160px); background: var(--ivory); }
.manifesto__text {
    margin: 0 0 56px;
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(32px, 4.6vw, 64px); line-height: 1.16; letter-spacing: -.005em;
}
.manifesto__text em { color: var(--champagne-deep); }
.manifesto__text .w { display: inline-block; opacity: .14; }
.no-js .manifesto__text .w { opacity: 1; }
.manifesto__sign { display: flex; align-items: center; gap: 18px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--espresso-3); }
.manifesto__rule { width: 64px; height: 1px; background: var(--malachite-deep); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid rgba(33,22,15,.12); background: var(--ivory); padding: 26px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.4vw, 46px); padding: 0 34px; white-space: nowrap; color: var(--espresso); }
.marquee i { font-style: normal; align-self: center; color: var(--champagne-deep); font-size: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Collections ---------- */
.collections { padding: clamp(100px, 13vw, 180px) 0; background: var(--ivory); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.card:nth-child(even) { margin-top: 72px; }
.card__link { display: block; }
.card__media {
    position: relative; overflow: hidden; aspect-ratio: 3 / 4;
    display: grid; place-items: center;
    background: var(--espresso);
    transition: transform .9s var(--ease);
}
.card__media::before {
    content: ''; position: absolute; inset: 0;
    transition: transform 1.4s var(--ease), opacity .8s;
}
.card__media--1::before { background: radial-gradient(80% 60% at 50% 40%, #4A372B, var(--espresso) 70%); }
.card__media--2::before { background: radial-gradient(80% 60% at 50% 40%, #EFE2C8, #D9C29A 75%); }
.card__media--3::before { background: radial-gradient(80% 60% at 50% 40%, #FFFFFF, #ECE5DA 75%); }
.card__media--4::before { background: radial-gradient(80% 60% at 50% 40%, #3DE6B6, #1BA982 85%); }
.card__media--2 .art, .card__media--3 .art { stroke: var(--espresso); }
.card__media--4 .art { stroke: var(--ink); }

.art {
    position: relative; width: 62%; height: auto;
    fill: none; stroke: var(--champagne); stroke-width: .9; stroke-linejoin: round; stroke-linecap: round;
    transition: transform 1.2s var(--ease);
}
.art path, .art circle, .art ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.card.is-in .art path, .card.is-in .art circle, .card.is-in .art ellipse, .no-js .art * { stroke-dashoffset: 0; }
.card.is-in .art :nth-child(2) { transition-delay: .2s; }
.card.is-in .art :nth-child(3) { transition-delay: .45s; }
.card.is-in .art :nth-child(4) { transition-delay: .7s; }
.card.is-in .art :nth-child(5) { transition-delay: .95s; }
.card.is-in .art :nth-child(6) { transition-delay: 1.2s; }

.card__shine {
    position: absolute; inset: -50%;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%);
    transform: translateX(-60%); pointer-events: none;
}
.card__link:hover .card__shine { transition: transform 1.3s var(--ease); transform: translateX(60%); }
.card__link:hover .card__media::before { transform: scale(1.08); }
.card__link:hover .art { transform: scale(1.06) rotate(-2deg); }

.card__body { position: relative; padding: 26px 4px 0; }
.card__num { position: absolute; top: 28px; right: 4px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--champagne-deep); }
.card__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; }
.card__kind { margin: 6px 0 14px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne-deep); }
.card__text { margin: 0; font-size: 15px; color: var(--espresso-3); max-width: 280px; }

@media (max-width: 1080px) {
    .cards { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
}
@media (max-width: 560px) {
    .cards { grid-template-columns: 1fr; }
    .card:nth-child(even) { margin-top: 0; }
}

/* ---------- Malachite ---------- */
.malachite {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(110px, 14vw, 200px) 0;
    background: var(--malachite); color: var(--ink);
}
.malachite__bands { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.malachite__bands circle { fill: none; stroke: #0E7A5C; stroke-width: 9; opacity: .16; }
.malachite__bands circle:nth-child(3n) { stroke-width: 3; opacity: .22; }
.malachite__bands circle:nth-child(4n+1) { stroke-width: 15; opacity: .1; }
.malachite__bands { animation: bands 60s linear infinite; transform-origin: 77.5% 50%; }
@keyframes bands { to { transform: rotate(360deg); } }

.malachite__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.malachite__logo { display: grid; place-items: center; padding: 1.5em; }
.malachite__logo .wordmark { color: var(--ink); font-size: clamp(64px, 9vw, 140px); }
.malachite .eyebrow--dark { color: var(--ink); }
.malachite .section-title { color: var(--ink); }
.malachite .section-title em { color: var(--ink); }
.malachite__copy p:not(.eyebrow) { font-size: 18px; max-width: 460px; margin: 0 0 40px; color: rgba(11,11,11,.8); }
.malachite .btn--dark { --bg: var(--ink); --bd: var(--ink); --fill: var(--white); }
.malachite .btn--dark:hover { color: var(--ink); }

@media (max-width: 860px) {
    .malachite__grid { grid-template-columns: 1fr; }
    .malachite__logo { padding: 0 0 20px; }
}

/* ---------- Craft ---------- */
.craft { padding: clamp(110px, 14vw, 200px) 0; background: var(--espresso); color: var(--white); }
.craft__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 8vw, 140px); align-items: start; }
.craft__aside { position: sticky; top: 140px; }
.craft__intro { margin: 0 0 48px; color: rgba(255,255,255,.62); max-width: 380px; }
.craft__progress { width: 100%; max-width: 380px; height: 1px; background: rgba(255,255,255,.12); }
.craft__progress span { display: block; height: 100%; background: var(--champagne); transform: scaleX(0); transform-origin: left; }

.steps { margin: 0; padding: 0; list-style: none; }
.step {
    display: grid; grid-template-columns: 90px 1fr; gap: 24px;
    padding: 48px 0; border-top: 1px solid rgba(217,194,154,.2);
}
.step:last-child { border-bottom: 1px solid rgba(217,194,154,.2); }
.step__num { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--champagne); }
.step h3 { margin: 4px 0 14px; font-family: var(--serif); font-weight: 400; font-size: 34px; }
.step p { margin: 0; color: rgba(255,255,255,.66); max-width: 460px; }

@media (max-width: 860px) {
    .craft__grid { grid-template-columns: 1fr; }
    .craft__aside { position: static; }
    .craft__progress { display: none; }
    .step { grid-template-columns: 60px 1fr; padding: 36px 0; }
    .step__num { font-size: 34px; }
}

/* ---------- Quote ---------- */
.quote { padding: clamp(110px, 14vw, 190px) 0; text-align: center; background: var(--white); }
.quote__mark { display: block; color: var(--champagne-deep); font-size: 18px; margin-bottom: 36px; }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(30px, 4vw, 54px); line-height: 1.22; }

/* ---------- Appointment ---------- */
.appointment { padding: 0 0 clamp(100px, 12vw, 160px); background: var(--white); }
.appointment__grid { display: grid; grid-template-columns: 1fr 1.25fr; background: var(--ivory); }
.appointment__panel {
    position: relative; overflow: hidden;
    padding: clamp(40px, 6vw, 80px); background: var(--espresso); color: var(--white);
}
.appointment__panel::after {
    content: ''; position: absolute; width: 420px; height: 420px; right: -180px; bottom: -180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(49,225,174,.22), transparent 65%);
}
.appointment__panel .section-title { font-size: clamp(40px, 4.6vw, 64px); }
.appointment__panel > p { color: rgba(255,255,255,.66); max-width: 380px; }
.appointment__contact { margin: 48px 0 0; display: grid; gap: 22px; }
.appointment__contact dt { font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne); }
.appointment__contact dd { margin: 4px 0 0; font-family: var(--serif); font-size: 24px; }
.appointment__contact a:hover { color: var(--champagne); }

.form { padding: clamp(40px, 6vw, 80px); display: grid; gap: 30px; align-content: center; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { position: relative; }
.field input, .field select, .field textarea {
    width: 100%; padding: 26px 0 10px; border: 0; border-bottom: 1px solid rgba(33,22,15,.25); border-radius: 0;
    background: transparent; color: var(--espresso);
    font: 300 17px/1.4 var(--sans); outline: none; resize: vertical;
    -webkit-appearance: none; appearance: none;
    transition: border-color .4s;
}
.field select { cursor: pointer; }
.field--select::after {
    content: ''; position: absolute; right: 4px; bottom: 18px; width: 7px; height: 7px;
    border-right: 1px solid var(--espresso); border-bottom: 1px solid var(--espresso); transform: rotate(45deg);
    pointer-events: none;
}
.field label {
    position: absolute; left: 0; top: 26px; pointer-events: none;
    font-size: 15px; color: var(--espresso-3); transform-origin: left top;
    transition: transform .45s var(--ease), color .45s;
}
.field label small { font-size: .8em; opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--espresso); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select:valid + label {
    transform: translateY(-22px) scale(.72); color: var(--champagne-deep); letter-spacing: .08em;
}
.field.is-invalid input, .field.is-invalid select { border-color: #B3412F; }

.check { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--espresso-3); cursor: pointer; }
.check input {
    flex: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid rgba(33,22,15,.4);
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; display: grid; place-content: center;
}
.check input::after { content: ''; width: 8px; height: 8px; background: var(--espresso); transform: scale(0); transition: transform .3s var(--ease); }
.check input:checked::after { transform: scale(1); }
.check.is-invalid input { border-color: #B3412F; }

.form__foot { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.form__status { margin: 0; font-size: 14px; color: var(--malachite-deep); }
.form__status.is-error { color: #B3412F; }
.form.is-sending button { opacity: .6; pointer-events: none; }

@media (max-width: 960px) {
    .appointment__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .form__row { grid-template-columns: 1fr; }
    .form .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { padding: clamp(90px, 10vw, 140px) 0 36px; background: var(--espresso); color: var(--white); }
.site-footer__logo { display: flex; justify-content: center; padding-bottom: clamp(60px, 8vw, 110px); }
.site-footer__logo .wordmark { color: var(--white); font-size: clamp(64px, 13vw, 200px); }
.site-footer__cols {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    padding: 56px 0; border-top: 1px solid rgba(217,194,154,.18);
}
.site-footer__cols div { display: grid; gap: 10px; align-content: start; }
.site-footer h4 { margin: 0 0 10px; font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne); }
.site-footer__cols a { color: rgba(255,255,255,.72); transition: color .3s; width: fit-content; }
.site-footer__cols a:hover { color: var(--white); }
.site-footer__legal {
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-top: 28px; border-top: 1px solid rgba(217,194,154,.18);
    font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.45);
}
.back-top:hover { color: var(--champagne); }
@media (max-width: 700px) { .site-footer__cols { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Reveal defaults (JS sets them in motion) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); }
.js [data-hero-fade] { opacity: 0; }
.js [data-hero-line] { transform: translateY(110%); }
.reduced [data-reveal], .reduced [data-hero-fade], .reduced [data-hero-line] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .manifesto__text .w { opacity: 1; }
}