/* =========================================================================
   BOLCHAT INK — site.css
   Quiet luxury. Dark, copper, cinematic. Mobile-first.
   Breakpoints: 768px, 1100px. All colour/spacing/type goes through the
   custom properties in :root — if Paula (or whoever maintains this) wants
   to shift the palette, change it there and nowhere else.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. FONT FACES — self-hosted Cormorant Garamond, variable, woff2 only.
   Exact blocks as specified in fonts/README.txt.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("../fonts/CormorantGaramond-Variable.woff2") format("woff2-variations"),
    url("../fonts/CormorantGaramond-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("../fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2-variations"),
    url("../fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   2. DESIGN TOKENS — direction 03 "Dubai Dusk, Rio Soul".
   Nothing pure white, nothing glossy. Copper is matte — resist the urge
   to add gradients/shine to it.
   ---------------------------------------------------------------------- */
:root {
  /* palette */
  --ground: #16110D;      /* page background */
  --panel: #221A14;       /* card / section-alt background */
  --ink: #EAE2D2;         /* primary text on dark */
  --muted: #A2907A;       /* secondary text, captions */
  --copper: #B06A35;      /* primary accent, matte — buttons, links */
  --brass: #C5A25D;       /* secondary accent — ornament, hairlines */
  --cream: #E7E1D6;       /* cream light — rare, high-emphasis text */

  /* derived / functional */
  --ground-veil-top: rgba(16, 12, 9, .44);
  --ground-veil-bottom: rgba(16, 12, 9, .74);
  --panel-translucent: rgba(34, 26, 20, .86);
  --hairline: rgba(197, 162, 93, .22);
  --focus-ring: var(--copper);
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, .35);

  /* type */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* rhythm */
  --container-max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 10vw, 8rem);
  --radius: 2px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 240ms;
  --dur-med: 700ms;
  --dur-slow: 1100ms;
}

/* -------------------------------------------------------------------------
   3. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* anchor links only — no scroll-hijack JS */
}
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .94rem + .3vw, 1.125rem);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-braces; layout should never actually need this */
}
img, picture, video { display: block; max-width: 100%; height: auto; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
svg { display: block; }

/* skip link — keyboard accessibility */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;            /* fully off-canvas until focused (−3rem left a sliver visible) */
  background: var(--copper);
  color: var(--ground);
  padding: .6em 1em;
  z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* visible focus states everywhere — copper outline, never removed */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* Holds the <symbol id="orn"> definition at the top of body — never
   painted directly (symbols only render via <use>), just kept out of the
   layout entirely. Standard "SVG sprite" pattern. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   4. TYPE
   ---------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brass);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--cream);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.9rem, 1.5rem + 2.2vw, 3.1rem);
  font-weight: 500;
  margin-block-end: .5em;
}

h3 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); font-weight: 500; }

.italic-accent {
  font-style: italic;
  font-weight: 400;
}

p { max-width: 62ch; }
.lede { color: var(--muted); }

/* -------------------------------------------------------------------------
   5. LAYOUT
   ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.section-pad {
  padding-block: var(--section-pad);
}

.section-head {
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}
.section-head h2 { margin-block-start: .5rem; }

.section-alt { background: var(--panel); }

/* -------------------------------------------------------------------------
   6. NAV — transparent over hero, gains dark ground on scroll.
   ---------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: clamp(.9rem, 2vw, 1.4rem);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              backdrop-filter var(--dur-fast) var(--ease-out);
}
.site-nav.is-scrolled {
  background: var(--panel-translucent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo { display: block; }
/* The wordmark is inlined as an SVG (CSS mask was unreliable in Safari and
   over file://). Colour flows through currentColor. */
.nav-logo{ color: var(--ink); display: inline-flex; }
.nav-logo:hover, .nav-logo:focus-visible{ color: var(--copper); }
.nav-lockup{
  display: flex; flex-direction: column; align-items: center; gap: .18em;
  text-decoration: none;
}
.nav-lockup b{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.55rem);
  letter-spacing: .34em; padding-inline-start: .34em; /* optical centre */
  color: currentColor; line-height: 1;
}
.nav-lockup i{
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(.68rem, .62rem + .28vw, .84rem);
  letter-spacing: .22em; padding-inline-start: .22em;
  color: var(--brass); line-height: 1;
}
.js .nav-lockup{ opacity: 0; animation: wm-in 900ms var(--ease-out) 250ms forwards; }
@keyframes wm-in{ from{ opacity: 0; transform: translateY(-4px);} to{ opacity: 1; transform: none;} }

/* -------------------------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.9em;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn--primary {
  background: var(--copper);
  color: var(--ground);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--brass);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--copper);
  color: var(--cream);
}
.btn--nav {
  padding: .75em 1.5em;
  font-size: .72rem;
}
.btn--whatsapp {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
  /* This label is long ("Message Paula on WhatsApp") — every other button
     on the site is short enough to stay on one line, but this one needs
     to be allowed to wrap at narrow widths rather than force its container
     wider (see .list-form-wrap, .whatsapp-cta min-width:0 above). */
  white-space: normal;
  text-align: center;
}
.btn--whatsapp:hover, .btn--whatsapp:focus-visible {
  border-color: var(--brass);
  color: var(--cream);
}
.btn--block { width: 100%; }

/* -------------------------------------------------------------------------
   8. HERO
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-media-wrap {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--ground);
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* poster sits underneath at all times; video crossfades in on top once it
   is confirmed playing (see js/site.js). If the video 404s, errors, or
   prefers-reduced-motion is set, it simply never gets .is-visible and the
   poster is all that's ever seen. */
.hero-video {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hero-video.is-visible { opacity: 1; }
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--ground-veil-top) 0%, var(--ground-veil-bottom) 100%);
}
.hero-content {
  position: relative;
  padding-inline: var(--gutter);
  padding-block: clamp(6rem, 16vh, 9rem) 4rem;
  max-width: 46rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1rem);
}
.hero-lockup { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.hero-lockup .brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  /* The wordmark is the signature, not the headline — smaller than the tagline below.
     Never allowed to wrap: a broken wordmark reads as a mistake. */
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
  letter-spacing: .32em;
  padding-inline-start: .32em; /* optical centre: compensates trailing tracking */
  white-space: nowrap;
  text-transform: uppercase; /* markup stays "Bolchat Ink" for screen readers/SEO;
                                 the tracked-caps look per spec is presentational only */
  color: var(--cream);
  line-height: 1;
}
.hero-lockup .brand-concept {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, .95rem + .8vw, 1.4rem);
  color: var(--brass);
  letter-spacing: .02em;
}
.hero-tagline {
  /* The message. The largest thing on the page. */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.9rem, 1.7rem + 6.2vw, 6.2rem);
  line-height: 1.05;
  letter-spacing: -.005em;
  color: var(--cream);
  margin-block-start: 0;
  text-wrap: balance;
}
.hero-sentence {
  color: var(--ink);
  opacity: .82;
  font-size: clamp(1rem, .92rem + .35vw, 1.15rem);
  max-width: 34rem;
  margin-block-start: 1.1rem;
}
.hero-cta { margin-block-start: 1rem; }
.hero-note {
  color: var(--muted);
  font-size: .8rem;
  max-width: 30rem;
  margin-block-start: .75rem;
}

.hero-reel-caption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.hero-reel-caption.is-visible { opacity: 1; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  transform: translateX(-50%);
  width: 20px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-cue::before {
  content: "";
  width: 3px;
  height: 6px;
  background: var(--brass);
  border-radius: 2px;
  animation: scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(9px); opacity: 0; }
  71% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* hero entrance — staggered fade+rise, driven by JS adding .is-ready to hero */
.js .hero [data-hero-in] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.hero.is-ready [data-hero-in] { opacity: 1; transform: translateY(0); }
.hero.is-ready [data-hero-in="1"] { transition-delay: 0ms; }
.hero.is-ready [data-hero-in="2"] { transition-delay: 80ms; }
.hero.is-ready [data-hero-in="3"] { transition-delay: 160ms; }
.hero.is-ready [data-hero-in="4"] { transition-delay: 240ms; }
.hero.is-ready [data-hero-in="5"] { transition-delay: 320ms; }
.hero.is-ready [data-hero-in="6"] { transition-delay: 400ms; }

/* -------------------------------------------------------------------------
   9. SCROLL-REVEAL — generic fade+rise for sections (IntersectionObserver
   toggles .is-visible once; see js/site.js).
   ---------------------------------------------------------------------- */
/* Hidden-until-revealed ONLY when JS is running (html.js). Without JS, or if the
   script fails to load, everything is simply visible. Progressive enhancement. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* -------------------------------------------------------------------------
   10. WORK GRID
   ---------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.work-item {
  min-width: 0;
  position: relative;
}
.work-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  transform-style: preserve-3d;
  perspective: 900px;
}
.work-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}
.work-frame .sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(231, 225, 214, 0) 40%, rgba(231, 225, 214, .16) 50%, rgba(231, 225, 214, 0) 60%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.work-caption {
  margin-block-start: .8em;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: clamp(.9rem, .85rem + .2vw, 1rem);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* hover/tilt only where a real pointer + hover exist */
@media (hover: hover) and (pointer: fine) {
  .work-frame img { will-change: transform; }
  .work-item:hover .work-frame img { transform: scale(1.03); }
  .work-item:hover .work-frame .sheen { opacity: 1; }
  .work-item:hover .work-caption { transform: translateY(-2px); color: var(--cream); }
}

/* -------------------------------------------------------------------------
   11. WHO SHE IS
   ---------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
.about-photo {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.about-copy h2 { font-style: italic; }
.about-copy p + p { margin-block-start: 1.1em; }
.about-copy p { color: var(--ink); max-width: 56ch; }

/* -------------------------------------------------------------------------
   12. EXPERIENCE RAIL
   ---------------------------------------------------------------------- */
.experience-rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: .5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--copper) transparent;
}
.experience-step {
  scroll-snap-align: start;
  flex: 0 0 78%;
  max-width: 340px;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.experience-step + .experience-step { margin-inline-start: 1rem; }
.experience-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--copper);
  line-height: 1;
  display: block;
  margin-block-end: .6rem;
}
.experience-step h3 { margin-block-end: .4em; }
.experience-step p { color: var(--muted); max-width: none; }

.ornament-divider {
  display: none; /* shown from 768 up, between rail items, as a row-flow visual beat */
}

/* -------------------------------------------------------------------------
   13. FIRST-TIMER
   ---------------------------------------------------------------------- */
.first-timer { text-align: center; }
.first-timer .container { max-width: 760px; }
.first-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 2.4vw, 2.5rem);
  color: var(--cream);
  line-height: 1.28;
}
.first-quote-sub {
  margin-block-start: 1.1rem;
  color: var(--brass);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
}
.reassurances {
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 1.75rem;
  text-align: left;
}
.reassurances li {
  position: relative;
  padding-inline-start: 1.6rem;
  color: var(--ink);
}
.reassurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
}

/* -------------------------------------------------------------------------
   14. THE LIST — conversion block
   ---------------------------------------------------------------------- */
.list-section { background: var(--panel); }
.list-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
.list-copy p { color: var(--muted); margin-block-start: .75rem; max-width: 42ch; }
.list-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Same rule as the work grid: flex/grid children default to a content-based
   minimum width, which lets a long, unbreakable string (the WhatsApp
   button's label) force the whole row wider than its container. min-width:0
   lets them actually shrink to the space available instead of overflowing. */
.list-form-wrap, .whatsapp-cta {
  min-width: 0;
}

.ml-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  max-width: 420px;
}
.ml-field { display: flex; flex-direction: column; gap: .5rem; }
.ml-field label {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.ml-field input[type="email"] {
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .9em 1em;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ml-field input[type="email"]::placeholder { color: var(--muted); opacity: .7; }
.ml-field input[type="email"]:focus { border-color: var(--copper); }
.ml-field input[aria-invalid="true"] { border-color: #C2604A; }
.ml-error {
  font-size: .82rem;
  color: #D98A72;
  min-height: 1.2em;
}
.ml-form-note { font-size: .78rem; color: var(--muted); }

.ml-success {
  display: none;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--ground);
  max-width: 420px;
}
.ml-success.is-visible { display: block; }
.ml-success p { color: var(--cream); font-family: var(--font-display); font-size: 1.15rem; font-style: italic; }
.ml-form.is-hidden { display: none; }

.whatsapp-cta {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-start;
}
.whatsapp-cta p { color: var(--muted); font-size: .88rem; }

/* -------------------------------------------------------------------------
   15. FOOTER — "quiet proof"
   ---------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block-end: clamp(2rem, 5vw, 3rem);
}
.footer-quotes { display: grid; gap: 1.5rem; }
.footer-quotes blockquote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 1.05rem;
  border-left: 2px solid var(--copper);
  padding-inline-start: 1rem;
}
.footer-quotes blockquote cite {
  display: block;
  margin-block-start: .5em;
  font-style: normal;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-meta {
  display: grid;
  gap: .6rem;
  color: var(--muted);
  font-size: .9rem;
}
.footer-meta a { color: var(--brass); }
.footer-meta a:hover, .footer-meta a:focus-visible { color: var(--cream); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block-start: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: .8rem;
  color: var(--muted);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--cream); }

/* -------------------------------------------------------------------------
   16. ORNAMENT
   ---------------------------------------------------------------------- */
.ornament {
  display: block;
  margin-inline: auto;
  width: 48px;
  height: auto;
  overflow: visible;
}
.ornament--divider { width: 40px; margin-block: clamp(2rem, 5vw, 3rem) auto; }
.ornament--large { width: clamp(90px, 16vw, 140px); margin-block: clamp(1.5rem, 4vw, 2.5rem); }
/* self-draw state: JS sets stroke-dasharray/dashoffset inline per path;
   this just guarantees a sane pre-JS fallback (fully visible, static). */
.ornament path { stroke-dashoffset: 0; }
.ornament circle { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
.ornament.is-drawing circle { opacity: 0; }
.ornament.is-drawn circle { opacity: 1; }

/* -------------------------------------------------------------------------
   17. SIMPLE PAGES (privacy / terms)
   ---------------------------------------------------------------------- */
.legal-page {
  padding-block: clamp(7rem, 14vh, 9rem) var(--section-pad);
}
.legal-page .container { max-width: 760px; }
.legal-page h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); margin-block-end: .3em; }
.legal-page h2 { font-size: clamp(1.3rem, 1.15rem + .8vw, 1.6rem); margin-block-start: 2rem; }
.legal-page p, .legal-page li { color: var(--ink); max-width: 68ch; }
.legal-page p + p { margin-block-start: 1em; }
.legal-note {
  margin-block-start: 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .9rem;
}
.legal-note strong { color: var(--brass); }
.legal-updated { color: var(--muted); font-size: .85rem; margin-block-end: 2rem; }

/* =========================================================================
   BREAKPOINT: 768px
   ========================================================================= */
@media (min-width: 768px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }

  .about-grid { grid-template-columns: 1fr 1.1fr; }
  .about-photo { order: 0; }
  .about-copy { order: 1; }

  /* 768–1099: keep the horizontal scroll-snap rail (it reads well on tablets);
     the five-across row only happens from 1100 where there is room for it. */
  .experience-step { flex: 0 0 46%; max-width: 360px; }

  .ornament-divider {
    display: none; /* shown from 1100 with the row layout */
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(28px, 4vw, 44px);
  }
  .ornament-divider .ornament { width: 100%; }

  .list-inner { grid-template-columns: 1.1fr 1fr; }
  /* form and WhatsApp stack as primary-then-alternative — the side-by-side
     split cramped the WhatsApp label against its border */
  .list-actions { max-width: 460px; }

  .footer-top { grid-template-columns: 1.1fr .9fr; }
}

/* =========================================================================
   BREAKPOINT: 1100px
   ========================================================================= */
@media (min-width: 1100px) {
  .experience-rail {
    overflow-x: visible;
    flex-wrap: nowrap;
    margin-inline: 0;
    padding-inline: 0;
    align-items: stretch;
  }
  .experience-step { flex: 1 1 0; max-width: none; padding: 1.6rem 1.4rem; }
  .experience-step + .experience-step { margin-inline-start: 0; }
  .experience-step h3 { font-size: 1.2rem; text-wrap: balance; }
  .experience-step p { font-size: .95rem; }
  .ornament-divider { display: flex; }

  .work-grid { gap: 2rem; }
  .about-grid { grid-template-columns: 1fr 1.2fr; gap: 5rem; }
  .list-inner { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   18. TILT (desktop, pointer:fine + hover:hover only — JS gated as well)
   ---------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .work-frame { transition: transform var(--dur-fast) var(--ease-out); }
}

/* -------------------------------------------------------------------------
   19. REDUCED MOTION — kill every transition/animation outright.
   JS also checks matchMedia once and skips attaching any motion behaviour;
   this is the CSS-only backstop for anything JS-driven that still lands
   an inline style.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero [data-hero-in] { opacity: 1 !important; transform: none !important; }
  .scroll-cue::before { animation: none !important; }
}


/* =========================================================================
   V2 LAYER — spacing system + new components (appended; later rules win)
   ========================================================================= */

/* ---- rhythm: one scale, every section obeys it -------------------------- */
:root{
  --s-section: clamp(5.5rem, 11vw, 9rem);      /* between sections           */
  --s-head:    clamp(2.75rem, 5.5vw, 4.25rem); /* section head -> content    */
  --s-block:   clamp(1.75rem, 3vw, 2.5rem);    /* between blocks in section  */
}
.section-pad{ padding-block: var(--s-section); }
.section-head{ margin-block-end: var(--s-head); }
.section-head h2{ margin-block-start: .35em; }
.section-head .eyebrow{ display:flex; align-items:center; gap:1rem; }
.section-head .eyebrow::after{ content:""; flex:1; height:1px; background: var(--hairline, rgba(234,226,210,.14)); }

/* captions: fixed two-line box so grid rows share a baseline */
.work-caption{ min-height: 2.7em; margin-block-start: .9em; }
.work-grid{ row-gap: clamp(2.25rem, 4vw, 3rem); }

/* about: cap the measure, align the top edge of photo and eyebrow */
.about-grid{ align-items: start; }
.about-copy p{ max-width: 56ch; }
.about-copy h2{ margin-block: .3em .55em; }
.about-cta{ margin-block-start: var(--s-block); }

/* ---- quiet link CTA ----------------------------------------------------- */
.link-quiet{
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  color: var(--ink); text-decoration: none;
  border-block-end: 1px solid var(--copper);
  padding-block-end: .18em;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.link-quiet em, .link-quiet span{ color: var(--copper); font-style: inherit; }
.link-quiet:hover{ color: var(--cream); border-color: var(--brass); }
.section-cta{ margin-block-start: var(--s-block); text-align: center; }

/* ---- story band --------------------------------------------------------- */
.story-band{
  border-block: 1px solid rgba(234,226,210,.10);
  background: var(--panel);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.story-cities{
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap;
}
.story-city{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.9rem);
  color: var(--cream); letter-spacing: .01em; white-space: nowrap;
}
.story-city i{
  font-style: italic; color: var(--muted);
  font-size: .48em; margin-inline-start: .35em; letter-spacing: .08em;
}
.story-arrow{ color: var(--copper); font-size: clamp(1.2rem, 2.4vw, 1.9rem); transform: translateY(-.1em); }

/* ---- filmstrip marquee --------------------------------------------------- */
.strip{ overflow: hidden; margin-block-start: var(--s-head); }
.strip-track{
  display: flex; gap: 14px; width: max-content;
  animation: strip-pan 60s linear infinite;
}
.strip:hover .strip-track{ animation-play-state: paused; }
.strip-track img{
  height: clamp(150px, 22vw, 230px); width: auto; display: block;
  border: 1px solid rgba(234,226,210,.10);
  filter: saturate(.92);
}
@keyframes strip-pan{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-50%,0,0);} }

/* ---- ritual progress line ------------------------------------------------ */
.ritual-wrap{ position: relative; }
.ritual-line{ display: none; }
@media (min-width: 1100px){
  .ritual-line{
    display: block; position: absolute;
    inset-inline: var(--gutter); top: -1.6rem; height: 1px;
    background: rgba(234,226,210,.10);
  }
  .ritual-line i{
    display: block; height: 1px; width: 100%;
    background: linear-gradient(90deg, var(--copper), var(--brass));
    transform: scaleX(0); transform-origin: left center;
  }
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{ margin-block-start: var(--s-head); text-align: left; }
.faq-heading{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 1.2rem + 1vw, 1.8rem);
  margin-block-end: 1.1rem; color: var(--cream);
}
.faq-item{ border-block-start: 1px solid rgba(234,226,210,.12); }
.faq-item:last-child{ border-block-end: 1px solid rgba(234,226,210,.12); }
.faq-item summary{
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 1.05rem;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+"; font-family: var(--font-body); color: var(--copper);
  font-size: 1.1em; line-height: 1; transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary{ color: var(--cream); }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item summary:hover{ color: var(--cream); }
.faq-a{ padding-block: 0 1.3rem; }
.faq-a p{ color: var(--muted); max-width: 60ch; font-size: .98rem; }

/* first-timer container widens slightly to hold the FAQ comfortably */
.first-timer .container{ max-width: 820px; }

/* ---- FOMO band ----------------------------------------------------------- */
.fomo-band{
  background: var(--panel);
  border-block: 1px solid rgba(234,226,210,.10);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.fomo-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); text-align: center;
}
.fomo-item b{
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); line-height: 1;
  color: var(--copper); font-variant-numeric: tabular-nums;
  margin-block-end: .35em;
}
.fomo-item span{
  font-size: clamp(.8rem, .75rem + .3vw, .95rem);
  color: var(--muted); letter-spacing: .05em;
}
@media (max-width: 767px){
  .fomo-grid{ grid-template-columns: 1fr; gap: 1.9rem; }
}

/* ---- sticky CTA pill ------------------------------------------------------ */
.sticky-cta{
  position: fixed; z-index: 90;
  inset-inline-end: clamp(1rem, 3vw, 2rem); inset-block-end: clamp(1rem, 3vw, 1.75rem);
  display: inline-flex; align-items: center; gap: .55em;
  padding: .8em 1.35em;
  background: var(--copper); color: #16110D;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sticky-cta.is-shown{ opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta-dot{
  width: 7px; height: 7px; border-radius: 50%; background: #16110D;
  animation: cta-pulse 2.4s ease-in-out infinite;
}
@keyframes cta-pulse{ 0%,100%{ opacity: .35;} 50%{ opacity: 1;} }
@media (max-width: 767px){
  /* centred pill: anchor at 50% and pull back by HALF ITS OWN width */
  .sticky-cta{ inset-inline: 50% auto; transform: translate(-50%, 12px);
               white-space: nowrap; max-width: calc(100vw - 2rem); }
  .sticky-cta.is-shown{ transform: translate(-50%, 0); }
}

/* ---- hero ken burns when no reel is playing ------------------------------- */
.no-reel .hero-poster{ animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns{
  from{ transform: scale(1) translateY(0); }
  to{   transform: scale(1.08) translateY(-1.5%); }
}

/* ---- v2 reduced-motion additions ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .strip-track{ animation: none; }
  .no-reel .hero-poster{ animation: none; }
  .sticky-cta-dot{ animation: none; }
  .ritual-line i{ transform: scaleX(1) !important; }
}

/* v2.1 polish */
.section-cta{ max-width: none; }                 /* the global p measure was un-centring it */
@media (max-width: 767px){
  .btn--whatsapp{ width: 100%; text-align: center; }
}


/* ===================== v2.1 — Doug's final tweaks ===================== */

/* 5. lining figures: Cormorant defaults to oldstyle ("30" rendered as ʒo and
   sat oddly against its caption). Lining figures align on the baseline. */
.fomo-item b{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
/* 6. the stat captions were tracked too wide — the double-o of "doors" read
   gappy. Tighten, and give the band's caption row a shared optical centre. */
.fomo-item span{ letter-spacing: .02em; }

/* 7. map links: quiet underline, brass on hover */
.map-link{
  color: inherit; text-decoration: none;
  border-block-end: 1px solid rgba(197,162,93,.45);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.map-link:hover, .map-link:focus-visible{ color: var(--brass); border-color: var(--brass); }

/* 9. WhatsApp: full-width secondary action under the form, "or" divider above */
.btn--whatsapp{
  display: block; width: 100%; text-align: center; white-space: normal;
  padding: 13px 26px; border-width: 1px;
}
.whatsapp-cta::before{
  content: "or";
  display: block; width: 100%; text-align: center;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-block: 1.2rem .9rem;
}

/* 3. draggable filmstrip */
.strip{ cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.strip.is-dragging{ cursor: grabbing; }
.strip.is-js .strip-track{ animation: none; }   /* JS owns motion once it takes over */
.strip-track img{ pointer-events: none; }        /* images never swallow the drag */
@media (prefers-reduced-motion: reduce){
  .strip{ overflow-x: auto; }                    /* native swipe, no auto-pan */
  .strip.is-js .strip-track{ animation: none; }
}


/* ===================== v2.2 — centring audit ===================== */
/* The global p{max-width:62ch} left-aligns the BOX of any centred paragraph;
   auto inline margins re-centre the box itself. */
.first-quote, .first-quote-sub{ margin-inline: auto; }
.ml-form-note{ margin-inline: auto; text-align: center; }
.whatsapp-cta p{ margin-inline: auto; text-align: center; }

/* ===================== booking path (GetInk) ===================== */
.book-now{ margin-block-start: 2.2rem; padding-block-start: 1.8rem;
  border-block-start: 1px solid rgba(234,226,210,.12); }
.book-now-lead{ font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--cream);
  margin-block-end: 1rem; }
.book-now .btn{ display: inline-block; }
.book-now-note{ font-size: .82rem; color: var(--muted); margin-block-start: .8rem; }

/* ===================== reviews band ===================== */
.reviews-band{ background: var(--panel); border-block: 1px solid rgba(234,226,210,.08); }
.reviews-pair{ display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.review-big{ margin: 0; max-width: 56ch; }
.review-big .review-stars{
  display: block; color: var(--brass); letter-spacing: .35em;
  font-size: .85rem; margin-block-end: .9rem; }
.review-big p{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 1.4vw, 1.9rem); line-height: 1.45;
  color: var(--cream); max-width: none; }
.review-big cite{
  display: block; font-style: normal; margin-block-start: 1rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); }
@media (min-width: 900px){
  .review-big--offset{ margin-inline-start: auto; text-align: right; }
  .review-big--offset .review-stars{ letter-spacing: .35em; }
}

/* ===================== v3 — booking-first + review rotator ===================== */
.btn--lg{ padding: 15px 34px; font-size: .82rem; }
.waitlist-lead{
  font-size: .92rem; color: var(--muted); margin-block-end: 1rem; max-width: 34ch; }
.book-now{ border-block-start: 0; padding-block-start: .4rem; margin-block-start: 1.6rem; }

/* source list is for screen readers / no-JS; visually replaced by the rotator */
.js .rot-source{
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.rot-source{ list-style: none; padding: 0; display: grid; gap: 1.5rem; } /* no-JS fallback layout */
.rot-source li{ font-family: var(--font-display); font-style: italic; color: var(--cream); }

.rotator{ min-height: clamp(14rem, 30vw, 17rem); max-width: 62rem; display: none; }
.js .rotator{ display: block; }
.rotator .review-stars{
  display: block; color: var(--brass); letter-spacing: .35em; font-size: .85rem;
  margin-block-end: 1.1rem; }
.rot-quote{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 1.1rem + 2vw, 2.3rem); line-height: 1.42;
  color: var(--cream); max-width: none; min-height: 6.2em; }
.rot-quote .ch{ opacity: 0; transition: opacity .35s ease; }
.rot-quote.is-on .ch{ opacity: 1; }
.rot-quote .w{ display: inline-block; white-space: nowrap; } /* no mid-word wraps */
.rot-cite{
  display: block; font-style: normal; margin-block-start: 1.2rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease; }
.rot-cite.is-on{ opacity: 1; transform: none; }
.rotator.is-leaving .rot-quote .ch,
.rotator.is-leaving .rot-cite{ opacity: 0; transition: opacity .45s ease; }
.rot-dots{ display: none; gap: 10px; margin-block-start: 1.6rem; }
.js .rot-dots{ display: flex; }
.rot-dot{
  width: 26px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(234,226,210,.18); transition: background .3s ease; }
.rot-dot.is-active{ background: var(--copper); }
@media (prefers-reduced-motion: reduce){
  .rot-quote .ch{ transition: none; }
  .rot-cite{ transition: none; }
}

/* ===================== v3.1 — Paula's form + attribution ===================== */
.ml-field select{
  width: 100%; border: 0; border-block-end: 1px solid rgba(234,226,210,.25);
  background: var(--panel); color: var(--ink);
  padding: .75em .5em; font-family: inherit; font-size: .95rem;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--copper) 50%),
                    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.ml-field select:focus{ outline: 0; border-block-end-color: var(--copper); }
.ml-field select:invalid{ color: var(--muted); }
.ml-optional{ color: var(--muted); font-weight: 400; font-size: .85em; letter-spacing: 0; text-transform: none; }
.ml-consent{ margin-block-start: .4rem; }
.ml-check{ display: flex; gap: .7em; align-items: flex-start; cursor: pointer; font-size: .95rem; color: var(--ink); }
.ml-check input{
  width: 18px; height: 18px; margin-block-start: .15em; flex: 0 0 auto;
  accent-color: var(--copper); cursor: pointer;
}
.ml-fine{ font-size: .78rem; color: var(--muted); margin-block-start: .5rem; max-width: 40ch; }
.rot-attrib{
  margin-block-start: 1.1rem; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* v3.1 polish: all text inputs share the email field's styling; consent is sentence case */
.ml-field input[type="text"], .ml-field input[type="tel"]{
  width: 100%; border: 1px solid rgba(234,226,210,.18); background: rgba(0,0,0,.25);
  color: var(--ink); padding: .8em .9em; font-family: inherit; font-size: .95rem;
  border-radius: 2px;
}
.ml-field input[type="text"]:focus, .ml-field input[type="tel"]:focus{
  outline: 0; border-color: var(--copper);
}
.ml-check{ text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ===================== v4 — official logo, live waitlist, policy pages ===================== */
/* Brand rule: the lockup is an outlined SVG (PP Hatton print/logo licence only — never a
   webfont, never retyped). Minimums from the brand guide: lockup 130px, wordmark 70px.
   Clear space ≈ the height of the B, guaranteed by the nav padding + gutter. */
.nav-logo{ display: inline-flex; align-items: center; color: inherit; }
.logo{ display: block; height: auto; transition: opacity var(--dur-fast) var(--ease-out); }
.logo--lockup{ width: clamp(150px, 15vw, 196px); }
.logo--wordmark{ width: clamp(96px, 26vw, 120px); display: none; }
@media (max-width: 599px){ .logo--lockup{ display: none; } .logo--wordmark{ display: block; } }
.nav-logo:hover .logo, .nav-logo:focus-visible .logo{ opacity: .78; }
.js .nav-logo{ opacity: 0; animation: wm-in 900ms var(--ease-out) 250ms forwards; }
.site-nav{ padding-block: clamp(1.1rem, 2.2vw, 1.5rem); }

/* honeypot: off-canvas, never display:none (bots skip hidden fields) */
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* policy pages */
.legal-page .lede{ font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); color: var(--muted); margin-block: .6rem 2.4rem; max-width: 58ch; }
.legal-body h2{ font-size: clamp(1.25rem, 1.1rem + .8vw, 1.55rem); margin-block: 2.2rem .6rem; }
.legal-body h3{ font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .3rem; }
.legal-body p{ margin-block: 0 .9rem; max-width: 66ch; color: var(--ink); }
.legal-body ul{ margin: 0 0 1.1rem; padding-inline-start: 1.2rem; max-width: 66ch; }
.legal-body li{ margin-block: .35rem; color: var(--ink); }
.legal-kicker{ font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--copper); margin-block: 1.8rem .5rem !important; }
.legal-step{ display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  margin-block: 1.1rem; }
.legal-num{ font-family: var(--font-display); color: var(--brass); font-size: 1.3rem; line-height: 1.2; }
.legal-sign{ font-family: var(--font-display); font-style: italic; color: var(--cream);
  font-size: 1.15rem; margin-block-start: 2.6rem; }
.legal-meta{ font-size: .75rem; color: var(--muted); letter-spacing: .04em; margin-block-start: .5rem; }

/* ===================== v4.1 — mobile pass ===================== */
/* iPhone home indicator: keep the pill above the safe area */
.sticky-cta{ inset-block-end: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px)); }
/* one copper button per screen on phones: nav CTA hides, hero CTA + pill carry it */
@media (max-width: 599px){ .btn--nav{ display: none; } .site-nav .container{ justify-content: flex-start; } }
/* rotator dots: 44px tap targets without changing the look */
.rot-dot{ position: relative; }
.rot-dot::after{ content:""; position:absolute; inset:-20px -8px; }
.rot-dots{ gap: 16px; }
/* hero copy breathes a little more on small screens */
@media (max-width: 599px){
  .hero-content{ padding-inline: 1.25rem; }
  .hero-sentence{ font-size: 1.02rem; }
}

/* =====================================================================
   v5 — waiting-list-only launch (3 Sept 2026): menu, hit areas, anchors
   ===================================================================== */
h1.hero-tagline{ margin-block: 0; }
[id]{ scroll-margin-top: 5.5rem; }
.nav-actions{ display: flex; align-items: center; gap: .9rem; }
.nav-menu-btn{ appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer; border-radius: 999px; }
.nav-menu-btn:hover, .nav-menu-btn:focus-visible{ color: var(--copper); }
.nav-menu-btn:focus-visible{ outline: 1px solid var(--brass); outline-offset: 2px; }
.nav-menu-lines{ display: block; width: 22px; height: 14px; position: relative; }
.nav-menu-lines i{ position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out); }
.nav-menu-lines i:nth-child(1){ top: 0; }
.nav-menu-lines i:nth-child(2){ top: 50%; transform: translateY(-50%); }
.nav-menu-lines i:nth-child(3){ top: auto; bottom: 0; }
.menu-open .nav-menu-lines i:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-open .nav-menu-lines i:nth-child(2){ opacity: 0; }
.menu-open .nav-menu-lines i:nth-child(3){ bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
.site-menu{ position: fixed; inset: 0; z-index: 99; background: var(--ground); overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding-block: 6.5rem 3rem; }
.site-menu[hidden]{ display: none; }
.site-menu-inner{ max-width: 42rem; }
.site-menu-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.site-menu-list > li > a{ font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.15; color: var(--cream); text-decoration: none; display: inline-block; padding-block: .12em; }
.site-menu-list a:hover, .site-menu-list a:focus-visible{ color: var(--copper); }
.site-menu-list ul{ list-style: none; margin: .1rem 0 .5rem 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.site-menu-list ul a{ font-family: var(--font-body); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; display: inline-block; padding-block: .5em; }
.site-menu-cta{ margin-block-start: 2rem; }
html.menu-open, html.menu-open body{ overflow: hidden; }
.site-nav.menu-open{ background: var(--ground); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 44px hit areas without changing the look */
.nav-logo{ min-height: 44px; align-items: center; }
.sticky-cta{ min-height: 44px; }
@media (max-width: 599px){ .site-nav .container{ justify-content: space-between; } }
.footer-meta > a{ display: block; }
.footer-mail{ margin-block-start: .3rem; }
.legal-body ul a{ color: var(--brass); }
.legal-body ul a:hover, .legal-body ul a:focus-visible{ color: var(--cream); }
@media (prefers-reduced-motion: reduce){ .nav-menu-lines i{ transition: none; } }
/* menu overlay lives inside the fixed nav: keep the header row (logo + close button) above it */
.site-nav > .container{ position: relative; z-index: 2; }
.site-menu{ z-index: 1; }