/* Maison Vernis: site styles. Geometry follows the reference's measured layout (01-analysis/data/measure.json). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--porcelain); color: var(--lacquer); font: 400 var(--fs-body)/1.333 var(--font-body); letter-spacing: -0.0156em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--lacquer); color: var(--white); padding: 10px 18px; border-radius: 30px; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- type ---------- */
.h1, .h2, .h3, .btn, .nav-link, .card__t, .review__n { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 11; }
/* Bodoni's 96 pt cut has hairlines that vanish on screen: display sizes use the 20 pt cut, UI sizes the 11 pt cut */
.h1, .h2, .card__t { font-variation-settings: "opsz" 20; }
.h3 { font-variation-settings: "opsz" 14; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; }
.h2 { font-size: var(--fs-h2); line-height: 1.09; text-transform: uppercase; }
.h3 { font-size: var(--fs-h3); line-height: 1.32; letter-spacing: -0.006em; }
.t-mob { display: none; }
@media (max-width: 767px) { .t-desk { display: none; } .t-mob { display: inline; } }

/* split-text pieces (js/split.js) */
.sw { display: inline-block; white-space: nowrap; }
.sc, .swd { display: inline-block; }
.sl { display: block; }
html.motion [data-r], html.motion [data-r-chars], html.motion [data-r-words], html.motion [data-r-rise], html.motion [data-hero-split], html.motion [data-hero-btn], html.motion .card__t { visibility: hidden; }
html.motion .is-split, html.motion [data-r].is-ready, html.motion [data-r-rise].is-ready, html.motion [data-hero-btn].is-ready { visibility: visible; }

/* ornaments */
.orn { fill: none; stroke: currentColor; stroke-width: 1; color: var(--lacquer); opacity: .82; }
.orn .f { fill: currentColor; stroke: none; }
.orn .t { stroke-width: 1.4; stroke-linecap: round; }
.orn--v { width: 36px; height: 36px; }
.orn--h { width: 97px; height: 30px; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1.3; letter-spacing: .004em; padding: 11.2px 28.8px; border: 1px solid currentColor; border-radius: 30px; overflow: hidden; isolation: isolate; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
/* our touch: a single lacquer sheen crosses the fill on hover */
.btn::after { content: ""; position: absolute; inset: -1px; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 253, 250, .32) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); transition: transform .7s var(--ease-out) .05s; }
.btn--light { color: var(--white); border-color: var(--white); }
.btn--light:hover, .btn--light:focus-visible { background: var(--white); color: var(--lacquer); }
.btn--lacquer { color: var(--lacquer); border-color: var(--lacquer); }
.btn--lacquer:hover, .btn--lacquer:focus-visible { background: var(--lacquer); color: var(--porcelain); }
.btn--lacquer::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 253, 250, .22) 50%, transparent 70%); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: 125px; transition: height var(--dur-nav) ease, transform .6s var(--ease-out); animation: hdr-in 1s var(--ease-out) both; }
@keyframes hdr-in { from { transform: translateY(-100%); } }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, #F1EAE1 0%, #F4EEE6 26%, var(--white) 100%); opacity: 0; transition: opacity var(--dur-nav) ease; box-shadow: 0 1px 0 color-mix(in srgb, var(--lacquer) 6%, transparent); }
.hdr__in { height: 100%; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr__logo { position: relative; display: block; height: 48px; aspect-ratio: 190.5 / 47; transition: height var(--dur-nav) ease; }
.hdr__logo-l { position: absolute; inset: 0; transition: opacity var(--dur-nav) ease; }
.hdr__logo-l svg { width: 100%; height: 100%; }
.hdr__logo-l--dark { opacity: 0; color: var(--lacquer); }
.hdr__nav { display: flex; align-items: center; }
.hdr__nav ul { display: flex; margin-right: 24px; }
.nav-link { display: inline-block; font-size: 1rem; line-height: 1.3; letter-spacing: .004em; padding: 13px 20px; color: var(--white); text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .1s ease, color var(--dur-nav) ease; }
.hdr .nav-link:hover, .hdr .nav-link:focus-visible { text-decoration-color: rgba(255, 253, 250, .75); }
.nav-link[aria-current="page"] { transform: skewX(-10deg); text-decoration-color: rgba(255, 253, 250, .75); }
.btn--nav { color: var(--white); border-color: var(--white); transition: color var(--dur-nav) ease, border-color var(--dur-nav) ease, background-color var(--dur-slow) ease; }
.btn--nav:hover, .btn--nav:focus-visible { background: var(--lacquer); border-color: var(--lacquer); color: var(--white); transition: color .3s ease, border-color .3s ease, background-color .3s ease; }
.hdr__burger { display: none; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; }
.hdr__burger svg { width: 26px; height: 26px; fill: none; stroke: var(--white); stroke-width: 1.4; transition: stroke var(--dur-nav) ease; }
/* stuck state: the reference's "sticky effects" */
.hdr.is-stuck { height: 85px; }
.hdr.is-stuck::before { opacity: 1; }
.hdr.is-stuck .hdr__logo { height: 37px; }
.hdr.is-stuck .hdr__logo-l--white { opacity: 0; }
.hdr.is-stuck .hdr__logo-l--dark { opacity: 1; }
.hdr.is-stuck .nav-link { color: var(--lacquer); }
.hdr.is-stuck .nav-link:hover, .hdr.is-stuck .nav-link:focus-visible, .hdr.is-stuck .nav-link[aria-current="page"] { text-decoration-color: color-mix(in srgb, var(--lacquer) 75%, transparent); }
.hdr.is-stuck .btn--nav { color: var(--lacquer); border-color: var(--lacquer); }
.hdr.is-stuck .btn--nav:hover, .hdr.is-stuck .btn--nav:focus-visible { color: var(--white); background: var(--lacquer); }
.hdr.is-stuck .hdr__burger svg { stroke: var(--lacquer); }
.btn--nav[aria-current="page"] { background: var(--lacquer); border-color: var(--lacquer); color: var(--white); }

/* ---------- off-canvas (phone + tablet) ---------- */
.oc { position: fixed; inset: 0; z-index: 120; }
.oc[hidden] { display: none; }
.oc__veil { position: absolute; inset: 0; background: rgba(20, 8, 10, .8); opacity: 0; transition: opacity .6s ease; }
.oc__panel { position: absolute; inset: 0 auto 0 0; width: min(85%, 420px); padding: 26px 22px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; color: var(--white); background: linear-gradient(170deg, var(--lacquer-deep) 0%, var(--lacquer) 48%, var(--lacquer-gloss) 100%); transform: translateX(-100%); transition: transform .7s cubic-bezier(.45, 0, .55, 1); overflow-y: auto; }
.oc.is-open .oc__panel { transition-duration: .7s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); }
.oc.is-open .oc__veil { opacity: 1; }
.oc.is-open .oc__panel { transform: none; }
.oc__close { position: absolute; top: 14px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; }
.oc__close svg { width: 20px; height: 20px; stroke: var(--white); stroke-width: 1.6; fill: none; }
.oc__logo { display: block; width: 180px; margin-top: 4px; }
.oc__links { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.oc__links .nav-link { padding: 10px 0; font-size: 1.125rem; }
.oc__links .nav-link:hover, .oc__links .nav-link:focus-visible { text-decoration-color: currentColor; }
.oc__note { margin-top: auto; font-size: .8125rem; line-height: 1.6; opacity: .85; }

/* ---------- hero ---------- */
.hero { position: relative; color: var(--white); background: var(--lacquer) repeating-linear-gradient(90deg, var(--rib-hi) 0, var(--lacquer) calc(var(--sw, 28px) * .22), var(--lacquer) calc(var(--sw, 28px) * .74), var(--rib-lo) var(--sw, 28px)); padding: min(500px, calc(100svh - 400px)) 0 700px; overflow: hidden; }
.hero__media { position: absolute; inset: 0 0 auto; height: calc(100svh + 260px); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 320px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 320px), transparent); }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 12, 14, .38) 0, rgba(30, 12, 14, 0) 190px), linear-gradient(200deg, rgba(30, 12, 14, 0) 35%, rgba(30, 12, 14, .42) 100%), linear-gradient(0deg, rgba(30, 12, 14, .2), rgba(30, 12, 14, 0) 30%); }
.hero__slats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.slat { position: absolute; top: 0; height: 100%; transform-origin: left center; transform: rotateY(-90deg); backface-visibility: hidden;
  /* each slat is a lacquered rib: a highlight on its leading edge, depth on the trailing one */
  background: linear-gradient(90deg, var(--rib-hi) 0%, var(--lacquer) 22%, var(--lacquer) 74%, var(--rib-lo) 100%); }
.hero__slats { overflow: hidden; }
/* the sheen moves by transform only (composited), never by repainting a hero-sized gradient */
.hero__slats::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent 0%, rgba(255, 240, 236, .16) 50%, transparent 100%); transform: translateX(var(--sheen-x, -100%)); opacity: var(--sheen-o, 0); will-change: transform; }
.hero__in { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.hero__h { max-width: 15ch; }
.hero--home .hero__h { max-width: none; }
.hero__btn { margin-top: 18px; }

/* ---------- arch panel ---------- */
.arch { position: relative; z-index: 3; margin-top: -625px; background: var(--porcelain); border-radius: 1250px 1250px 0 0; overflow: hidden; text-align: center; padding: 200px 0 250px; }
/* backdrop: the reference's recipe. A full-colour photo of the maison's arcade, fixed to the viewport on desktop
   (115% wide at 0% 30%), ghosting through a radial porcelain wash (82% at the centre, solid by 70%).
   The fixed look is a composited translate driven by main.js, not background-attachment: fixed (which repaints per frame). */
.arch::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(rgba(242, 236, 228, .82) 0%, var(--porcelain) 70%); }
.arch__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; will-change: transform;
  background: url("../media/img/arcade-1920.webp") 0% 30% / 115% auto no-repeat; }
.arch__in { z-index: 2; }
.arch__in { position: relative; display: flex; flex-direction: column; align-items: center; }
.arch__sub { margin-bottom: 22px; }
.arch .orn--v { margin-bottom: 18px; }
.arch__img { width: 365px; height: 500px; }
.clip { width: 100%; height: 100%; overflow: hidden; }
.arch__img .clip { border-radius: 450px 450px 0 0; }
.clip img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.orn-pair { width: 440px; display: flex; justify-content: space-between; margin-top: -12px; }
.arch__copy { margin-top: 74px; display: flex; flex-direction: column; align-items: center; }
.arch__copy .h2 { max-width: 12ch; }
.arch__copy p { max-width: 420px; margin-top: 45px; text-align: left; }
.arch__copy .btn { margin-top: 45px; }

/* ---------- rituals carousel ---------- */
.rituals { position: relative; background: var(--porcelain); padding: 125px 0 150px; }
.rituals .orn--h { margin-bottom: 15px; }
.rituals__h { max-width: 14ch; }
.rituals__head .h3 { margin-top: 15px; }
.car { --gap: 23px; --per: 3; position: relative; }
.car__viewport { overflow: hidden; margin-left: max(var(--gutter), (100% - var(--max)) / 2); }
.rituals .car { margin-top: 47px; }
.car__track { display: flex; gap: var(--gap); will-change: transform; }
.car__slide { flex: 0 0 auto; width: calc((min(100vw - 2 * var(--gutter), var(--max)) - (var(--per) - 1) * var(--gap) + 10px) / var(--per)); }
.card { position: relative; display: block; height: 545px; border-radius: var(--radius-card); overflow: hidden; color: var(--white); transform-origin: 0 0; }
.card__clip { position: absolute; inset: 0; }
.card__clip img { width: 100%; height: 100%; object-fit: cover; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 12, 14, .5) 0%, rgba(30, 12, 14, 0) 45%); pointer-events: none; }
.card__t { position: absolute; z-index: 1; left: 30px; right: 24px; bottom: 30px; font-size: 3.4375rem; line-height: 1.03; letter-spacing: -.014em; text-transform: uppercase; }
.car__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 35px; }
.car__arrows { display: flex; gap: 13px; }
.arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--lacquer); display: grid; place-items: center; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--lacquer); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-fast) ease; }
.arrow:hover, .arrow:focus-visible { background: var(--lacquer); }
.arrow:hover svg, .arrow:focus-visible svg { stroke: var(--white); }
.car.is-locked .arrow { cursor: default; }

/* ---------- pinned rise (images / reviews float up through a pinned stage) ---------- */
/* the pin is CSS sticky over 3000px of runway (no fixed-position swap, so no layout shift); GSAP only scrubs the timeline */
.rise { position: relative; height: calc(100svh + 3000px); background: var(--porcelain); }
.rise__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.rise__emblem { position: absolute; left: 17%; top: 9%; width: 230px; opacity: .24; transform-origin: 50% 40%; will-change: transform, opacity; }
.rise__emblem img { width: 100%; height: auto; }
.rise__copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-inline: var(--gutter); }
.rise__copy .orn--v { margin-bottom: 16px; }
.rise__copy p { max-width: 530px; margin-top: 25px; text-align: left; }
.rise__img { position: absolute; top: calc(50% - 180px); width: 275px; z-index: 2; will-change: transform; }
.rise__img img { width: 100%; height: 360px; object-fit: cover; will-change: transform; }
.rise__img.is-rect img { height: 330px; }
.rise__img.is-arch img { border-radius: 450px 450px 0 0; height: 375px; }
.rise .r1 { left: 52.8%; } .rise .r2 { left: 17.8%; } .rise .r3 { left: 70.7%; } .rise .r4 { left: 25%; } .rise .r5 { left: 60%; } .rise .r6 { left: 8%; }
.rise--reviews .rise__copy { justify-content: center; }
.rise--reviews .rise__copy .orn--v { margin: 22px 0 0; }
.review { position: absolute; top: calc(50% - 169px); width: 275px; z-index: 2; will-change: transform; }
.review__card { height: 338px; padding: 0 42px; border-radius: 500px 500px 0 0; background: var(--bisque); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; will-change: transform; }
.review__n { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 14px; }
.review blockquote { font-size: .8125rem; line-height: 1.45; }
.rise--reviews .r1 { left: 33%; } .rise--reviews .r2 { left: 68%; } .rise--reviews .r3 { left: 11%; } .rise--reviews .r4 { left: 51%; }

/* ---------- split (text + image) ---------- */
.split { background: var(--porcelain); padding: 150px 0; overflow: clip; }
.split__in { display: grid; grid-template-columns: 510px 1fr; gap: 90px; align-items: center; }
.split__img { height: 525px; }
.split__img .clip { border-radius: 32px; }
.split__copy .h2 { margin-top: 20px; }
.split__copy p { max-width: 420px; margin-top: 27px; }
.split__copy .btn { margin-top: 40px; }

/* ---------- feed ---------- */
.feed { position: relative; background: var(--porcelain); padding: 150px 0 160px; overflow: hidden; }
.feed__bg { position: absolute; inset: 0; pointer-events: none; }
.feed__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.feed__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--porcelain) 0%, rgba(242, 236, 228, .3) 45%, var(--porcelain) 100%); }
.feed > .wrap, .feed .car { position: relative; }
.car--feed { --gap: 15px; --per: 5; margin-top: 37px; }
.car--feed .car__viewport { margin-left: max(var(--gutter) - 20px, (100% - var(--max)) / 2 - 20px); margin-right: max(var(--gutter) - 20px, (100% - var(--max)) / 2 - 20px); }
.car--feed .car__slide { width: calc((min(100vw - 2 * var(--gutter), var(--max)) + 40px - 4 * var(--gap)) / 5); }
.tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--bisque); }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: 18px 20px 16px; color: var(--white); font-size: .8125rem; line-height: 1.45; background: rgba(36, 14, 18, .74); opacity: 0; transition: opacity var(--dur-fast) ease; }
.tile__meta { align-self: stretch; display: flex; justify-content: space-between; font-size: .75rem; opacity: .9; }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; }
.tile__play { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; }
.tile__play::before { content: ""; position: absolute; inset: 3px 4px 3px 7px; background: var(--white); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.feed__foot { display: flex; align-items: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.feed__handle { text-transform: uppercase; }

/* ---------- CTA + form ---------- */
.cta { position: relative; color: var(--white); padding: 175px 0 330px; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 14, 18, .55) 0%, rgba(40, 14, 18, .2) 45%, rgba(40, 14, 18, .05) 100%); }
.cta__in { position: relative; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1fr 580px; gap: 40px; align-items: start; }
.cta__h { max-width: 9ch; }
.cta__p { max-width: 420px; margin-top: 34px; }
.form { display: flex; flex-direction: column; gap: 25px; }
.field { padding: 0 5px; }
.field input:not([type=file]), .field select, .field textarea { width: 100%; height: 59px; border: 0; border-radius: 25px; background: var(--white); color: var(--lacquer); font: 400 .9375rem/1.33 var(--font-body); letter-spacing: -.0156em; padding: 7px 20px; transition: box-shadow .25s ease; }
.field textarea { height: auto; min-height: 140px; padding: 20px; resize: vertical; }
.field ::placeholder { color: color-mix(in srgb, var(--lacquer) 72%, transparent); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A2630' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 22px center; background-size: 12px 8px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus); }
.field--select label { display: block; font-size: .9375rem; padding: 0 0 8px 10px; margin-top: -3px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { box-shadow: 0 0 0 2px #F3B7B7; }
.field--file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field--file label { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; font-size: .875rem; }
.file-btn { padding: 8px 18px; border-radius: 30px; border: 1px dashed rgba(255, 253, 250, .85); transition: background-color .3s ease, color .3s ease; }
.field--file label:hover .file-btn, .field--file input:focus-visible + label .file-btn { background: var(--white); color: var(--lacquer); }
.field--file input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 30px; }
.field--submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 5px; }
.field--submit .btn { padding: 12.8px 32px; border-radius: 50px; }
.form__status { font-size: .875rem; }

/* ---------- footer ---------- */
.ftr { position: relative; z-index: 4; margin-top: -140px; background: var(--lacquer); color: var(--white); border-radius: 140px 140px 0 0; padding: 81px 0 44px; }
.ftr__in { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.ftr__top { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 253, 250, .3); }
.ftr__logo { width: 196px; }
.ftr__nav ul { display: flex; flex-wrap: wrap; }
.ftr .nav-link:hover, .ftr .nav-link:focus-visible, .ftr .nav-link[aria-current="page"] { text-decoration-color: rgba(255, 253, 250, .8); }
.ftr__social { display: flex; gap: 25px; }
.ftr__social a { display: block; width: 25px; height: 25px; color: var(--white); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease; }
.ftr__social a:hover, .ftr__social a:focus-visible { transform: translateY(-2px); opacity: .8; }
.ftr__social svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ftr__social svg .fill { fill: currentColor; stroke: none; }
.ftr__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; font-size: .75rem; opacity: .9; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
  .hdr { height: 105px; }
  .hdr.is-stuck { height: 80px; }
  .arch { border-radius: 300px 300px 0 0; }
  .arch__bg { height: 100%; background-image: url("../media/img/arcade-1200.webp"); background-size: cover; background-position: center center; will-change: auto; }
  .card { height: 460px; }
  .card__t { font-size: 2.75rem; }
  .car { --per: 2; }
  .car--feed { --per: 3; }
  .car--feed .car__slide { width: calc((100vw - 2 * var(--gutter) + 40px - 2 * var(--gap)) / 3); }
  .split__in { grid-template-columns: 1fr 1fr; gap: 50px; }
  .cta__in { grid-template-columns: 1fr; }
  .rise__img, .review { width: 225px; }
  .rise__img img { height: 300px; } .rise__img.is-rect img { height: 270px; } .rise__img.is-arch img { height: 310px; }
  .review__card { height: 280px; padding: 0 30px; }
}

/* ---------- phone (measured at 390×844) ---------- */
@media (max-width: 767px) {
  :root { --fs-h1: 45px; --fs-h2: 32px; --fs-h3: 18px; --fs-body: .8125rem; }
  .hdr { height: 105px; }
  .hdr__logo { height: 44px; }
  .hdr.is-stuck .hdr__logo { height: 34px; }
  .btn { font-size: .8125rem; padding: 9.1px 23.4px; }
  .hero { padding: 200px 0 575px; }
  .hero__media { height: 880px; }
  .hero--home .hero__media img { object-position: 62% 50%; }
  .hero__media::after { background: linear-gradient(180deg, rgba(30, 12, 14, .4) 0, rgba(30, 12, 14, .12) 18%, rgba(30, 12, 14, .5) 42%, rgba(30, 12, 14, .5) 62%, rgba(30, 12, 14, .1) 85%); }
  .hero__btn { margin-top: 20px; }
  .arch { margin-top: -500px; border-radius: 150px 150px 0 0; padding: 100px 0 140px; }
  .arch__sub { margin-bottom: 26px; }
  .arch__bg { background-image: url("../media/img/arcade-800.webp"); background-position: 5% 0%; }
  .arch__img { width: 225px; height: 295px; }
  .orn-pair { width: 290px; }
  .arch__copy { margin-top: 90px; padding-inline: var(--gutter); }
  .arch__copy p { margin-top: 40px; max-width: 316px; text-align: center; }
  .arch__copy .btn { margin-top: 40px; }
  .rituals { padding: 92px 0 62px; text-align: center; }
  .rituals .orn--h { margin-inline: auto; }
  .rituals__h { margin-inline: auto; }
  .car { --per: 1; }
  .car__viewport { margin-inline: var(--gutter); }
  .rituals .car { margin-top: 40px; }
  .card { height: 300px; }
  .card__t { font-size: 2.5rem; left: 25px; bottom: 25px; text-align: left; }
  .car__foot { margin-top: 25px; }
  .arrow { width: 37px; height: 37px; }
  .arrow svg { width: 16px; height: 16px; }
  .car__arrows { gap: 8px; }
  .rise__emblem { left: 7%; top: 12%; width: 160px; }
  .rise__copy p { max-width: 316px; margin-top: 20px; text-align: center; }
  .rise__img, .review { width: 175px; }
  .rise__img img { height: 235px; } .rise__img.is-rect img { height: 220px; } .rise__img.is-arch img { height: 238px; }
  .rise__img { top: calc(50% - 118px); }
  .rise .r1 { left: 52%; } .rise .r2 { left: 8%; } .rise .r3 { left: 50%; } .rise .r4 { left: 6%; } .rise .r5 { left: 48%; } .rise .r6 { left: 10%; }
  .review { top: calc(50% - 108px); }
  .review__card { height: 217px; padding: 0 22px; }
  .review__n { font-size: 1rem; margin-bottom: 8px; }
  .review blockquote { font-size: .6875rem; }
  .rise--reviews .r1 { left: 5%; } .rise--reviews .r2 { left: 50%; } .rise--reviews .r3 { left: 8%; } .rise--reviews .r4 { left: 48%; }
  .split { padding: 90px 0 100px; text-align: center; }
  .split__in { grid-template-columns: 1fr; gap: 50px; }
  .split__img { height: 195px; }
  .split__copy { display: flex; flex-direction: column; align-items: center; }
  .split__copy p { max-width: 316px; }
  .feed { padding: 90px 0 100px; text-align: center; }
  .car--feed { --per: 1; }
  .car--feed .car__viewport { margin-inline: 37px; }
  .car--feed .car__slide { width: calc(100vw - 74px); }
  .feed__foot { justify-content: center; gap: 14px; flex-direction: column; }
  .feed__handle { font-size: 22px; }
  .cta { padding: 120px 0 260px; text-align: center; }
  .cta__in { gap: 30px; }
  .cta__h { margin-inline: auto; }
  .cta__p { margin: 24px auto 0; max-width: 316px; }
  .form { gap: 20px; text-align: left; }
  .field input:not([type=file]), .field select { height: 45px; font-size: .875rem; }
  .field--submit { justify-content: center; }
  .ftr { margin-top: -100px; border-radius: 100px 100px 0 0; padding: 64px 0 34px; }
  .ftr__top { flex-direction: column; gap: 26px; }
  .ftr__nav { display: none; }
  .ftr__social a { width: 20px; height: 20px; }
  .ftr__bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}

/* ---------- reduced motion: final states, no pins ---------- */
@media (prefers-reduced-motion: reduce) {
  .hdr { animation: none; }
  .slat { display: none; }
  .btn::after { display: none; }
  .rise { height: auto; padding: 120px 0; }
  .rise__stage { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; }
  .rise__copy { position: relative; grid-column: 1 / -1; padding: 0 0 40px; }
  .rise__img, .review { position: relative; inset: auto; width: auto; }
  .rise__emblem { display: none; }
}