/* ==========================================================================
   Sadie Marie
   Stylesheet
   ========================================================================== */

:root {
  --off-white: #F5F3F0;
  --cloud: #DDE0E6;
  --cloud-mid: #C8CDD6;
  --navy: #0D1B2A;
  --navy-mid: #1C2E42;
  --navy-light: #2A4460;
  --ink: #1a1a24;
  --mist: #8A93A0;
  /* WCAG AA 4.5:1+ body text on --off-white (5.37:1). Use for small/muted copy on cream. */
  --mist-readable: #586574;
  /* WCAG AA 4.5:1+ on --ink footer (6.78:1). Use instead of --mist + opacity on dark surfaces. */
  --mist-on-dark: #9ca3ad;
  /* Decorative section watermarks — faint navy on cream (not for readable text). */
  --watermark-faint: rgba(13, 27, 42, 0.07);
  --serif: 'Bodoni Moda', Georgia, serif;
  --serif-alt: 'EB Garamond', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
  /* Fixed nav block — used to size sticky about copy on desktop */
  --nav-block: 88px;
  /* Match admin crop frames (`ImageUploader` aspectClass) */
  --hero-aspect: 4 / 5;
  --about-portrait-aspect: 3 / 4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  /* `smooth` only affects anchor jumps and can feel sluggish; wheel
     scrolling stays native — faster and more consistent across browsers. */
  scroll-behavior: auto;
  font-size: 16px;
  /* Never follow OS dark mode — Cal embeds + form controls stay light. */
  color-scheme: light;
  /*
    Paint the html element with the navy nav color so when the user
    pulls the page down past the top edge on macOS (Chrome / Safari
    rubber-band overscroll), the bounce region blends seamlessly into
    the fixed navbar instead of revealing the off-white body
    background. The bounce itself is kept ON — it's the elastic feel
    that makes the hero image continue down past the navbar rather
    than abruptly stopping. See `#hero` for the matching geometry
    (image col extends to viewport y=0 under the translucent nav, so
    pulling down reveals more image, not off-white).
  */
  background-color: var(--navy);
  /* Prevent horizontal pan/scroll — 100vw children can expose this navy strip. */
  overflow-x: hidden;
  max-width: 100%;
}
body {
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  max-width: 100%;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: stretch; justify-content: space-between;
  min-height: var(--nav-block);
  padding: 0 clamp(24px, 5vw, 64px);
  /*
    Fully opaque navy. Previously rgba(0.95) which let 5% of whatever
    sat behind the bar (the body's off-white) bleed through and
    slightly desaturate the navbar — most visible at the very top
    edge where the eye expects a crisp colour boundary against the
    browser chrome. Solid navy = sharper transition, no perceived
    "haze line" between browser and page.
  */
  background: var(--navy);
  border-bottom: 1px solid rgba(245,243,240,0.1);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-right: 20px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--off-white);
  text-decoration: none;
}
.nav-links {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 0;
  list-style: none;
}
.nav-links li { display: flex; align-self: stretch; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 22px;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--off-white);
  text-decoration: none;
  transition: opacity 0.3s;
}
.nav-links a:hover { opacity: 0.6; }
.nav-book {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--off-white);
  padding: 11px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.nav-book:hover { background: transparent; color: var(--off-white); }

/* ── HERO — MAGAZINE COVER ── */
#hero {
  /*
    Portrait hero at the admin crop ratio (4:5) — never cropped again
    to 100vh. Row height follows the image; shorter viewports scroll.
    Image column still starts at y=0 under the fixed nav.
  */
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--off-white);
}
.hero-img-col {
  position: relative;
  overflow: hidden;
  align-self: start;
  width: 100%;
  aspect-ratio: var(--hero-aspect);
  line-height: 0;
  background: var(--navy);
}
.hero-img-col img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.9) contrast(1.02);
}
/* Hero copy + image: no entrance animation — show immediately on load. */
#hero .fade-in {
  animation: none;
  opacity: 1;
  transform: none;
}
.hero-img-col::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(13,27,42,0.42) 0%, transparent 100%);
}

.hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-block) + 28px) clamp(40px, 5vw, 70px) clamp(48px, 6vh, 64px)
    clamp(48px, 5vw, 70px);
  position: relative;
  z-index: 2;
  min-height: 100%;
  align-self: stretch;
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(4rem, 8vw, 10.5rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 24px;
  margin-right: -30px;
  -webkit-text-stroke: 1.5px var(--navy);
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--navy-light);
  -webkit-text-stroke: 1.5px var(--navy-light);
}
.hero-tagline {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.75;
  max-width: 320px;
  margin-bottom: 32px;
  opacity: 0.72;
}
.btn-navy {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--off-white);
  background: var(--navy);
  padding: 17px 42px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  align-self: flex-start;
  border: none;
}
.btn-navy:hover { background: var(--navy-light); transform: translateY(-2px); }
.btn-outline-navy {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--navy);
  padding: 16px 42px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.3s;
  align-self: flex-start;
}
.btn-outline-navy:hover { background: var(--navy); color: var(--off-white); transform: translateY(-2px); }

.hero-scroll-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist-readable);
}
.hero-scroll-hint::before {
  content: '';
  width: 38px; height: 1px;
  background: var(--mist-readable);
}

/* ── MARQUEE ── */
.marquee-strip {
  background: var(--cloud);
  color: var(--navy);
  padding: 14px 0;
  overflow: hidden;
  overflow-x: clip;
  max-width: 100%;
  margin-top: 0;
  contain: layout style paint;
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee-track.marquee-ready {
  animation: marquee var(--marquee-duration, 28s) linear infinite;
}
.marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.marquee-group span {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 0 44px;
  color: var(--navy);
  white-space: nowrap;
}
.marquee-group span.sep { padding: 0; opacity: 0.5; font-size: 0.45rem; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--marquee-shift, 0px)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .fade-in { animation: none; opacity: 1; transform: none; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── SECTION BASICS ── */
.section-label {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 16px;
  display: block;
}

/* ── SERVICES — editorial newspaper layout ── */
#services {
  background: var(--off-white);
  padding: 110px 64px 120px;
  position: relative;
}
.services-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 28px;
  margin-bottom: 60px;
}
.services-masthead > div:first-child {
  flex-shrink: 0;
}
.services-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
  line-height: 0.92;
  color: var(--navy);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px var(--navy);
}
.services-title em {
  font-style: italic;
  -webkit-text-stroke: 1px var(--navy);
}
/* Referral — two-line masthead aside */
.services-referral {
  flex: 1 1 auto;
  width: auto;
  max-width: min(54vw, 32rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  align-self: flex-end;
  padding: 12px 16px 14px;
  border: 1px solid rgba(245, 243, 240, 0.12);
  background: var(--navy);
  box-shadow: 0 12px 32px rgba(13, 27, 42, 0.12);
  box-sizing: border-box;
}
.services-referral-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 11px;
  min-width: 0;
  width: 100%;
}
.services-referral-line:first-child {
  justify-content: center;
  width: 100%;
}
.services-referral-line:last-child {
  align-items: center;
}
.services-referral-label,
.services-referral-hook {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--off-white);
}
.services-referral-label {
  margin: 0;
  flex-shrink: 0;
}
.services-referral-sep {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1;
  color: rgba(245, 243, 240, 0.35);
  flex-shrink: 0;
  user-select: none;
}
.services-referral-hook {
  font-style: normal;
  margin: 0;
}
.services-referral-hook em {
  font-style: italic;
  color: var(--cloud);
}
.services-referral-detail {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(245, 243, 240, 0.78);
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}
.services-referral-both {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(245, 243, 240, 0.95);
}
.services-referral-link {
  flex-shrink: 0;
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  background: var(--off-white);
  padding: 8px 13px;
  border: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.services-referral-link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.services-cols {
  display: grid;
  /*
    Two-column default to match the studio's published menu (Lash
    Services | Brow Services). The middle 1px track holds the vertical
    .col-rule divider. Was 1fr 1px 1fr 1px 1fr when the menu also
    carried a Skincare column; collapsed when the menu was narrowed to
    two categories and the CMS layout became dynamic.

    Responsive overrides further down reduce this to a single column
    on narrower viewports. Both rules still target this selector by
    name, so the cascade keeps working.
  */
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 40px;
}
.col-rule { background: rgba(13,27,42,0.1); }
.category-head {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--cloud-mid);
  padding-bottom: 10px;
  margin-bottom: 28px;
}
/*
  When a second .category-head appears inside the same column (the
  "Teeth Whitening" coming-soon placeholder sits below the brow
  services list in the right-hand column), give it deliberate top
  spacing so the two sections read as separate blocks rather than a
  continuous list. The amount matches the visual rhythm of the
  hero/about transitions on the same page.
*/
/* No overrides — inherits all styles from .category-head so the
   header looks identical to Lash Services / Brow Services. The
   wrapper's flex centering handles spacing instead. */
/*
  "Coming soon." copy under a placeholder category head. Mirrors the
  typography of .service-detail (muted italic serif used for the
  service descriptions across the rest of the menu) so the
  placeholder feels native to the pricing column rather than bolted
  on. Subtle vertical padding matches the breathing room of a real
  .service-item without the cursor: pointer / hover state that would
  imply the row is bookable.
*/
.coming-soon-wrapper {
  margin-top: 48px;
}
.coming-soon-wrapper .category-head {
  width: 100%;
}
.coming-soon-note {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--mist-readable);
  margin: 0;
  padding: 8px 0 4px;
}
.service-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(13,27,42,0.07);
  display: block;
  cursor: pointer;
  transition: background-color 0.35s ease, padding 0.35s ease;
}
.service-item:hover { background-color: rgba(13,27,42,0.03); }
.service-item:last-child { border-bottom: none; }
.service-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

/*
  ─── BOOKABLE SERVICE ROW (anchor variant) ───────────────────────────────
  Renderer in `app/route.ts` wraps every BOOKABLE service in an <a> tag —
  unbookable rows (slug=null) and group headers stay as <div>, so the
  `a.service-item` selector cleanly scopes the click-cue affordance to
  rows that actually open the booking drawer.

  Layout intent:
    [name + detail]                 [........service-action........]
                                    [    $price   Book Now    ›    ]

    • The .service-action zone has a fixed min-width sized for the
      hover state. Its three children — price stack, label, chevron —
      flex-end justify, so at rest the price hugs the chevron (the
      label sits between them but collapsed to zero width). On hover
      the label expands via max-width, naturally pushing the price
      leftward inside the reserved space. The name/description column
      never reflows because the action column already owned the wider
      hover-state width.
    • The chevron is an inline SVG so it inherits `currentColor` for
      clean color transitions and scales crisply alongside the
      editorial type. No emoji metrics like the prior `→`.
    • Focus mirrors hover so the keyboard path is identical — the
      anchor is natively focusable, no tabindex needed.

  Group headers (.service-item--group) keep their existing two-column
  layout — they're <div>s, not anchors, and they own the +/− toggle in
  the right gutter, so they intentionally don't get the action zone.
*/
a.service-item {
  text-decoration: none;
  color: inherit;
}
a.service-item:focus-visible {
  outline: none;
  background-color: rgba(13,27,42,0.04);
  padding-left: 10px;
  padding-right: 10px;
  box-shadow: inset 0 0 0 1px rgba(13,27,42,0.12);
  border-radius: 4px;
}
a.service-item:hover {
  padding-left: 10px;
  padding-right: 10px;
}

.service-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Inherited by the chevron via currentColor. */
  color: rgba(13,27,42,0.55);
}

.service-action .service-meta {
  /* Small breathing room between the price stack and the chevron — 8px
     reads as a deliberate kiss without feeling glued. */
  margin-right: 8px;
}

.service-cue-arrow {
  /* Typographic chevron (U+203A) rendered in the page's display serif.
     We size it just slightly larger than the price so it sits visually
     centred against the price baseline, with line-height: 1 so the
     glyph doesn't bring its own vertical padding into the flex row. */
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  /* Bodoni's right-pointing angle quote sits with a hair of leading
     whitespace; nudge it visually closer to the price without crowding. */
  margin-left: -2px;
  transition: color 0.3s ease;
}

a.service-item:hover .service-action,
a.service-item:focus-visible .service-action {
  color: var(--navy, #0d1b2a);
}

/*
  Mobile fallback: drop the row's horizontal inset and the colour shift
  since there's no hover on touch devices. The chevron is already
  static, so nothing else needs to be unwound here.
*/
@media (max-width: 768px) {
  a.service-item:hover {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
  }
  a.service-item:hover .service-action,
  a.service-item:focus-visible .service-action {
    color: rgba(13,27,42,0.55);
  }
}

/*
  ─── SERVICE GROUPS (Parent/Child accordion) ─────────────────────────────
  Group rows are CMS-only accordion headers. They sit at the top level of
  a category column, render with a "From $X" price prefix, and own a
  collapsible shelf of bookable child services beneath. The shelf is
  vertical on mobile (default flex-direction: column, indented under the
  parent) and switches to a horizontal scrolling shelf on tablet+ —
  matching the layout intent the spec calls out.

  Element vocabulary:
    .service-group              wrapper around header + shelf
    .service-item--group        the parent header row (non-bookable)
    .service-group-toggle       small +/− indicator on the right
    .service-group-children     the shelf containing child .service-items
    .is-collapsed               hides the shelf (default state on render)
    .is-expanded                marks the parent so CSS can rotate the
                                toggle without scanning siblings

  Why a max-height animation rather than display:none/flex toggling:
  display changes don't animate, and the spec asks for a smooth
  expansion. We animate max-height + opacity + margin-top instead;
  the 3000px ceiling is more than the studio will ever ship per group.
*/
.service-group {
  border-bottom: 1px solid rgba(13,27,42,0.07);
}
.service-group:last-child {
  border-bottom: none;
}
.service-group > .service-item--group {
  border-bottom: none;
}

.service-item--group {
  position: relative;
  padding-right: 28px; /* room for the .service-group-toggle */
}
.service-item--group .service-meta {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.service-price-prefix {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-right: 6px;
}

/*
  The toggle is a centred +/− glyph drawn with two absolutely-positioned
  pseudo-elements so we don't pull in an icon font or SVG asset. The
  vertical bar scales to 0 in the .is-expanded state to morph + into −.
*/
.service-group-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-block;
  width: 14px;
  height: 14px;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.service-item--group:hover .service-group-toggle {
  opacity: 0.85;
}
.service-group-toggle::before,
.service-group-toggle::after {
  content: '';
  position: absolute;
  background: var(--navy);
  top: 50%;
  left: 50%;
}
.service-group-toggle::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.service-group-toggle::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.service-item--group.is-expanded .service-group-toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.service-group-children {
  display: flex;
  flex-direction: column;
  padding-left: 1.5rem; /* pl-6 — indented under the parent */
  margin-top: 1rem;     /* mt-4 */
  gap: 1rem;            /* gap-4 */
  max-height: 3000px;
  overflow-y: hidden;
  opacity: 1;
  transition: max-height 0.5s ease, margin-top 0.35s ease, opacity 0.3s ease;
  border-left: 1px solid rgba(13, 27, 42, 0.08);
}
.service-group-children.is-collapsed {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  border-left-color: transparent;
}
/*
  Each child renders as a discrete card — soft border, gentle warm
  background, rounded corners — so Classic / Hybrid / Volume read as
  visually grouped peers under their fill-week parent rather than a
  flat list. The card treatment replaces the previous bottom-border
  divider (mobile) and right-border divider (tablet+).
*/
.service-group-children .service-item {
  padding: 14px 16px;
  border: 1px solid rgba(13, 27, 42, 0.08);
  border-radius: 8px;
  background-color: rgba(13, 27, 42, 0.018);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.service-group-children a.service-item:hover,
.service-group-children a.service-item:focus-visible {
  /* Override the global a.service-item hover inset — boxed cards
     already have their own padding and edge, so the row-style inset
     would re-pad the interior and shift content. */
  padding-left: 16px;
  padding-right: 16px;
  background-color: rgba(13, 27, 42, 0.05);
  border-color: rgba(13, 27, 42, 0.18);
  box-shadow: none;
}

/*
  Tablet+ horizontal shelf. Above 860px the children flow horizontally
  inside the category column. We allow wrapping (rather than the
  previous overflow-x scroll) so additional children fall to a second
  row instead of hiding behind a scrollbar — cleaner read at this
  density. flex: 1 1 calc(33.333% - 10px/2 spread) gives three even
  cards per row at the typical 3-child case (Classic / Hybrid / Volume)
  while still wrapping gracefully if the editor adds a fourth.
*/
@media (min-width: 861px) {
  .service-group-children {
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    overflow-x: visible;
    border-left: none;
    gap: 10px;
    margin-top: 14px;
  }
  .service-group-children .service-item {
    flex: 1 1 calc(33.333% - 7px);
    min-width: 160px;
  }
}

/* ── BOOKING DRAWER (Slide-out off-canvas) ── */
/* Full-page cover kept as a fallback; the live booking flow now keeps
   the drawer open and shows pay-choice in-panel after Cal confirms. */
#checkout-handoff {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--off-white);
  pointer-events: all;
}
#checkout-handoff.is-active {
  display: flex;
}
.checkout-handoff-eyebrow {
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0;
}
.checkout-handoff-title {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.005em;
}

#booking-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#booking-backdrop.drawer-open {
  opacity: 1;
  pointer-events: auto;
}
#booking-backdrop.drawer-instant {
  transition: none;
}
#booking-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 460px;
  height: 100vh;
  height: 100dvh;
  background: var(--off-white);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  /*
    Flex column + overflow hidden: the drawer shell never scrolls.
    Cal's embed otherwise calls __scrollByDistance on the parent and
    drags the whole panel (header + calendar + slots). With a fixed
    iframe height, scrolling stays inside the booker (timeslots only).
  */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}
#booking-drawer.drawer-open {
  transform: translateX(0);
}
#booking-drawer.drawer-instant {
  transition: none;
}
.drawer-header {
  flex-shrink: 0;
  z-index: 16;
  background: var(--off-white);
  border-bottom: 1px solid rgba(13, 27, 42, 0.1);
  padding: 26px 28px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
#booking-drawer.is-pay-choice .drawer-header {
  padding: 16px 22px 12px;
}
#booking-drawer.is-pay-choice .drawer-eyebrow {
  margin-bottom: 6px;
}
#booking-drawer.is-pay-choice .drawer-title {
  font-size: 1.35rem;
  margin: 0 0 4px;
}
.drawer-titles {
  flex: 1;
  min-width: 0;
}
.drawer-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 12px;
}
.drawer-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.12;
  color: var(--navy);
  letter-spacing: -0.005em;
  -webkit-text-stroke: 0.4px var(--navy);
  margin: 0 0 8px;
}
.drawer-subtitle {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
  margin: 0;
}
.drawer-subtitle:empty { display: none; }
.drawer-header-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}
#drawer-back,
#close-drawer {
  flex-shrink: 0;
  margin-top: 4px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(13, 27, 42, 0.2);
  background: transparent;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
#drawer-back[hidden] {
  display: none !important;
}
#drawer-back:hover,
#close-drawer:hover {
  background: var(--navy);
  color: var(--off-white);
  border-color: var(--navy);
}
#drawer-back:active,
#close-drawer:active { transform: scale(0.94); }

.booking-contact-warning {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(3px);
}
.booking-contact-warning[hidden] {
  display: none !important;
}
.booking-contact-warning-card {
  width: min(100%, 22rem);
  border: 1px solid rgba(28, 25, 23, 0.12);
  background: #fff;
  padding: 1.35rem 1.4rem 1.25rem;
  box-shadow: 0 12px 40px rgba(28, 25, 23, 0.08);
}
.booking-contact-warning-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #78716c;
}
.booking-contact-warning-title {
  margin: 0.45rem 0 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ink);
}
.booking-contact-warning-body {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #57534e;
}
.booking-contact-warning-body em {
  font-style: italic;
}
.booking-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78716c;
}
.booking-contact-email-wrap[hidden] {
  display: none !important;
}
.booking-contact-field input {
  border: 1px solid rgba(28, 25, 23, 0.16);
  background: #fafaf9;
  color: var(--ink);
  padding: 0.7rem 0.75rem;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  font-family: inherit;
}
.booking-contact-field input:focus {
  outline: 2px solid rgba(13, 27, 42, 0.25);
  outline-offset: 1px;
  border-color: var(--navy);
}
.booking-contact-sms {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #44403c;
  cursor: pointer;
}
.booking-contact-sms input {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--navy);
}
.booking-contact-error {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #9f1239;
}
.booking-contact-error[hidden] {
  display: none !important;
}
.booking-contact-warning-btn {
  margin-top: 1.1rem;
  width: 100%;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--off-white);
  padding: 0.7rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.booking-contact-warning-btn:hover {
  background: #0a1624;
}
.booking-contact-warning-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.booking-contact-email-toggle {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #78716c;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  text-align: center;
}
.booking-contact-email-toggle:hover {
  color: var(--navy);
}
.booking-contact-email-toggle[hidden] {
  display: none !important;
}

.drawer-pay-loading {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--off-white);
  pointer-events: all;
}
.drawer-pay-loading:not([hidden]) {
  display: flex;
}
#drawer-cal-loading {
  z-index: 17;
}
#booking-drawer.is-updating-times .drawer-header {
  z-index: 18;
}
#drawer-pay-choice {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: var(--off-white);
}
#booking-drawer.is-pay-choice #drawer-pay-choice {
  display: flex;
}
#booking-drawer.is-pay-choice #drawer-cal-container {
  display: none;
}
#drawer-pay-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

#drawer-cal-container {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 0 16px;
}
/* Inactive mounts stay rendered (so Cal's iframe is fully populated) but
   are taken out of flow and hidden until their service row is clicked. */
.drawer-mount {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}
.drawer-mount.active {
  position: static;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  visibility: visible;
  pointer-events: auto;
}
#drawer-cal-container iframe {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1;
  background: transparent !important;
  border: none !important;
}
.service-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}
.service-detail {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--mist-readable);
  display: block;
  margin-top: 4px;
}
.service-meta {
  text-align: right;
}
.service-price {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--navy);
  display: block;
}
.service-duration {
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--mist-readable);
  display: block;
  margin-top: 3px;
}

/* ── ABOUT — portfolio-style masthead + split body ── */
#about {
  background: var(--cloud);
  /* Match #portfolio section rhythm; top/bottom ease on short viewports */
  padding: clamp(72px, 10svh, 100px) 64px;
  position: relative;
  overflow: hidden;
}
.about-bg-text {
  position: absolute;
  /* Keep the full word above the portrait — never clipped by the photo */
  top: clamp(4px, 0.8vw, 10px);
  left: clamp(96px, 7vw, 120px);
  font-family: var(--serif);
  font-size: clamp(5rem, 10vw, 10.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--watermark-faint);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.04em;
  z-index: 0;
}
.about-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: auto auto;
  column-gap: clamp(3rem, 5vw, 6rem);
  row-gap: 14px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.about-masthead {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin: 0;
}
.about-img-panel {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  overflow: hidden;
  background: var(--navy);
  line-height: 0;
  box-shadow:
    0 32px 64px rgba(13, 27, 42, 0.16),
    0 12px 28px rgba(13, 27, 42, 0.1);
}
.about-img-panel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--about-portrait-aspect);
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.88) contrast(1.02);
}
.about-copy {
  grid-column: 2;
  grid-row: 2;
  /* Vertically centered against the portrait, not the masthead row */
  align-self: center;
  min-width: 0;
  padding-left: clamp(40px, 5vw, 72px);
  /*
    Stay readable while the tall portrait scrolls: copy sticks in view
    and vertical rhythm tightens on shorter screens via clamp(svh).
  */
  position: sticky;
  top: calc(var(--nav-block) + 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Same scale as .portfolio-title — adapted for the cloud section */
.about-section-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
  line-height: 0.9;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0;
  -webkit-text-stroke: 1px var(--navy);
}
.about-title {
  font-family: var(--serif);
  font-size: clamp(2.35rem, calc(3.8vw + 0.6svh), 4.35rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 clamp(4px, 0.8svh, 8px);
  position: relative;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px var(--navy);
}
.about-title em {
  font-style: italic;
  -webkit-text-stroke: 1px var(--navy);
}
/* Role line — must read clearly as McKenna's title, separate from the
   "why we named the studio" story below. */
.about-role-block {
  margin: 0;
  padding-bottom: clamp(18px, 3.8svh, 36px);
  border-bottom: 1px solid var(--cloud-mid);
  position: relative;
  max-width: 34em;
}
.about-role {
  font-family: var(--serif);
  font-size: clamp(1.55rem, calc(2.8vw + 0.35svh), 2.7rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  -webkit-text-stroke: 0.5px var(--navy);
}
.about-role em {
  font-style: italic;
  font-weight: 400;
}
/* "The name" bridges Owner → origin story so readers know the
   next block explains Sadie Marie, not McKenna's credentials. */
.about-name-origin {
  margin-top: clamp(20px, 4.2svh, 40px);
  margin-bottom: clamp(16px, 3.2svh, 32px);
  position: relative;
  max-width: 38em;
}
.about-origin-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: clamp(10px, 1.6svh, 16px);
}
.about-intro {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: clamp(0.95rem, calc(1.1vw + 0.25svh), 1.2rem);
  font-weight: 400;
  color: #4a5468;
  line-height: clamp(1.62, calc(1.48 + 0.45svh), 1.88);
  margin: 0;
  position: relative;
  border-left: 2px solid rgba(13, 27, 42, 0.22);
  padding-left: 22px;
}
.about-intro em {
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.about-phonetic {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72em;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--mist);
  margin-left: 0.15em;
  white-space: nowrap;
}
/* Magazine-column measure for credentials + studio promise —
   prevents long horizontal lines on wide viewports. */
.about-bio {
  max-width: 36rem;
  margin-top: 6px;
  position: relative;
}
.about-body {
  font-family: var(--sans);
  font-size: clamp(0.86rem, calc(0.9vw + 0.2svh), 1.02rem);
  font-weight: 300;
  line-height: clamp(1.68, calc(1.52 + 0.5svh), 1.92);
  color: #3a4250;
  margin-bottom: clamp(12px, 2.4svh, 22px);
  position: relative;
  max-width: none;
}
.about-body:last-child {
  margin-bottom: 0;
}
.about-closing {
  font-family: var(--serif);
  font-size: clamp(1.25rem, calc(2vw + 0.25svh), 1.9rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--navy);
  margin-top: clamp(20px, 4.4svh, 44px);
  padding-top: clamp(18px, 3.6svh, 36px);
  border-top: 1px solid var(--cloud-mid);
  position: relative;
  max-width: 36rem;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--cloud-mid);
  padding-top: 38px;
  position: relative;
}
.stat { padding-right: 24px; }
.stat:not(:last-child) {
  border-right: 1px solid var(--cloud-mid);
  margin-right: 24px;
}
.stat-number {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ── PORTFOLIO — interlocking editorial collage ── */
#portfolio {
  background: var(--navy);
  padding: 100px 64px;
  position: relative;
  overflow: hidden;
}
.portfolio-bg-text {
  position: absolute;
  bottom: -40px; right: -20px;
  font-family: var(--serif);
  font-size: clamp(8rem, 18vw, 22rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
  letter-spacing: -0.04em;
}
.portfolio-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
}
.portfolio-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
  line-height: 0.9;
  color: var(--off-white);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px var(--off-white);
}
.portfolio-title em {
  font-style: italic;
  color: var(--cloud-mid);
  -webkit-text-stroke: 1px var(--cloud-mid);
}
.portfolio-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 320px 240px;
  gap: 10px;
  position: relative;
}
.p-item {
  overflow: hidden;
  position: relative;
  background: var(--navy-mid);
}
.p-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
  filter: saturate(0.82);
}
.p-item:hover img { transform: scale(1.06); }

/* Portfolio captions — desktop (md+ / min-width 861px): in-image hover overlay */
.p-tag--mobile {
  display: none;
}
.p-tag--desktop {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(13,27,42,0.85) 0%, transparent 100%);
  padding: 24px 18px 14px;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,243,240,0.8);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.p-item:hover .p-tag--desktop {
  opacity: 1;
  transform: translateY(0);
}

.p-item-1 { grid-column: 1 / 6; grid-row: 1; }
.p-item-2 { grid-column: 6 / 13; grid-row: 1; }
.p-item-3 { grid-column: 1 / 5; grid-row: 2; }
.p-item-4 { grid-column: 5 / 9; grid-row: 2; }
.p-item-5 { grid-column: 9 / 13; grid-row: 2; }

.portfolio-quote-card {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-40%);
  background: var(--off-white);
  padding: 24px 30px;
  z-index: 20;
  max-width: 220px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.portfolio-quote-card p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--navy);
}
.portfolio-quote-card span {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist);
}

/* Portfolio lightbox (mobile tap-to-expand) */
.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.portfolio-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.portfolio-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.portfolio-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.portfolio-lightbox-close:hover { color: #fff; }

/* ── POLICIES ── */
#policies {
  background: var(--off-white);
  padding: 120px 64px;
  position: relative;
  overflow: hidden;
}
.policies-bg-num {
  position: absolute;
  top: -20px; right: 0;
  font-family: var(--serif);
  font-size: 28vw;
  font-weight: 400;
  line-height: 1;
  color: rgba(13, 27, 42, 0.04);
  pointer-events: none;
  letter-spacing: -0.06em;
  z-index: 0;
}
.policies-masthead {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 28px;
  margin-bottom: 60px;
}
.policies-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 4.5vw, 5.5rem);
  font-weight: 400;
  line-height: 0.92;
  color: var(--navy);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px var(--navy);
  margin-bottom: 0;
}
.policies-title em {
  font-style: italic;
  -webkit-text-stroke: 1px var(--navy);
}
.policies-sub {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--mist);
  max-width: 220px;
  text-align: right;
  line-height: 1.65;
  margin-bottom: 8px;
}
.policies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
  align-items: stretch;
}
.policy-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 36px 32px 40px;
  background: #fff;
  border: 1px solid var(--cloud-mid);
  box-shadow: 0 12px 32px rgba(13, 27, 42, 0.06);
}
.policy-num {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--navy);
  opacity: 0.15;
  line-height: 1;
  margin-bottom: 16px;
}
.policy-title {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.policy-body {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.95;
  color: #4a5468;
  margin: 0;
  flex: 1;
}
.policy-body strong {
  font-weight: 400;
  color: var(--navy);
}
.policies-note {
  margin-top: 60px;
  background: var(--navy);
  color: var(--off-white);
  padding: 36px 44px;
  display: flex;
  align-items: center;
  gap: 44px;
  position: relative;
}
.policies-note-text {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.72;
  opacity: 0.78;
}
.policies-note-cta { flex-shrink: 0; }
.btn-white {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--off-white);
  padding: 16px 34px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
}
.btn-white:hover { opacity: 0.85; transform: translateY(-2px); }

/* ── CONTACT ── */
#contact {
  background: var(--cloud);
  padding: 120px 64px 90px;
  position: relative;
  overflow: hidden;
}
.contact-bg-word {
  position: absolute;
  /* Anchor the "H" to the right column's left edge: 50% lands at the
     section's horizontal center; +45px (half of the 90px grid gap) jumps
     past the gap to where the right column begins. */
  top: -30px; left: calc(50% + 45px); right: auto;
  font-family: var(--serif);
  font-size: clamp(7rem, 16vw, 22rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(13,27,42,0.04);
  pointer-events: none;
  letter-spacing: -0.04em;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  position: relative;
}
.contact-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: 28px;
  -webkit-text-stroke: 1px var(--navy);
}
.contact-title em {
  font-style: italic;
  -webkit-text-stroke: 1px var(--navy);
}
.contact-desc {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  color: #4a5468;
  margin-bottom: 44px;
}
.contact-info-item {
  display: flex; gap: 18px; align-items: flex-start;
  margin-bottom: 18px;
}
.contact-info-label {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist);
  padding-top: 2px;
  min-width: 74px;
}
.contact-info-value {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
}

/* ── FIND ME / LET'S CONNECT ── */
.section-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--navy);
  margin: 14px 0 24px;
  -webkit-text-stroke: 1px var(--navy);
}
.section-title em {
  font-style: italic;
  -webkit-text-stroke: 1px var(--navy);
}
.section-divider {
  width: 56px;
  height: 1px;
  background: rgba(13,27,42,0.35);
  margin: 0 0 36px;
}
.contact-block {
  margin-bottom: 28px;
}
.contact-block h4 {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 8px;
}
.contact-block p,
.contact-block a {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.contact-block a:hover {
  color: var(--navy);
  border-bottom-color: rgba(13,27,42,0.45);
}
.contact-maps-link {
  margin-top: 10px;
}
.contact-maps-link a {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map-container {
  width: 100%;
  align-self: stretch;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(13,27,42,0.12);
  box-shadow: 0 8px 24px rgba(13,27,42,0.06);
  background: rgba(13,27,42,0.04);
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(30%) contrast(110%);
}

/* ── REVIEWS CAROUSEL ── */
.reviews-section {
  background: var(--off-white);
  padding: 80px 64px;
  position: relative;
}
.reviews-section__header {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 44px;
}
.reviews-section__header .section-title {
  margin: 0;
}
.reviews-carousel {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}
.reviews-carousel__viewport {
  overflow: hidden;
  width: 100%;
}
.reviews-carousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.reviews-card {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  padding: 24px 24px 20px;
  background: linear-gradient(180deg, #fff 0%, #fdf9f7 100%);
  border: 1px solid rgba(13, 27, 42, 0.07);
  border-radius: 16px;
  box-shadow:
    0 10px 28px rgba(13, 27, 42, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.reviews-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviews-card__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(13, 27, 42, 0.05);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(13, 27, 42, 0.06);
}
.reviews-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--mist);
}
.reviews-card__name {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--navy);
  margin: 0;
}
.reviews-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.reviews-card__stars {
  display: inline-flex;
  gap: 3px;
  font-size: 0.84rem;
  line-height: 1;
  color: #c9a227;
  letter-spacing: 0.04em;
}
.reviews-card__date {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--mist);
}
.reviews-card__quote {
  flex: 1;
  margin: 0;
  padding-left: 2px;
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.68;
  color: #505868;
}
.reviews-card__verified {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}
.reviews-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(13, 27, 42, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.reviews-carousel__nav:hover:not(:disabled) {
  background: var(--off-white);
  border-color: rgba(13, 27, 42, 0.28);
}
.reviews-carousel__nav:disabled {
  opacity: 0;
  pointer-events: none;
}
.reviews-carousel__nav--prev {
  left: -12px;
}
.reviews-carousel__nav--next {
  right: -12px;
}
@media (max-width: 860px) {
  .reviews-section {
    padding: 64px 24px;
  }
  .reviews-carousel__nav--prev {
    left: 4px;
  }
  .reviews-carousel__nav--next {
    right: 4px;
  }
}

/* ── FAQ ── */
.faq-section {
  background: var(--navy);
  padding: 90px 64px;
}
.faq-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.faq-big-title {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6vw, 7rem);
  font-weight: 400;
  line-height: 0.9;
  color: var(--off-white);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px var(--off-white);
  hyphens: none;
}
.faq-big-title-line1 {
  white-space: nowrap;
}
.faq-big-title em {
  font-style: italic;
  color: var(--cloud-mid);
  -webkit-text-stroke: 1px var(--cloud-mid);
}
.faq-aside-note {
  margin-top: 32px;
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(221,224,230,0.5);
  line-height: 1.7;
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--off-white);
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: opacity 0.3s;
}
.faq-q:hover { opacity: 0.6; }
.faq-icon {
  font-size: 1.1rem;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.35s;
  font-family: var(--sans);
  color: var(--cloud-mid);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.95;
  color: rgba(221,224,230,0.6);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, padding 0.3s;
  padding-bottom: 0;
}
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 22px; }

/* ── FOOTER ── */
footer {
  background: var(--ink);
  padding: 44px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-logo {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--off-white);
  opacity: 0.8;
}
.footer-copy {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--mist-on-dark);
}
.footer-links { display: flex; gap: 28px; list-style: none; }
.footer-links a {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist-on-dark);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--off-white); }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
  contain: layout style;
}
.reveal:not(.visible) {
  will-change: transform, opacity;
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.1s; }
.reveal-delay-3 { transition-delay: 0.15s; }
.reveal-delay-4 { transition-delay: 0.2s; }

/* ── ANIMATIONS ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.55s ease both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.28s; }
.delay-4 { animation-delay: 0.36s; }

/* ==========================================================================
   RESPONSIVE — Tablet and Mobile breakpoints
   ========================================================================== */

/* Short laptop / small viewport height — keep portrait tall, fit all copy */
@media (min-width: 861px) and (max-height: 820px) {
  #about {
    padding-top: clamp(56px, 8svh, 80px);
    padding-bottom: clamp(56px, 8svh, 80px);
  }
  .about-copy {
    top: calc(var(--nav-block) + 8px);
  }
  .about-title {
    font-size: clamp(2rem, 3.2vw, 3.1rem);
  }
  .about-role {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
  }
}

@media (max-width: 1100px) {
  nav { padding: 0 36px; }
  #hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-text-col {
    padding: calc(var(--nav-block) + 20px) 40px 52px 50px;
  }
  .hero-title { margin-right: 0; }
  #services { padding: 90px 36px; }
  .services-masthead { flex-wrap: wrap; }
  .services-referral {
    max-width: min(100%, 28rem);
  }
  .services-cols { grid-template-columns: 1fr 1px 1fr; }
  .services-cols .col-rule:last-of-type { display: none; }
  .services-cols > div:last-child { grid-column: 1 / -1; }
  #about { padding: 80px 36px; }
  .about-bg-text {
    font-size: 9.5rem;
    left: 64px;
    top: 10px;
  }
  .about-split { column-gap: 2.5rem; }
  .about-copy { padding-left: 40px; }
  .about-bio,
  .about-closing { max-width: 100%; }
  #portfolio { padding: 80px 36px; }
  .portfolio-collage { grid-template-rows: 260px 200px; }
  #policies { padding: 90px 36px; }
  #contact { padding: 90px 36px 70px; }
  .contact-grid { gap: 56px; }
  .faq-section { padding: 80px 36px; }
  footer { padding: 36px 36px; }
}

@media (max-width: 860px) {
  /*
    Belt-and-braces: clip any wide children (marquee track, portfolio
    stagger, negative margins) so the page only scrolls vertically.
  */
  html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  nav,
  #hero,
  #services,
  #portfolio,
  #about,
  #policies,
  #contact,
  .faq-section,
  footer,
  .reviews-section {
    max-width: 100%;
    overflow-x: clip;
  }
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  /*
    Reset the desktop hero padding-top: on mobile the columns stack
    and the text column's own `padding: 120px 24px 60px` already
    clears the (shorter) mobile navbar. Doubling them would shove
    the title way down the viewport.
  */
  #hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    padding-top: 0;
  }
  .hero-img-col {
    min-height: 0;
    align-self: stretch;
    aspect-ratio: var(--hero-aspect);
  }
  .hero-text-col {
    padding: calc(var(--nav-block) + 16px) 24px 40px;
    order: -1;
    justify-content: flex-end;
    min-height: 0;
  }
  .hero-title { margin-right: 0; font-size: clamp(3.5rem,14vw,6rem); }
  .hero-scroll-hint { margin-top: 24px; }
  #services { padding: 80px 24px; }
  .services-masthead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .services-referral {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    align-self: stretch;
    padding: 14px 16px 16px;
  }
  .services-referral-line {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .services-referral-line:first-child {
    justify-content: flex-start;
  }
  .services-referral-line:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .services-referral-detail {
    max-width: none;
    flex: none;
    width: 100%;
  }
  .services-referral-link {
    align-self: flex-start;
  }
  .services-cols { grid-template-columns: 1fr; }
  .col-rule { display: none; }
  #about { padding: 72px 24px 64px; }
  .about-bg-text { display: none; }
  .about-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 12px;
  }
  .about-masthead,
  .about-img-panel,
  .about-copy {
    grid-column: 1;
    grid-row: auto;
  }
  .about-img-panel {
    box-shadow: 0 16px 40px rgba(13, 27, 42, 0.12);
  }
  .about-img-panel img {
    aspect-ratio: var(--about-portrait-aspect);
    width: 100%;
    height: auto;
  }
  .about-copy {
    grid-row: auto;
    align-self: stretch;
    position: static;
    max-height: none;
    display: block;
    padding: 32px 0 0;
    padding-top: 32px;
  }
  #portfolio { padding: 80px 24px; }
  .portfolio-masthead { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Mobile micro-collage — all five tiles on one screen, zig-zag stagger */
  .portfolio-collage {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-template-columns: unset;
    grid-template-rows: unset;
  }
  .p-item {
    width: 65%;
    aspect-ratio: unset;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: transparent;
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .p-item:nth-child(odd) { align-self: flex-start; }
  .p-item:nth-child(even) { align-self: flex-end; }
  .p-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    cursor: zoom-in;
    background: var(--navy-mid);
  }
  /* Mobile captions — below image, always visible, no gradient */
  .p-tag--desktop {
    display: none;
  }
  .p-tag--mobile {
    display: block;
    position: static;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    background: none;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a8a29e;
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Zig-zag: left tiles → caption flush left; right tiles → flush right */
  .p-item:nth-child(odd) .p-tag--mobile {
    text-align: left;
  }
  .p-item:nth-child(even) .p-tag--mobile {
    text-align: right;
  }
  .portfolio-quote-card { display: none; }
  #policies { padding: 80px 24px; }
  .policies-masthead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .policies-sub { text-align: left; max-width: none; }
  .policies-grid { grid-template-columns: 1fr; }
  .policies-note { flex-direction: column; gap: 20px; }
  #contact { padding: 80px 24px 60px; }
  .contact-grid { grid-template-columns: 1fr; gap: 52px; }
  .contact-details { order: 1; }
  .map-container { order: 2; width: 100%; aspect-ratio: 5 / 4; align-self: auto; }
  .contact-bg-word { display: none; }
  .faq-section { padding: 80px 24px; }
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-big-title { font-size: clamp(3rem,12vw,5rem); }
  footer { padding: 28px 24px; flex-direction: column; gap: 18px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }

  /* Mobile only: full page visible on load — no hero fade or scroll reveal */
  .fade-in,
  .fade-in.delay-1,
  .fade-in.delay-2,
  .fade-in.delay-3,
  .fade-in.delay-4 {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .reveal,
  .reveal.reveal-delay-1,
  .reveal.reveal-delay-2,
  .reveal.reveal-delay-3,
  .reveal.reveal-delay-4,
  .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   APPOINTMENT MANAGEMENT PORTAL  (/manage.html)
   Magic-link page: view, reschedule, or cancel a booking by UID.
   Reuses the marketing site's tokens (--navy, --cloud, fonts, .btn-*),
   then layers portal-specific cards, modal, and reschedule view on top.
   ========================================================================== */

.portal-body {
  background: var(--off-white);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Focus mode: when the reschedule view is active we hide the masthead +
   footer so the Cal embed has maximum breathing room. Cal's embed.js posts
   its preferred height back to the iframe and we honour it (any attempt to
   stretch the iframe past Cal's reported height causes Cal to clip its own
   bottom rows). If the calendar ends up taller than the viewport, the page
   scrolls naturally — far better than losing the bottom of the calendar. */
.portal-body.portal-focus-mode .portal-masthead,
.portal-body.portal-focus-mode .portal-footer { display: none; }
.portal-body.portal-focus-mode .portal-main {
  padding-top: 18px;
  padding-bottom: 18px;
}
.portal-body.portal-focus-mode .portal-reschedule-header {
  margin-bottom: 14px;
}
.portal-body.portal-focus-mode .portal-reschedule-mount {
  min-height: 640px;
  padding: 12px;
}

.portal-nav {
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 64px;
  background: rgba(13,27,42,0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245,243,240,0.1);
}
.portal-nav-back {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--off-white);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.portal-nav-back:hover { opacity: 1; }

.portal-main {
  flex: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 44px 64px 36px;
}

.portal-masthead {
  margin-bottom: 28px;
  max-width: 760px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  align-items: end;
}
.portal-masthead .section-label,
.portal-masthead .portal-title,
.portal-masthead .section-divider {
  grid-column: 1;
}
.portal-masthead .portal-intro { grid-column: 2; align-self: end; padding-bottom: 4px; }
.portal-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--navy);
  margin: 8px 0 14px;
  -webkit-text-stroke: 0.5px var(--navy);
  white-space: nowrap;
}
.portal-title em {
  font-style: italic;
  -webkit-text-stroke: 0.5px var(--navy);
}
.portal-masthead .section-divider { margin: 0 0 0; }
.portal-intro {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a5468;
  margin: 0;
  max-width: 480px;
}

/* ── STATE CONTAINERS ── */
.portal-inline-notice {
  max-width: 960px;
  margin: 0 auto 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(180, 140, 60, 0.12);
  border: 1px solid rgba(180, 140, 60, 0.35);
  color: #5c4a1f;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}
.portal-inline-notice[hidden] { display: none; }

/* ── CARDS ── */
.portal-card {
  background: var(--off-white);
  border: 1px solid rgba(13,27,42,0.10);
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(13,27,42,0.05);
  padding: 32px 34px 28px;
  position: relative;
}
.portal-card--center {
  max-width: 640px;
  margin: 24px auto;
  text-align: center;
}
.portal-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.54rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 10px;
}
.portal-card-title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.9vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 14px;
}
.portal-card-title em {
  font-style: italic;
}
.portal-card-body {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
  color: #4a5468;
  margin-bottom: 20px;
}

/* ── DETAILS + ACTIONS GRID ── */
.portal-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: start;
}

.portal-status {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.portal-status[data-variant="confirmed"] {
  color: var(--navy);
  background: rgba(13,27,42,0.06);
  border-color: rgba(13,27,42,0.18);
}
.portal-status[data-variant="pending"] {
  color: #8a6b32;
  background: rgba(180,140,60,0.10);
  border-color: rgba(180,140,60,0.30);
}
.portal-status[data-variant="cancelled"],
.portal-status[data-variant="past"] {
  color: #8a3232;
  background: rgba(138,50,50,0.08);
  border-color: rgba(138,50,50,0.30);
}

.portal-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portal-detail-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(13,27,42,0.07);
}
.portal-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.portal-detail-row[hidden] { display: none; }
.portal-detail-row dt {
  font-family: var(--sans);
  font-size: 0.54rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mist);
}
.portal-detail-row dd {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── ACTIONS ── */
.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.portal-actions--stack { flex-direction: column; align-items: stretch; }
.portal-actions--stack .btn-navy,
.portal-actions--stack .btn-outline-navy { text-align: center; }
.portal-actions--end { justify-content: flex-end; }

.portal-cancel-btn { /* override only when the cancel button should look destructive */ }
.portal-cancel-btn:hover {
  background: #8a3232 !important;
  color: var(--off-white) !important;
  border-color: #8a3232 !important;
}
.btn-navy.portal-cancel-btn:hover {
  background: #8a3232 !important;
}
button.btn-navy,
button.btn-outline-navy {
  border-radius: 0;
  font: inherit;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
button.btn-navy:disabled,
button.btn-outline-navy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

.portal-fineprint {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mist);
  margin-top: 16px;
}
.portal-fineprint a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(13,27,42,0.25);
  text-underline-offset: 3px;
}

/* ── RESCHEDULE VIEW ── */
.portal-reschedule-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.portal-reschedule-hint {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(13, 27, 42, 0.72);
  margin: 0 0 18px;
  max-width: 42rem;
}
.portal-reschedule-mount {
  background: var(--off-white);
  border: 1px solid rgba(13,27,42,0.10);
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(13,27,42,0.05);
  padding: 16px;
  min-height: 620px;
}
.portal-reschedule-mount iframe {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

/* ── SUCCESS ── */
.portal-success-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13,27,42,0.06);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.portal-card--rescheduled {
  max-width: 520px;
  padding: 40px 28px 32px;
}
.portal-card--rescheduled .portal-success-mark {
  background: rgba(13, 27, 42, 0.08);
  margin-bottom: 18px;
}
.portal-card--rescheduled .portal-eyebrow {
  margin-bottom: 8px;
}
.portal-card--rescheduled .portal-card-title {
  margin-bottom: 12px;
}
.portal-rescheduled-panel {
  margin: 8px 0 4px;
  padding: 4px 18px;
  border-radius: 12px;
  background: rgba(13, 27, 42, 0.035);
  border: 1px solid rgba(13, 27, 42, 0.08);
  text-align: left;
}
.portal-rescheduled-details {
  margin: 0;
  text-align: left;
  width: 100%;
}
.portal-rescheduled-details .portal-detail-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(13, 27, 42, 0.08);
}
.portal-rescheduled-details .portal-detail-row:first-child {
  border-top: none;
}
.portal-rescheduled-details .portal-detail-row:last-child {
  border-bottom: none;
}
.portal-rescheduled-details dt {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  padding-top: 0.35em;
}
.portal-rescheduled-details dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--navy);
  line-height: 1.35;
}
.portal-rescheduled-sms {
  text-align: center;
  margin-top: 22px;
  margin-bottom: 4px;
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}
.portal-rescheduled-actions {
  margin-top: 22px;
  justify-content: center;
}
.portal-rescheduled-actions .btn-navy,
.portal-rescheduled-actions .btn-outline-navy {
  width: 100%;
  max-width: 280px;
  justify-content: center;
}

/* ── LOADING SKELETON ── */
.portal-skeleton {
  max-width: 720px;
  padding: 44px;
  background: var(--off-white);
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(13,27,42,0.04);
}
.portal-skeleton-bar {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(13,27,42,0.06) 0%, rgba(13,27,42,0.12) 50%, rgba(13,27,42,0.06) 100%);
  background-size: 200% 100%;
  animation: portalShimmer 1.6s ease-in-out infinite;
  margin-bottom: 14px;
}
.portal-skeleton-bar--lg { height: 28px; width: 60%; margin-bottom: 28px; }
.portal-skeleton-bar--sm { width: 40%; }
.portal-skeleton-note {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 18px;
  text-align: center;
  max-width: 720px;
}
@keyframes portalShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── MODAL ── */
.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  animation: portalFade 0.25s ease;
}
.portal-modal-backdrop[hidden] { display: none; }
.portal-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: var(--off-white);
  border: 1px solid rgba(13,27,42,0.12);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(13,27,42,0.25);
  padding: 40px 40px 32px;
  width: calc(100% - 48px);
  max-width: 500px;
  animation: portalPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.portal-modal[hidden] { display: none; }
.portal-modal-error {
  font-family: var(--sans);
  font-size: 0.84rem;
  color: #8a3232;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(138,50,50,0.08);
  border: 1px solid rgba(138,50,50,0.25);
  border-radius: 6px;
}
.portal-modal-error[hidden] { display: none; }
.portal-modal-fee {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--navy, #0d1b2a);
  margin: 0 0 4px;
  padding: 12px 14px;
  background: rgba(13, 27, 42, 0.06);
  border: 1px solid rgba(13, 27, 42, 0.12);
  border-radius: 8px;
}
.portal-modal-fee[hidden] { display: none; }
.portal-modal-fee strong {
  font-weight: 600;
}
@keyframes portalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes portalPop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── FOOTER (portal variant — slimmer than marketing footer) ── */
.portal-footer {
  background: var(--ink);
  padding: 20px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.portal-footer .footer-logo { font-size: 0.95rem; }
.portal-footer .footer-copy { font-size: 0.54rem; }

/* ── PORTAL RESPONSIVE ── */
@media (max-width: 960px) {
  .portal-nav { padding: 16px 22px; }
  .portal-nav-back { font-size: 0.58rem; letter-spacing: 0.18em; }
  .portal-main { padding: 28px 22px 28px; }
  .portal-masthead {
    margin-bottom: 22px;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .portal-masthead .portal-intro {
    grid-column: 1;
    padding-bottom: 0;
    padding-top: 4px;
  }
  .portal-title { font-size: clamp(1.6rem, 6vw, 2.2rem); white-space: normal; }
  .portal-intro { font-size: 0.88rem; }
  .portal-grid { grid-template-columns: 1fr; gap: 16px; }
  .portal-card { padding: 24px 20px 22px; }
  .portal-card-title { font-size: clamp(1.2rem, 4vw, 1.55rem); }
  .portal-detail-row { grid-template-columns: 92px 1fr; gap: 12px; }
  .portal-reschedule-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .portal-reschedule-header .btn-outline-navy { align-self: flex-start; }
  .portal-reschedule-mount { min-height: 540px; padding: 10px; }
  .portal-footer { padding: 18px 22px; flex-direction: column; text-align: center; gap: 8px; }
  /* On mobile, focus mode just slims the main padding — the Cal iframe keeps
     its natural reported height so its content can't be clipped, and the
     page scrolls if needed. */
  .portal-body.portal-focus-mode .portal-main { padding: 14px 22px; }
  .portal-body.portal-focus-mode .portal-reschedule-mount { min-height: 560px; }
}
@media (max-width: 540px) {
  .portal-nav { padding: 14px 18px; }
  .portal-main { padding: 32px 18px 32px; }
  .portal-card { padding: 24px 18px 22px; }
  .portal-modal { padding: 26px 20px 20px; width: calc(100% - 32px); }
  .portal-actions { flex-direction: column; align-items: stretch; }
  .portal-actions .btn-navy,
  .portal-actions .btn-outline-navy { width: 100%; text-align: center; padding-left: 24px; padding-right: 24px; }
  .portal-actions--end { flex-direction: column-reverse; }
  .portal-detail-row { grid-template-columns: 1fr; gap: 4px; padding-bottom: 12px; }
  .portal-detail-row dt { font-size: 0.52rem; }
  .portal-skeleton { padding: 28px 22px; }
  .portal-success-mark { width: 48px; height: 48px; }
}

/* ── LEGAL PAGES (privacy / terms) ── */
.legal-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
}
.legal-main {
  flex: 1;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 48px 28px 72px;
}
.legal-masthead { margin-bottom: 36px; }
.legal-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 10px 0 0;
}
.legal-title em {
  font-style: italic;
  font-weight: 400;
}
.legal-updated {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
.legal-prose {
  font-family: var(--serif-alt);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink);
}
.legal-prose h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 2.2em 0 0.7em;
  color: var(--ink);
}
.legal-prose p { margin: 0 0 1em; }
.legal-prose ul {
  margin: 0 0 1.2em;
  padding-left: 1.25em;
}
.legal-prose li {
  margin-bottom: 0.55em;
}
.legal-prose a {
  color: var(--navy);
  text-underline-offset: 3px;
}
.legal-prose a:hover { opacity: 0.8; }
/* CTA buttons inside prose must keep cream text on navy (link color would crush contrast). */
.legal-prose a.btn-navy,
.legal-prose a.btn-navy:hover {
  color: var(--off-white);
  opacity: 1;
  text-decoration: none;
}
.legal-prose strong { font-weight: 500; }

@media (max-width: 640px) {
  .legal-main { padding: 32px 20px 56px; }
  .legal-prose { font-size: 1.02rem; }
}

/* ── SEO landing pages ── */
.seo-landing-prose .seo-landing-cta {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
}
.seo-landing-related {
  margin-top: 28px;
  font-size: 0.95rem;
  color: var(--ink-soft, #5c574f);
}
.seo-city-list {
  columns: 2;
  max-width: 420px;
  margin: 0 0 1.5em;
  padding-left: 1.2em;
}
@media (max-width: 520px) {
  .seo-city-list { columns: 1; }
}