/* ============================================================
   MOTION CODE STUDIO
   Quiet luxury · architectural · split-screen identity
   ============================================================ */

:root {
  --ink:        #0a0a0a;
  --ink-2:      #121212;
  --ink-3:      #1c1c1c;
  --copper:     #b87333;
  --copper-2:   #a0694e;
  --copper-dim: #8a5226;
  --zinc:       #6a7075;
  --cream:      #f5f3f0;
  --cream-2:    #e3ddd3;
  --cream-3:    #d9d6d1;
  --text-dark:  #1a1a1a;
  --text-mute:  #5a5a5a;
  --text-mute-2:#7a7a7a;
  --hl-dark:    rgba(255,255,255,0.10);
  --hl-light:   rgba(20,20,20,0.10);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad-x: clamp(20px, 5vw, 80px);
  --max:   1400px;

  --ease:        cubic-bezier(.2,.7,.2,1);
  --ease-slow:   cubic-bezier(.16,1,.3,1);    /* deliberate, cinematic */
  --ease-subtle: cubic-bezier(.4,.2,.2,1);    /* refined micro-interactions */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text-dark);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { background: var(--ink); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* subtle in-prose link — a quiet copper nudge back toward the studio/home page */
.lp-inlink { color: var(--copper); border-bottom: 1px solid rgba(166,94,46,0.32); transition: border-color .25s var(--ease), opacity .25s var(--ease); }
.lp-inlink:hover { border-bottom-color: var(--copper); opacity: 0.85; }
button { font: inherit; }

::selection { background: var(--copper); color: var(--cream); }


/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x);
  color: var(--cream);
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 100%);
  transition: background .35s var(--ease), padding .35s var(--ease), color .35s var(--ease);
}
.nav.is-scrolled {
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hl-dark);
}

.nav__mark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mark__row {
  display: inline-flex;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.mark__motion { color: var(--cream); }
.mark__code   { color: var(--copper); }
.mark__studio {
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--zinc);
  font-weight: 500;
  padding-left: 1px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 36px);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav__links a {
  color: inherit;
  opacity: 0.78;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.nav__links a:hover { opacity: 1; color: var(--copper); }

.nav__cta {
  border: 1px solid var(--copper);
  color: var(--copper) !important;
  opacity: 1 !important;
  padding: 10px 18px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__cta:hover { background: var(--copper); color: var(--ink) !important; }

@media (max-width: 720px) {
  .nav__links a:not(.nav__cta) { display: none; }
  /* On mobile the big centered hero wordmark IS the branding, so hide the corner
     wordmark entirely while on the hero (no duplicate, no faint grey), then fade
     it in crisp once scrolled past. */
  .nav__mark {
    opacity: 0;
    transition: opacity .35s var(--ease);
  }
  .nav.is-past-hero .nav__mark {
    opacity: 1;
  }
}


/* ============================================================
   HERO — text left, atmospheric image right, full bleed
   ============================================================ */
.hero {
  position: relative;
  min-height: 34vh;
  background:
    radial-gradient(120% 90% at 50% 0%, #1a1a1a 0%, #0d0d0d 55%, #050505 100%);
  color: var(--cream);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Inset border frame — all screen sizes */
.hero::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(184,115,51,0.11);
  pointer-events: none;
  z-index: 1;
}

/* grain layer */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.022) 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.hero__text {
  position: relative;
  z-index: 2;
  padding: 88px var(--pad-x) 36px;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}

.hero__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
  text-transform: uppercase;
  line-height: 1;
}

.hero__brand-row {
  display: inline-flex;
  gap: 14px;
  font-size: clamp(28px, 3.2vw, 43px);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.hero__motion { color: var(--cream); }
.hero__code   { color: var(--copper); }
.hero__studio {
  margin-top: 8px;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.48em;
  color: var(--zinc);
  font-weight: 500;
}

.hero__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: rgba(188,178,166,0.90);
  margin-top: 30px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
@media (max-width: 480px) {
  /* Tagline — bigger than body so it leads as the main message */
  .hero__title {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.35;
    color: rgba(203,193,180,0.96);
  }
}

/* Hero actions — desktop only */
.hero__actions { display: none; }

/* Mobile hero book button */
.hero__book-mobile {
  display: none;
}
@media (max-width: 720px) {
  .hero__book-mobile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 14px 28px;
    border: 1px solid var(--copper);
    color: var(--copper);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--sans);
    transition: background .3s var(--ease), color .3s var(--ease);
  }
  .hero__book-mobile:hover {
    background: var(--copper);
    color: var(--ink);
  }
}

/* Desktop hero — backdrop, frame, buttons, spacing */
@media (min-width: 721px) {
  .hero {
    min-height: 42vh;
    background:
      radial-gradient(ellipse 55% 80% at 50% 50%, rgba(184,115,51,0.05) 0%, transparent 65%),
      radial-gradient(120% 90% at 50% 0%, #1c1c1c 0%, #0d0d0d 55%, #050505 100%);
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(184,115,51,0.13);
    pointer-events: none;
    z-index: 1;
  }
  .hero__text { padding-bottom: 44px; }
  .hero__brand { margin-bottom: 20px; }
  .hero__actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
  }
}

@media (max-width: 960px) {
  .hero__text { padding: 88px var(--pad-x) 36px; }
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .5s var(--ease-subtle),
              color .5s var(--ease-subtle),
              border-color .5s var(--ease-subtle),
              transform .5s var(--ease-subtle);
}
.btn__arrow {
  transition: transform .5s var(--ease-subtle);
  display: inline-block;
}
.btn:hover .btn__arrow { transform: translateX(8px); }

.btn--copper {
  background: var(--copper);
  color: var(--ink);
  border-color: var(--copper);
}
.btn--copper:hover { background: var(--copper-2); border-color: var(--copper-2); }

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245,243,240,0.35);
}
.btn--ghost:hover { border-color: var(--copper); color: var(--copper); }

.btn--dark {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--dark:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--text-hi {
  background: transparent;
  color: var(--copper);
  border-color: var(--copper);
}
.btn--text-hi:hover { background: rgba(184,115,51,0.1); }


/* ============================================================
   CARE BLOCK — wraps tiles + approach + services for reordering.
   Desktop: natural DOM order → Approach, Services (tiles hidden).
   Mobile: tiles → Services → Approach (approach pushed to the end so the
   "Choose your care" tiles sit directly above the service detail blocks).
   ============================================================ */
.care-block { display: flex; flex-direction: column; }
@media (max-width: 720px) {
  .care-block > .split-section { order: 1; }
  .care-block > .about         { order: 2; }
  .care-block > .signature     { order: 3; }
  .care-block > .split         { order: 4; }
}

/* ============================================================
   ABOUT / APPROACH — brand statement, inclusive, no byline ego
   ============================================================ */
.about {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(36px, 4.5vw, 56px) var(--pad-x);
  border-top: 1px solid var(--hl-dark);
  position: relative;
}
.about::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.018) 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events: none;
}
.about__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about__body {
  margin-top: 20px;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(245,243,240,0.78);
  text-wrap: balance;
}
.about__sig {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hl-dark);
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245,243,240,0.42);
  font-weight: 500;
}
.about__sig-sep { margin: 0 0.6em; color: var(--copper); opacity: 0.7; }
@media (max-width: 720px) {
  .about { padding: clamp(28px, 5vw, 40px) var(--pad-x); }
  .about__body { font-size: 15px; line-height: 1.72; }
  /* Stack name + role on two centered lines so "Lead Clinician" never clips */
  .about__sig {
    margin-top: 24px;
    padding-top: 18px;
    letter-spacing: 0.18em;
    line-height: 1.7;
  }
  .about__sig-name,
  .about__sig-role { display: block; }
  .about__sig-sep { display: none; }
  .about__sig-role { color: rgba(245,243,240,0.34); font-size: 10px; }
}

/* ============================================================
   MOBILE PREVIEW TILES — side-by-side "bam wow" cards at top of split.
   Visible only on mobile; desktop already has side-by-side via the split grid.
   ============================================================ */
.split-section { display: none; }
.split-section__heading { display: none; }

@media (max-width: 720px) {
  .split-section {
    display: block;
    background: var(--ink);
    padding: 28px 0 24px;
    text-align: center;
    border-top: 1px solid var(--hl-dark);
  }
  .split-section__heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 12px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--copper);
    margin-bottom: 26px;
  }
  .split-section__heading::before,
  .split-section__heading::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--copper);
    opacity: 0.7;
  }
  .split-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(184,115,51,0.35);
    border-top: 1px solid var(--hl-dark);
    border-bottom: 1px solid var(--hl-dark);
  }
  .ptile {
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;
    transition: transform .4s var(--ease-subtle);
  }
  .ptile:active { transform: scale(0.985); }
  .ptile__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: var(--ink-2);
  }
  .ptile__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
  }
  .ptile--concierge .ptile__photo {
    background-image: url('images/concierge.jpg?v=3');
  }
  .ptile--studio .ptile__photo {
    background-image: url('images/studio.jpg?v=4');
  }
  .ptile__label {
    display: block;
    padding: 18px 14px 14px;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--copper);
    text-align: center;
  }
}

/* ============================================================
   SPLIT SERVICES — the centerpiece
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--copper-dim);
  gap: 1px;
}
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 1px; }
}

.half {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Image / placeholder area at top of each half */
.half__media {
  position: relative;
  height: clamp(300px, 32vw, 460px);
  overflow: hidden;
  background-color: var(--ink-2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
/* On mobile, the preview tiles at the top already show these photos —
   hiding the full-section photo eliminates the immediate repetition */
@media (max-width: 720px) {
  .half__media { display: none; }
}

/* Remove the inner editorial border that was creating a continuous seam
   when the two photos butted against each other in the middle */
.half__media::before { display: none; }

/* CONCIERGE — real photo with dark fallback */
.half__media--concierge {
  background-image:
    url('images/concierge.jpg?v=3'),
    linear-gradient(160deg, #1c1a18 0%, #100f0e 50%, #060606 100%);
}

/* IN-STUDIO — real photo with dark fallback (since studio shot is moody/dark) */
.half__media--studio {
  background-image:
    url('images/studio.jpg?v=4'),
    linear-gradient(180deg, #1a1816 0%, #0e0d0c 100%);
}

/* Hairline corner accents on media (brand language) */
.half__media::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(184,115,51,0.22);
  pointer-events: none;
  z-index: 1;
}

.half--dark  { background: var(--ink);    color: var(--cream); }
.half--light { background: var(--cream-2); color: var(--text-dark); }

.half__intro {
  padding: clamp(40px, 5vw, 64px) clamp(36px, 5vw, 72px) clamp(28px, 3vw, 40px);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.half__body {
  padding: clamp(40px, 4.5vw, 60px) clamp(36px, 5vw, 72px) clamp(40px, 4.5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  max-width: 640px;
  flex: 1;
}

.kicker {
  display: inline-block;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
}
.kicker--dark { color: var(--copper); }

.half__title {
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.half--dark  .half__title { color: var(--cream); }
.half--light .half__title { color: var(--text-dark); }

/* Pricing block */
.pricing {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

.pricing > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hl-dark);
}
.pricing > div:first-child { padding-top: 0; }
.pricing > div:last-child { border-bottom: none; padding-bottom: 0; }
.half--light .pricing > div { border-bottom-color: rgba(20,20,20,0.16); }

.pricing dt {
  flex: 1;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
}
.half--dark  .pricing dt { color: rgba(245,243,240,0.85); }
.half--light .pricing dt { color: #1a1a1a; font-weight: 600; }

.pricing dd {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .pricing > div { gap: 18px; }
  .pricing dt { font-size: 11px; }
}
.price {
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.half--dark  .price { color: var(--cream); }
.half--light .price { color: var(--text-dark); }

.dur {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.half--dark  .dur { color: rgba(245,243,240,0.82); }
.half--light .dur { color: #2a2a2a; }

.pricing-note {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 400;
  margin-top: -4px;
}
.half--dark  .pricing-note { color: rgba(245,243,240,0.5); }
.half--light .pricing-note { color: #5a5a5a; }

.half__body .btn { align-self: flex-start; margin-top: 4px; }


/* ============================================================
   VISIT
   ============================================================ */
.visit {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(64px, 8vw, 110px) 0;
  position: relative;
  border-top: 1px solid var(--hl-dark);
}
.visit::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.022) 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events: none;
}
.visit__grid { position: relative; z-index: 1; }
.visit__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 880px) {
  .visit__grid { grid-template-columns: 1fr; }
}

.visit__title {
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 14px;
  margin-bottom: 24px;
  color: var(--cream);
}

.visit__lede {
  font-size: 16px;
  color: rgba(245,243,240,0.72);
  max-width: 52ch;
  margin-bottom: 36px;
  line-height: 1.65;
}

.visit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Mobile: Book Appointment full-width on top, secondary buttons in a 3-col row below.
   Phone numbers (.btn__num) hide on mobile so labels stay clean: Call / Text / Email */
@media (max-width: 720px) {
  .visit__actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .visit__actions .btn--copper {
    grid-column: 1 / -1;
  }
  .visit__actions .btn--ghost,
  .visit__actions .btn--text-hi {
    padding: 14px 8px;
    font-size: 11px;
    letter-spacing: 0.18em;
    min-height: 46px;
  }
  .btn__num { display: none; }
}

.visit__details {
  display: grid;
  gap: 28px;
  border-left: 1px solid var(--hl-dark);
  padding-left: clamp(24px, 3vw, 40px);
}
@media (max-width: 880px) {
  .visit__details { border-left: none; border-top: 1px solid var(--hl-dark); padding-left: 0; padding-top: 32px; }
}
.detail__label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
  font-weight: 500;
}
.detail p {
  font-size: 15px;
  color: rgba(245,243,240,0.82);
  line-height: 1.6;
}
.detail a { border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); }
.detail a:hover { border-color: var(--copper); }


/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(32px, 5vw, 64px) 0 22px;
}
.foot__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--hl-dark);
}

.foot__mark {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.foot__mark-row {
  display: inline-flex;
  gap: 8px;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}
.foot__motion { color: var(--cream); }
.foot__code   { color: var(--copper); }
.foot__studio {
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--zinc);
  font-weight: 500;
}
.foot__line { display: none; }
.foot__line {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}

.foot__base {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--pad-x) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,243,240,0.45);
}
@media (max-width: 520px) {
  .foot__base { flex-direction: column; gap: 12px; text-align: center; }
}


/* ============================================================
   MOBILE STICKY BOOKING BAR — small refined pill, scroll-triggered
   ============================================================ */
.mobile-cta {
  display: none;
}
@media (max-width: 720px) {
  .mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: fixed;
    bottom: 16px;
    right: 16px;
    left: auto;
    z-index: 100;
    padding: 9px 15px;
    background: var(--copper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
    /* Initially hidden — JS toggles .is-visible once user scrolls past hero */
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .mobile-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .mobile-cta:active {
    transform: translateY(0) scale(0.95);
    background: var(--copper-2);
  }
  .mobile-cta__arrow {
    display: inline-block;
    transition: transform .25s var(--ease);
  }
}

/* ============================================================
   MOBILE TOUCH TARGETS + REFINED SPACING
   ============================================================ */
@media (max-width: 720px) {
  /* Larger, more tappable buttons */
  .btn {
    min-height: 48px;
    padding: 14px 24px;
  }
  /* HERO — clear the fixed nav, but keep it compact so the wordmark + tagline
     read as one composition instead of floating in dead black space. */
  .hero { min-height: 0; }
  .hero::after { display: none; } /* drop the inset frame box on mobile — cleaner full-bleed */
  .hero__text { padding-top: 96px; padding-bottom: 38px; }
  .hero__brand { margin-bottom: 16px; }
  .hero__title { margin-top: 16px; }
  /* FOOTER — hide the brand wordmark + duplicate hours on mobile; copyright base stays */
  .foot__inner { display: none; }
  .foot__base { padding-top: 24px; border-top: 1px solid var(--hl-dark); }
  /* Tighter section padding on mobile for curated feel */
  .half__intro { padding-top: clamp(36px, 8vw, 56px); }
  .half__body  { padding-top: clamp(32px, 6vw, 48px); padding-bottom: clamp(36px, 8vw, 56px); }
  /* Visit section — tighter on mobile */
  .visit { padding: 48px 0 32px; }
  .visit__grid { gap: 32px; }
  .visit__details { gap: 22px; padding-top: 24px; }
  /* Footer nav — tidy 2-col grid on mobile so the link columns don't wrap raggedly.
     Dimmed + smaller so this SEO link tail recedes quietly (still fully crawlable). */
  .foot__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .foot__nav-col h4 { color: rgba(184,115,51,0.72); margin-bottom: 12px; }
  .foot__nav-col a { font-size: 12px; color: rgba(245,243,240,0.42); padding: 4px 0; }
  /* Footer — tighter on mobile, less air between sections */
  .foot { padding: 32px 0 18px; }
  .foot__inner { padding-bottom: 22px; }
  .foot__base { padding-top: 18px; gap: 6px; }
  .foot__mark { margin-bottom: 6px; }
  /* Nav book button — bigger touch target */
  .nav__cta { padding: 12px 20px; min-height: 44px; }
}

/* ============================================================
   ENTRY ANIMATIONS
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1.4s var(--ease-slow), transform 1.4s var(--ease-slow);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ============================================================
   SEO LANDING PAGES (service + location)
   Reuses brand vars, nav, .btn, .visit, .foot, .kicker.
   ============================================================ */
.lp-hero {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #1a1a1a 0%, #0d0d0d 55%, #050505 100%);
  color: var(--cream);
  padding: clamp(120px, 16vw, 180px) var(--pad-x) clamp(48px, 7vw, 80px);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--hl-dark);
}
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(184,115,51,0.11);
  pointer-events: none;
}
.lp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.022) 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.lp-hero__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.lp-breadcrumb {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,243,240,0.5);
  margin-bottom: 22px;
}
.lp-breadcrumb a { color: var(--copper); }
.lp-breadcrumb a:hover { color: var(--copper-2); }
.lp-hero__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
}
.lp-hero__sub {
  margin-top: 22px;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245,243,240,0.74);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.lp-hero__cta {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lp-section { padding: clamp(48px, 7vw, 90px) var(--pad-x); }
.lp-section--light { background: var(--cream); color: var(--text-dark); }
.lp-section--dark  {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid var(--hl-dark);
  position: relative;
}
.lp-section--dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.018) 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events: none;
}
.lp-wrap { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.lp-h2 {
  font-weight: 400;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 14px 0 22px;
}
.lp-section--light .lp-h2 { color: var(--text-dark); }
.lp-section--dark  .lp-h2 { color: var(--cream); }
.lp-p {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 18px;
}
.lp-section--light .lp-p { color: #3a3a3a; }
.lp-section--dark  .lp-p { color: rgba(245,243,240,0.78); }

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin-top: 34px;
  background: var(--hl-light);
  border: 1px solid var(--hl-light);
}
.lp-section--dark .lp-grid { background: var(--hl-dark); border-color: var(--hl-dark); }
.lp-card { padding: 26px 24px; background: var(--cream); }
.lp-section--dark .lp-card { background: var(--ink); }
.lp-card h3 {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
  margin-bottom: 10px;
}
.lp-card p { font-size: 14px; font-weight: 300; line-height: 1.6; }
.lp-section--light .lp-card p { color: #4a4a4a; }
.lp-section--dark  .lp-card p { color: rgba(245,243,240,0.7); }

.lp-faq { max-width: 820px; margin: 0 auto; }
.lp-faq__item { border-bottom: 1px solid var(--hl-light); }
.lp-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after {
  content: "+";
  color: var(--copper);
  font-size: 22px;
  font-weight: 300;
  transition: transform .3s var(--ease);
}
.lp-faq__item[open] summary::after { transform: rotate(45deg); }
.lp-faq__item p {
  padding: 0 0 22px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  max-width: 64ch;
  color: #4a4a4a;
}

.lp-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.lp-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--copper);
  color: var(--copper);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lp-chip:hover { background: var(--copper); color: var(--ink); }

/* Footer link columns — shared by homepage + landing pages, visible on all sizes */
.foot__nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 6vw, 90px);
  border-bottom: 1px solid var(--hl-dark);
}
.foot__nav-col h4 {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
  margin-bottom: 14px;
}
.foot__nav-col a {
  display: block;
  font-size: 13px;
  color: rgba(245,243,240,0.6);
  font-weight: 300;
  padding: 5px 0;
  transition: color .2s var(--ease);
}
.foot__nav-col a:hover { color: var(--cream); }

/* ============================================================
   SIGNATURE · THE MOTION ROOM (homepage differentiator band)
   ============================================================ */
.signature {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(72px, 12vw, 140px) var(--pad-x);
  border-top: 1px solid var(--hl-dark);
  border-bottom: 1px solid var(--hl-dark);
}
.signature__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "kicker media"
    "text   media";
  column-gap: clamp(32px, 5vw, 72px);
}
/* desktop: kicker sits above the text block in the left column,
   image holds the right column and centers against the pair */
.signature__kicker { grid-area: kicker; align-self: end; margin: 0; }
.signature__text   { grid-area: text;  align-self: start; text-align: left; }
.signature__media  { grid-area: media; align-self: center; }
.signature .kicker--dark { color: var(--copper); }
.signature__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 18px 0 22px;
}
.signature__body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--cream-2);
  max-width: 560px;
  margin: 0 0 18px;
  /* avoid lone "widow" words on the last line */
  text-wrap: pretty;
}
/* a little more air before the small copper note line */
.signature__body:last-of-type { margin-bottom: 26px; }
.signature__body em {
  font-style: normal;
  color: var(--copper);
}
.signature__note {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  opacity: 0.88;
  margin: 0;
}
.signature__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 15px 30px;
  background: var(--copper);
  border: 1px solid var(--copper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background .3s var(--ease), color .3s var(--ease), gap .25s var(--ease);
}
.signature__link:hover { background: var(--copper-2); gap: 14px; }
.signature__link:active { background: var(--copper-2); color: var(--ink); }
/* Designed plate — the AI render read as a bondage rig, so it's removed.
   This is a clean copper-framed panel with a minimal wireframe-cube motif
   that suggests the apparatus without depicting it. Drop a REAL photo of the
   Motion Frame in here later (set background-image on .signature__media). */
.signature__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* soft copper glow over deep charcoal so the panel feels lit, not empty */
  background:
    radial-gradient(110% 85% at 50% 32%, rgba(184,115,51,0.18) 0%, transparent 58%),
    linear-gradient(158deg, #15120f 0%, #0b0a08 58%, #060606 100%);
  border: 1px solid rgba(184,115,51,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signature__plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 40px;
  text-align: center;
}
/* two offset thin squares = a wireframe cube, echoing the frame's geometry */
.signature__plate-frame {
  position: relative;
  width: clamp(108px, 24vw, 168px);
  aspect-ratio: 1 / 1;
}
.signature__plate-frame::before,
.signature__plate-frame::after {
  content: "";
  position: absolute;
  width: 76%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--copper);
}
.signature__plate-frame::before { left: 0; bottom: 0; opacity: 0.85; }
.signature__plate-frame::after  { right: 0; top: 0; opacity: 0.4; }
.signature__plate-label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper);
}
.signature__plate-sub {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245,243,240,0.42);
}
/* Real image, drop-in ready: save the glowing copper wireframe render as
   images/motion-frame.jpg and it covers the plate automatically. If the file
   is absent, this layer is transparent and the clean plate shows through —
   so there is never a broken/empty box. No code change needed when added. */
.signature__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url('images/frame-hero.png?v=2');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .5s var(--ease);
}
/* The image is now a LINK — fast users tap the picture to enter the room.
   Cursor + hover lift make it obviously interactive. */
a.signature__media { cursor: pointer; text-decoration: none; }
a.signature__media:hover { border-color: var(--copper); }
a.signature__media:hover .signature__photo { transform: scale(1.04); }
/* Always-visible "tap to enter" cue sitting on the bottom of the image */
.signature__media-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 18px 18px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  background: linear-gradient(180deg, transparent 0%, rgba(6,6,6,0.85) 100%);
}
.signature__media-cue-arrow {
  color: var(--copper);
  transition: transform .25s var(--ease);
}
a.signature__media:hover .signature__media-cue-arrow { transform: translateX(6px); }
@media (max-width: 880px) {
  /* mobile flow reads like a story: LABEL → IMAGE → TITLE → DESCRIPTION,
     with clear breathing room between each block (no crumbled stacking) */
  .signature { padding-top: clamp(40px, 9vw, 64px); padding-bottom: clamp(52px, 11vw, 84px); }
  .signature__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 5vw, 28px);
  }
  /* "THE MOTION ROOM" label centered above the image so it isn't a random pic */
  .signature__kicker { align-self: center; text-align: center; margin: 0; }
  /* image full-width; height comes from its matched aspect-ratio (no black bars) */
  .signature__media { align-self: stretch; width: 100%; }
  .signature__text { align-self: stretch; text-align: center; }
  .signature__title {
    font-size: clamp(27px, 7.4vw, 38px);
    line-height: 1.14;
    margin: 6px 0 22px;
  }
  /* dense copy left-aligns for clean reading edges; generous leading +
     paragraph spacing so it breathes instead of reading crunched */
  .signature__body {
    text-align: left;
    margin: 0 auto 26px;
    font-size: 15px;
    line-height: 1.8;
  }
  .signature__body:last-of-type { margin-bottom: 30px; }
  .signature__note { text-align: center; margin-top: 4px; }
}

/* Real Motion Room photos */
.lp-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
}
.lp-figures--single { grid-template-columns: 1fr; }
.lp-figures--single figure { max-width: 560px; margin: 0 auto; }
.lp-figures--single img { height: auto; }
.lp-figures figure { margin: 0; }
.lp-figures img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-figures figcaption {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(120,112,102,0.9);
  margin-top: 8px;
}
.lp-section--dark .lp-figures figcaption { color: rgba(245,243,240,0.6); }
@media (max-width: 560px) {
  .lp-figures { grid-template-columns: 1fr; }
}