/* ============================================================
   THE REFINED CO - Homepage hero refinements
   Loads after styles.css.
   ============================================================ */

:root {
  --color-champagne:        #7D8AAC;
  --color-champagne-light:  #A5AFC8;
  --color-champagne-dark:   #5C6986;

  /* Typography: DM Sans (logo + body) + Cormorant Garamond Light (headings).
     Keep the homepage override aligned with the base stylesheet. The site
     originally weighted headings at 400; we drop to 300 for an airier,
     more editorial feel that still pairs cleanly with DM Sans's geometry. */
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* Force light weight on serif headings — styles.css inherits 400 in many
   places. Italic stays at 300 too so emphasized words feel consistent. */
h1, h2, h3, h4,
.hero__title, .section-title, .editorial-quote__text,
.founder-quote, .image-band__quote, .testimonial-card__quote,
.footer__signature {
  font-weight: 300;
}
h1 em, h2 em, h3 em,
.hero__title em, .section-title em,
.editorial-quote__text em, .footer__signature em {
  font-weight: 300;
  font-style: italic;
}

/* Cormorant Garamond at 300 is delicate — give large display sizes a
   touch more line-height so the thin strokes can breathe. */
.hero__title    { line-height: 1.05; letter-spacing: -0.005em; }
.section-title  { line-height: 1.15; letter-spacing: -0.005em; }

/* DM Sans body */
body { letter-spacing: 0.005em; }

/* ----- Logo presence -----
   Bump the nav and grow the wordmark so the brand reads from across the
   room. Nav grows from 80px to 100px desktop / 70px to 88px mobile. The
   logo mark itself goes ~32% larger to feel decisively dominant rather
   than utility-sized. */
:root { --nav-height: 100px; }
@media (max-width: 767px) {
  :root { --nav-height: 88px; }
}

.nav__logo-mark {
  width: 244px;
  height: 84px;
}
@media (max-width: 767px) {
  .nav__logo-mark {
    width: 188px;
    height: 64px;
  }
}

/* ----- Scrolled nav: brand-color band -----
   When the user scrolls past the hero, the nav swaps to the Boreal Sea
   brand color (#7D8AAC) instead of white. Logo, links, and CTA all flip
   to white so the band reads as a deliberate brand moment, not a
   utility chrome bar. Applies on every page (.page-home + .page-hero-bleed
   + standard non-bleed like privacy/terms). */
body .nav.scrolled {
  background-color: #7D8AAC !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 6px 30px rgba(13, 14, 24, 0.18) !important;
}

body .nav.scrolled .nav__logo { color: #FFFFFF !important; }
body .nav.scrolled .nav__link { color: rgba(255, 255, 255, 0.88) !important; }
body .nav.scrolled .nav__link:hover,
body .nav.scrolled .nav__link:focus-visible { color: #FFFFFF !important; }
body .nav.scrolled .nav__link.active { color: #FFFFFF !important; }
body .nav.scrolled .nav__toggle span { background-color: #FFFFFF !important; }
body .nav.scrolled .nav__cta {
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #FFFFFF !important;
  background-color: transparent !important;
}
body .nav.scrolled .nav__cta:hover,
body .nav.scrolled .nav__cta:focus-visible {
  background-color: #FFFFFF !important;
  color: #5C6986 !important;
  border-color: #FFFFFF !important;
}

/* Underline indicator — the default uses var(--color-champagne) which
   is now #7D8AAC, identical to the scrolled nav background. Flip it to
   white so the active/hover state still reads against the brand band. */
body .nav.scrolled .nav__link::after {
  background-color: #FFFFFF !important;
}

/* Nav becomes full-bleed so the logo aligns flush with the editorial
   hero's left edge instead of being trapped inside the 1200px container.
   Matches the hero's `clamp(40px, 6vw, 96px)` left/right padding so the
   wordmark and the hero's "Anti-Aging," title share a vertical guide. */
.nav .container {
  max-width: none;
  padding-left: clamp(40px, 6vw, 96px);
  padding-right: clamp(40px, 6vw, 96px);
}

/* Utility bar above the nav — keep it aligned with the same edges so
   the contact strip doesn't visually float on a narrower column. */
.utility-bar .container {
  max-width: none;
  padding-left: clamp(40px, 6vw, 96px);
  padding-right: clamp(40px, 6vw, 96px);
}

/* Footer wordmark grows in proportion — footers are sign-off moments and
   carry more weight than the nav mark. */
.footer__logo-mark {
  width: 232px;
  height: 80px;
}
@media (max-width: 640px) {
  .footer__logo-mark {
    width: 188px;
    height: 64px;
  }
}

.hero--full {
  min-height: 100vh;
  min-height: 100svh;
}

/* ============================================================
   PAGE-HERO-BLEED — apply the homepage's transparent-nav-over-hero
   treatment to inner pages with image heroes (about, services,
   membership, blog/, contact, individual blog posts). Mirrors the
   .page-home rules so the hero image flows behind the nav, the nav
   becomes transparent at top of page, and snaps to opaque on scroll.
   ============================================================ */
.page-hero-bleed .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.page-hero-bleed .nav.scrolled {
  top: 0;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.page-hero-bleed .nav:not(.scrolled) .nav__logo,
.page-hero-bleed .nav:not(.scrolled) .nav__link {
  color: var(--color-white);
}
.page-hero-bleed .nav:not(.scrolled) .nav__link {
  color: rgba(255, 255, 255, 0.85);
}
.page-hero-bleed .nav:not(.scrolled) .nav__link:hover {
  color: var(--color-white);
}
.page-hero-bleed .nav:not(.scrolled) .nav__toggle span {
  background-color: var(--color-white);
}
.page-hero-bleed .nav:not(.scrolled) .nav__cta {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
  background-color: transparent;
}
.page-hero-bleed .nav:not(.scrolled) .nav__cta:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Make the hero flow underneath the fixed nav so the image extends to
   the top of the viewport. Internal padding keeps content from sitting
   under the nav. The utility bar is hidden (--utility-height: 0px) so
   it doesn't need its own treatment here. */
.page-hero-bleed .hero--medium,
.page-hero-bleed .hero--small {
  margin-top: calc(-1 * var(--nav-height));
  padding-top: var(--nav-height);
  min-height: 80vh;
  position: relative;
}

/* Inner-page hero content positioning. Overlay below provides contrast. */
.page-hero-bleed .hero--medium .hero__content,
.page-hero-bleed .hero--small .hero__content {
  position: relative;
  z-index: 2;
}

/* ============================================================
   HERO TYPOGRAPHY STANDARDIZATION (Move 1)
   Lock the inner-page hero text system so every page renders an
   identical eyebrow → title → subtitle hierarchy. Eliminates drift
   between about / services / membership / blog / contact heroes.
   ============================================================ */
.page-hero-bleed .hero--medium .hero__label,
.page-hero-bleed .hero--small .hero__label {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #A5AFC8;
  margin: 0 0 24px;
  display: block;
}

.page-hero-bleed .hero--medium .hero__title,
.page-hero-bleed .hero--small .hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-white);
  margin: 0 0 26px;
}

.page-hero-bleed .hero--medium .hero__title em,
.page-hero-bleed .hero--small .hero__title em {
  font-style: italic;
  font-weight: 300;
  color: #A5AFC8;
}

.page-hero-bleed .hero--medium .hero__subtitle,
.page-hero-bleed .hero--small .hero__subtitle {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.08rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  margin: 0 auto;
}

/* ============================================================
   HERO ENTRY ANIMATIONS (Move 2)
   Cinematic stagger reveal on page load — image kens-burns from
   scale 1.04 with subtle blur lifting off, then eyebrow → title →
   subtitle → CTAs fade up in sequence. Augustinus Bader-style
   editorial entrance.
   ============================================================ */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageReveal {
  from {
    transform: scale(1.04);
    filter: blur(3px);
    opacity: 0.85;
  }
  to {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

/* Image / video / bg layer kens-burns + sharpen. Applies to homepage
   editorial hero image, inner-page CSS-bg heroes, and the contact
   image wrap. */
.hero__image,
.hero__video,
.hero__bg {
  animation: heroImageReveal 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Content stack: each element fades up in sequence. */
.hero__label,
.hero__title,
.hero__subtitle,
.hero__cta-group,
.hero__note,
.hero__link-arrow,
.hero__flourish,
.hero__scroll-cue {
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__flourish     { animation-delay: 0.18s; }
.hero__label        { animation-delay: 0.26s; }
.hero__title        { animation-delay: 0.40s; }
.hero__subtitle     { animation-delay: 0.62s; }
.hero__cta-group    { animation-delay: 0.78s; }
.hero__link-arrow   { animation-delay: 0.78s; }
.hero__note         { animation-delay: 0.92s; }
.hero__scroll-cue   { animation-delay: 1.10s; }

/* Multi-line editorial title — stagger each line individually for a
   line-by-line magazine reveal. */
.hero--editorial .hero__title { animation: none; }
.hero--editorial .hero__title-line {
  display: block;
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero--editorial .hero__title-line:nth-child(1) { animation-delay: 0.40s; }
.hero--editorial .hero__title-line:nth-child(2) { animation-delay: 0.54s; }
.hero--editorial .hero__title-line:nth-child(3) { animation-delay: 0.68s; }

/* ============================================================
   PAGE-LEVEL BODY FADE-IN (Move 3)
   Soft fade on initial paint so navigating between pages feels
   intentional rather than clunky. 250ms is fast enough not to feel
   slow but slow enough to register as a transition.
   ============================================================ */
@keyframes pageBodyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageBodyFadeIn 0.32s ease-out both;
}

/* ============================================================
   REDUCED-MOTION FALLBACK
   Skip all entry animations for users who prefer reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body,
  .hero__image,
  .hero__video,
  .hero__bg,
  .hero__label,
  .hero__title,
  .hero__subtitle,
  .hero__cta-group,
  .hero__note,
  .hero__link-arrow,
  .hero__flourish,
  .hero__scroll-cue,
  .hero--editorial .hero__title-line {
    animation: none !important;
  }
}

/* Strong full-image overlay on inner pages — covers the whole hero so
   text reads cleanly regardless of where it sits. Skipped on the
   homepage so the editorial photo still dominates there. */
.page-hero-bleed .hero--medium .hero__overlay,
.page-hero-bleed .hero--small .hero__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(13, 14, 24, 0.72) 0%,
      rgba(13, 14, 24, 0.50) 30%,
      rgba(13, 14, 24, 0.50) 70%,
      rgba(13, 14, 24, 0.68) 100%
    );
}

/* Lavender accent (#7D8AAC) reads too dark against image hero backgrounds.
   Switch to the lighter variant (#A5AFC8) so eyebrow + italic title
   accents stay visible. */
.page-hero-bleed .hero__label,
.page-hero-bleed .hero__title em,
.page-home .hero__label,
.page-home .hero__title em,
.hero--editorial .hero__title em,
.hero--editorial .hero__title-line--accent {
  color: #A5AFC8;
}

/* ============================================================
   SCROLL MOTION SYSTEM — site-wide editorial reveal effects
   Adds layered motion that triggers as the user scrolls. Each
   effect uses the existing `.reveal.visible` class system from
   main.js (IntersectionObserver toggles `.visible` when in view).
   Reduced-motion users get instant render with no animation.
   ============================================================ */

/* ---------- 1. SECTION TITLE UNDERLINE DRAW ---------- */
/* A delicate champagne hairline draws beneath each .section-title
   when its parent .reveal becomes visible. Subtle editorial flourish. */
.reveal .section-title {
  position: relative;
  padding-bottom: 18px;
}

.reveal .section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 56px;
  height: 1px;
  background-color: var(--color-champagne);
  opacity: 0.7;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

.reveal.visible .section-title::after {
  transform: translateX(-50%) scaleX(1);
}

/* Left-aligned section titles (used in spreads) — anchor underline left. */
.reveal-left .section-title::after,
.split-section__content .section-title::after,
.expertise-editorial__copy .section-title::after {
  left: 0;
  transform: translateX(0) scaleX(0);
  transform-origin: left center;
}

.reveal-left.visible .section-title::after,
.split-section__content.visible .section-title::after,
.expertise-editorial__copy.visible .section-title::after {
  transform: translateX(0) scaleX(1);
}

/* ---------- 2. IMAGE BAND KENS-BURNS ---------- */
/* Slow infinite zoom on parallax image bands creates atmosphere
   even when the page isn't scrolling. Pure CSS, no JS. */
.image-band {
  overflow: hidden;
}

.image-band {
  background-size: 110% auto;
  animation: imageBandDrift 20s ease-in-out infinite alternate;
}

@keyframes imageBandDrift {
  0%   { background-size: 110% auto; background-position: center 30%; }
  100% { background-size: 118% auto; background-position: center 60%; }
}

/* ---------- 3. MARQUEE PAUSE-ON-HOVER ---------- */
.marquee {
  cursor: default;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

/* ---------- 4. STAGGER CHILDREN ---------- */
/* Any .stagger-children container reveals its children with
   sequential delays when the container becomes visible. */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.18s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.31s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.44s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.57s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.70s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.83s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.96s; }

/* ---------- 5. FRAMED IMAGE REVEAL ---------- */
/* The framed-art images in philosophy / founder / services divider
   spreads reveal with a subtle scale-in when they enter view. */
.philosophy-spread__image,
.founder-spread__image-wrap,
.services-divider__image-wrap {
  overflow: hidden;
}

.philosophy-spread__image,
.founder-spread__image-wrap > img,
.services-divider__image-wrap > img {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.visible .philosophy-spread__image,
.reveal-right.visible .philosophy-spread__image,
.philosophy-spread.visible .philosophy-spread__image,
.founder-spread.visible .founder-spread__image-wrap > img,
.services-divider.visible .services-divider__image-wrap > img {
  transform: scale(1);
}

/* ---------- 6. SCROLL PROGRESS BAR ---------- */
/* Thin champagne line at the very top of the page that fills as
   the user scrolls. Subtle but luxurious touch. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(125, 138, 172, 0.08);
  z-index: 9999;
  pointer-events: none;
}

.scroll-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--color-champagne) 0%,
    var(--color-champagne-light, #A5AFC8) 100%
  );
  transition: width 0.06s linear;
  transform-origin: left center;
}

/* Hide the progress bar when modal is open or when at the very top */
.modal-open .scroll-progress {
  opacity: 0;
}

/* ---------- 7. SCROLL-DRIVEN HERO PARALLAX (modern browsers) ---------- */
/* Use CSS scroll-driven animation on browsers that support it.
   Hero image scrolls slower than content for subtle depth. */
@supports (animation-timeline: scroll()) {
  .hero--full .hero__image,
  .hero--full .hero__video {
    animation: heroParallax linear;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }

  @keyframes heroParallax {
    to {
      transform: translateY(15%) scale(1.04);
    }
  }
}

/* ---------- REDUCED-MOTION FALLBACK ---------- */
@media (prefers-reduced-motion: reduce) {
  .image-band,
  .reveal .section-title::after,
  .stagger-children > *,
  .philosophy-spread__image,
  .founder-spread__image-wrap > img,
  .services-divider__image-wrap > img,
  .scroll-progress__fill {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   BLOG POST — editorial reading experience
   Drop cap on first body paragraph, animated h2 underlines,
   gentle paragraph fade-up on scroll, softer lead block.
   Pure CSS via scroll-driven animations (animation-timeline: view)
   with graceful fallback for older browsers.
   ============================================================ */

/* Lead paragraph — soften the hard 3px rule + scroll fade-up. */
.blog-post__lead {
  border-left: 1px solid var(--color-champagne) !important;
  padding-left: 32px !important;
  font-weight: 300;
  line-height: 1.75;
  font-size: 1.18rem !important;
  position: relative;
}

/* Drop cap on first paragraph of the body content — editorial convention. */
.blog-post__content > p:first-child::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 4.2rem;
  line-height: 0.92;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--color-champagne-dark, #5C6986);
  padding: 0;
}

/* H2 section heading underline — draws when the heading enters view. */
.blog-post__content h2 {
  position: relative;
  padding-bottom: 14px;
}

.blog-post__content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 1px;
  background-color: var(--color-champagne);
  opacity: 0.65;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

.blog-post__content h2.is-visible::after {
  transform: scaleX(1);
}

/* H3 subsection — delicate champagne dot for cadence. */
.blog-post__content h3 {
  position: relative;
  padding-left: 18px;
}

.blog-post__content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background-color: var(--color-champagne);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-post__content h3.is-visible::before {
  opacity: 0.6;
  transform: scale(1);
}

/* Universal blog-element reveal: lead, paragraphs, lists, headings.
   Initial state opacity 0 + translateY 14px, transition to visible
   when JS adds .is-visible (driven by IntersectionObserver). */
.reveal-blog-element {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-blog-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slight stagger inside paragraphs/headings — subsequent siblings
   feel like reading rhythm rather than uniform pop-ins. */
.blog-post__content h2.reveal-blog-element { transition-delay: 0s; }
.blog-post__content p.reveal-blog-element  { transition-delay: 0.05s; }
.blog-post__content h3.reveal-blog-element { transition-delay: 0.05s; }

/* Inline links inside body — animated underline. */
.blog-post__content a:not(.btn) {
  color: var(--color-champagne-dark, #5C6986);
  text-decoration: none;
  background-image: linear-gradient(
    var(--color-champagne),
    var(--color-champagne)
  );
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 0.35s ease, color 0.35s ease;
}

.blog-post__content a:not(.btn):hover {
  color: var(--color-champagne);
  background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-blog-element,
  .blog-post__content h2::after,
  .blog-post__content h3::before {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .blog-post__content h2::after { transform: scaleX(1) !important; }
  .blog-post__content h3::before {
    opacity: 0.6 !important;
    transform: scale(1) !important;
  }
}

/* ============================================================
   BLOG CARDS — soften the edges + add refined motion
   Removes the hard 1px border and replaces it with a soft floating
   card feel. Adds longer hover transitions, image kens-burns drift
   on hover, title color shift, and a subtle champagne underline
   that draws beneath the title on hover.
   ============================================================ */
.blog-card {
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 0 rgba(125, 138, 172, 0.06),
              0 16px 36px rgba(13, 14, 24, 0.05);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  background-color: #FFFFFF;
  overflow: hidden;
}

.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 1px 0 rgba(125, 138, 172, 0.08),
              0 32px 60px rgba(13, 14, 24, 0.10) !important;
}

/* Smoother, slower image drift on hover — kens-burns instead of pop. */
.blog-card .blog-card__image img {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.08) !important;
}

/* Soft cream wash that fades over the image on hover, hinting at the
   champagne palette. Adds atmosphere without obscuring the photo. */
.blog-card .blog-card__image {
  position: relative;
}

.blog-card .blog-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(125, 138, 172, 0) 60%,
    rgba(125, 138, 172, 0.18) 100%
  );
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.blog-card:hover .blog-card__image::after {
  opacity: 1;
}

/* Category eyebrow — subtle horizontal rule animates beside it on hover. */
.blog-card__category {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color 0.35s ease, gap 0.35s ease;
}

.blog-card__category::after {
  content: '';
  width: 0;
  height: 1px;
  background-color: var(--color-champagne);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card:hover .blog-card__category {
  color: var(--color-champagne-dark, #5C6986);
  gap: 16px;
}

.blog-card:hover .blog-card__category::after {
  width: 24px;
}

/* Title — color shift to dark champagne on hover. */
.blog-card__title {
  transition: color 0.35s ease;
}

.blog-card:hover .blog-card__title,
.blog-card:hover .blog-card__title a {
  color: var(--color-champagne-dark, #5C6986) !important;
}

/* Body padding — slightly more breathing room. */
.blog-card__body {
  padding: 32px 30px 34px !important;
}

/* Soft mode: removes the lift on touch devices that don't have hover. */
@media (hover: none) {
  .blog-card:hover {
    transform: none !important;
  }
}

/* ============================================================
   YOUR REFINED JOURNEY — animated 3-step process
   Connecting line draws left-to-right on reveal, then each step
   stages in (number scales + fades, content fades up) in stagger.
   Hover micro-interactions on the number circle + title shift.
   ============================================================ */
.journey--motion .process-steps {
  position: relative;
  padding-top: 8px;
}

/* Override the static connecting line — animated draw on reveal. */
.journey--motion .process-steps::before {
  background: linear-gradient(
    90deg,
    rgba(125, 138, 172, 0) 0%,
    var(--color-champagne) 12%,
    var(--color-champagne) 88%,
    rgba(125, 138, 172, 0) 100%
  );
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.journey--motion .process-steps.visible::before {
  transform: scaleX(1);
}

/* Each step starts hidden, slides up + fades in with stagger. */
.journey--motion .process-step {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey--motion .process-steps.visible .process-step {
  opacity: 1;
  transform: translateY(0);
}

.journey--motion .process-steps.visible .process-step:nth-child(1) {
  transition-delay: 0.35s;
}
.journey--motion .process-steps.visible .process-step:nth-child(2) {
  transition-delay: 0.55s;
}
.journey--motion .process-steps.visible .process-step:nth-child(3) {
  transition-delay: 0.75s;
}

/* Number circle: subtle scale-in + champagne glow ring on reveal,
   then a gentle pulse on hover. */
.journey--motion .process-step__number {
  position: relative;
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.45s ease;
}

.journey--motion .process-step__number > span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft pulse ring behind the number — animates outward on reveal. */
.journey--motion .process-step__number::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-champagne);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey--motion .process-steps.visible .process-step:nth-child(1) .process-step__number::after {
  animation: journeyPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s 1 forwards;
}
.journey--motion .process-steps.visible .process-step:nth-child(2) .process-step__number::after {
  animation: journeyPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.75s 1 forwards;
}
.journey--motion .process-steps.visible .process-step:nth-child(3) .process-step__number::after {
  animation: journeyPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.95s 1 forwards;
}

@keyframes journeyPulse {
  0%   { opacity: 0;    transform: scale(0.92); }
  20%  { opacity: 0.7;  transform: scale(1.0); }
  100% { opacity: 0;    transform: scale(1.45); }
}

/* Hover: number subtly grows, ring re-pulses, title shifts the
   smallest amount toward champagne. */
.journey--motion .process-step:hover .process-step__number {
  transform: scale(1.04);
  border-color: var(--color-champagne-dark, #5C6986);
  box-shadow: 0 0 0 6px rgba(125, 138, 172, 0.08);
}

.journey--motion .process-step:hover .process-step__number > span {
  transform: scale(1.06);
}

.journey--motion .process-step__title {
  transition: color 0.35s ease, transform 0.35s ease;
}

.journey--motion .process-step:hover .process-step__title {
  color: var(--color-champagne-dark, #5C6986);
  transform: translateY(-1px);
}

/* Mobile: line is hidden, steps stage in vertically */
@media (max-width: 767px) {
  .journey--motion .process-steps::before {
    display: none;
  }
  .journey--motion .process-step {
    transform: translateY(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey--motion .process-steps::before,
  .journey--motion .process-step,
  .journey--motion .process-step__number,
  .journey--motion .process-step__number::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   PHILOSOPHY SPREAD — editorial pull-quote with marble fragment
   Replaces the centered "quote on parallax image" pattern with an
   asymmetric magazine spread: marble slab on the left, generous
   cream space and a large italic pull-quote on the right.
   ============================================================ */
.philosophy-spread {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: stretch;
  background-color: var(--color-cream, #F7F4EE);
  position: relative;
  isolation: isolate;
}

.philosophy-spread::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(5 / 11 * 100%);
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: var(--color-cream, #F7F4EE);
  z-index: 1;
  display: none;
}

.philosophy-spread__media {
  position: relative;
  min-height: 520px;
  padding: 56px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.philosophy-spread__image {
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  box-shadow: 0 30px 80px rgba(13, 14, 24, 0.12);
}

/* Subtle inner border to give the marble a "framed plate" feel —
   reads as an artwork, not as a parallax wallpaper. */
.philosophy-spread__image::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.philosophy-spread__content {
  padding: clamp(56px, 7vw, 112px) clamp(40px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
}

.philosophy-spread__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 16px;
}

.philosophy-spread__rule {
  display: block;
  width: 56px;
  height: 1px;
  background-color: var(--color-champagne);
  opacity: 0.55;
  margin-bottom: 32px;
}

.philosophy-spread__quote {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.42;
  color: var(--color-charcoal, #1F1F22);
  letter-spacing: -0.005em;
  margin: 0 0 36px;
  padding-left: 0;
}

.philosophy-spread__quote em {
  font-style: italic;
  color: var(--color-champagne-dark, #5C6986);
  font-weight: 300;
}

/* Oversized opening quotation mark — sits to the left as a graphic
   element rather than just being inline punctuation. */
.philosophy-spread__mark {
  position: absolute;
  top: -0.55em;
  left: -0.45em;
  font-family: var(--font-serif);
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: 1;
  color: var(--color-champagne);
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.philosophy-spread__attribution {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-charcoal, #1F1F22);
  opacity: 0.7;
}

/* ---- Tablet ---- */
@media (max-width: 980px) {
  .philosophy-spread {
    grid-template-columns: 1fr;
  }
  .philosophy-spread__media {
    min-height: 380px;
    padding: 40px 40px 0;
  }
  .philosophy-spread__content {
    padding: 64px 40px 80px;
    max-width: 100%;
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .philosophy-spread__media {
    min-height: 280px;
    padding: 24px 24px 0;
  }
  .philosophy-spread__content {
    padding: 48px 24px 64px;
  }
  .philosophy-spread__quote {
    font-size: 1.35rem;
    line-height: 1.5;
  }
  .philosophy-spread__mark {
    font-size: 3.4rem;
    top: -0.45em;
    left: -0.25em;
  }
}

/* ============================================================
   MARQUEE — scrolling treatment names band
   Override the default black band with the brand slate-blue. Bigger,
   more legible, more confident — reads as a brand moment, not a
   utility ticker.
   ============================================================ */
.marquee {
  background: #7D8AAC;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.marquee__item {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  padding: 0 44px;
  letter-spacing: 0.005em;
}

.marquee__item::after {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.65);
}

/* Soft fade on left/right edges so items appear to dissolve in/out
   instead of clipping hard against the band. */
.marquee {
  position: relative;
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(90deg, #7D8AAC 0%, rgba(125, 138, 172, 0) 100%);
}
.marquee::after {
  right: 0;
  background: linear-gradient(270deg, #7D8AAC 0%, rgba(125, 138, 172, 0) 100%);
}

/* ============================================================
   SERVICE EXPLORER — two-pane treatment menu
   Sticky left rail with categorized treatments. Right panel renders
   detail content (overview / treats / 5-stage timeline / facts /
   how / pairs). Concern filter bar above. Click pairs-with chips
   to swap detail panel. Modeled on luxury aesthetic clinic patterns
   (MZ Skin, Augustinus Bader, Ouronyx).
   ============================================================ */
.service-explorer {
  background-color: var(--color-cream, #F7F4EE);
  padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 5vw, 72px);
  position: relative;
}

/* Hairline + small mark between the explorer and the editorial divider —
   makes the section transition intentional rather than a void of cream. */
.service-explorer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, rgba(125, 138, 172, 0.45), rgba(125, 138, 172, 0));
}

.service-explorer__container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(40px, 6vw, 96px);
}

.service-explorer__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.service-explorer__intro .section-title {
  margin-bottom: 14px;
}

/* ---- Concern filter pills ---- */
.service-explorer__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin-bottom: clamp(48px, 6vw, 80px);
  padding: 6px 10px;
}

.service-explorer__filter {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(125, 138, 172, 0.32);
  background-color: transparent;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal, #1F1F22);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  line-height: 1;
}

.service-explorer__filter:hover {
  border-color: var(--color-champagne);
  color: var(--color-champagne-dark, #5C6986);
}

.service-explorer__filter.is-active {
  background-color: var(--color-champagne);
  border-color: var(--color-champagne);
  color: #FFFFFF;
}

/* ---- Two-pane layout ---- */
.service-explorer__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* ---- Sticky left rail ---- */
.service-explorer__rail {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  max-height: calc(100vh - var(--nav-height) - 48px);
  overflow-y: auto;
  padding-right: 16px;
  padding-bottom: 16px;
  scrollbar-width: thin;
}

.service-explorer__rail::-webkit-scrollbar { width: 4px; }
.service-explorer__rail::-webkit-scrollbar-thumb {
  background-color: rgba(125, 138, 172, 0.3);
  border-radius: 2px;
}

.service-explorer__group {
  margin-bottom: 32px;
}
.service-explorer__group:last-child { margin-bottom: 0; }
.service-explorer__group.is-hidden { display: none; }

.service-explorer__group-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(125, 138, 172, 0.22);
}

.service-explorer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-explorer__rail-item-wrap.is-hidden { display: none; }

.service-explorer__rail-item {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 11px 0 11px 22px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-charcoal, #1F1F22);
  transition: color 0.2s ease, padding-left 0.25s ease;
}

.service-explorer__rail-dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1px;
  background-color: rgba(125, 138, 172, 0.5);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.service-explorer__rail-item:hover {
  color: var(--color-champagne-dark, #5C6986);
}
.service-explorer__rail-item:hover .service-explorer__rail-dot {
  width: 12px;
  background-color: var(--color-champagne);
}

.service-explorer__rail-item.is-active {
  color: var(--color-champagne-dark, #5C6986);
  font-style: italic;
}
.service-explorer__rail-item.is-active .service-explorer__rail-dot {
  width: 14px;
  height: 2px;
  background-color: var(--color-champagne);
}

/* ---- Detail panel ---- */
.service-explorer__detail {
  background-color: #FFFFFF;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px);
  box-shadow: 0 30px 80px rgba(13, 14, 24, 0.08);
  position: relative;
  transition: opacity 0.18s ease;
  /* Anchor to the top of the layout grid so it doesn't stretch to match
     the rail height on shorter services. */
  align-self: start;
}

.service-explorer__detail.is-swapping {
  opacity: 0.45;
}

.service-detail__hero {
  border-bottom: 1px solid rgba(125, 138, 172, 0.18);
  padding-bottom: 32px;
  margin-bottom: 40px;
}

.service-detail__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 14px;
}

.service-detail__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-charcoal, #1F1F22);
  margin: 0 0 18px;
}

.service-detail__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-champagne-dark, #5C6986);
}

.service-detail__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--color-champagne-dark, #5C6986);
  margin: 0;
  max-width: 620px;
}

/* Detail body sections */
.service-detail__body {}

.service-detail__section {
  margin-bottom: 44px;
}
.service-detail__section:last-child { margin-bottom: 0; }

.service-detail__section h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(125, 138, 172, 0.18);
}

.service-detail__section p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-charcoal, #1F1F22);
  margin: 0 0 16px;
  max-width: 70ch;
}
.service-detail__section p:last-child { margin-bottom: 0; }

.service-detail__treats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 28px;
}
.service-detail__treats li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-charcoal, #1F1F22);
}
.service-detail__treats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 1px;
  background-color: var(--color-champagne);
}

/* ---- 5-Stage Timeline ---- */
.service-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.service-stages::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--color-champagne) 0%, rgba(125, 138, 172, 0.2) 100%);
}

.service-stage {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 0 0 28px;
}
.service-stage:last-child { padding-bottom: 0; }

.service-stage__index {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-cream, #F7F4EE);
  border: 1px solid var(--color-champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-champagne-dark, #5C6986);
  flex-shrink: 0;
}

.service-stage__body {
  padding-top: 6px;
}

.service-stage__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.service-stage__label {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--color-charcoal, #1F1F22);
}

.service-stage__duration {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-champagne);
}

.service-stage__description {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-charcoal, #1F1F22);
  margin: 0;
  opacity: 0.85;
}

/* ---- Facts grid ---- */
.service-detail__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 32px;
}

.service-detail__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-detail__fact-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-champagne);
}

.service-detail__fact-value {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--color-charcoal, #1F1F22);
}

/* ---- Pairs chips ---- */
.service-detail__pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-pair-chip {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(125, 138, 172, 0.06);
  border: 1px solid rgba(125, 138, 172, 0.28);
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-charcoal, #1F1F22);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.service-pair-chip__arrow {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-champagne);
  transition: transform 0.25s ease;
}

.service-pair-chip:hover {
  background-color: var(--color-champagne);
  border-color: var(--color-champagne);
  color: #FFFFFF;
}
.service-pair-chip:hover .service-pair-chip__arrow {
  color: #FFFFFF;
  transform: translateX(2px);
}

/* ---- Detail footer ---- */
.service-detail__footer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(125, 138, 172, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.service-detail__footer-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--color-champagne-dark, #5C6986);
  margin: 0;
}

/* ---- Tablet ---- */
@media (max-width: 980px) {
  .service-explorer__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .service-explorer__rail {
    position: relative;
    top: 0;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    border-bottom: 1px solid rgba(125, 138, 172, 0.18);
    padding-bottom: 24px;
    margin-bottom: 8px;
  }
  .service-explorer__detail {
    min-height: 0;
    padding: 32px 24px 40px;
  }
  .service-detail__title {
    font-size: clamp(1.7rem, 5vw, 2.3rem);
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .service-explorer__filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .service-explorer__filter { flex-shrink: 0; }
  .service-stage {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }
  .service-stages::before {
    left: 18px;
  }
  .service-stage__index {
    width: 36px;
    height: 36px;
    font-size: 0.68rem;
  }
  .service-detail__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   SERVICES DIVIDER — quiet editorial pull-quote between sections
   Replaces the parallax-image-with-overlay pattern. Cream background,
   oversized opening quotation mark, italic emphasis on the key phrase,
   tracked-caps attribution. No image, no overlay — earns its space
   through typography alone.
   ============================================================ */
.services-divider {
  background-color: var(--color-cream, #F7F4EE);
  padding: clamp(48px, 5vw, 80px) 0 clamp(72px, 8vw, 112px);
}

/* Two-pane layout — quote on left, framed image on right. Mirrors the
   homepage philosophy spread structure for cohesion across the brand. */
.services-divider__layout {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(40px, 6vw, 96px);
}

.services-divider__copy {
  position: relative;
  max-width: 560px;
}

.services-divider__mark {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: 1;
  color: var(--color-champagne);
  opacity: 0.32;
  margin-bottom: -0.35em;
  user-select: none;
}

.services-divider__quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--color-charcoal, #1F1F22);
  margin: 0 0 32px;
}

.services-divider__quote em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-champagne-dark, #5C6986);
}

.services-divider__attribution {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-champagne);
  position: relative;
  padding-top: 18px;
}

.services-divider__attribution::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background-color: var(--color-champagne);
  opacity: 0.55;
}

/* Image: framed-art treatment matching the homepage philosophy spread —
   soft drop shadow + 12px inset white border line. */
.services-divider__media {
  margin: 0;
  position: relative;
}

.services-divider__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(13, 14, 24, 0.16);
}

.services-divider__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.services-divider__image-wrap::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

@media (max-width: 980px) {
  .services-divider__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .services-divider__copy {
    max-width: 100%;
    order: 2;
  }
  .services-divider__media {
    order: 1;
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .services-divider__quote { font-size: 1.3rem; line-height: 1.5; }
  .services-divider__mark { font-size: 3.6rem; }
}

/* ============================================================
   CTA BAND — full-bleed image + dark gradient overlay
   For the "Start with the Consultation" closing section. The image
   gives the dark band a beauty-editorial feel; the overlay keeps
   the white text legible.
   ============================================================ */
.cta-band--image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(96px, 12vw, 160px) 0;
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  /* Subtle ken-burns-style scale to give the image more presence */
  transform: scale(1.04);
}

.cta-band__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Directional overlay — heavier on the left (where text sits) and
     softer on the right so the skin/light in the image breathes through.
     Light vertical wash for top/bottom legibility. */
  background:
    linear-gradient(
      90deg,
      rgba(13, 14, 24, 0.78) 0%,
      rgba(13, 14, 24, 0.55) 38%,
      rgba(13, 14, 24, 0.30) 65%,
      rgba(13, 14, 24, 0.45) 100%
    ),
    linear-gradient(
      180deg,
      rgba(13, 14, 24, 0.30) 0%,
      rgba(13, 14, 24, 0) 25%,
      rgba(13, 14, 24, 0) 75%,
      rgba(13, 14, 24, 0.32) 100%
    );
}

/* Anchor content to the left so it sits on the darker side of the
   image where the skin profile isn't competing. */
.cta-band--image .cta-band__content {
  text-align: left;
}
.cta-band--image .cta-band__content > .reveal {
  max-width: 520px;
}
.cta-band--image .cta-band__content .section-subtitle {
  margin-left: 0;
  margin-right: 0;
}
.cta-band--image .cta-band__content .hero__cta-group {
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .cta-band--image .cta-band__content { text-align: center; }
  .cta-band--image .cta-band__content > .reveal { max-width: 100%; margin: 0 auto; }
  .cta-band--image .cta-band__content .hero__cta-group { justify-content: center; }
  /* On mobile the image is fully behind text — symmetric overlay. */
  .cta-band--image .cta-band__overlay {
    background: rgba(13, 14, 24, 0.72);
  }
}

.cta-band__content {
  position: relative;
  z-index: 1;
}

/* Lavender label on this section also reads against dark, lift it. */
.cta-band--image .section-label {
  color: #A5AFC8;
}

/* ============================================================
   FOUNDER SPREAD — editorial profile counterpart
   Mirrors the philosophy spread above (same eyebrow + rule + serif
   pull quote + framed-art image) but with portrait on the RIGHT and
   a multi-line display name as the headline. Reads as a magazine
   spread that flows from philosophy → founder.
   ============================================================ */
.founder-spread {
  background-color: var(--color-cream, #F7F4EE);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
}

.founder-spread__inner {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(56px, 9vw, 128px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(40px, 6vw, 96px);
}

.founder-spread__content {
  display: flex;
  flex-direction: column;
  max-width: 560px;
}

.founder-spread__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 16px;
}

.founder-spread__rule {
  display: block;
  width: 56px;
  height: 1px;
  background-color: var(--color-champagne);
  opacity: 0.55;
  margin-bottom: 28px;
}

/* Multi-line display name — first name big, surname italic and
   slightly indented for editorial hierarchy. */
.founder-spread__name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: var(--color-charcoal, #1F1F22);
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
}

.founder-spread__name-line {
  display: block;
  line-height: inherit;
}

.founder-spread__name-line--accent {
  margin-left: clamp(24px, 4vw, 64px);
  margin-top: 4px;
}

.founder-spread__name em {
  font-style: italic;
  /* Bumped to 400 for visual weight parity with the upright "Stephanie" —
     300 italic in the soft slate read as washed-out next to near-black. */
  font-weight: 400;
  color: var(--color-charcoal, #1F1F22);
}

.founder-spread__credential {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal, #1F1F22);
  opacity: 0.7;
  margin-bottom: 36px;
}

.founder-spread__bio {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--color-charcoal, #1F1F22);
}

.founder-spread__bio p { margin: 0 0 18px; }
.founder-spread__bio p:last-child { margin-bottom: 0; }

/* Signature line — italicized brand statement, framed by a vertical
   rule for editorial pull-quote treatment. */
.founder-spread__signature {
  margin: 32px 0 36px;
  padding: 4px 0 4px 22px;
  border-left: 1px solid var(--color-champagne);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--color-champagne-dark, #5C6986);
}

.founder-spread__signature em {
  font-style: italic;
  font-weight: 300;
}

.founder-spread__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-charcoal, #1F1F22);
  border-bottom: 1px solid var(--color-champagne);
  transition: gap 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.founder-spread__cta::after {
  content: "\2192";
  transition: transform 0.3s ease;
}

.founder-spread__cta:hover,
.founder-spread__cta:focus-visible {
  color: var(--color-champagne-dark, #5C6986);
  border-bottom-color: var(--color-champagne-dark, #5C6986);
  gap: 14px;
}
.founder-spread__cta:hover::after { transform: translateX(2px); }

/* Portrait media — same framed-plate treatment as the marble in
   philosophy spread for visual continuity. */
.founder-spread__media {
  position: relative;
  margin: 0;
}

.founder-spread__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(13, 14, 24, 0.16);
}

.founder-spread__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Inset border line — matches philosophy spread for cohesion. */
.founder-spread__image-wrap::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.founder-spread__caption {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  opacity: 0.55;
  text-align: right;
}

/* ---- Tablet ---- */
@media (max-width: 980px) {
  .founder-spread__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .founder-spread__content {
    max-width: 100%;
    order: 2;
  }
  .founder-spread__media {
    order: 1;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
  .founder-spread__caption {
    text-align: center;
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .founder-spread {
    padding: 64px 0;
  }
  .founder-spread__name {
    font-size: clamp(2.1rem, 9.5vw, 3rem);
  }
  .founder-spread__name-line--accent {
    margin-left: 18px;
  }
  .founder-spread__signature {
    font-size: 1.05rem;
    padding-left: 18px;
  }
  .founder-spread__bio {
    font-size: 1rem;
  }
}

/* Bump up vertical impact — these heroes are now image-led, not just
   small banner strips. */
.page-hero-bleed .hero--medium .hero__title {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  z-index: 0;
}

.hero__overlay {
  /* Minimal overlay — image dominates. Tiny darken on the very top for
     nav legibility and a soft left-edge wash so white title stays
     readable. Compensate by adding a text-shadow on the title (below). */
  background:
    linear-gradient(
      90deg,
      rgba(13, 14, 24, 0.24) 0%,
      rgba(13, 14, 24, 0.08) 38%,
      rgba(13, 14, 24, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(13, 14, 24, 0.22) 0%,
      rgba(13, 14, 24, 0) 22%,
      rgba(13, 14, 24, 0) 78%,
      rgba(13, 14, 24, 0.18) 100%
    );
}


.hero__label {
  margin-top: 0;
}

.hero--editorial {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  background-color: #151926;
}

.hero--editorial .hero__image {
  filter: saturate(0.92) contrast(1.02);
}

.hero--editorial .hero__content {
  max-width: 640px;
  margin: 0;
  padding: 150px 24px 96px 72px;
  text-align: left;
}

.hero__label--editorial {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 12px rgba(13, 14, 24, 0.38);
}

.hero--editorial .hero__title {
  display: block;
  max-width: 680px;
  margin-bottom: 22px;
  font-size: 4.35rem;
  line-height: 1.03;
  letter-spacing: 0;
}

.hero__title-line {
  display: block;
  line-height: inherit;
}

.hero__title-line--accent {
  color: rgba(255, 255, 255, 0.94);
  font-style: italic;
  font-weight: 400;
}

.hero--editorial .hero__subtitle {
  max-width: 500px;
  margin: 0 0 30px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.hero--editorial .hero__cta-group {
  justify-content: flex-start;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.hero--editorial .btn--white {
  padding: 17px 32px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.hero__link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.84);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.hero__link-arrow::after {
  content: '\2192';
}

.hero__link-arrow:hover,
.hero__link-arrow:focus-visible {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.44);
}

@media (max-width: 980px) {
  .hero--editorial .hero__content {
    max-width: 580px;
    padding: 128px 24px 78px 42px;
  }

  .hero--editorial .hero__title {
    font-size: 3.55rem;
  }
}

@media (max-width: 640px) {
  .hero--editorial .hero__image {
    object-position: center center;
  }

  .hero--editorial .hero__content {
    max-width: 100%;
    padding: 116px 22px 48px;
  }

  .hero__label--editorial {
    margin-bottom: 16px;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }

  .hero--editorial .hero__title {
    margin-bottom: 20px;
    font-size: 2.62rem;
    line-height: 1.05;
  }

  .hero--editorial .hero__subtitle {
    margin-bottom: 26px;
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .hero--editorial .hero__cta-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }

  .hero--editorial .hero__cta-group .btn {
    width: 100%;
    justify-content: center;
  }
}