/* Salty Carbs -- Shared Member Site Stylesheet */
/* Used by all pages: home, about, services, service-detail, contact */
/* Color variables are injected inline per-member BEFORE this file loads. */
/* Do NOT add a :root block here -- it will override the palette injection. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink-body);
  background: var(--white);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}

/* ── NAV ── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--ink-mid);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
header.nav-hidden   { transform: translateY(-100%); }
header.nav-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-svg { height: 60px; display: flex; align-items: center; }
.nav-logo-svg svg { height: 60px; width: auto; max-width: 400px; }
.nav-logo-img { height: 56px; width: auto; max-width: 360px; display: block; }
.footer-logo-img { height: 56px; width: auto; max-width: 360px; display: block; margin-bottom: 0.75rem; }
nav ul { display: flex; list-style: none; align-items: center; }
nav ul a {
  display: block;
  padding: 0 1.1rem;
  height: var(--nav-h);
  line-height: var(--nav-h);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
nav ul a:hover, nav ul a.active { color: var(--white); }
.nav-cta {
  background: var(--primary) !important;
  color: var(--white) !important;
  padding: 0 1.6rem !important;
  margin-left: 0.5rem;
}
.nav-cta:hover { background: var(--primary-dark) !important; }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--white); }
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--ink);
  z-index: 99;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-direction: column;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-menu a:hover { color: var(--white); }
.mobile-menu .mobile-cta { background: var(--primary); color: var(--white); }

/* ── LIGHT MODE ── */
.mode-light header                       { background: #ffffff; border-bottom: 1px solid var(--border); }
.mode-light header nav ul a              { color: var(--ink); }
.mode-light header nav ul a:hover,
.mode-light header nav ul a.active       { color: var(--primary); }
.mode-light .nav-hamburger span          { background: var(--ink); }
.mode-light footer                       { background: #f5f5f5; color: var(--ink); }
/* NOT BUTTONS. These two are for the footer's text links, and as written they
   also caught the "Book a Session" button, which is an <a class="btn ...">.
   `.mode-light footer a:hover` is (0,2,2) and `.btn-teal-outline:hover` is
   (0,2,0), so the footer rule won: the button's hover set its background to
   --primary while this set its LABEL to --primary too. Brown on brown — the
   button became a solid block with no text in it. The resting state was wrong
   the same way, just still legible: a grey label where the button wanted brand.

   Excluding buttons here fixes the cause. Raising the button's specificity
   instead would have left the next component to trip over the same rule. */
.mode-light footer a:not(.btn)           { color: var(--ink-lt); }
.mode-light footer a:not(.btn):hover     { color: var(--primary); }
.mode-light .footer-tagline              { color: var(--ink-lt); }
/* Contact column -> dark ink so it's readable on the light footer. The business
   name carries an inline near-white color (for dark mode), so the light-mode
   override has to be !important to win over the inline style. */
.mode-light .footer-info p               { color: var(--ink) !important; }
.mode-light .footer-info a               { color: var(--ink); }
.mode-light .footer-body-text            { color: var(--ink); }
/* Copyright bar: drop the leftover dark-mode background tint and use a clean
   top border + readable muted ink so it reads as intentional, not a mistake. */
.mode-light .footer-bottom               { border-top: 1px solid var(--border); color: var(--ink-lt); }
.mode-light .footer-bottom a             { color: var(--ink-lt); }
.mode-light .footer-copy                 { color: var(--ink-lt); }
/* Social chips need a visible light box against the light footer. */
.mode-light .footer-social a             { background: rgba(0,0,0,0.06); color: var(--ink); }
.mode-light .footer-social a:hover       { background: var(--primary); color: var(--white); }
/* Site-map column: the "Services"/"Pages" sub-labels and their links are near-
   white for dark mode, so they vanish on the light footer. Override to dark ink
   to match the contact-column treatment. */
.mode-light .footer-sitemap-label        { color: var(--ink-lt); }
.mode-light .footer-nav-list a           { color: var(--ink); }
.mode-light .footer-nav-list a:hover     { color: var(--primary); }

/* ── PAGE OFFSET ── */
.page-wrap { padding-top: var(--nav-h); }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: var(--hero-image, url('../assets/images/hero-bg.jpg'));
  background-size: cover;
  background-position: center 30%;
  opacity: 0.45;
}
.hero-overlay {
  position: absolute; inset: 0;
  /* Tinted with the palette's darkest color, not pure black, so a darkened
     hero still reads as the member's brand. */
  background: linear-gradient(105deg, rgba(var(--ink-rgb), 0.62) 40%, rgba(var(--ink-rgb), 0.35) 100%);
}
/* GRADIENT ART DIRECTION — the SplitCard hero. Its three siblings carry the
   equivalent rule in their own scoped styles; this one lives here because
   SplitCard deliberately reuses the global .hero-* rules.
   The still life is not removed, it is veiled: photography becomes texture and
   the member's own colour leads. */
html[data-art="gradient"] .hero-overlay {
  background:
    radial-gradient(105% 80% at 78% 16%, rgba(var(--accent-rgb), 0.40), rgba(var(--accent-rgb), 0) 60%),
    linear-gradient(150deg, rgba(var(--primary-rgb), 0.76) 0%, rgba(var(--ink-rgb), 0.89) 54%, rgba(var(--ink-rgb), 0.96) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  padding: 5rem 2.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  align-items: center;
  width: 100%;
}
/* --accent, not --primary: this hero always sits on a dark image scrim (in
   light mode too), and the dark palettes (charcoal, forest, pine) have a
   primary too dark to read against it. Accent is the lighter of the two in
   every palette. Same reasoning in the other hero components. */
.hero-eyebrow {
  font-size: 0.62rem; letter-spacing: var(--eyebrow-tracking, 0.25em); text-transform: uppercase;
  color: var(--accent); font-weight: var(--eyebrow-weight, 600); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 28px; height: 1px; background: var(--accent);
}
.hero h1 {
  font-family: var(--font-display, var(--serif));
  font-size: clamp(2.4rem, 5vw, var(--h1-size, 3.8rem));
  font-weight: var(--h1-weight, 700); color: var(--white);
  letter-spacing: var(--h1-tracking, normal);
  text-transform: var(--h1-transform, none);
  line-height: var(--h1-line, 1.1); margin-bottom: 1.4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.hero h1 em { color: var(--accent); font-style: italic; }
.hero-sub {
  font-size: 1rem; color: rgba(255,255,255,0.7);
  max-width: 480px; font-weight: 400;
  line-height: 1.75; margin-bottom: 2.2rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.hero-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  padding: 2rem 1.8rem;
  border-radius: var(--radius-lg, 4px);
  text-align: center;
}
.hero-headshot {
  width: 172px; height: 172px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--primary);
  margin: 0 auto 1.2rem; display: block;
  background: var(--ink-mid);
  font-size: 0; color: transparent;
}
.hero-card-name { font-family: var(--serif); font-size: 1.1rem; color: var(--white); font-weight: 600; margin-bottom: 0.3rem; }
.hero-card-title { font-size: 0.68rem; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 500; }
.hero-card-focus { font-size: 0.82rem; color: rgba(255,255,255,0.65); line-height: 1.65; margin-bottom: 1.4rem; }
.badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.badge-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  position: relative; height: 280px;
  background: var(--ink);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-image: var(--page-hero-image, url('../assets/images/page-hero-bg.jpg'));
  background-size: cover; background-position: center 40%;
  opacity: 0.38;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.65) 0%, rgba(var(--ink-rgb), 0.28) 100%);
}
.page-hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; width: 100%;
  margin: 0 auto; padding: 0 2.5rem 2.5rem;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--white); font-weight: 700; margin-bottom: 0.4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.breadcrumb { font-size: 0.65rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; }
.breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }

/* ── BUTTONS ── */
.btn {
  display: inline-block; padding: 0.9rem 2.2rem;
  font-size: 0.7rem; font-weight: var(--btn-weight, 600);
  letter-spacing: var(--btn-tracking, 0.14em); text-transform: uppercase;
  text-decoration: none; border-radius: var(--btn-radius, 2px);
  transition: all 0.25s; font-family: var(--font-body, var(--sans));
}
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.35); margin-left: 1rem; }
.btn-outline:hover { border-color: var(--white); }
.btn-teal-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-teal-outline:hover { background: var(--primary); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--ink-mid); }

/* ── SECTION LAYOUT ── */
.section { padding: 5.5rem 2.5rem; }
.section-sm { padding: 4rem 2.5rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-inner-narrow { max-width: 860px; margin: 0 auto; }
.bg-cream { background: var(--surface); }
.bg-cream-dk { background: var(--surface-dk); }
.bg-dark { background: var(--ink); }
.bg-teal { background: var(--primary); }
.bg-white { background: var(--white); }

.section-label {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary); font-weight: 600; margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.section-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--primary); }
.section-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--primary);
  line-height: 1.2; margin-bottom: 0.75rem;
}
.section-title.light { color: var(--white); }
.section-title em { color: var(--primary); font-style: italic; }
.section-sub { font-size: 0.9rem; color: var(--ink-lt); max-width: 580px; line-height: 1.75; margin-bottom: 3rem; }
.section-rule { width: 44px; height: 2px; background: var(--accent); margin-bottom: 1.2rem; }

.bg-dark .section-label, .bg-teal .section-label { color: var(--primary-pale); }
.bg-dark .section-title, .bg-teal .section-title { color: var(--white); }
.bg-dark .section-sub, .bg-teal .section-sub { color: rgba(255,255,255,0.65); }

/* ── CTA BAND ── */
.cta-band { background: var(--primary); padding: 5rem 2.5rem; text-align: center; }
.cta-band h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--white); font-weight: 700; margin-bottom: 1rem; line-height: 1.25; }
.cta-band p { font-size: 0.9rem; color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto 2rem; line-height: 1.75; }
.cta-band .btn-primary { background: var(--white); color: var(--primary); }
.cta-band .btn-primary:hover { background: var(--primary-pale); color: var(--primary); }

/* ── TESTIMONIALS (home, only rendered when present) ── */
.testimonials-section { background: var(--primary-pale); padding: 5.5rem 2.5rem; }
.testimonials-section .section-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.testimonials-section .section-rule { margin-left: auto; margin-right: auto; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.testimonial-card { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--primary); padding: 2rem 1.8rem; margin: 0; text-align: left; display: flex; flex-direction: column; }
.testimonial-card blockquote { margin: 0 0 1.1rem; font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; color: var(--ink); font-style: italic; }
.testimonial-card blockquote::before { content: "\201C"; color: var(--primary); font-weight: 700; }
.testimonial-card blockquote::after { content: "\201D"; color: var(--primary); font-weight: 700; }
.testimonial-card figcaption { margin-top: auto; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); }

/* ── FAQ ── */
.faq-list { max-width: 780px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-trigger {
  width: 100%; text-align: left; background: none; border: none;
  padding: 1.4rem 0; display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; gap: 1rem;
}
.faq-question { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.faq-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary-pale); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: background 0.2s;
}
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--primary); border-radius: 2px; }
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 10px; transition: transform 0.3s, opacity 0.3s; }
.faq-item.open .faq-icon { background: var(--primary); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: var(--white); }
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer-inner { padding: 0 0 1.4rem; font-size: 0.87rem; color: var(--ink-body); line-height: 1.8; }
.faq-item.open .faq-answer { max-height: 400px; }

/* ── SERVICES GRID (homepage) ── */
.services-grid { display: flex; flex-direction: column; }
.service-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.service-row:nth-child(even) { direction: rtl; }
.service-row:nth-child(even) > * { direction: ltr; }
.service-img { overflow: hidden; position: relative; }
.service-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
/* The gradient tile fills the same box the photograph did on DESKTOP. On a
   phone the rows stack and the tile sets its own shorter aspect ratio instead
   (see ServiceArt.astro), so this must not force a height there. */
@media (min-width: 721px) {
  .service-img .svc-art { width: 100%; height: 100%; aspect-ratio: auto !important; }
}
.service-row:hover .service-img img { transform: scale(1.04); }
.service-img-placeholder { width: 100%; height: 100%; background: var(--ink-mid); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.service-content { padding: 3.5rem 4rem; display: flex; flex-direction: column; justify-content: center; background: var(--white); }
.service-row:nth-child(even) .service-content { background: var(--surface); }
.service-num { display: none; }
.service-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.service-desc { font-size: 0.85rem; color: var(--ink-body); line-height: 1.8; margin-bottom: 1.5rem; }

/* ── SERVICE DETAIL PAGE ── */
.service-detail-hero {
  position: relative; height: 480px;
  background: var(--ink); overflow: hidden;
}
.service-detail-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.5;
}
.service-detail-hero-overlay {
  position: absolute; inset: 0;
  /* Was 0.88->0.45 (much darker than the home/page heroes). Matched to the
     bottom-aligned .page-hero-overlay treatment (0.65->0.28) so service pages
     read as light as about/services, while staying readable for the longer
     bottom-anchored hero intro. */
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.68) 0%, rgba(var(--ink-rgb), 0.30) 100%);
}
.service-detail-hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; width: 100%; margin: 0 auto;
  padding: var(--nav-h) 2.5rem 3rem;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
}
.service-detail-hero-inner .breadcrumb { margin-bottom: 0.75rem; }
.service-detail-hero-inner h1 {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700; color: var(--white); line-height: 1.1;
  margin-bottom: 1rem; max-width: 700px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.service-detail-hero-inner p {
  font-size: 1rem; color: rgba(255,255,255,0.72);
  max-width: 600px; line-height: 1.75; margin-bottom: 1.5rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.service-body { max-width: 820px; margin: 0 auto; }
.service-body p { font-size: 0.92rem; color: var(--ink-body); line-height: 1.85; margin-bottom: 1.2rem; }
.service-body h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 2.2rem 0 0.9rem; }
.service-bullets { list-style: none; margin: 1rem 0 1.5rem; }
.service-bullets li { font-size: 0.87rem; color: var(--ink-body); padding-left: 1.4rem; position: relative; margin-bottom: 0.5rem; line-height: 1.6; }
.service-bullets li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--primary); border-radius: 50%; }

/* ── ABOUT PAGE ── */
.about-intro-grid { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; align-items: start; margin-bottom: 4rem; }
.about-headshot-wrap { position: relative; }
.about-headshot { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; font-size: 0; color: transparent; }
.about-headshot-placeholder { width: 100%; aspect-ratio: 3/4; background: var(--primary-pale); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 0.7rem; letter-spacing: 0.1em; }
.social-row { display: flex; gap: 0.6rem; margin-top: 1.2rem; flex-wrap: wrap; justify-content: center; }
.social-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--ink); color: var(--white); border-radius: 2px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; transition: background 0.2s; }
.social-btn:hover { background: var(--primary); }
.about-intro-text h2 { font-family: var(--serif); font-size: 1.8rem; color: var(--ink); font-weight: 700; margin-bottom: 1.2rem; line-height: 1.25; }
.about-intro-text p { font-size: 0.88rem; color: var(--ink-body); line-height: 1.85; margin-bottom: 1rem; }
.about-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 4rem 0; border-top: 1px solid var(--border); }
.about-col-title { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); font-weight: 700; margin-bottom: 1.2rem; }
.check-list { list-style: none; }
.check-list li { font-size: 0.85rem; color: var(--ink-body); padding: 0.5rem 0 0.5rem 1.8rem; position: relative; border-bottom: 1px solid var(--border); }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: 600; font-size: 0.8rem; }
.standards-box { background: var(--primary-pale); border-left: 3px solid var(--primary); padding: 1.5rem 1.6rem; }
.standards-box h3 { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin-bottom: 0.75rem; font-weight: 700; }
.standards-box p { font-size: 0.83rem; color: var(--ink-body); line-height: 1.8; }
.calm-space { background: var(--accent-pale); border: 1px solid rgba(0,0,0,0.08); padding: 3.5rem 4rem; text-align: center; margin-top: 4rem; }
.calm-space h2 { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); font-weight: 700; margin-bottom: 1rem; }
.calm-space p { font-size: 0.87rem; color: var(--ink-body); max-width: 580px; margin: 0 auto 1.5rem; line-height: 1.8; }

/* ── SESSION LENGTH ── */
.session-box { background: var(--primary-pale); padding: 3rem 3.5rem; margin-top: 2rem; }
.session-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.session-box h2 { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); font-weight: 700; margin-bottom: 0.75rem; }
.session-box p { font-size: 0.87rem; color: var(--ink-body); line-height: 1.8; max-width: 480px; margin-bottom: 0.75rem; }
.session-pill { background: var(--white); border-left: 3px solid var(--primary); padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.session-pill:last-of-type { border-left-color: var(--accent); margin-bottom: 1rem; }
.session-pill-name { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); }
.session-pill-desc { font-size: 0.72rem; color: var(--ink-lt); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── CONTACT PAGE ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-block { margin-bottom: 2.5rem; }
.contact-block h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); font-weight: 700; margin-bottom: 0.75rem; }
.contact-block p, .contact-block a { font-size: 0.85rem; color: var(--ink-body); line-height: 1.8; text-decoration: none; }
.contact-block a { color: var(--primary); }
.contact-block a:hover { text-decoration: underline; }
.contact-block .btn-primary { color: var(--white) !important; }
.hours-list { list-style: none; }
.hours-list li { display: flex; justify-content: space-between; font-size: 0.83rem; color: var(--ink-body); padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.hours-list li:last-child { border-bottom: none; }
.hours-day { font-weight: 500; color: var(--ink); }
.map-wrap { width: 100%; height: 300px; overflow: hidden; margin-top: 1.5rem; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder { width: 100%; height: 300px; background: var(--primary-pale); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1.5rem; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.form-group input, .form-group textarea { border: 1px solid var(--border); padding: 0.75rem 1rem; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-body); outline: none; transition: border-color 0.2s; background: var(--white); border-radius: 2px; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { min-height: 130px; resize: vertical; }
.form-submit { background: var(--primary); color: var(--white); border: none; padding: 0.9rem 2rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; border-radius: 2px; width: 100%; }
.form-submit:hover { background: var(--primary-dark); }
.form-submit:disabled { opacity: 0.65; cursor: default; }
/* The answer to "did that send?". Neutral border + tinted background so it
   reads in both light and dark mode without a second colour to maintain. */
.form-status { margin: 0 0 1.1rem; padding: 0.8rem 1rem; font-size: 0.82rem; line-height: 1.6; border-radius: 2px; border-left: 3px solid var(--primary); background: var(--bg-alt, rgba(127, 127, 127, 0.08)); color: var(--ink); }
.form-status.is-err { border-left-color: #c0392b; }

/* ── FOOTER ── */
footer { background: var(--ink); padding: 4rem 2.5rem 2rem; }
.footer-body-text { color: rgba(255,255,255,0.45); }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { grid-template-columns: 1.4fr 1fr 1fr 0.9fr; display: grid; gap: 4rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logo { text-decoration: none; }
.footer-logo-svg { display: block; margin-bottom: 0.75rem; }
.footer-logo-svg svg { height: 60px; width: auto; max-width: 400px; }
/* Gift cards: a quiet text link under the booking button, not a second button.
   Two buttons side by side read as two equal asks; booking is the ask. */
.footer-giftcard { display: inline-block; margin-left: 1rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 2px; }
.footer-giftcard:hover { color: var(--accent); border-bottom-color: var(--accent); }
.mode-light .footer-giftcard { color: var(--ink-lt); border-bottom-color: rgba(0,0,0,0.15); }
.mode-light .footer-giftcard:hover { color: var(--primary); border-bottom-color: var(--primary); }
.footer-tagline { font-family: var(--serif); font-size: 1rem; color: rgba(255,255,255,0.45); font-style: italic; line-height: 1.5; max-width: 240px; margin-bottom: 1.2rem; }
.footer-col-title { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
.footer-info p, .footer-info a { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.9; text-decoration: none; display: block; }
.footer-info a:hover { color: var(--primary); }
.footer-social { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); font-size: 0.6rem; font-weight: 600; text-decoration: none; border-radius: 2px; transition: all 0.2s; }
.footer-social a:hover { background: var(--primary); color: var(--white); }
.footer-social a[href=""], .footer-social a:not([href]) { display: none; }
.footer-bottom { padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.footer-copy { font-size: 0.65rem; color: rgba(255,255,255,0.3); }
.footer-copy a { color: rgba(255,255,255,0.3); text-decoration: none; }
.footer-copy a:hover { color: var(--primary); }
.footer-nav-list { list-style: none; }
.footer-nav-list li { margin-bottom: 0.4rem; }
.footer-nav-list a { font-size: 0.75rem; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }
.footer-nav-list a:hover { color: var(--primary); }
.footer-nav-list .footer-nav-service { font-size: 0.68rem; color: rgba(255,255,255,0.3); padding-left: 0.6rem; }
.footer-nav-list .footer-nav-service:hover { color: rgba(255,255,255,0.6); }

/* ── INTRO SECTION ── */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.intro-text p { font-size: 0.92rem; color: var(--ink-body); line-height: 1.8; margin-bottom: 1.2rem; }
.info-card { background: var(--white); border-left: 3px solid var(--primary); padding: 1.2rem 1.4rem; margin-bottom: 0.8rem; }
.info-card:nth-child(even) { border-left-color: var(--accent); }
.info-card-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-bottom: 0.3rem; }
.info-card:nth-child(even) .info-card-label { color: var(--accent-dark); }
.info-card-text { font-size: 0.8rem; color: var(--ink-lt); }

/* ── SERVICE SIDEBAR ── */
.service-sidebar { position: sticky; top: calc(var(--nav-h) + 2rem); }
.sidebar-box { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--primary); padding: 1.8rem; }
.sidebar-section { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.sidebar-other { margin-top: 1.5rem; }
.sidebar-serving { font-size: 0.78rem; color: var(--ink-lt); margin-bottom: 1.2rem; line-height: 1.6; }
.sidebar-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.sidebar-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-lt); margin-bottom: 0.5rem; }
.sidebar-box .btn-primary { display: block; width: 100%; text-align: center; }
/* hero-inner is a flex column (align-items:stretch) which stretches the button to
   full width; align-self:flex-start makes it size to content and sit left. */
.service-detail-hero .btn-primary { width: auto; display: inline-block; align-self: flex-start; }
.sidebar-phone { display: block; font-size: 1.1rem; font-weight: 700; color: var(--primary); text-decoration: none; margin-bottom: 0.25rem; }
.sidebar-email { display: block; font-size: 0.85rem; color: var(--ink-lt); text-decoration: none; }

/* ── RELATED SERVICES ── */
.related-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.related-card { display: block; background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--primary); padding: 1.2rem 1.4rem; margin-bottom: 0.5rem; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.related-card:hover { border-top-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.related-card-name { font-family: var(--serif); font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
.related-card-desc { font-size: 0.72rem; color: var(--ink-lt); line-height: 1.5; }

/* ── HONEYPOT ── */
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .service-row { grid-template-columns: 1fr; min-height: auto; }
  .service-row:nth-child(even) { direction: ltr; }
  .service-img { height: 280px; }
  .service-content { padding: 2.5rem 2rem; }
  .about-intro-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .about-headshot-wrap { max-width: 240px; width: 100%; }
  .about-intro-text { text-align: left; }
  .about-intro-text h2 { text-align: center; }
  .about-two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .calm-space { padding: 2.5rem 2rem; }
  .session-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .related-services { grid-template-columns: 1fr 1fr; }
  .service-detail-layout { display: block !important; }
  .service-sidebar { position: static; margin-top: 3rem; }
}
@media (max-width: 768px) {
  nav ul { display: none; }
  .nav-hamburger { display: flex; }
  .hero { min-height: auto; }
  .hero-inner { padding: 2.5rem 1.5rem; gap: 1.5rem; }
  .hero h1 { font-size: 2.2rem; }
  .hero-sub { font-size: 0.9rem; }
  .section-inner > div[style*="grid-template-columns"] { display: block !important; }
  .section-inner > div[style*="grid-template-columns"] > div { order: unset !important; margin-bottom: 1.5rem; }
}
@media (max-width: 600px) {
  .section { padding: 3.5rem 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .badges { gap: 0.5rem; }
  .related-services { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .page-hero { height: 200px; }
  .service-detail-hero { height: 320px; }
}

/* ── FOOTER SITEMAP (2-column) ── */
.footer-top { grid-template-columns: 1.4fr 1fr 1.4fr; }

.footer-sitemap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.footer-sitemap-label {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.footer-nav-list { list-style: none; }
.footer-nav-list li { margin-bottom: 0.4rem; }
.footer-nav-list a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav-list a:hover { color: var(--primary); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-sitemap { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-sitemap-grid { grid-template-columns: 1fr 1fr; }
}




/* ══ IMAGE-BACKED HEROES: framing + the light treatment ═════════════════════
   Applies to the full-bleed heroes where text sits ON the image (the classic
   split hero, the page heroes, the service detail hero). The editorial and
   minimal heroes show their image full-strength inside a frame or band, so
   they are deliberately untouched here.

   FRAMING: every hero image is background-size:cover, so an off-ratio image
   never distorts — it fills the frame and crops the overflow. Weight it toward
   the middle on landscape screens, and toward the right on portrait screens so
   the subject stays clear of the left-aligned headline stacked over it. */
@media (orientation: portrait) {
  .hero-bg               { background-position: right 30%; }
  .page-hero-bg          { background-position: right 40%; }
  .service-detail-hero-bg { background-position: right center; }
}

/* LIGHT TREATMENT: instead of a bright image darkened toward ink, a pale image
   washed toward white with brand-colored type over it. Same photo, opposite
   mood — and it means a light-mode member no longer gets a dark hero. */
.mode-light .hero,
.mode-light .page-hero,
.mode-light .service-detail-hero { background: var(--white); }

.mode-light .hero-bg               { opacity: 0.25; }
.mode-light .page-hero-bg          { opacity: 0.22; }
.mode-light .service-detail-hero-bg { opacity: 0.25; }

.mode-light .hero-overlay {
  background: linear-gradient(105deg, rgba(255,255,255,0.58) 40%, rgba(255,255,255,0.18) 100%);
}
.mode-light .page-hero-overlay,
.mode-light .service-detail-hero-overlay {
  background: linear-gradient(to top, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.22) 100%);
}

/* Type flips to ink + brand color. Drop the shadows — they were there to lift
   white text off a photo and only muddy dark text. */
.mode-light .hero h1,
.mode-light .page-hero h1,
.mode-light .service-detail-hero-inner h1 { color: var(--ink); text-shadow: none; }
.mode-light .hero h1 em                   { color: var(--primary); }
.mode-light .hero-sub,
.mode-light .service-detail-hero-inner p  { color: var(--ink-body); text-shadow: none; }
.mode-light .breadcrumb                   { color: var(--ink-lt); }

/* On a light surface --primary is the readable brand color (the dark-surface
   rule is the reverse: --accent). */
.mode-light .hero-eyebrow                 { color: var(--primary); }
.mode-light .hero-eyebrow::before         { background: var(--primary); }
.mode-light .badge                        { color: var(--ink-lt); }

/* The glass card becomes light glass. */
.mode-light .hero-card {
  background: rgba(255,255,255,0.72);
  border-color: var(--border);
}
.mode-light .hero-card-name  { color: var(--ink); }
.mode-light .hero-card-title { color: var(--primary); }
.mode-light .hero-card-focus { color: var(--ink-body); }

/* .btn-outline is authored white-on-dark; on the light hero it would vanish. */
.mode-light .hero .btn-outline,
.mode-light .hero-card .btn-outline {
  color: var(--ink); border-color: var(--border-dk);
}
.mode-light .hero .btn-outline:hover,
.mode-light .hero-card .btn-outline:hover {
  color: var(--primary); border-color: var(--primary);
}

/* About intro with no portrait to anchor a two-column split (typically a
   business, whose faces live in the team section). */
.about-intro-solo { max-width: 760px; margin: 0 auto; text-align: center; }
.about-intro-solo p { font-size: 0.92rem; color: var(--ink); line-height: 1.85; margin-bottom: 1.1rem; }
/* With a headshot the portrait column ends below the icons and the grid gap
   does the spacing. Without one the icons are the last thing in the column and
   sat hard against the rule under them, so they need their own bottom margin. */
.about-intro-solo .social-row { justify-content: center; margin-top: 1.8rem; margin-bottom: 2.5rem; }

/* ── Gallery ─────────────────────────────────────────────────────────────────
   The member's own work, on /gallery/ and as a teaser on the home page.

   Photos arrive at whatever aspect ratio the member's phone shot them at, and a
   portfolio full of mismatched heights reads as sloppy. Fixed-ratio tiles with
   object-fit: cover give an even grid; the ratio is squarish so both portrait
   and landscape shots lose as little as possible. */
.gallery-intro {
  max-width: 640px; margin: 0 auto 2.5rem; text-align: center;
  font-size: 0.95rem; color: var(--ink); line-height: 1.8;
}
.gallery-grid, .gallery-teaser {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 2.5rem;
}
.gallery-item { margin: 0; }
.gallery-item img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg, 4px); background: var(--bg-alt, rgba(0,0,0,.04));
}
.gallery-item figcaption {
  margin-top: .55rem; font-size: 0.82rem; line-height: 1.5;
  color: var(--ink-lt, var(--ink));
}
.gallery-cta { text-align: center; margin-top: 2.5rem; }

/* One column would waste a phone screen on a page whose whole job is showing
   work, so the grid stays at two and the tiles get smaller. */
@media (max-width: 640px) {
  .gallery-grid, .gallery-teaser { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .gallery-item figcaption { font-size: 0.76rem; }
}

/* ── Hero call-to-action system (phase 3) ────────────────────────────────────
   Two problems the style axis inherited, both of them systemic rather than
   per-style, which is why they are fixed here once instead of four times.

   1. THE PRIMARY BUTTON DISAPPEARED IN DARK MODE. `.btn-primary` fills with
      --primary, and on the dark palettes --primary sits right next to the ink:
      measured 1.30:1 against the hero on luxe_forest and a flat translucent
      panel on luxe_charcoal. The primary action did not read as a button at
      all. This is the same trap the 2026-07-23 eyebrow/card-title fix
      addressed for TEXT ("on a dark surface use --accent"); it was never
      applied to fills.

      Filling with --accent instead was the obvious move and it is not enough:
      accent clears the background (3.6-4.2:1) but the LABEL flips per palette
      (charcoal needs white at 4.17, forest needs ink at 4.24) and neither
      reliably clears 4.5. A light fill measures 14.86:1 on both, works on
      every dark palette without per-palette reasoning, and already exists in
      this stylesheet as the .cta-band treatment — so it is the established
      pattern here, not a new one.

   2. STACKED CTAS WERE RAGGED. The buttons hug their text, so once they wrap
      on a phone the pair sizes to whichever label is longer. On the modern
      hero that made the SECONDARY button 35% wider than the primary, which
      inverts the emphasis exactly where it matters most. */
body.mode-dark .hero-actions .btn-primary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--white);
}
body.mode-dark .hero-actions .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
/* The bordered secondary uses --primary for its label, which fails on the dark
   palettes for the same reason (measured 1.38:1 on luxe_charcoal). */
body.mode-dark .btn-teal-outline { color: var(--accent); border-color: var(--accent); }
body.mode-dark .btn-teal-outline:hover { background: var(--accent); color: var(--ink); }

/* Below the wrap point the pair becomes one full-width stack: equal widths,
   primary on top, and no leftover horizontal margin from the inline layout. */
@media (max-width: 640px) {
  .hero-actions { display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }
  .hero-actions .btn { margin-left: 0; width: 100%; text-align: center; }
}


/* ══ GRADIENT ART DIRECTION: INTERIOR HEROES ═══════════════════════════════
   The light treatment above fades a hero background to 22-25% and flips the
   type to ink, because it is washing a PHOTOGRAPH toward white. A gradient is
   not a photograph — faded to a quarter it becomes the flat pale band Chip
   found on every interior page, with breadcrumbs disappearing into it.

   So in this art direction the interior heroes carry the palette at full
   strength and the type goes back to white. The `.mode-light` prefix is there
   to out-specify the fade rules rather than resort to !important. */
/* THE STILL LIFE CARRIES ACROSS THE TITLE BARS when the trade has one, and
   drops out silently when it does not. --page-hero-image is the resolved
   industry shot (upload -> trade stock -> default); layering the veil OVER it
   rather than replacing it means a barber gets his own room repeated down the
   site, and a trade we have never shot gets the gradient alone. Same rule, one
   declaration: if the picture exists it is used. */
html[data-art="gradient"] .page-hero-bg,
html[data-art="gradient"] .service-detail-hero-bg,
html[data-art="gradient"] .mode-light .page-hero-bg,
html[data-art="gradient"] .mode-light .service-detail-hero-bg {
  opacity: 1;
  background-image:
    linear-gradient(158deg, rgba(var(--primary-rgb), 0.86) 0%, rgba(var(--primary-rgb), 0.78) 45%, rgba(var(--ink-rgb), 0.94) 100%),
    var(--page-hero-image, none);
  background-size: cover;
  background-position: center;
}
/* No picture for this trade: the veil alone would be flat and semi-transparent
   over nothing, so the fallback underneath is the solid brand gradient. */
html[data-art="gradient"] .page-hero,
html[data-art="gradient"] .service-detail-hero {
  background-image: linear-gradient(158deg, var(--primary) 0%, var(--primary-dark) 55%, var(--ink) 100%);
  background-size: cover;
}
/* The white wash over them has to go for the same reason. */
html[data-art="gradient"] .mode-light .page-hero-overlay,
html[data-art="gradient"] .mode-light .service-detail-hero-overlay,
html[data-art="gradient"] .page-hero-overlay,
html[data-art="gradient"] .service-detail-hero-overlay {
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.42) 0%, rgba(var(--ink-rgb), 0.10) 100%);
}
html[data-art="gradient"] .mode-light .page-hero,
html[data-art="gradient"] .mode-light .service-detail-hero { background: var(--ink); }

/* Type back to white, including the breadcrumb, which was the thing actually
   vanishing. The current crumb is dimmed rather than hidden so the trail still
   reads as a trail. */
html[data-art="gradient"] .mode-light .page-hero h1,
html[data-art="gradient"] .mode-light .service-detail-hero-inner h1,
html[data-art="gradient"] .page-hero h1,
html[data-art="gradient"] .service-detail-hero-inner h1 { color: #fff; text-shadow: none; }
html[data-art="gradient"] .mode-light .service-detail-hero-inner p,
html[data-art="gradient"] .service-detail-hero-inner p { color: rgba(255,255,255,0.86); }
html[data-art="gradient"] .mode-light .breadcrumb,
html[data-art="gradient"] .breadcrumb { color: rgba(255,255,255,0.72); }
html[data-art="gradient"] .breadcrumb a { color: rgba(255,255,255,0.72); }
html[data-art="gradient"] .breadcrumb a:hover { color: #fff; }

/* ══ THE FOOTER CTA HOVER ══════════════════════════════════════════════════
   Was white -> --primary-pale on a --primary band: two pale fills a shade
   apart, so pressing it looked like nothing happening. Inverting to an outline
   is unambiguous and cannot go low-contrast on any palette, because both the
   border and the label are pure white on the brand colour. */
.cta-band .btn-primary { transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.cta-band .btn-primary:hover,
.cta-band .btn-primary:focus-visible {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}


/* ══ NO-PHOTOGRAPH TRADES ══════════════════════════════════════════════════
   With --hero-image: none the .hero-bg layer paints nothing, so the hero falls
   back to whatever .hero carries — flat --ink. These give it the same palette
   gradient the title bars use, so a florist or an immigration office opens on
   the member's own colour instead of a grey slab or, worse, the massage
   photograph the image chain would otherwise have reached for. */
html[data-art="gradient"] .hero {
  background-image:
    radial-gradient(120% 90% at 78% 12%, rgba(var(--accent-rgb), 0.38), rgba(var(--accent-rgb), 0) 60%),
    linear-gradient(152deg, var(--primary) 0%, var(--primary-dark) 58%, var(--ink) 100%);
  background-size: cover;
}
/* The scrim over a photograph would only mute the colour underneath. */
html[data-art="gradient"] .hero-bg[style*="none"],
html[data-art="gradient"] .hero-no-photo .hero-bg { opacity: 0; }

/* ── LANGUAGE SWITCH ─────────────────────────────────────────────────────────
   Deliberately NOT styled as a button. It sits after the booking CTA, which is
   the one thing on the bar that should look pressable; a second filled pill
   beside it competes with the action the whole header exists for. An outline
   and the language's own name are enough — somebody looking for their language
   is scanning for the word, not for a control.

   It is also a plain link to the twin page, so it works with no JavaScript and
   a middle-click opens the other edition in a tab, which is exactly what a
   bilingual household tends to do with it. */
/* NO BOX. The first version drew a bordered pill, which sat visibly off-centre
   because every other nav link centres itself with `height: var(--nav-h);
   line-height: var(--nav-h)` and the pill's own vertical padding fought that.
   Inheriting the sibling rule outright is both the fix and the simpler design:
   the switch is a nav item, not a second call to action competing with the
   booking button beside it. */
nav ul a.nav-lang {
  color: var(--white);
  font-weight: 600;
}
nav ul a.nav-lang:hover { color: var(--accent); }
.mobile-menu .mobile-lang {
  color: var(--white);
  border-bottom: none;
}
/* The header ground stays dark in light mode, so the switch needs nothing extra
   here — it inherits the same white as its siblings. */

/* ── REQUIRED LEGAL NOTICE ───────────────────────────────────────────────────
   Rendered only for members who carry one (see legalNotices in src/lib/site.js).
   Georgia's notary statute asks for "conspicuous size", so this is deliberately
   NOT footer-fine-print: full contrast, a rule above it, and the same size as
   body text. A disclaimer nobody can read is the thing the statute exists to
   prevent. */
/* Sized like the copyright line and sitting directly above it, full width.
   The first version set it at body size in a half-column, which shouted — a
   required disclaimer is a statement of fact about the business, not a banner,
   and at that weight it read as the loudest thing on the page.
   "Conspicuous" (the statute's word) is about being plainly legible and not
   hidden, which a full-width line at the same size as the copyright is. It is
   still a step brighter than the copyright beneath it, which is the part that
   keeps it from being fine print. */
.footer-legal {
  padding-top: 1.5rem;
  margin-bottom: -0.6rem;
}
.footer-legal p {
  margin: 0 0 0.35rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.65rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  max-width: none;
}
.footer-legal p:last-child { margin-bottom: 0; }
.mode-light .footer-legal p { color: var(--ink-lt); }

/* ── GRADIENT ART DIRECTION: THE MAIN HERO ───────────────────────────────────
   Two bugs met here and made each other worse.

   `html[data-art="gradient"] .hero-overlay` (0,2,1) outranks
   `.mode-light .hero-overlay` (0,2,0), so a light-mode member on the gradient
   direction got the DARK brand veil — while `.mode-light .hero h1` still
   painted the headline in `--ink`. Dark type on a dark field. That is the
   "hero is too dark or the text is too dark" report: it was both, and they
   were fighting.

   And the veil itself ran to 0.89–0.96 over a background already held at
   `.mode-light .hero-bg { opacity: 0.25 }`, which does not veil a photograph,
   it erases one. The art direction's own promise is "the still life is not
   removed, it is veiled" — at 25% under a 96% scrim there was nothing left to
   see, so a member with real hero art got a flat colour field.

   So: let the art through, and paint the type for the ground it actually sits
   on. */
html[data-art="gradient"] .mode-light .hero-bg,
html[data-art="gradient"] .hero-bg { opacity: 0.62; }

html[data-art="gradient"] .mode-light .hero-overlay,
html[data-art="gradient"] .hero-overlay {
  background:
    radial-gradient(105% 80% at 78% 16%, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0) 62%),
    linear-gradient(150deg, rgba(var(--primary-rgb), 0.58) 0%, rgba(var(--ink-rgb), 0.74) 52%, rgba(var(--ink-rgb), 0.86) 100%);
}

/* Type for a dark ground, in BOTH modes, because in this direction the hero is
   dark in both. Mirrors what lines above already do for the interior page
   heroes and the service-detail hero. */
html[data-art="gradient"] .mode-light .hero h1,
html[data-art="gradient"] .hero h1 { color: var(--white); text-shadow: 0 2px 14px rgba(0,0,0,0.4); }
html[data-art="gradient"] .mode-light .hero h1 em,
html[data-art="gradient"] .hero h1 em { color: var(--accent); }
html[data-art="gradient"] .mode-light .hero-sub,
html[data-art="gradient"] .hero-sub { color: rgba(255,255,255,0.88); text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
/* MEASURED, not eyeballed: bare --accent on this veil came out at 2.37:1
   against the rendered pixels, and small uppercase text needs 4.5:1. The
   eyebrow is the smallest type on the hero and sits over the brightest part of
   the photograph, which is the worst combination on the page.

   Lifted toward white rather than replaced by it: the tint keeps the palette's
   own hue, so this stays the member's brand colour and not a generic grey
   label, and it works for every palette rather than only the warm ones. The
   rule applies in both modes because this hero is dark in both. */
html[data-art="gradient"] .mode-light .hero-eyebrow,
html[data-art="gradient"] .hero-eyebrow {
  color: color-mix(in srgb, var(--accent) 42%, white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
html[data-art="gradient"] .mode-light .hero-eyebrow::before,
html[data-art="gradient"] .hero-eyebrow::before {
  background: color-mix(in srgb, var(--accent) 42%, white);
}
/* Same problem, same fix, inside the glass card — accent on a dark panel. */
html[data-art="gradient"] .mode-light .hero-card-title,
html[data-art="gradient"] .hero-card-title {
  color: color-mix(in srgb, var(--accent) 42%, white);
}
html[data-art="gradient"] .mode-light .badge,
html[data-art="gradient"] .badge { color: rgba(255,255,255,0.82); }

/* The glass card goes back to dark glass — `.mode-light .hero-card` turns it
   white, which on this ground is a bright slab with dark text in the middle of
   a dark hero. */
html[data-art="gradient"] .mode-light .hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
}
html[data-art="gradient"] .mode-light .hero-card-name { color: var(--white); }
html[data-art="gradient"] .mode-light .hero-card-focus { color: rgba(255,255,255,0.78); }
/* Covers the hero's OWN secondary button as well as the card's. `.mode-light
   .hero .btn-outline` repaints both in --primary on the assumption of a pale
   hero; on this dark ground that is brand-brown on brown and the button reads
   as an empty rectangle. It shipped that way and is visible in the first
   screenshot of the Spanish page. */
html[data-art="gradient"] .mode-light .hero .btn-outline,
html[data-art="gradient"] .mode-light .hero-card .btn-outline {
  border-color: rgba(255,255,255,0.45);
  color: var(--white);
  background: transparent;
}
html[data-art="gradient"] .mode-light .hero .btn-outline:hover,
html[data-art="gradient"] .mode-light .hero-card .btn-outline:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

/* ── SERVICE CARDS ───────────────────────────────────────────────────────────
   Replaces the alternating full-bleed .service-row blocks. See
   src/components/ServiceCards.astro for why.

   The grid is auto-fit with a real minimum rather than a fixed column count, so
   a member with three services gets three across and one with five gets a tidy
   3+2 instead of a hanging orphan on a 4-up grid. */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.6rem;
}
.svc-cards-full { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

/* EXACTLY FOUR goes 2x2 rather than 3+1. auto-fit picks three columns at this
   width, which strands the fourth card alone on a second row looking like
   something failed to load. Five is fine as 3+2 and three is fine as one row,
   so this is the only count that needs saying out loud. `:has` is doing the
   counting: "a fourth child that is also the last child". */
.svc-cards-full:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .svc-cards-full:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border, rgba(0,0,0,0.09));
  border-radius: var(--radius-lg, 4px);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.svc-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* The art sets the card's proportion. `aspect-ratio` on the wrapper rather than
   on the tile, so a gradient tile and a photograph land in the same rectangle —
   ServiceArt sets its own ratio otherwise and the two would disagree. */
.svc-card-art {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}
.svc-card-art .svc-art,
.svc-card-art img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  display: block;
}
.svc-card-art img { object-fit: cover; transition: transform 0.5s ease; }
.svc-card:hover .svc-card-art img { transform: scale(1.05); }

.svc-card-body {
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.svc-card-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.55rem;
  line-height: 1.25;
}
.svc-card-desc {
  font-size: 0.83rem;
  color: var(--ink-body);
  line-height: 1.75;
  margin: 0 0 1rem;
}
.svc-cards-full .svc-card-desc { font-size: 0.85rem; }
.svc-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.svc-card-bullets li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--ink-body);
  line-height: 1.6;
  margin-bottom: 0.35rem;
}
.svc-card-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
/* `margin-top: auto` pins this to the bottom of every card regardless of how
   much prose sits above it, so the row of "learn more" links reads as one line
   across the grid instead of stepping up and down with the copy. */
.svc-card-more {
  margin-top: auto;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary);
}
/* The arrow is a margin away, not a space inside the content string — the
   0.12em letter-spacing on this element swallows a leading space and the label
   rendered as "LEARN MORE→". */
.svc-card-more::after {
  content: '\2192';
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 0.25s ease;
}
.svc-card:hover .svc-card-more::after { transform: translateX(4px); }

.mode-light .svc-card { background: var(--white); }
.bg-cream .svc-card, .section.bg-cream .svc-card { border-color: transparent; }

@media (max-width: 720px) {
  .svc-cards, .svc-cards-full { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card-art img, .svc-card-more::after { transition: none; }
  .svc-card:hover { transform: none; }
  .svc-card:hover .svc-card-art img { transform: none; }
}