/* ==========================================================================
   Sadie Marie — Luxury Beauty Studio
   Stylesheet
   ========================================================================== */

:root {
  --off-white: #F5F3F0;
  --cloud: #DDE0E6;
  --cloud-mid: #C8CDD6;
  --navy: #0D1B2A;
  --navy-mid: #1C2E42;
  --navy-light: #2A4460;
  --ink: #1a1a24;
  --mist: #8A93A0;
  --serif: 'Bodoni Moda', Georgia, serif;
  --serif-alt: 'EB Garamond', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  /*
    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);
}
body {
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 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);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245,243,240,0.1);
  transition: padding 0.4s ease;
}
nav.scrolled { padding: 16px 64px; }
.nav-logo {
  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; gap: 44px; list-style: none; }
.nav-links a {
  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 {
  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 {
  /*
    The hero fills the full 100vh with NO top reservation for the
    fixed navbar. This is intentional: the image column extends from
    viewport y=0 all the way to y=100vh, and the translucent navbar
    floats over the top ~88px. The text column avoids overlap by
    carrying its own `padding-top: 80px` (see `.hero-text-col`).

    Why we accept the small loss in the WYSIWYG editor — and gain a
    much better feel — is the rubber-band overscroll: when the user
    pulls the page down past the top edge on macOS, the body bounces
    down and the hero image bounces with it. Because the image
    extends to y=0, what slides into view is more image, not an
    off-white "gap". The picture reads as continuous instead of
    abruptly stopping at the navbar's lower edge.
  */
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--off-white);
}
.hero-img-col {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.hero-img-col img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.88);
}
.hero-img-col::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(13,27,42,0.55) 0%, transparent 100%);
}

.hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*
    The 80px top padding pushes the title clear of the fixed-position
    navbar. We deliberately do NOT use a hero-level padding-top to
    achieve this — that would also push the image column down and
    create an off-white gap above the photo that would slide into
    view during overscroll. By scoping the offset to the text column
    only, the image column stays anchored at y=0 and the rubber-band
    bounce reveals more image rather than off-white.
  */
  padding: 80px 60px 40px 70px;
  position: relative;
  z-index: 2;
  height: 100%;
}
.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 {
  position: absolute;
  bottom: 32px; left: 70px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist);
  opacity: 0.6;
}
.hero-scroll-hint::before {
  content: '';
  width: 38px; height: 1px;
  background: var(--mist);
}

/* ── MARQUEE ── */
.marquee-strip {
  background: var(--cloud);
  color: var(--navy);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 0;
}
.marquee-inner {
  display: inline-block;
  animation: marquee 26s linear infinite;
}
.marquee-inner 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);
}
.marquee-inner span.sep { padding: 0; opacity: 0.5; font-size: 0.45rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 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;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 28px;
  margin-bottom: 60px;
}
.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);
}
.services-note {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--mist);
  max-width: 200px;
  text-align: right;
  line-height: 1.65;
}
.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.55rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--cloud-mid);
  padding-bottom: 10px;
  margin-bottom: 28px;
}
.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;
}

/*
  ─── 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;
}
/*
  Children inside the shelf shouldn't render the full per-row bottom
  border treatment — that line is owned by the .service-group wrapper.
  Padding stays so each child still reads as its own row.
*/
.service-group-children .service-item {
  border-bottom: 1px solid rgba(13, 27, 42, 0.05);
  padding: 14px 0;
}
.service-group-children .service-item:last-child {
  border-bottom: none;
}

/*
  Tablet+ horizontal shelf. Above 860px we still have the two-column
  .services-cols grid, so the child shelf flows horizontally inside its
  column rather than down. overflow-x lets the editor publish more
  children than fit in the column without breaking layout.
*/
@media (min-width: 861px) {
  .service-group-children {
    flex-direction: row;
    padding-left: 0;
    overflow-x: auto;
    border-left: none;
    scrollbar-width: thin;
  }
  .service-group-children .service-item {
    flex: 0 0 auto;
    min-width: 220px;
    padding: 14px 14px;
    border-bottom: none;
    border-right: 1px solid rgba(13, 27, 42, 0.05);
  }
  .service-group-children .service-item:last-child {
    border-right: none;
  }
}

/* ── BOOKING DRAWER (Slide-out off-canvas) ── */
#booking-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#booking-backdrop.drawer-open {
  opacity: 1;
  pointer-events: auto;
}
#booking-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 460px;
  height: 100vh;
  background: var(--off-white);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  overflow-y: auto;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}
#booking-drawer.drawer-open {
  transform: translateX(0);
}
.drawer-header {
  position: sticky;
  top: 0;
  z-index: 10;
  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;
}
.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; }
#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;
}
#close-drawer:hover {
  background: var(--navy);
  color: var(--off-white);
  border-color: var(--navy);
}
#close-drawer:active { transform: scale(0.94); }

#drawer-cal-container {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 130px);
  padding: 16px 0 24px;
}
/* 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: 16px;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}
.drawer-mount.active {
  position: static;
  visibility: visible;
  pointer-events: auto;
}
#drawer-cal-container iframe {
  width: 100% !important;
  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);
  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);
  display: block;
  margin-top: 3px;
}

/* ── ABOUT — overlapping magazine layout ── */
#about {
  background: var(--cloud);
  padding: 0;
  position: relative;
  overflow: visible;
}
.about-outer {
  display: grid;
  grid-template-columns: 5fr 7fr;
  /* Editorial gutter between portrait + copy — keeps the layout
     airy on wide screens without stretching body text. */
  column-gap: clamp(3rem, 5vw, 6rem);
  min-height: 700px;
  position: relative;
}
.about-img-panel {
  position: relative;
  overflow: hidden;
  min-height: 680px;
}
.about-img-panel img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  filter: saturate(0.85) contrast(1.02);
}
.about-content-panel {
  /* Left padding eases slightly — column-gap now carries the
     separation from the photo on desktop. */
  padding: 100px clamp(40px, 5vw, 72px) 80px clamp(48px, 6vw, 96px);
  background: var(--cloud);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.about-bg-word {
  position: absolute;
  top: 12px;
  left: clamp(0px, 1vw, 16px);
  font-family: var(--serif);
  font-size: clamp(7rem, 14vw, 18rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(13,27,42,0.05);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.04em;
}
.about-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 12px;
  position: relative;
  -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: 8px 0 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--cloud-mid);
  position: relative;
  max-width: 28em;
}
.about-role {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  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: 36px;
  margin-bottom: 28px;
  position: relative;
  max-width: 36em;
}
.about-origin-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 14px;
}
.about-intro {
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  color: #4a5468;
  line-height: 1.9;
  margin: 0;
  position: relative;
  border-left: 2px solid rgba(13, 27, 42, 0.22);
  padding-left: 20px;
}
.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: 32rem;
  margin-top: 4px;
  position: relative;
}
.about-body {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.95;
  color: #3a4250;
  margin-bottom: 20px;
  position: relative;
  max-width: none;
}
.about-body:last-child {
  margin-bottom: 0;
}
.about-closing {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--navy);
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--cloud-mid);
  position: relative;
  max-width: 32rem;
}
.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); }
.p-tag {
  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 { 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);
}

/* ── 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.03);
  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: 1fr 1fr 1fr;
  gap: 48px;
  position: relative;
  z-index: 2;
}
.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: 14px;
}
.policy-body {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.95;
  color: #4a5468;
}
.policy-highlight {
  display: block;
  background: var(--cloud);
  border-left: 3px solid var(--navy);
  padding: 14px 18px;
  margin-top: 16px;
  font-family: var(--serif-alt);
  font-style: italic;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ink);
}
.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);
}
.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%);
}

/* ── 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);
}
.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);
  opacity: 0.6;
}
.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);
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.footer-links a:hover { opacity: 1; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ── ANIMATIONS ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 1s ease both; }
.delay-1 { animation-delay: 0.18s; }
.delay-2 { animation-delay: 0.36s; }
.delay-3 { animation-delay: 0.52s; }
.delay-4 { animation-delay: 0.68s; }

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

@media (max-width: 1100px) {
  nav { padding: 22px 36px; }
  nav.scrolled { padding: 14px 36px; }
  #hero { grid-template-columns: 1fr 1fr; }
  .hero-text-col { padding: 50px 40px 60px 50px; }
  .hero-title { margin-right: 0; }
  #services { padding: 90px 36px; }
  .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-outer { column-gap: 2.5rem; }
  .about-content-panel { padding: 80px 40px 60px 56px; }
  .about-bg-word { font-size: 10rem; left: 0; }
  .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) {
  nav { padding: 18px 24px; }
  nav.scrolled { padding: 12px 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: 100vh; padding-top: 0; }
  .hero-img-col { min-height: 55vw; }
  .hero-text-col { padding: 120px 24px 60px; order: -1; justify-content: flex-end; }
  .hero-title { margin-right: 0; font-size: clamp(3.5rem,14vw,6rem); }
  .hero-scroll-hint { display: none; }
  #services { padding: 80px 24px; }
  .services-masthead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .services-note { text-align: left; max-width: none; }
  .services-cols { grid-template-columns: 1fr; }
  .col-rule { display: none; }
  .about-outer {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .about-img-panel { min-height: 70vw; }
  .about-content-panel { padding: 60px 24px 60px; }
  .about-bg-word { display: none; }
  #portfolio { padding: 80px 24px; }
  .portfolio-masthead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .p-item-1 { grid-column: 1 / 13; grid-row: 1; }
  .p-item-2 { grid-column: 1 / 13; grid-row: 2; }
  .p-item-3 { grid-column: 1 / 5; grid-row: 3; }
  .p-item-4 { grid-column: 5 / 9; grid-row: 3; }
  .p-item-5 { grid-column: 9 / 13; grid-row: 3; }
  .portfolio-collage { grid-template-rows: 280px 220px 180px; }
  .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; }
  .map-container { 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; }
}

/* ==========================================================================
   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-state[hidden] { display: none !important; }

/* ── 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: 24px;
  flex-wrap: wrap;
}
.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;
}

/* ── 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; }
@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; }
}