/* ==========================================================================
   MONZARIÉ — Coming Soon
   Beige Silent Luxury direction. A quiet, framed, scrolling lookbook.
   Palette per client briefing (05 / DESIGN SYSTEM).
   ========================================================================== */

:root {
  /* Surfaces */
  --ivory: #f7f3eb;       /* Soft Ivory  — background          */
  --cream: #eee5d8;       /* Warm Cream  — sections            */
  --sand: #d8c8b4;        /* Sand Beige  — cards / accents      */
  --taupe: #b49b7d;       /* Taupe       — lines / details      */
  --ink: #141210;         /* Soft Black  — logo / text          */

  /* Derived tones */
  --muted: #6f6052;       /* warm grey-brown — secondary text · WCAG AA on ivory & cream */
  --ink-soft: #2c2620;    /* button hover                       */
  --note: #9a5b4a;        /* quiet terracotta — form errors     */

  /* --taupe stays for hairlines, rules, borders & focus rings only —
     it is too light to meet AA as reading text, so copy uses --muted. */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Signature-tier curves: strong ease-out for reveals, a slow settle for the veil */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Shared horizontal inset — keeps content inside the hairline frame */
  --pad: clamp(28px, 5vw, 80px);
}

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

html,
body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background-color: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--taupe);
  color: var(--ivory);
}

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

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

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

/* --------------------------------------------------------------------------
   Atmosphere — film grain + brand-card frame
   -------------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}

/* The frame sits above everything — fully forward over all content,
   including the grain overlay. Side hairlines only — no top/bottom line. */
.frame {
  position: fixed;
  inset: 20px;
  z-index: 2147483647;
  pointer-events: none;
  border-left: 1px solid var(--taupe);
  border-right: 1px solid var(--taupe);
  opacity: 0;
  animation: fade 1.6s var(--ease) 0.2s forwards;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.page {
  position: relative;
}

section {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* --------------------------------------------------------------------------
   Topbar — language toggle, top-right
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  top: clamp(38px, 4.4vw, 56px);
  left: var(--pad);
  right: var(--pad);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.6s var(--ease);
}

/* Visible by default (JS-off fallback). With JS it fades in on load,
   then tucks away once the visitor scrolls into the lookbook so it
   never floats over the photography. */
.js .topbar {
  opacity: 0;
}
.js .topbar.is-shown {
  opacity: 1;
}
.js .topbar.is-tucked {
  opacity: 0;
  pointer-events: none;
}

.topbar__place {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.lang {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lang__btn,
.lang__sep {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.lang__btn {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.lang__btn:hover {
  color: var(--ink);
}

.lang__btn[aria-current="true"] {
  color: var(--ink);
  border-bottom: 1px solid var(--taupe);
}

.lang__sep {
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   Hero — one full viewport
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(106px, 15vh, 168px);
  padding-bottom: clamp(96px, 16vh, 170px);
  /* Warm light pooling toward the upper-centre, gentle settle at the foot. */
  background-image:
    radial-gradient(68% 52% at 50% 30%, #fcf9f2 0%, rgba(252, 249, 242, 0) 62%),
    radial-gradient(82% 60% at 50% 116%, #e6dac5 0%, rgba(230, 218, 197, 0) 60%);
}

/* Each hero child rises into place, one after another. */
.hero > * {
  opacity: 0;
  animation: rise 1.1s var(--ease) forwards;
}
.hero__logo { animation-delay: 0.2s; }
.rule       { animation: draw 0.9s var(--ease) 0.5s forwards; }
.eyebrow    { animation-delay: 0.74s; }
.headline   { animation-delay: 0.92s; }
.subtext    { animation-delay: 1.1s; }
.signup     { animation-delay: 1.28s; }
.scrollcue  { animation-delay: 1.7s; }

.hero__logo {
  width: clamp(116px, 13vh, 152px);
  height: auto;
}

.rule {
  width: 1px;
  height: clamp(30px, 4.4vh, 48px);
  margin: clamp(16px, 2.6vh, 30px) 0 clamp(16px, 2.4vh, 26px);
  background: linear-gradient(
    to bottom,
    rgba(180, 155, 125, 0) 0%,
    var(--taupe) 35%,
    var(--taupe) 100%
  );
  transform-origin: top;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  text-indent: 0.44em;
  color: var(--muted);
}

.headline {
  margin: 20px 0 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.headline em {
  font-style: italic;
  color: #5a4d3d;
}

.subtext {
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  max-width: 42ch;
  font-size: clamp(14px, 1.45vw, 16px);
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: 0.012em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Signup
   -------------------------------------------------------------------------- */

.signup {
  width: 100%;
  max-width: 432px;
  margin-top: clamp(28px, 4vh, 46px);
}

.signup__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.signup__row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 16px;
}

.signup__input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--taupe);
  padding: 10px 2px;
  transition: border-color 0.3s var(--ease);
}

.signup__input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.signup__input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 0 24px;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn:hover {
  background: var(--ink-soft);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  cursor: default;
  opacity: 0.55;
  transform: none;
}

.signup__msg {
  min-height: 1.2em;
  margin: 14px 0 0;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.signup__msg.is-visible {
  opacity: 1;
}

.signup__msg.is-error {
  color: var(--note);
}

.signup.is-done .signup__row,
.signup.is-done .signup__label {
  display: none;
}

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

.scrollcue {
  position: absolute;
  bottom: clamp(26px, 5vh, 52px);
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.scrollcue:hover {
  color: var(--ink);
}

.scrollcue__word {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.scrollcue__arrow {
  width: 1px;
  height: 38px;
  background: linear-gradient(
    to bottom,
    var(--taupe) 0%,
    rgba(180, 155, 125, 0) 100%
  );
  animation: cue 2.4s var(--ease) infinite;
}

/* --------------------------------------------------------------------------
   Lookbook sections
   -------------------------------------------------------------------------- */

.look {
  padding-top: clamp(84px, 14vh, 180px);
  padding-bottom: clamp(84px, 14vh, 180px);
}

.look--cream {
  background: var(--cream);
}

.look__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 clamp(28px, 4vh, 48px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.look__num {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.look__num::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: var(--taupe);
}

/* Image lift — soft warm shadow, no hard edges */
.feature__media,
.split__media {
  overflow: hidden;
  box-shadow: 0 clamp(24px, 4vw, 54px) clamp(46px, 8vw, 96px) -34px
    rgba(58, 44, 30, 0.42);
}

.feature__media img,
.split__media img {
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--ease);
}

.feature:hover .feature__media img,
.split:hover .split__media img {
  transform: scale(1.025);
}

/* --- Feature (01 model, 04 packaging) --- */

.feature {
  margin: 0 auto;
  max-width: 920px;
  text-align: center;
}

.feature__caption {
  margin: clamp(22px, 3.4vh, 38px) auto 0;
  max-width: 32ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.4;
  color: var(--muted);
}

.feature__text {
  margin: clamp(26px, 4vh, 44px) auto 0;
  max-width: 46ch;
}

.feature__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.feature__body {
  margin: 16px 0 0;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}

/* --- Pair (02 the knits) --- */

.pair {
  margin: 0 auto;
  max-width: 1240px;
}

.pair__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(14px, 2vw, 32px);
}

.pair__item {
  margin: 0;
}

.pair__name {
  margin: clamp(14px, 2vh, 20px) 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Flip card (knit tiles in section 02) --- */

.pair__card {
  position: relative;
  width: 100%;
  aspect-ratio: 1122 / 1402;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 1400px;
}

.pair__card:focus { outline: none; }
.pair__card:focus-visible {
  outline: 1px solid var(--taupe);
  outline-offset: 6px;
}

.pair__card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

.pair__card.is-flipped .pair__card-inner {
  transform: rotateY(180deg);
}

.pair__face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 clamp(24px, 4vw, 54px) clamp(46px, 8vw, 96px) -34px
    rgba(58, 44, 30, 0.42);
}

.pair__face--front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.pair__card:hover .pair__face--front img {
  transform: scale(1.025);
}

.pair__face--back {
  transform: rotateY(180deg);
  background: var(--cream);
  display: flex;
  align-items: flex-end;
  padding: 0;
}

/* Back-of-garment photo, filling the face beneath the spec scrim */
.pair__back-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle hint that the card flips */
.pair__flip-cue {
  position: absolute;
  top: clamp(12px, 1.6vw, 18px);
  right: clamp(12px, 1.6vw, 18px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: rgba(247, 243, 235, 0.86);
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0.92;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.pair__flip-icon {
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  position: relative;
}
.pair__flip-icon::before,
.pair__flip-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.pair__flip-icon::before {
  top: 50%;
  left: 2px;
  right: 2px;
  height: 1px;
  transform: translateY(-50%);
}
.pair__flip-icon::after {
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 1px;
  transform: translateX(-50%);
}

.pair__card:hover .pair__flip-cue,
.pair__card:focus-visible .pair__flip-cue {
  opacity: 1;
  transform: translateY(-1px);
}

/* Back face content — frosted scrim panel over the lower half of the photo */
.pair__back {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  padding: clamp(30px, 6vw, 52px) clamp(16px, 2.6vw, 28px) clamp(16px, 2.4vw, 26px);
}

/* The scrim itself: a dark wash that blurs the photo behind the text and
   feathers out at the top so it melts into the sharp image above. Keeps the
   light spec text legible over both the light and dark garment photos. */
.pair__back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(20, 18, 16, 0.9) 0%,
    rgba(20, 18, 16, 0.82) 52%,
    rgba(20, 18, 16, 0) 100%
  );
  -webkit-backdrop-filter: blur(6px) saturate(105%);
  backdrop-filter: blur(6px) saturate(105%);
  -webkit-mask-image: linear-gradient(to top, #000 58%, transparent 100%);
  mask-image: linear-gradient(to top, #000 58%, transparent 100%);
}

.pair__back-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--cream);
  letter-spacing: 0.04em;
}

.pair__back-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--taupe);
  margin: clamp(12px, 1.4vw, 18px) 0 clamp(16px, 2vw, 22px);
}

.pair__specs {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  width: 100%;
}

.pair__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(11px, 1.05vw, 13px);
  line-height: 1.4;
}

.pair__spec-key {
  flex: 0 0 auto;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  font-size: clamp(9px, 0.9vw, 10.5px);
}

.pair__spec-val {
  flex: 1 1 auto;
  text-align: right;
  font-weight: 400;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .pair__card-inner,
  .pair__face--front img,
  .pair__flip-cue {
    transition: none;
  }
}

/* --- Split (03 material) --- */

.split {
  margin: 0 auto;
  max-width: 1060px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}

.split .look__label {
  justify-content: flex-start;
  margin-bottom: 22px;
}

.split__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.split__body {
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  max-width: 42ch;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 300;
  line-height: 1.78;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Closing
   -------------------------------------------------------------------------- */

.closing {
  padding-top: clamp(104px, 18vh, 220px);
  padding-bottom: clamp(104px, 18vh, 220px);
  text-align: center;
}

.closing__line {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.25;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
  padding: clamp(44px, 7vh, 76px) var(--pad) clamp(52px, 9vh, 92px);
}

.social {
  display: flex;
  align-items: center;
  gap: 13px;
}

.social a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.social a:hover {
  color: var(--ink);
}

.social__sep {
  color: var(--sand);
}

.footer__note {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__dot {
  margin: 0 6px;
  color: var(--sand);
}

.footer__legal {
  margin: 0;
}

.footer__legal a {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.footer__legal a:hover {
  color: var(--ink);
  border-bottom-color: var(--taupe);
}

/* --------------------------------------------------------------------------
   Signup — consent
   -------------------------------------------------------------------------- */

.signup__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  text-align: left;
  cursor: pointer;
}

.signup__check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.signup__consent-text {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.signup__consent-text a {
  color: var(--ink);
  border-bottom: 1px solid var(--taupe);
  transition: border-color 0.3s var(--ease);
}

.signup__consent-text a:hover {
  border-bottom-color: var(--ink);
}

.signup.is-done .signup__consent {
  display: none;
}

/* --------------------------------------------------------------------------
   Legal page (privacy.html)
   -------------------------------------------------------------------------- */

.legalbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(34px, 5vw, 54px) var(--pad) 0;
}

.legalbar__home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.legalbar__home:hover {
  color: var(--ink);
}

.legal {
  max-width: 768px;
  margin: 0 auto;
  padding: clamp(46px, 9vh, 96px) var(--pad) clamp(60px, 11vh, 128px);
}

.legal__lang {
  display: none;
}

.legal__lang.is-active {
  display: block;
}

.legal__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-indent: 0.42em;
  text-align: center;
  color: var(--muted);
}

.legal__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.006em;
  text-align: center;
  color: var(--ink);
}

.legal__updated {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--muted);
}

.legal__rule {
  width: 1px;
  height: 46px;
  margin: clamp(28px, 5vh, 54px) auto 0;
  background: linear-gradient(
    to bottom,
    rgba(180, 155, 125, 0) 0%,
    var(--taupe) 40%,
    var(--taupe) 100%
  );
}

.legal__lang h2 {
  margin: clamp(36px, 5.5vh, 56px) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.003em;
  color: var(--ink);
}

.legal__lang p {
  margin: 0.85em 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.82;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.legal__lang ul {
  margin: 0.7em 0 0;
  padding-left: 1.25em;
}

.legal__lang li {
  margin-top: 0.4em;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.82;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.legal__lang strong {
  font-weight: 500;
  color: var(--ink);
}

.legal__lang em {
  font-style: italic;
  color: var(--ink);
}

.legal__lang a {
  color: var(--ink);
  border-bottom: 1px solid var(--taupe);
  transition: border-color 0.3s var(--ease);
}

.legal__lang a:hover {
  border-bottom-color: var(--ink);
}

.legal__addr {
  line-height: 1.7 !important;
}

.legal__fill {
  background: var(--sand);
  color: var(--ink-soft);
  padding: 0 5px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Scroll-reveal
   -------------------------------------------------------------------------- */

/* Hidden only when JS is available — degrades gracefully if it is not. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

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

/* --------------------------------------------------------------------------
   Motion keyframes
   -------------------------------------------------------------------------- */

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

@keyframes fade {
  to { opacity: 1; }
}

@keyframes draw {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes cue {
  0%, 100% { transform: translateY(-6px); opacity: 0.4; }
  50%      { transform: translateY(4px);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero > *,
  .topbar,
  .frame { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
    gap: clamp(26px, 6vw, 44px);
  }
  .split__text {
    text-align: center;
  }
  .split .look__label {
    justify-content: center;
  }
  .split__body {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 940px) {
  .pair__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3.5vw, 40px);
    max-width: 660px;
    margin: 0 auto;
  }
}

@media (max-width: 540px) {
  .pair__grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 36px);
    max-width: 380px;
  }
}

@media (max-width: 540px) {
  .frame { inset: 12px; }

  .signup__row {
    flex-direction: column;
    gap: 18px;
  }
  .btn {
    padding: 14px 24px;
  }
}

/* ==========================================================================
   SIGNATURE-TIER LAYER  ·  "The quiet before"
   Concept: a maison about to open — every motion is a slow reveal, never a
   reaction; the page unveils like fabric in a hushed room. This whole layer
   is gated behind `.enhanced` (withheld under reduced-motion) and behind
   feature checks in script.js, so the calm CSS baseline above is the
   guaranteed fallback.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Opening veil (preloader)
   -------------------------------------------------------------------------- */

.preloader { display: none; }

.enhanced .preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483646; /* above grain, just below the hairline frame */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  background-image:
    radial-gradient(70% 54% at 50% 42%, #fcf9f2 0%, rgba(252, 249, 242, 0) 64%);
  /* Safety net: lift even if the main script never runs. */
  animation: veilAuto 1ms linear 2.2s forwards;
}

.enhanced .preloader.is-lifting {
  transform: translateY(-101%);
  transition: transform 1.05s var(--ease-curtain);
  animation: none;
}

.enhanced .preloader.is-gone {
  display: none;
}

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

.preloader__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 42px);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--ink);
  opacity: 0;
  animation: rise 1s var(--ease-out) 0.15s forwards;
}

.preloader__rule {
  width: 1px;
  height: clamp(26px, 4vh, 40px);
  margin: clamp(16px, 2.4vh, 24px) 0 clamp(13px, 2vh, 18px);
  background: linear-gradient(to bottom, rgba(180, 155, 125, 0), var(--taupe));
  transform-origin: top;
  transform: scaleY(0);
  animation: drawLoad 1.2s var(--ease-curtain) 0.45s forwards;
}

.preloader__sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: fade 1s var(--ease-out) 0.7s forwards;
}

@keyframes drawLoad {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes veilAuto {
  to { transform: translateY(-101%); visibility: hidden; }
}

/* While the veil is up, the hero waits behind it, then begins on lift.
   Delays are pure CSS, so the hero is visible even if word-splitting fails. */
.enhanced .hero__logo { animation-delay: 1.45s; }
.enhanced .rule       { animation-delay: 1.6s; }
.enhanced .eyebrow    { animation-delay: 1.72s; }
.enhanced .subtext    { animation-delay: 2.04s; }
.enhanced .signup     { animation-delay: 2.18s; }
.enhanced .scrollcue  { animation-delay: 2.6s; }

/* --------------------------------------------------------------------------
   Masked headline / heading reveal (the signature "expensive" tell)
   Words rise out of an overflow-clip mask, staggered.
   -------------------------------------------------------------------------- */

.word {
  display: inline-block;
  overflow: hidden;
  /* breathing room so descenders / italic overhang are never clipped */
  padding: 0.08em 0.06em 0.16em;
  margin: -0.08em -0.06em -0.16em;
  vertical-align: top;
}

.word__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.065s);
  will-change: transform;
}

.word__i.is-em {
  font-style: italic;
  color: #5a4d3d;
}

.is-in .word__i,
.headline.is-in .word__i {
  transform: translateY(0);
}

/* The split headline manages its own visibility (overrides the hero pause). */
.headline.is-split {
  opacity: 1 !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   Image "unveil" — fabric drawn back — + quiet parallax drift
   -------------------------------------------------------------------------- */

/* The unveil clips the IMAGE (not the media box) so the soft drop-shadow on
   the wrapper survives. JS owns the transform for parallax — slight overscan
   (scale 1.12) keeps the drift from ever exposing an edge; transform is left
   out of the transition so the per-frame parallax stays instant. The CSS
   hover-zoom is deliberately yielded to parallax here. */
.enhanced .feature__media img,
.enhanced .split__media img {
  transform: scale(1.12) translate3d(0, 0, 0);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-curtain);
  will-change: transform, clip-path;
}

.enhanced .feature__media.is-in img,
.enhanced .split__media.is-in img {
  clip-path: inset(0 0 0 0);
}

/* Soften the block reveal under enhancement so it doesn't compete with the
   image unveil and word rise — a gentle wash-in instead of a slide. */
.enhanced .reveal {
  transform: none;
  transition: opacity 1.1s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Magnetic CTA — eased pull toward the pointer (transform set in JS)
   -------------------------------------------------------------------------- */

.enhanced .btn {
  transition: background-color 0.3s var(--ease), transform 0.5s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Custom cursor — a thin ring that trails the pointer and opens on contact
   -------------------------------------------------------------------------- */

.cursor { display: none; }

.has-cursor .cursor {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483645;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--taupe);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity 0.4s var(--ease-out),
              width 0.32s var(--ease-out),
              height 0.32s var(--ease-out),
              margin 0.32s var(--ease-out),
              background-color 0.32s var(--ease-out),
              border-color 0.32s var(--ease-out);
  will-change: transform;
}

.has-cursor .cursor.is-active { opacity: 0.55; }

/* Opens and warms over interactive elements */
.has-cursor .cursor.is-hot {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(180, 155, 125, 0.1);
  border-color: rgba(180, 155, 125, 0.55);
}

/* Hide the native cursor only once the ring is actually running (`cursor-ready`
   is added by JS), so a script failure never leaves the visitor with no
   pointer. Keep real affordances on text fields for clarity/accessibility. */
.cursor-ready,
.cursor-ready a,
.cursor-ready button,
.cursor-ready .pair__card { cursor: none; }
.cursor-ready input,
.cursor-ready textarea,
.cursor-ready .signup__consent { cursor: auto; }

/* --------------------------------------------------------------------------
   Reduced motion — belt-and-braces (enhanced is already withheld, but guard
   anyway in case the layer is ever forced on).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  .cursor { display: none !important; }
  .word__i { transform: none !important; transition: none !important; }
  .enhanced .feature__media img,
  .enhanced .split__media img {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .enhanced .hero__logo,
  .enhanced .rule,
  .enhanced .eyebrow,
  .enhanced .subtext,
  .enhanced .signup,
  .enhanced .scrollcue { animation-delay: 0ms !important; }
}