/* ==========================================================================
   B Well Femme — landing page
   style.css: tokens, reset, type, buttons, shared components, motion.
   Section layouts live in sections.css.

   Every size here comes from the 1440px Figma frame. Font sizes were matched
   on text WIDTH against the design (see _dev/calib.html), which is what
   decides where each line breaks.
   ========================================================================== */

/* ---- Fonts (self-hosted, supplied with the design) -------------------- */
@font-face { font-family: 'Milano Perla'; src: url(/assets/fonts/milano-perla/milano-perla.otf) format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-garamond/CormorantGaramond-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-garamond/CormorantGaramond-Italic.ttf) format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-garamond/CormorantGaramond-Medium.ttf) format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-garamond/CormorantGaramond-MediumItalic.ttf) format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-garamond/CormorantGaramond-SemiBold.ttf) format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-garamond/CormorantGaramond-SemiBoldItalic.ttf) format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }

:root {  --plum:       #3a1526;   /* header, headings on light grounds */
  --plum-deep:  #250e18;   /* footer */
  --ink:        #3b2a2c;   /* running text on light grounds */
  --ink-soft:   #6e5a5c;   /* small print */
  --cream:      #f4eee2;   /* welcome, invitation */
  --ivory:      #fcf9f2;   /* experience, faq, cards */
  --brass:      #ae9164;   /* rules, markers, eyebrow on dark */
  --light:      #f4eee2;   /* text on dark grounds */
  --line:       rgba(107, 76, 59, 0.28);

  --gold:       linear-gradient(90deg, #644420 0%, #a87c49 28.4%, #efc287 53.4%, #966e3e 75%, #5e3f1c 100%);
  --gold-btn:   linear-gradient(90deg, #8a6236 0%, #b88c55 30%, #e9c48d 55%, #a57b47 78%, #6f4c28 100%);

  --script: 'Milano Perla', 'Brush Script MT', cursive;
  --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:   'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --inter:  'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --container: 1296px;
  --gutter: 72px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 30px;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Desktop below the design width: the whole page is the 1440 frame scaled
   down, so columns and line breaks stay exactly the Figma's. The head script
   sets --z precisely (viewport / 1440); these steps cover a page without JS. */
.page { zoom: var(--z, 1); overflow-x: clip; }
@media (min-width: 1200px) and (max-width: 1279px) { :root { --z: 0.833; } }
@media (min-width: 1280px) and (max-width: 1365px) { :root { --z: 0.889; } }
@media (min-width: 1366px) and (max-width: 1439px) { :root { --z: 0.948; } }

.container {
  position: relative;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

[id] { scroll-margin-top: 24px; }

/* ---- Type ------------------------------------------------------------- */

/* small uppercase label led by a short brass rule */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: -2px 24px 0 0;
  width: 32px;
  height: 1px;
  background: var(--brass);
}
.eyebrow--light { color: rgba(244, 238, 226, 0.78); }
.eyebrow--gold  { color: var(--brass); }
.eyebrow--sm    { font-size: 9px; letter-spacing: 0.14em; }
.eyebrow--sm::before { width: 24px; margin-right: 16px; }
.eyebrow .dot   { margin: 0 0.5em; }

/* section heading: the script face */
.h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: 52px;
  line-height: 63px;
  color: var(--plum);
}
.h2--light { color: var(--light); }

/* text filled with the brass gradient */
.gold-text {
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gold-text--light {
  background-image: linear-gradient(90deg, #a87c49 0%, #d9ad74 35%, #efc287 60%, #c0955c 100%);
}
.gold-text--deep {
  background-image: linear-gradient(90deg, #6b4a26 0%, #8f6a3d 30%, #c9a06a 55%, #d9b484 75%, #b08752 100%);
}

/* running copy blocks */
.copy p + p { margin-top: 18px; }
.copy--tight p + p { margin-top: 24px; }
.copy--light { color: rgba(244, 238, 226, 0.82); }

/* short and medium brass rules */
.rule-sm, .rule-md { display: block; height: 1px; background: var(--brass); }
.rule-sm { width: 50px; }
.rule-md { width: 280px; background: rgba(174, 145, 100, 0.55); }
.rule-sm--center { margin: 0 auto; }

/* sparkle-marked list */
.marks li {
  position: relative;
  padding-left: 38px;
}
.marks li + li { margin-top: 18px; }
.marks li::before {
  content: '';
  position: absolute;
  left: 1px; top: 7px;
  width: 16px; height: 16px;
  background: url(/assets/icons/marker.svg) center / contain no-repeat;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 56px;
  padding: 0 36px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-position 0.6s var(--ease-out), background-color 0.35s, color 0.35s;
}
.btn__arrow { width: 12px; height: 12px; flex: none; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: var(--gold-btn);
  background-size: 160% 100%;
  background-position: 0 0;
  color: #3a1f17;
}
.btn--gold.btn--deep {
  background-image: linear-gradient(90deg, #5e3f1c 0%, #8d6638 28%, #e8bd85 50%, #8d6638 72%, #5e3f1c 100%);
  background-size: 100% 100%;
  color: #fbf3e6;
}
/* a sheen sweeps across on hover */
.btn--gold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  z-index: -1;
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(58, 21, 38, 0.22); background-position: 100% 0; }
.btn--gold:hover::after { transform: translateX(120%); }

.btn--line {
  border: 1px solid rgba(244, 238, 226, 0.7);
  color: var(--light);
}
.btn--line:hover { background: rgba(244, 238, 226, 0.12); transform: translateY(-2px); }
.btn--line.btn--dark { border-color: var(--plum); color: var(--plum); }
.btn--line.btn--dark:hover { background: var(--plum); color: var(--light); }
.btn--sm { height: 44px; padding: 0 28px; font-size: 11px; }
.btn--block { display: flex; width: 100%; }

/* ---- Form card -------------------------------------------------------- */
.form-card {
  background: var(--ivory);
  border: 1px solid rgba(174, 145, 100, 0.5);
  padding: 50px 50px 66px;
  margin-top: 2px;
}
.form-card__title {
  font-family: var(--script);
  font-weight: 400;
  font-size: 39px;
  line-height: 48px;
  color: var(--plum);
}
.form-card__sub {
  margin-top: 12px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(174, 145, 100, 0.5);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-soft);
}
.form-card__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 29px 18px;
  margin-top: 31px;
}
.field { display: block; }
.field--full { grid-column: 1 / -1; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum);
}
.field__label em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0.02em; color: var(--brass); }
.field input, .field textarea {
  display: block;
  width: 100%;
  height: 53px;
  padding: 0 16px;
  border: 1px solid rgba(174, 145, 100, 0.55);
  border-radius: 0;
  background: var(--cream);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.field textarea { height: 139px; padding: 14px 16px; resize: none; line-height: 22px; }
.field input::placeholder, .field textarea::placeholder { color: #a6968f; opacity: 1; }
.field input:focus, .field textarea:focus { border-color: var(--brass); background: #fffdf8; box-shadow: 0 0 0 3px rgba(174, 145, 100, 0.15); }

.consent {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  font-size: 12px;
  line-height: 19px;
  color: var(--ink-soft);
  cursor: pointer;
}
.consent input {
  flex: none;
  appearance: none;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  border: 1px solid rgba(58, 21, 38, 0.6);
  background: var(--ivory);
  cursor: pointer;
  display: grid; place-content: center;
}
.consent input::after {
  content: '';
  width: 9px; height: 5px;
  border: solid var(--plum); border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s var(--ease-out);
  margin-top: -2px;
}
.consent input:checked::after { transform: rotate(-45deg) scale(1); }

.form-card .btn--block { margin-top: 24px; }
.form-card__note { margin-top: 24px; font-size: 11px; line-height: 14px; color: #a6968f; }
.form-status { font-size: 13px; line-height: 20px; }
.form-status:empty { display: none; }
.form-status { margin-top: 14px; }
.form-status.is-error { color: #9b2c3c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Cursor ring (fine pointers only) --------------------------------- */
.cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 34px; height: 34px;
  border: 1px solid rgba(174, 145, 100, 0.85);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-radius 0.3s, background-color 0.3s;
}
.cursor-ring.is-awake { opacity: 1; }
.cursor-ring.is-hot { width: 48px; height: 48px; background: rgba(174, 145, 100, 0.1); }
.cursor-ring.is-magnet { border-radius: 999px; background: rgba(174, 145, 100, 0.08); }
.cursor-ring.is-down { background: rgba(174, 145, 100, 0.2); }
.cursor-pop {
  position: fixed; left: 0; top: 0; z-index: 9998;
  width: 30px; height: 30px;
  border: 1px solid rgba(174, 145, 100, 0.6);
  border-radius: 999px;
  pointer-events: none;
  animation: cursor-pop 0.5s var(--ease-out) forwards;
}
@keyframes cursor-pop { to { opacity: 0; } }

/* ---- Scroll reveal ---------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* hero entrance */
.js .hero__inner > * { animation: rise 1s var(--ease-out) both; }
.js .hero__inner > :nth-child(2) { animation-delay: 0.08s; }
.js .hero__inner > :nth-child(3) { animation-delay: 0.18s; }
.js .hero__inner > :nth-child(4) { animation-delay: 0.28s; }
.js .hero__inner > :nth-child(5) { animation-delay: 0.36s; }
.js .hero__inner > :nth-child(6) { animation-delay: 0.44s; }
.js .hero__bg { animation: settle 2.2s var(--ease-out) both; }
@keyframes rise   { from { opacity: 0; transform: translateY(24px); } }
@keyframes settle { from { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}