/* drmichaelyates.co.uk — v8
   Innisfree-shaped clinician practice. Soft Slate palette (D).
   Split hero. Trust strip. Repeated card patterns. Light throughout. */

:root {
  --cream: #ffffff;
  --paper: #f7f7f3;
  --paper-warm: #ecedea;
  --paper-deep: #dfe1dd;
  --rule: #d4d6d0;
  --rule-soft: #e5e7e2;
  --text: #2a303a;
  --text-muted: #5d6776;
  --text-faint: #98a0ac;

  --slate: #3e4a5a;
  --slate-deep: #2a3340;
  --slate-mid: #5a6878;
  --slate-soft: #8a96a4;

  --accent: #a08858;
  --accent-deep: #7a663e;
  --accent-light: #c8b48a;

  --ink: #1f2530;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--slate); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-deep); }

/* SCROLL REVEAL */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s cubic-bezier(.2,.7,.2,1), transform 0.75s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }

/* NAV */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.1rem 2.5rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: padding 0.3s, box-shadow 0.3s;
}
.site-nav.scrolled { padding: 0.8rem 2.5rem; box-shadow: 0 1px 14px -8px rgba(31, 37, 48, 0.15); }
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.nav-name {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--slate);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 0.3s;
}
.nav-name em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-deep);
}
.nav-name:hover { color: var(--ink); }
.nav-links {
  display: flex;
  gap: 1.3rem;
  list-style: none;
  margin-left: auto;
  align-items: center;
}
.nav-links li { display: flex; align-items: center; }
.nav-links li:has(.nav-cta:not(.nav-cta-secondary)) { margin-left: 0.4rem; }
.nav-links li:has(.nav-cta-secondary) { margin-left: 0.6rem; }
.nav-cta, .nav-cta.nav-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.nav-links a {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  line-height: 1.2;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--slate); border-bottom-color: var(--accent); }
.nav-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  padding: 0.42rem 0.95rem !important;
  background: #a8362a;
  color: #ffffff !important;
  border: 1px solid #a8362a;
  font-weight: 500;
  border-radius: 3px;
  transition: all 0.25s;
  border-bottom: 1px solid #a8362a !important;
  line-height: 1.25;
  letter-spacing: 0.015em;
  height: auto;
}
.nav-cta:hover { background: #7a2e22; border-color: #7a2e22 !important; color: #ffffff !important; }
.nav-cta.nav-cta-secondary {
  background: var(--slate);
  color: #ffffff !important;
  border: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate) !important;
}
.nav-cta.nav-cta-secondary:hover { background: var(--slate-deep); color: #ffffff !important; border-color: var(--slate-deep) !important; }
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  margin-left: auto;
}
.mobile-toggle span { display: block; width: 22px; height: 1.5px; background: var(--slate); margin: 5px 0; transition: 0.3s; }

/* HERO — Innisfree style: full-bleed soft image, type sits in negative space */
.hero {
  position: relative;
  min-height: 88vh;
  color: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 5rem 2.5rem 6rem;
  background: var(--paper);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero.jpg');
  background-image: image-set(
    url('../img/hero.webp') type('image/webp'),
    url('../img/hero.jpg') type('image/jpeg')
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
@media (max-width: 767px) {
  .hero-bg {
    background-image: url('../img/hero-mobile.jpg');
    background-image: image-set(
      url('../img/hero-mobile.webp') type('image/webp'),
      url('../img/hero-mobile.jpg') type('image/jpeg')
    );
  }
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(247, 247, 243, 0.94) 0%, rgba(247, 247, 243, 0.88) 35%, rgba(247, 247, 243, 0.35) 60%, rgba(247, 247, 243, 0) 80%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}
.hero-left { max-width: 640px; }
.hero-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  margin-bottom: 1.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.hero-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.hero-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.06;
  color: var(--slate-deep);
  margin-bottom: 1.4rem;
}
.hero-name em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--slate-deep);
  font-weight: 700;
}
.hero-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--accent-deep);
  font-weight: 400;
  margin-bottom: 2rem;
  line-height: 1.75;
}
.hero-lead {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--slate-deep);
  margin-bottom: 2.4rem;
  max-width: 560px;
  font-weight: 400;
}
.hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.85rem 1.5rem;
  background: #a8362a;
  color: #ffffff;
  border: 1px solid #a8362a;
  font-weight: 600;
  border-radius: 3px;
  transition: all 0.25s;
  text-decoration: none;
}
.btn::after {
  content: '\2192';
  font-size: 0.95rem;
  transition: transform 0.25s;
}
.btn:hover {
  background: #7a2e22;
  border-color: #7a2e22;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px rgba(31, 37, 48, 0.35);
}
.btn:hover::after { transform: translateX(3px); }
.btn-ghost {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--slate);
}
.btn-ghost:hover { background: var(--slate); color: var(--cream); }
.btn-large { padding: 1rem 1.7rem; font-size: 0.95rem; }

/* TRUST STRIP — under hero */
.trust-strip {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.trust-strip-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  padding: 1.6rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-right: 1px solid var(--rule);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
}
.trust-item:last-child { border-right: none; }
.trust-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  flex-shrink: 0;
}
.trust-icon svg { width: 22px; height: 22px; }

/* SECTIONS */
.section {
  padding: 6rem 2.5rem;
  position: relative;
}
.section-inner { max-width: 1240px; margin: 0 auto; }
.section.alt { background: var(--paper); }
.section.warm { background: var(--paper-warm); }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.3rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 1.4rem;
  max-width: 760px;
}
.h2 em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 400;
}

.intro {
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 720px;
  margin-bottom: 3rem;
  font-weight: 400;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3.5rem;
}
.section-head-text { max-width: 540px; }
.section-head-text .intro { margin-bottom: 0; }

/* SERVICES — uniform card grid (Innisfree pattern) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.service-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 1.8rem 1.7rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -18px rgba(31, 37, 48, 0.18);
  border-color: var(--slate-soft);
}
.service-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.service-card p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1;
}
.service-card .read-more {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--accent-deep);
  font-weight: 600;
  margin-top: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.service-card .read-more::after { content: '\2192'; transition: transform 0.25s; }
.service-card:hover .read-more::after { transform: translateX(3px); }

.services-cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* WORK grid — services page cards */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.work-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 2.1rem 1.7rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  border-radius: 3px;
  position: relative;
}
.work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -18px rgba(31, 37, 48, 0.18);
  border-color: var(--slate-soft);
}

/* Link variant of work-card — used when the card is clickable to a dedicated service page */
a.work-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.work-card:hover {
  border-color: var(--accent);
}
a.work-card:hover .work-card-cta {
  color: var(--accent);
}
a.work-card:hover .work-card-cta::after {
  transform: translateX(3px);
}
.work-card-cta {
  margin-top: 1.1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}
.work-card-cta::after {
  content: ' →';
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.work-card-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  text-transform: none;
}
.work-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.work-card p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1;
  margin: 0;
}
@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* MODALITIES — practical info trio */
.modalities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.modality {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 1.9rem 1.7rem 1.7rem;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.modality h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin: 0;
}
.modality p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 880px) {
  .modalities-grid { grid-template-columns: 1fr; }
}

/* CREDENTIALS-CTA band — closing prompt on services page */
.credentials-cta {
  background: var(--paper);
  padding: 5rem 2.5rem;
  border-top: 1px solid var(--rule);
}
.credentials-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr auto;
  gap: 2.5rem;
  align-items: center;
}
.credentials-cta .eyebrow { margin-bottom: 0.9rem; }
.credentials-cta h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.18;
  margin: 0 0 0.9rem;
}
.credentials-cta h2 em {
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 500;
}
.credentials-cta p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0;
}
@media (max-width: 880px) {
  .credentials-cta { padding: 3.5rem 1.5rem; }
  .credentials-cta-inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* WHY block — three rows of reasons */
.why-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
.why-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.why-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--accent-deep);
  line-height: 1;
}
.why-item h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.why-item p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* LANES — three settings */
.lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.lane {
  padding: 2.4rem 2rem 2.2rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
}
.lane:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -18px rgba(31, 37, 48, 0.18);
  border-color: var(--slate-soft);
}
.lane-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.lane h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.9rem;
  letter-spacing: -0.012em;
}
.lane p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
  flex: 1;
}
.lane-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: var(--accent-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.lane-link::after { content: '\2192'; transition: transform 0.25s; }
.lane-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lane-link:hover::after { transform: translateX(3px); }

/* RESEARCH BAR — quiet inline stats (not dark slab) */
.research-band {
  background: var(--paper-warm);
  padding: 5rem 2.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.research-band-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}
.research-band h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}
.research-band h2 em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 400;
}
.research-band p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2rem;
}
.stat {
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
}
.stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 500;
  color: var(--slate);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.022em;
  font-style: italic;
}
.stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.5;
}

/* QUOTE PANEL — calm, on paper not dark */
.quote-panel {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3.5rem 3rem;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.quote-panel::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 5rem;
  color: var(--accent-light);
  line-height: 0.6;
  display: block;
  margin-bottom: 1.4rem;
}
.quote-panel p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.quote-panel .attr {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  font-weight: 600;
}

/* CLOSING CTA */
.closing-cta {
  background: var(--slate);
  color: var(--cream);
  padding: 5rem 2.5rem;
  text-align: center;
}
.closing-cta-inner { max-width: 720px; margin: 0 auto; }
.closing-cta h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3.3vw, 2.4rem);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.closing-cta h2 em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--accent-light);
  font-weight: 400;
}
.closing-cta p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 2rem;
  font-family: 'Inter', sans-serif;
}
.closing-cta .btn {
  background: var(--cream);
  color: var(--slate-deep);
  border-color: var(--cream);
}
.closing-cta .btn:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--slate-deep);
}

/* SUB-PAGE HEADER — quiet, light */
.page-shell {
  background: var(--paper);
  color: var(--ink);
  padding: 5.5rem 2.5rem 4rem;
  border-bottom: 1px solid var(--rule);
}
.page-shell-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.page-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  margin-bottom: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.page-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.page-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.page-title em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 400;
}
.page-lede {
  font-family: 'Inter', sans-serif;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 740px;
  margin-top: 1.6rem;
  font-weight: 400;
}

.page-body {
  max-width: 880px;
  margin: 0 auto;
  padding: 4.5rem 2.5rem;
  background: var(--cream);
}
.prose {
  font-family: 'Inter', sans-serif;
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--text);
}
.prose p { margin-bottom: 1.4rem; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 3rem;
  margin-bottom: 1.2rem;
  letter-spacing: -0.018em;
  line-height: 1.2;
}
.prose h2::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin-top: 0.65rem;
}
.prose h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
}
.prose ul { padding-left: 0; margin-bottom: 1.4rem; list-style: none; }
.prose ul li {
  padding: 0.55rem 0 0.55rem 1.8rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
  border-bottom: 1px dotted var(--rule);
}
.prose ul li:last-child { border-bottom: none; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
.prose em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--slate); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

/* PUBLICATIONS */
.publication {
  border-top: 1px solid var(--rule);
  padding: 2.2rem 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
}
.publication:last-of-type { border-bottom: 1px solid var(--rule); }
.publication-year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-style: italic;
  color: var(--accent-deep);
  line-height: 1;
}
.publication-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.6rem;
  font-weight: 700;
}
.publication-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.7rem;
  letter-spacing: -0.012em;
}
.publication-authors {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.publication-journal {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
}
.publication-abstract { font-size: 0.98rem; line-height: 1.7; color: var(--text); margin-bottom: 0.9rem; }
.publication-abstract p { margin-bottom: 0.8rem; }
.publication-doi { font-family: 'Inter', sans-serif; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-muted); }
.publication-doi a { color: var(--slate); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

/* RESEARCH BRIDGE CARD (link to plain-English companion essay) */
.research-bridge {
  display: block;
  margin: 2.5rem 0 1rem;
  padding: 1.75rem 1.9rem;
  background: linear-gradient(135deg, #eef1f6 0%, #e3e8f0 100%);
  border-left: 4px solid var(--slate, #3e4a5a);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04);
}
.research-bridge:hover,
.research-bridge:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 30, 50, 0.08);
  text-decoration: none;
}
.research-bridge-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate, #3e4a5a);
  margin-bottom: 0.55rem;
}
.research-bridge-title {
  font-family: 'Lora', serif;
  font-size: 1.4rem;
  line-height: 1.3;
  color: #1f2733;
  margin: 0 0 0.7rem 0;
  font-weight: 500;
}
.research-bridge-blurb {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 1rem 0;
}
.research-bridge-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--slate, #3e4a5a);
  font-weight: 500;
  border-bottom: 1px solid var(--slate, #3e4a5a);
  padding-bottom: 2px;
}
@media (max-width: 640px) {
  .research-bridge { padding: 1.4rem 1.3rem; margin: 2rem 0 1rem; }
  .research-bridge-title { font-size: 1.2rem; }
  .research-bridge-blurb { font-size: 0.94rem; }
}

/* EVENT / MEDIA */
.event, .media-item {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.event:last-of-type, .media-item:last-of-type { border-bottom: none; }
.event-date, .media-outlet {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  font-weight: 600;
}
.event-detail h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
  letter-spacing: -0.005em;
}
.event-detail p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; }
.media-detail { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--text); line-height: 1.55; }

/* INLINE STATS (research page) */
.stats {
  background: var(--paper-warm);
  padding: 4rem 2.5rem;
  margin: 3.5rem -2.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats-inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stats-inner .stat {
  border-left: none;
  padding-left: 0;
  border-top: 2px solid var(--accent);
  padding-top: 0.9rem;
}
.stats-inner .stat-num {
  color: var(--slate);
}

/* CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  margin-top: 1rem;
}
.contact-intro { font-size: 1rem; line-height: 1.7; color: var(--text); }
.contact-intro p { margin-bottom: 1.1rem; }
.contact-form .field { margin-bottom: 1.2rem; }
.contact-form label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: all 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none;
  border-color: var(--slate);
  background: var(--cream);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { width: 100%; }

/* === Contact page (contact.html) — single-column centered === */
.page-body-contact {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.7rem 2.5rem 1rem !important;
}
.page-shell-contact { padding: 0.5rem 2.5rem 0.4rem !important; }
.page-shell-contact .page-title { font-size: clamp(1.2rem, 1.6vw, 1.4rem) !important; margin: 0 !important; line-height: 1.1 !important; }
.page-shell-contact .page-eyebrow { margin-bottom: 0.15rem !important; font-size: 0.64rem !important; }

.contact-ways {
  background: linear-gradient(180deg, #eef1f6 0%, #e3e8f0 100%);
  border: 1px solid #c4ccd8;
  border-left: 3px solid #3e4a5a;
  border-radius: 4px;
  padding: 0.55rem 1rem;
  margin: 0 0 0.8rem;
}
.contact-ways-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3e4a5a;
  margin: 0 0 0.3rem;
}
.contact-ways p {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.contact-ways p:last-child { margin-bottom: 0; }
.contact-ways a { color: #3e4a5a; font-weight: 600; }
.contact-ways a:hover { color: #2a3340; }

.contact-form .btn-contact {
  background: #3e4a5a !important;
  color: #ffffff !important;
  border: none;
  padding: 0.6rem 1.4rem !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 4px;
  cursor: pointer;
  width: 100% !important;
  max-width: none !important;
  transition: background 0.2s;
  margin: 0.4rem 0 0 !important;
}
.contact-form .btn-contact:hover { background: #2a3340 !important; }

/* Compress contact form fields on desktop so CTA stays visible */
@media (min-width: 760px) {
  .page-body-contact .contact-form .field { margin-bottom: 0.5rem !important; }
  .page-body-contact .contact-form label { font-size: 0.7rem !important; margin-bottom: 0.18rem !important; }
  .page-body-contact .contact-form input,
  .page-body-contact .contact-form select,
  .page-body-contact .contact-form textarea {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.9rem !important;
  }
  .page-body-contact .contact-form textarea { min-height: 70px !important; }
}

.contact-intro-below {
  margin-top: 30vh;
}
/* When the disclaimer sits INSIDE the form (just under the CTA button), pull it close. Phone + web. */
.contact-intro-below.contact-intro-below-inform {
  margin-top: 1.2rem !important;
}

/* === Emergency callout (immediate-crisis notice) === */
.contact-emergency-callout {
  background: #fdecea;
  border: 1px solid #e8b4ad;
  border-left: 4px solid #a8362a;
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
}
.contact-emergency-callout p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.contact-emergency-callout strong { font-weight: 700; }

/* DESKTOP: float the callout to the right of the form, sticky as user scrolls form */
@media (min-width: 761px) {
  .page-body-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 2.4rem;
    align-items: start;
    max-width: 1080px !important;
  }
  .page-body-contact .contact-ways { grid-column: 1; }
  .page-body-contact .contact-form { grid-column: 1; }
  .page-body-contact .contact-emergency-callout {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
    padding: 1.1rem 1.2rem;
    align-self: start;
    position: sticky;
    top: 6rem;
    background: #fdecea;
    border-left-width: 5px;
  }
  .page-body-contact .contact-emergency-callout p {
    font-size: 0.92rem;
  }
}
.contact-intro-below p {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
}
.contact-intro-below .contact-intro-emergency {
  padding: 0.6rem 0.9rem;
  background: var(--paper);
  border-left: 3px solid var(--slate);
  border-radius: 3px;
  font-style: italic;
  font-size: 0.8rem;
}
.contact-intro-below .form-consent {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.8rem;
}
@media (max-width: 640px) {
  .page-shell-contact { padding: 0.9rem 1.25rem 0.7rem !important; }
  .page-shell-contact .page-title { font-size: 1.45rem !important; }
  .page-shell-contact .page-eyebrow { font-size: 0.66rem !important; margin-bottom: 0.3rem !important; }
  .page-body-contact { padding: 0.9rem 1.25rem 1.5rem !important; }
  .contact-ways { padding: 0.8rem 1rem !important; margin-bottom: 1.2rem !important; }
  .contact-ways-title { font-size: 0.72rem !important; margin-bottom: 0.45rem !important; }
  .contact-ways p { font-size: 0.92rem !important; line-height: 1.5 !important; }
  .contact-form .field { margin-bottom: 1rem !important; }
  .contact-form label { font-size: 0.78rem !important; margin-bottom: 0.4rem !important; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    padding: 0.7rem 0.85rem !important;
    font-size: 0.95rem !important;
  }
  .contact-form textarea { min-height: 110px !important; }
  .contact-form .btn-contact { padding: 0.85rem 1.2rem !important; font-size: 1rem !important; margin-top: 0.8rem !important; }
  /* Push everything below the CTA off-screen on phone, same as desktop */
  .contact-intro-below { margin-top: 30vh !important; }
  /* But the in-form variant stays close to the button on phone too */
  .contact-intro-below.contact-intro-below-inform { margin-top: 1.2rem !important; }
}

/* === Booking form (book.html) === */
.booking-form {
  max-width: 880px;
  margin: 0 auto;
}

.booking-form .field { margin-bottom: 1.2rem; }
.booking-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.booking-form .field-row .field { margin-bottom: 0; }
.booking-form label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.booking-form .field-optional {
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0;
}
.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: all 0.2s;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--slate);
  background: var(--cream);
}
.booking-form .form-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  margin: 2.6rem 0 0.4rem;
  letter-spacing: -0.01em;
}
.booking-form .form-section-title:first-child { margin-top: 0; }
.booking-form .form-section-help {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 1.2rem;
  line-height: 1.5;
}

.booking-form .checkbox-group {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.2rem 1.1rem;
  margin: 0 0 1.3rem;
  background: var(--paper);
}
.booking-form .checkbox-group legend {
  padding: 0 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.booking-form .checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.4rem 0.9rem;
}
.booking-form .check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
  padding: 0.45rem 0;
  cursor: pointer;
}
.booking-form .check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: #a8362a;
  cursor: pointer;
}
.booking-form .check-meta {
  color: var(--text-faint);
  font-size: 0.82rem;
  font-weight: 400;
}

.booking-form .form-footer-note {
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(180deg, #fbf2e9 0%, #f8eadb 100%);
  border-left: 3px solid #a8362a;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}
.booking-form .form-consent {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 1rem 0 0;
  line-height: 1.55;
  text-align: center;
}
.booking-form button.btn {
  width: 100%;
  padding: 1rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  background: #a8362a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s;
}
.booking-form button.btn:hover { background: #7a2e22; }
.booking-form .btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.booking-form .btn-outline:hover {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

/* === Desktop layout overrides — placed AFTER defaults so they win === */
@media (min-width: 760px) {
  .booking-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 1.8rem !important;
    row-gap: 0 !important;
    align-items: start !important;
    max-width: 880px;
  }
  .booking-form > input[type="hidden"],
  .booking-form > p[style*="display:none"],
  .booking-form .form-footer-note,
  .booking-form button.btn,
  .booking-form .form-consent {
    grid-column: 1 / -1 !important;
  }
  .booking-col { display: block !important; }
  .booking-col-left { grid-column: 1 !important; }
  .booking-col-right { grid-column: 2 !important; }

  .booking-form .field { margin-bottom: 0.85rem !important; }
  .booking-form input,
  .booking-form select,
  .booking-form textarea {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
  }
  .booking-form label {
    font-size: 0.78rem !important;
    margin-bottom: 0.3rem !important;
  }
  .booking-form .form-footer-note {
    padding: 0.55rem 1rem !important;
    font-size: 0.88rem !important;
    margin: 0 0 1rem !important;
  }
  .booking-form .form-preferences-help {
    font-size: 0.74rem !important;
    margin: 0 0 0.25rem !important;
  }
  .booking-form .checkbox-group {
    padding: 0.3rem 0.7rem 0.35rem !important;
    margin: 0 0 0.4rem !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 0.5rem !important;
  }
  .booking-form .checkbox-group legend {
    font-size: 0.65rem !important;
    padding: 0 0.3rem !important;
  }
  .booking-form .check {
    font-size: 0.8rem !important;
    padding: 0.08rem 0 !important;
    gap: 0.4rem !important;
  }
  .booking-form .check input[type="checkbox"] {
    width: 13px !important;
    height: 13px !important;
  }
  .booking-form textarea {
    min-height: 50px !important;
    padding: 0.35rem 0.65rem !important;
    resize: vertical;
  }
  .booking-form button.btn {
    padding: 0.7rem 1.6rem !important;
    font-size: 0.95rem !important;
    max-width: 300px;
    margin: 1.4rem auto 0 !important;
    justify-self: center;
    width: auto;
  }
  .booking-form .form-consent {
    font-size: 0.78rem !important;
    margin-top: 1.1rem !important;
  }
  .book-emergency-note {
    margin-top: 1.6rem !important;
  }
}

/* === Booking wizard (book-2.html) === */
.booking-wizard .wizard-step { display: none; }
.booking-wizard .wizard-step.is-active { display: block; }
.booking-wizard .wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}
.booking-wizard .wizard-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--paper);
  color: var(--text-muted);
  border: 1px solid var(--rule);
}
.booking-wizard .wizard-step-dot.is-active {
  background: #a8362a;
  color: #ffffff;
  border-color: #a8362a;
}
.booking-wizard .wizard-step-line {
  width: 36px;
  height: 1px;
  background: var(--rule);
}
.booking-wizard .wizard-nav { margin-top: 1.5rem; }
.booking-wizard .wizard-nav-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}
.book-link-alt {
  text-align: center;
  margin-top: 1.4rem;
  font-size: 0.82rem;
}
.book-link-alt a { color: var(--text-muted); text-decoration: underline; }

/* Book page — compress hero so form starts higher */
.page-shell-book { padding: 0.5rem 2.5rem 0.4rem !important; }
.page-shell-book .page-title { font-size: clamp(1.2rem, 1.6vw, 1.4rem) !important; line-height: 1.1 !important; margin: 0 !important; }
.page-shell-book .page-eyebrow { margin-bottom: 0.15rem !important; font-size: 0.64rem !important; }
@media (max-width: 640px) {
  .page-shell-book { padding: 1rem 1.25rem 0.8rem !important; }
  .page-shell-book .page-title { font-size: 1.45rem !important; }
  .page-shell-book .page-eyebrow { margin-bottom: 0.45rem !important; }
}

.form-preferences-help {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0.6rem;
  line-height: 1.5;
  font-style: italic;
}
.booking-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  resize: vertical;
  min-height: 60px;
  transition: all 0.2s;
}
.booking-form textarea:focus {
  outline: none;
  border-color: var(--slate);
  background: var(--cream);
}

.page-body-book { padding-top: 0.5rem; padding-bottom: 0.8rem; }

.book-emergency-note {
  max-width: 760px;
  margin: 0.7rem auto 0;
  padding: 0.45rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--slate);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}
.book-emergency-note strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 760px) {
  .book-emergency-note { margin-top: 1.6rem; font-size: 0.82rem; padding: 0.75rem 0.9rem; }
}
@media (max-width: 760px) {
  .page-body-book { padding: 0.6rem 1.25rem 2rem !important; }
  .page-body-book .booking-form .form-footer-note:first-of-type { margin-top: 0.2rem; }
  .booking-form { padding: 0; }
  .booking-form .field { margin-bottom: 0.85rem; }
  .booking-form .field-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .booking-form .field-row .field { margin-bottom: 0.85rem; }
  .booking-form input,
  .booking-form select { padding: 0.7rem 0.8rem; font-size: 0.95rem; }
  .booking-form .form-section-title {
    font-size: 1.2rem;
    margin: 1.6rem 0 0.3rem;
  }
  .booking-form .form-section-title:first-child { margin-top: 0; }
  .booking-form .form-section-help { font-size: 0.82rem; margin-bottom: 0.8rem; }
  .booking-form .checkbox-group {
    padding: 0.75rem 0.9rem 0.85rem;
    margin-bottom: 0.85rem;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 0.6rem;
  }
  .booking-form .check { font-size: 0.88rem; padding: 0.35rem 0; }
  .booking-form .check-meta { font-size: 0.74rem; }
  .booking-form .form-footer-note {
    margin: 1.3rem 0 0.6rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
  }
  .booking-form .form-consent { font-size: 0.78rem; margin: 0.8rem 0 1rem; }
  .booking-form button.btn { padding: 0.9rem 1.2rem; }
}

/* FOOTER */
.site-footer {
  background: var(--slate-deep);
  color: rgba(255, 255, 255, 0.6);
  padding: 5rem 2.5rem 2rem;
}
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 4rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand .footer-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  color: var(--cream);
  margin-bottom: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.footer-brand .footer-name em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--accent-light);
  font-weight: 400;
}
.footer-creds {
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  font-family: 'Inter', sans-serif;
  max-width: 380px;
}
.footer-nav { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-nav-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.footer-nav a {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.82);
  font-family: 'Inter', sans-serif;
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--accent-light); }
.footer-base {
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 1.8rem;
  text-align: center;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.78);
  font-family: 'Inter', sans-serif;
}
.footer-base a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.footer-base a:hover {
  color: #ffffff;
}
.footer-base strong { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.footer-base p { margin-bottom: 0.5rem; }

/* CREDENTIALS PAGE */
.creds-page { background: var(--cream); padding: 5rem 2.5rem; }
.creds-page-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 4rem; }
.creds-group { border-top: 1px solid var(--rule); padding-top: 2.3rem; }
.creds-group-head { display: flex; align-items: baseline; gap: 1.6rem; margin-bottom: 1.8rem; }
.creds-group-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.8rem;
  color: var(--accent-deep);
  min-width: 50px;
}
.creds-group-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.creds-rows { list-style: none; padding: 0; margin-left: 4rem; }
.creds-rows li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.creds-rows li:last-child { border-bottom: none; }
.creds-row-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  font-weight: 600;
}
.creds-row-value { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.55; color: var(--text); }
.creds-row-value strong { font-weight: 600; color: var(--ink); }
.creds-row-value a { color: var(--slate); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.creds-meta { display: block; font-size: 0.9rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.55; }

/* MOBILE PANEL */
.mobile-panel {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 290px;
  max-width: 85vw;
  height: 100vh;
  background: var(--cream);
  color: var(--ink);
  z-index: 105;
  padding: 3rem 1.5rem 1.5rem;
  flex-direction: column;
  gap: 0.2rem;
  transform: translateX(-100%);
  transition: transform 0.3s;
  box-shadow: 4px 0 30px rgba(31, 37, 48, 0.2);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-panel.show { display: flex; transform: translateX(0); }
.mobile-panel a {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.mobile-panel a.mobile-book-cta {
  margin-bottom: 1.1rem;
}
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(31, 37, 48, 0.4); z-index: 90; }
.mobile-overlay.show { display: block; }

/* RESPONSIVE */
@media (max-width: 1280px) {
  .section-head { grid-template-columns: 1fr; gap: 1.2rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-list { grid-template-columns: 1fr; gap: 1.8rem; }
  .lanes { grid-template-columns: 1fr; }
  .research-band-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .trust-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(1), .trust-item:nth-child(2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .hero { padding: 4rem 1.5rem 4.5rem; min-height: 75vh; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(247, 247, 243, 0.94) 0%, rgba(247, 247, 243, 0.85) 60%, rgba(247, 247, 243, 0.5) 100%); }
  .section { padding: 4rem 1.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .trust-strip-inner { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .trust-item:last-child { border-bottom: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .quote-panel { padding: 2.5rem 1.8rem; }
  .closing-cta { padding: 4rem 1.5rem; }
  .research-band { padding: 3.5rem 1.5rem; }
  .page-shell { padding: 4rem 1.5rem 3rem; }
  .page-body { padding: 3.5rem 1.5rem; }
  .creds-page { padding: 3.5rem 1.5rem; }
  .creds-rows { margin-left: 0; }
  .creds-rows li { grid-template-columns: 1fr; gap: 0.3rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .event, .media-item, .publication { grid-template-columns: 1fr; gap: 0.5rem; }
  .publication-year { font-size: 1.4rem; }
  .nav-links { display: none; }
  .mobile-toggle { display: block; }
  .site-nav { padding: 0.9rem 1.5rem; }
  body { font-size: 16px; }
}

/* ===========================================
   SERVICE STREAM SELECTOR (top of /services.html)
   Three-card chooser: Individual / Couples & Partner / Clinicians
   =========================================== */
.service-streams {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2.75rem;
  margin-bottom: 0.5rem;
}
.stream-card {
  display: block;
  padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid var(--slate-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}
.stream-card:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(31, 37, 48, 0.18);
}
.stream-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.42rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  line-height: 1.25;
}
.stream-label::after {
  content: '→';
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--accent);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.stream-card:hover .stream-label::after {
  transform: translateX(4px);
}
.stream-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.stream-list {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
  line-height: 1.65;
  padding-top: 0.65rem;
  border-top: 1px solid var(--slate-soft);
}

/* In-page anchor scroll offset so the section header isn't hidden under the sticky nav */
section[id="individual"],
section[id="couples"],
section[id="clinicians"] {
  scroll-margin-top: 80px;
}

@media (max-width: 900px) {
  .service-streams {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ===========================================
   CREDENTIALS PAGE (replaces old creds-page)
   Dense, two-column hero with At-a-glance card
   2-column grid body for short sections, full-width for longer ones
   =========================================== */
.creds-hero {
  background: var(--cream);
  padding: 1.8rem 2.5rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.creds-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
.creds-hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.creds-hero-left .page-eyebrow {
  margin-bottom: 0.6rem;
}
.creds-hero-left .page-title {
  font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.creds-hero-left .page-lede {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 540px;
  margin-bottom: 0;
}

/* At-a-glance card */
.creds-snapshot {
  background: #ffffff;
  border: 1px solid var(--slate-soft);
  border-radius: 6px;
  padding: 1.2rem 1.4rem 1.1rem;
  box-shadow: 0 18px 36px -28px rgba(31, 37, 48, 0.16);
}
.creds-snapshot-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.creds-snapshot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.creds-snapshot-list li {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.1rem 0;
}
.snap-key {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.snap-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}
.snap-val em {
  font-style: italic;
}

/* Body */
.creds-body {
  background: var(--cream);
  padding: 1.1rem 2.5rem 2rem;
}
.creds-body-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.creds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.creds-block {
  background: #ffffff;
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: 1.3rem 1.5rem 1.1rem;
}
.creds-block-wide {
  grid-column: 1 / -1;
}
.creds-block-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.2;
}

/* Compact label/value lists inside each block */
.creds-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.creds-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.creds-list li:last-child {
  border-bottom: none;
  padding-bottom: 0.1rem;
}
.creds-list li:first-child {
  padding-top: 0.2rem;
}
.creds-list-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.creds-list-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}
.creds-list-val strong {
  font-weight: 600;
  color: var(--ink);
}
.creds-list-val .creds-meta {
  display: block;
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* 3-column variant for advisory positions */
.creds-list-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.creds-list-3col li {
  display: block;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  background: var(--cream);
}
.creds-list-3col .creds-list-label {
  display: block;
  margin-bottom: 0.55rem;
}
.creds-list-3col .creds-list-val {
  display: block;
}

/* Publications */
.creds-pubs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.creds-pubs li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.creds-pubs li:last-child { border-bottom: none; padding-bottom: 0.2rem; }
.creds-pubs li:first-child { padding-top: 0.2rem; }
.pub-year {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-deep);
  letter-spacing: 0.03em;
}
.pub-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
.pub-body strong { color: var(--ink); font-weight: 600; }
.pub-body em { font-style: italic; }
.pub-body a {
  color: var(--slate);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
}
.pub-body a:hover { color: var(--accent-deep); }

/* Specialisms chip cloud */
.creds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding-top: 0.3rem;
}
.chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--slate-soft);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  line-height: 1.2;
  transition: all 0.18s ease;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
  .creds-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .creds-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .creds-list li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .creds-list-3col {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .creds-pubs li {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* ===========================================
   /services.html — tighter section spacing for anchor-jumps
   So clicking "For me" / "For us" / "For clinicians" lands the user
   into a more contained, scannable view rather than a long scroll
   =========================================== */
section#individual,
section#couples,
section#clinicians {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  scroll-margin-top: 70px;
}
section#individual .section-head,
section#couples .section-head,
section#clinicians .section-head {
  display: block;
  margin-bottom: 0.15rem;
}
section#individual .section-head .eyebrow,
section#couples .section-head .eyebrow,
section#clinicians .section-head .eyebrow {
  margin-bottom: 0.3rem;
  font-size: 0.74rem;
}
section#individual .section-head .h2,
section#couples .section-head .h2,
section#clinicians .section-head .h2 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin-bottom: 0.4rem;
  max-width: 100%;
  line-height: 1.15;
}
section#individual .section-head .intro,
section#couples .section-head .intro,
section#clinicians .section-head .intro {
  font-size: 0.86rem;
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 760px;
}
@media (max-width: 1280px) {
  section#individual .section-head,
  section#couples .section-head,
  section#clinicians .section-head {
    gap: 1.6rem;
  }
}
section#individual .work-grid,
section#couples .work-grid,
section#clinicians .work-grid {
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  gap: 1rem;
}
section#individual .individual-3col,
section#couples .tinted-3col {
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}
section#individual .individual-3col,
section#couples .tinted-3col,
section#clinicians .tinted-3col {
  gap: 0.6rem !important;
}
section#individual .work-card,
section#couples .work-card,
section#clinicians .work-card {
  padding: 0.85rem 1.1rem 0.85rem;
  gap: 0.35rem;
}
section#individual .work-card h3,
section#couples .work-card h3,
section#clinicians .work-card h3 { font-size: 1rem !important; line-height: 1.2 !important; margin: 0 !important; }
section#individual .work-card p,
section#couples .work-card p,
section#clinicians .work-card p { font-size: 0.84rem !important; line-height: 1.42 !important; margin: 0 !important; -webkit-line-clamp: 3 !important; }
section#individual .work-card .work-card-num,
section#couples .work-card .work-card-num,
section#clinicians .work-card .work-card-num { font-size: 0.68rem !important; margin-bottom: 0.15rem !important; }
section#individual .work-card h3,
section#couples .work-card h3,
section#clinicians .work-card h3 {
  margin-bottom: 0.1rem;
  font-size: 1.02rem;
  line-height: 1.25;
}
section#individual .work-card p,
section#couples .work-card p,
section#clinicians .work-card p {
  font-size: 0.83rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
section#individual .work-card .work-card-cta,
section#couples .work-card .work-card-cta,
section#clinicians .work-card .work-card-cta {
  margin-top: 0.7rem;
  font-size: 0.78rem;
}
section#individual .work-card,
section#couples .work-card,
section#clinicians .work-card {
  padding: 0.75rem 0.95rem 0.7rem !important;
  gap: 0.25rem !important;
  /* Flat-grid layout sets the row height; we keep a small min-height as a safety floor only. */
  min-height: 108px !important;
  justify-content: flex-start;
  height: 100%;
}

/* DESKTOP — flat 3x3 grid with equal-height rows and column-major fill so cards 01-09 read down then across. */
/* Grouped 3-col layout: 3 outlined card-groups, each holding 3 stacked cards. */
.individual-3col-flat.individual-3col-grouped {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: auto !important;
  grid-auto-flow: row !important;
  gap: 0.8rem !important;
  margin-top: 0.6rem !important;
}
.card-group {
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: transparent;
}
@media (min-width: 761px) {
  /* Desktop: stronger outline so the three cards clearly read as one connected column-group */
  .card-group {
    border-width: 2px;
    border-color: rgba(0,0,0,0.18);
  }
}

/* Cards inside a group: tinted palette cycles 1–2–3 within each group. */
.card-group > .work-card {
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.7) !important;
  transition: filter 0.18s ease, transform 0.18s ease;
  padding: 0.85rem 1rem !important;
}
.card-group > .work-card:nth-child(1) { background: #f0ebe1 !important; }
.card-group > .work-card:nth-child(2) { background: #edeade !important; }
.card-group > .work-card:nth-child(3) { background: #ebe8db !important; }
.card-group > .work-card:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.04) !important;
}
.card-group > .work-card .work-card-num {
  color: #a8362a !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* Tablet: 1 column of groups */
@media (max-width: 980px) {
  .individual-3col-flat.individual-3col-grouped {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}
/* Allow 3-line descriptions inside grouped cards (override the strict 2-line clamp) */
section#individual .individual-3col-grouped .card-group > .work-card p {
  -webkit-line-clamp: 3 !important;
  max-height: calc(1.4em * 3) !important;
}
/* Cards 05 (partner-support) and 07 (chemsex-and-recovery) only: full text visible, no clamp.
   Surgical override — does not affect any other card. */
section#individual a.work-card[href="partner-support.html"] p,
section#individual a.work-card[href="chemsex-and-recovery.html"] p {
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
}
/* Card 04 (compulsive-sexual-behaviour) — mobile only — let the box grow so text fits inside */
@media (max-width: 760px) {
  section#individual a.work-card[href="compulsive-sexual-behaviour.html"] p {
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
  }
}
section#individual .work-card h3,
section#couples .work-card h3,
section#clinicians .work-card h3 {
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.15rem !important;
}
section#individual .work-card p,
section#couples .work-card p,
section#clinicians .work-card p {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  /* Hard-cap the description height so any line-clamp can't leak a partial line. */
  max-height: calc(1.4em * 2) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
section#individual .individual-3col {
  gap: 0.5rem !important;
  margin-top: 0.6rem !important;
}
section#individual .individual-col {
  gap: 0.5rem !important;
}
section#individual .work-card .work-card-cta {
  display: none !important;
}
section#individual .work-card .work-card-num,
section#couples .work-card .work-card-num,
section#clinicians .work-card .work-card-num {
  font-size: 0.7rem;
}

/* Mobile — compact services sections so 3 couples cards fit one phone view */
@media (max-width: 640px) {
  section#individual, section#couples, section#clinicians {
    padding: 2.25rem 1.25rem !important;
  }
  section#individual .section-head,
  section#couples .section-head,
  section#clinicians .section-head {
    margin-bottom: 1rem !important;
    gap: 0.4rem;
  }
  section#individual .section-head .eyebrow,
  section#couples .section-head .eyebrow,
  section#clinicians .section-head .eyebrow {
    margin-bottom: 0.35rem;
  }
  section#individual .section-head .h2,
  section#couples .section-head .h2,
  section#clinicians .section-head .h2 {
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
  }
  section#individual .section-head .intro,
  section#couples .section-head .intro,
  section#clinicians .section-head .intro {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-top: 0.5rem;
  }
  section#individual .individual-3col,
  section#couples .tinted-3col,
  section#clinicians .tinted-3col {
    margin-top: 1.1rem !important;
    gap: 0.65rem !important;
  }
  section#individual .work-card,
  section#couples .work-card,
  section#clinicians .work-card {
    padding: 0.85rem 0.95rem 0.85rem !important;
    gap: 0.25rem !important;
  }
  section#individual .work-card h3,
  section#couples .work-card h3,
  section#clinicians .work-card h3 {
    font-size: 0.98rem !important;
  }
  section#individual .work-card p,
  section#couples .work-card p,
  section#clinicians .work-card p {
    -webkit-line-clamp: 2 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    /* Hard-cap matches the clamp so no ghost line ever leaks below the ellipsis. */
    max-height: calc(1.4em * 2) !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
  /* MOBILE: relax min-height so longer titles can grow naturally without forcing dead space. */
  section#individual .work-card,
  section#couples .work-card,
  section#clinicians .work-card {
    min-height: 0 !important;
  }
  section#individual .work-card .work-card-cta,
  section#couples .work-card .work-card-cta,
  section#clinicians .work-card .work-card-cta {
    display: none !important;
  }
  section#individual .section-jump-row,
  section#couples .section-jump-row,
  section#clinicians .section-jump-row {
    margin-top: 1.1rem !important;
  }
}

/* Sub-band label inside the #individual section (Common / Specialist) */
section#individual .services-sub-band-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
section#individual .services-sub-band-label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
}

/* Individual section — 3 vertical columns, 3 cards stacked per column.
   Tight padding so all 9 cards fit in one viewport. */
/* Each services section reserves a full viewport so the next section
   doesn't peek through into the current view. Content sits near the top
   so all section labels sit at the same vertical position on screen. */
.services-page-tight section#individual,
.services-page-tight section#couples,
.services-page-tight section#clinicians,
.services-page-tight section#how-it-works,
.services-page-tight section.credentials-cta {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Pull content toward the top so the CTA below the cards stays comfortably
     within view on shorter laptop viewports. */
  justify-content: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /* When jumped to via anchor link, leave space above the eyebrow so it
     never sits flush against the top edge. */
  scroll-margin-top: 5rem;
}
.services-page-tight section#individual > .section-inner,
.services-page-tight section#couples > .section-inner,
.services-page-tight section#clinicians > .section-inner {
  width: 100%;
}
section#individual {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}
section#individual .section-head {
  margin-bottom: 0.2rem !important;
  gap: 0.3rem !important;
}
section#individual .section-head .h2 {
  margin-bottom: 0.3rem !important;
}
section#individual .section-head .eyebrow {
  margin-bottom: 0.25rem !important;
}
section#individual .section-head .intro {
  margin-top: 0.3rem !important;
  margin-bottom: 0 !important;
}
.individual-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.5rem !important;
  margin-bottom: 0.3rem !important;
}
.individual-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.65rem 0.7rem;
  border-radius: 4px;
}
/* Three very subtle warm cream tints — differentiates the verticals
   without any one column dominating. Tiny gradations only. */
.individual-col:nth-child(1) { background: #f0ebe1; }
.individual-col:nth-child(2) { background: #edeade; }
.individual-col:nth-child(3) { background: #ebe8db; }

section#individual .individual-col .work-card {
  padding: 0.55rem 0.7rem;
  gap: 0.15rem;
  margin: 0;
  border-radius: 3px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  min-height: 115px;
  justify-content: flex-start;
}
section#individual .individual-col .work-card:hover {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
}
section#individual .individual-col .work-card .work-card-num {
  font-size: 0.82rem;
  font-weight: 700;
  color: #a8362a;
  letter-spacing: 0.06em;
  margin: 0 0 0.05rem 0;
  display: block;
}
section#individual .individual-col .work-card h3 {
  font-size: 0.9rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 600;
}
section#individual .individual-col .work-card p {
  font-size: 0.76rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
section#individual .individual-col .work-card .work-card-cta {
  display: none;
}
@media (max-width: 980px) {
  section#individual { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .individual-3col {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* Shared 3-col tinted-card grid — used by Couples & Clinicians sections.
   3 single cards in a row, each on its own subtle warm cream tint. */
section#couples,
section#clinicians {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
/* (credentials-cta inherits the shared services-section flex-start rule above) */
.clinicians-link-note {
  margin-top: 1.75rem !important;
  margin-bottom: 0 !important;
  font-size: 0.95rem !important;
}
/* Booking band inside How-it-works — 3 channels (Clinic / Direct / WhatsApp) */
.booking-band {
  margin: 1.2rem auto 0;
  width: 100%;
  max-width: 920px;
}
.booking-band-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8362a;
  margin-bottom: 0.55rem;
  text-align: center;
}
.booking-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.booking-option {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1px solid var(--slate-soft);
  border-radius: 4px;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.booking-option:hover {
  border-color: #7a2e22;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -22px rgba(31, 37, 48, 0.25);
}
.booking-option-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a2e22;
  margin-bottom: 0.35rem;
}
.booking-option-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
}
.booking-option-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .booking-options { grid-template-columns: 1fr; }
}

/* Section CTAs — two buttons (secondary outline + primary solid) centered below cards */
.section-jump-row {
  margin-top: 0.9rem !important;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.section-cta-link,
.section-cta-primary {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.section-cta-link {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--slate-soft);
}
.section-cta-link:hover {
  background: rgba(255,255,255,0.5);
  border-color: var(--ink);
}
.section-cta-primary {
  color: #ffffff;
  background: #a8362a;
  border: 1px solid #a8362a;
  font-weight: 600;
}
.section-cta-primary:hover {
  background: #7a2e22;
  border-color: #7a2e22;
  transform: translateY(-1px);
}
/* Cycle the 3 column tints across any number of rows (6 cards = 2 rows) */
.tinted-3col > .tinted-card:nth-child(3n+1) { background: #f0ebe1; }
.tinted-3col > .tinted-card:nth-child(3n+2) { background: #edeade; }
.tinted-3col > .tinted-card:nth-child(3n+3) { background: #ebe8db; }
.clinicians-link {
  color: #a8362a !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid #a8362a;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}
.clinicians-link:hover {
  opacity: 0.75;
}
section#couples .section-head,
section#clinicians .section-head {
  margin-bottom: 0.7rem;
  gap: 2rem;
}
section#couples .section-head .h2,
section#clinicians .section-head .h2 { margin-bottom: 0.3rem !important; }
section#couples .section-head .intro,
section#clinicians .section-head .intro { margin-top: 0.25rem !important; }
section#couples .section-head .eyebrow,
section#clinicians .section-head .eyebrow { margin-bottom: 0.25rem !important; }

/* Section labels (Individuals / Couples / Clinicians / How it works / Practical info)
   — made prominent. Bigger, bolder, warm red, no preceding dash. */
section#individual .section-head .eyebrow,
section#couples .section-head .eyebrow,
section#clinicians .section-head .eyebrow,
section#how-it-works .section-head .eyebrow,
section#practical-info .section-head .eyebrow,
section.credentials-cta .eyebrow {
  font-size: 1.15rem;
  font-weight: 700;
  color: #a8362a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 0;
  margin-bottom: 0.5rem;
}
section#individual .section-head .eyebrow::before,
section#couples .section-head .eyebrow::before,
section#clinicians .section-head .eyebrow::before,
section#how-it-works .section-head .eyebrow::before,
section#practical-info .section-head .eyebrow::before,
section.credentials-cta .eyebrow::before {
  display: none;
}
section#couples .section-head .intro,
section#clinicians .section-head .intro,
section#how-it-works .section-head .intro,
section#practical-info .section-head .intro {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}
.tinted-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.55rem;
  margin-top: 4rem !important;
  margin-bottom: 2rem !important;
  align-items: stretch;
}
.tinted-card {
  padding: 1rem 1.1rem 1rem !important;
  gap: 0.3rem !important;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.7) !important;
  display: flex;
  flex-direction: column;
}
/* Couples section (10/11/12) desktop only: match the visual density of
   cards 1-9 — same padding, same fonts, same proportions. Phone untouched. */
@media (min-width: 761px) {
  section#couples .tinted-card {
    padding: 0.85rem 1rem !important;
    gap: 0.4rem !important;
    min-height: 0 !important;
  }
  /* Push the CTA buttons further down on the couples section for breathing room */
  section#couples .section-jump-row {
    margin-top: 1.6rem !important;
  }
}
.tinted-3col > .tinted-card:nth-child(1) { background: #f0ebe1; }
.tinted-3col > .tinted-card:nth-child(2) { background: #edeade; }
.tinted-3col > .tinted-card:nth-child(3) { background: #ebe8db; }
.tinted-3col > .tinted-card:hover {
  filter: brightness(1.03);
  border-color: rgba(0,0,0,0.04) !important;
  transform: translateY(-1px);
}
.tinted-card .work-card-num {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #a8362a !important;
  letter-spacing: 0.06em;
  margin: 0 0 0.1rem 0 !important;
  display: block;
}
.tinted-card h3 {
  font-size: 0.98rem !important;
  line-height: 1.22 !important;
  margin: 0 !important;
  font-weight: 600 !important;
}
.tinted-card p {
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  flex: 1;
}
/* Couples section text — desktop only — match cards 1-9 (font size, line-height, weight).
   Full text remains visible (no clamp) since couples descriptions are longer. */
@media (min-width: 761px) {
  section#couples .tinted-card h3 {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }
  section#couples .tinted-card p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-height: none !important;
  }
  section#couples .tinted-card .work-card-num {
    font-size: 0.68rem !important;
  }
}
/* Couples section text — phone — keep existing font size, just remove the clamp so full copy shows */
@media (max-width: 760px) {
  section#couples .tinted-card p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* How-it-works section (5 process steps) — phone AND web — remove clamp so full text shows in every box */
section#how-it-works .tinted-card p {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}
.tinted-card .work-card-cta { display: none !important; }
@media (max-width: 980px) {
  .tinted-3col { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* Single Havelock note at top of /services.html (replaces orphan per-section paragraphs) */
.havelock-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid var(--accent);
  padding: 0.5rem 0 0.5rem 0.9rem;
  margin: 1.4rem 0 0 0;
  max-width: 720px;
  line-height: 1.55;
}
.havelock-meta strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

/* ===========================================
   /services.html — compress hero so H1 + lede + Havelock + chooser
   all fit in a single viewport above the fold.
   Scoped via :has(.service-streams) so only services hero is affected.
   =========================================== */
/* Natural-flow hero on services.html: title block + cards stacked tight at top,
   with min-height ensuring the next section is reliably below the fold on
   typical laptop viewports. */
.page-shell:has(.service-streams) {
  min-height: calc(100vh - 60px);
  padding: 1.8rem 2.5rem 2rem;
}
/* Tighten book.html hero on mobile so form starts higher */
@media (max-width: 640px) {
  body:has(.page-body-book) .page-shell { padding: 1.5rem 1.25rem 1.25rem !important; }
  body:has(.page-body-book) .page-title { font-size: 1.5rem !important; line-height: 1.15 !important; }
  body:has(.page-body-book) .page-lede { font-size: 0.88rem !important; line-height: 1.5 !important; margin-top: 0.7rem !important; }
  body:has(.page-body-book) .page-eyebrow { margin-bottom: 0.55rem !important; }
}
.page-shell:has(.service-streams) .page-eyebrow {
  margin-bottom: 0.5rem;
}
.page-shell:has(.service-streams) .page-title {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.15;
}
.page-shell:has(.service-streams) .page-lede {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.55rem;
  max-width: 760px;
}
.page-shell:has(.service-streams) .havelock-meta {
  font-size: 0.78rem;
  padding: 0.35rem 0 0.35rem 0.8rem;
  margin: 0.7rem 0 0 0;
  line-height: 1.5;
}
.page-shell:has(.service-streams) .service-streams {
  margin-top: 0;
  margin-bottom: 0;
  gap: 1.1rem;
}
.page-shell:has(.service-streams) .stream-card {
  padding: 1.5rem 1.4rem 1.3rem;
}
.page-shell:has(.service-streams) .stream-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  margin-bottom: 0.5rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.page-shell:has(.service-streams) .stream-card:hover .stream-label {
  color: var(--accent-deep);
}
.page-shell:has(.service-streams) .stream-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
}
.page-shell:has(.service-streams) .stream-list {
  font-size: 0.72rem;
  line-height: 1.65;
  padding-top: 0.65rem;
}
/* Add an extra visual buffer between the chooser hero and the next section
   so the next section doesn't peek into the viewport */
section.page-shell + section.section {
  border-top: 1px solid var(--rule);
}

/* Services hero — two-column grid (title block + booking card on the right) */
.services-hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 3rem;
}
.services-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.services-clinic-card {
  background: #ffffff;
  border: 1px solid var(--slate-soft);
  border-radius: 6px;
  padding: 1.1rem 1.3rem 1.2rem;
  box-shadow: 0 18px 36px -28px rgba(31, 37, 48, 0.16);
}
.services-clinic-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-bottom: 0.55rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
}
.services-clinic-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 0.6rem 0;
}
.services-clinic-card p:last-child {
  margin-bottom: 0;
}
.services-clinic-card a {
  color: var(--accent-deep);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
}
.services-clinic-card a:hover {
  color: var(--ink);
}
@media (max-width: 900px) {
  .services-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Services hero text block — generous internal breathing, then space before the stream cards */
.page-shell:has(.service-streams) {
  padding-top: 6.5rem !important;
  padding-bottom: 5rem !important;
}
@media (max-width: 720px) {
  .page-shell:has(.service-streams) {
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }
  .services-hero-text-full {
    margin-bottom: 1.25rem !important;
  }
  .services-hero-text-full .page-lede {
    margin-top: 0.7rem !important;
  }
  /* Tighten chooser cards so both lanes fit in one phone view */
  .page-shell:has(.service-streams) .page-title {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }
  .page-shell:has(.service-streams) .page-lede {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
  }
  .page-shell:has(.service-streams) .service-streams {
    gap: 0.75rem !important;
  }
  .page-shell:has(.service-streams) .stream-card {
    padding: 1rem 1.1rem 1rem !important;
  }
  .page-shell:has(.service-streams) .stream-label {
    font-size: 1.02rem !important;
    margin-bottom: 0.3rem !important;
  }
  .page-shell:has(.service-streams) .stream-desc {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
  }
  /* Tag list lives on the detail pages - hide on phones to keep both cards in view */
  .page-shell:has(.service-streams) .stream-list {
    display: none !important;
  }
}
.services-hero-text-full {
  display: block;
  margin-bottom: 4rem;
}
.services-hero-text-full .page-eyebrow {
  margin-bottom: 1.6rem;
}
.services-hero-text-full .page-title {
  line-height: 1.1;
  margin: 0 0 1.6rem 0;
}
.services-hero-text-full .page-lede {
  max-width: 760px;
  margin-top: 0;
}
.page-shell:has(.service-streams) .service-streams {
  margin-top: 0 !important;
  margin-bottom: 0;
}

/* Booking card on services hero — compact, warm */
.services-booking-card {
  max-width: 340px;
  width: 100%;
  padding: 1rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, #fbf2e9 0%, #f8eadb 100%);
  border: 1px solid #e7c9b2;
  border-top: 3px solid #a8362a;
  border-radius: 5px;
  box-shadow: 0 16px 32px -26px rgba(122, 46, 34, 0.35);
}

/* Mobile — booking card matches stream-card width and padding */
@media (max-width: 720px) {
  .services-booking-row {
    margin-top: 1.25rem;
  }
  .services-booking-card {
    max-width: none;
    padding: 1.6rem 1.6rem 1.4rem;
  }
  .services-booking-card .services-clinic-head {
    font-size: 0.72rem;
  }
  .services-booking-card .booking-option {
    padding: 0.75rem 1rem;
  }
  .services-booking-card .booking-option-name {
    font-size: 0.95rem;
  }
  .services-booking-card .booking-option-meta {
    font-size: 0.78rem;
  }
}

/* Legacy desktop alignment ignored; kept here for safety */
.services-booking-card-legacy {
  align-self: end;
  margin-left: auto;
}

/* ============================================================
   Book a consultation CTA (link to services.html#book)
   ============================================================ */
.cta-book {
  padding: 2.5rem 1.5rem 3rem;
  text-align: center;
}
.cta-book-inner {
  max-width: 920px;
  margin: 0 auto;
}
.cta-book-btn {
  display: inline-block;
  padding: 0.95rem 2rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Book a consultation — standalone section on services.html
   ============================================================ */
.booking-section {
  background: linear-gradient(180deg, #fbf2e9 0%, #f6e3d0 100%);
  border-top: 3px solid #a8362a;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (max-width: 760px) {
  /* Fill the viewport so the footer never peeks under the booking cards */
  .booking-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .booking-section > .section-inner { width: 100%; }
}
.section-head.section-head-centered,
.section-head-centered {
  display: block !important;
  grid-template-columns: none !important;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.section-head-centered .eyebrow {
  justify-content: center;
  display: inline-flex;
  margin: 0 auto 1rem;
}
.section-head-centered .h2 {
  margin: 0 auto 1rem;
  text-align: center;
}
.section-head-centered .intro {
  margin: 0 auto;
  text-align: center;
  max-width: 560px;
}
.booking-options-full {
  max-width: 760px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.4rem;
}

/* === Booking option cards — pronounced primary + secondary, centered === */
.booking-options-full .booking-option {
  position: relative;
  padding: 1.8rem 1.4rem 1.5rem;
  border-radius: 8px;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  align-items: center;
  text-align: center;
}
.booking-options-full .booking-option-name {
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  letter-spacing: -0.005em;
}
.booking-options-full .booking-option-meta {
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.booking-options-full .booking-option-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  margin-top: auto;
}

/* Primary (Havelock) */
.booking-options-full .booking-option-primary {
  background: linear-gradient(180deg, #fbf2e9 0%, #f8eadb 100%);
  border: 1px solid #e7c9b2;
  border-top: 4px solid #a8362a;
  box-shadow: 0 16px 32px -22px rgba(122, 46, 34, 0.4);
}
.booking-options-full .booking-option-primary:hover {
  transform: translateY(-3px);
  border-color: #a8362a;
  box-shadow: 0 22px 40px -22px rgba(122, 46, 34, 0.55);
}
.booking-options-full .booking-option-primary .booking-option-label {
  color: #7a2e22;
}
.booking-options-full .booking-option-primary .booking-option-cta {
  background: #a8362a;
  color: #ffffff;
}
.booking-options-full .booking-option-primary:hover .booking-option-cta {
  background: #7a2e22;
}

/* Primary-channel badge — centered on top edge */
.booking-primary-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #a8362a;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(122, 46, 34, 0.5);
  white-space: nowrap;
}

/* Secondary (Direct) — slate blue, pronounced but quieter than primary */
.booking-options-full .booking-option-secondary {
  background: linear-gradient(180deg, #eef1f6 0%, #e3e8f0 100%);
  border: 1px solid #c4ccd8;
  border-top: 3px solid #3e4a5a;
  box-shadow: 0 14px 28px -22px rgba(31, 37, 48, 0.25);
}
.booking-options-full .booking-option-secondary:hover {
  transform: translateY(-2px);
  border-color: #3e4a5a;
  box-shadow: 0 20px 36px -22px rgba(31, 37, 48, 0.4);
}
.booking-options-full .booking-option-secondary .booking-option-label {
  color: #3e4a5a;
}
.booking-options-full .booking-option-secondary .booking-option-cta {
  background: #3e4a5a;
  color: #ffffff;
}
.booking-options-full .booking-option-secondary:hover .booking-option-cta {
  background: #2a3340;
}

@media (max-width: 640px) {
  .booking-options-full { grid-template-columns: 1fr !important; justify-items: center; gap: 1.6rem; }
  .booking-options-full .booking-option {
    width: 100%;
    max-width: 380px;
  }
}

/* ============================================================
   Service detail — related-work block as its own section
   ============================================================ */
.service-related-section {
  padding: 3rem 0 4rem;
}
.service-related-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============================================================
   Essay hero banner (image above title block)
   ============================================================ */
.essay-hero {
  display: block;
  width: 100%;
  background: var(--paper);
  margin: 0 0 3rem;
  padding: 0;
  overflow: hidden;
}
/* Desktop: hero flush against header (match services page-shell flow). Phone keeps the 2rem gap (rule below). */
@media (min-width: 761px) {
  .essay-hero { margin-bottom: 0 !important; }
}
.essay-hero img {
  display: block;
  width: 100%;
  height: 260px;
  margin: 0;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 760px) {
  .essay-hero img {
    height: auto;
    aspect-ratio: 21 / 9;
  }
}
/* Tall essay hero variant — desktop only, for face/portrait compositions.
   Phone unchanged (still uses 21:9 aspect via rule above). */
@media (min-width: 761px) {
  .essay-hero-tall img {
    height: 360px;
  }
}
@media (max-width: 720px) {
  .essay-hero { margin-bottom: 2rem; }
}
@media print {
  .essay-hero { display: none !important; }
}

/* ============================================================
   Essay & research utility row (Print, Copy link, Email)
   ============================================================ */
.essay-utility-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.essay-utility-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  background: transparent;
  border: 1px solid rgba(31, 37, 48, 0.18);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.essay-utility-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}
.essay-utility-btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* ============================================================
   Print stylesheet — strip chrome, keep essay body
   ============================================================ */
@media print {
  .site-nav, .mobile-overlay, .mobile-panel, .site-footer,
  .essay-utility-row, .essay-services-link, .related-essays,
  .nav-cta, .cta-book, .booking-section, .booking-band,
  .section-jump-row, .credentials-cta, .service-booking-panel,
  .cta-book-btn, .stream-card, .service-streams,
  .prompt-band, .footer-base, .closing-cta { display: none !important; }
  body { background: #ffffff !important; color: #111111 !important; font-size: 11pt; }
  .essay-page, .page-shell, .page-body { background: #ffffff !important; max-width: 100% !important; padding: 0 !important; }
  .essay-header, .essay-body, .essay-body-inner, .essay-header-inner, .page-shell-inner { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
  .essay-h1, .page-title { font-size: 22pt !important; line-height: 1.15 !important; margin: 0 0 0.5rem !important; }
  .essay-deck, .page-lede { font-size: 11pt !important; line-height: 1.4 !important; margin: 0.5rem 0 !important; }
  .essay-byline { font-size: 10pt !important; color: #555 !important; margin: 0.5rem 0 1.5rem !important; }
  .essay-body p, .page-body p { font-size: 11pt !important; line-height: 1.55 !important; orphans: 3; widows: 3; margin: 0 0 0.75rem !important; }
  .essay-body h2, .essay-body h3 { page-break-after: avoid; margin-top: 1rem !important; }
  .pull-quote { page-break-inside: avoid; border-left: 2px solid #999 !important; padding-left: 0.75rem !important; margin: 1rem 0 !important; font-style: italic; }
  a { color: inherit !important; text-decoration: none !important; }
  a[href^="http"]::after, a[href^="https"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; }
}

/* ============================================================
   Fees page — compact, single-screen layout
   ============================================================ */
.page-shell-fees {
  padding: 3rem 2.5rem 1.5rem !important;
  border-bottom: none !important;
}
.page-shell-fees .page-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.page-shell-fees .page-lede {
  margin-top: 1rem;
  font-size: 1rem;
}
.page-body-fees {
  padding: 1.5rem 2.5rem 2.5rem !important;
  max-width: 1200px !important;
}
.fees-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 1.5rem;
}
@media (max-width: 1100px) {
  .fees-grid { grid-template-columns: repeat(2, 1fr); }
}
.fee-card {
  background: #ffffff;
  border: 1px solid var(--slate-soft);
  border-radius: 6px;
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fee-card:hover {
  border-color: #a8362a;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -26px rgba(31, 37, 48, 0.18);
}
.fee-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a2e22;
}
.fee-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.fee-card-unit {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
}
.fee-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text);
}
.fees-notes {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule-soft);
}
.fees-notes-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.65rem;
  text-align: center;
}
.fees-notes-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 2rem;
}
@media (max-width: 800px) {
  .fees-notes-body { grid-template-columns: 1fr; }
}
.fees-notes p {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 0.45rem;
}
.fees-notes p strong {
  color: var(--ink);
}

/* FEES — desktop/mobile split for practical notes.
   Desktop: small panel in the top-right of the page header.
   Mobile: stays at the bottom of the page (original block). */
.fees-notes-desktop { display: none; }
.fees-notes-mobile { display: block; }
.page-shell-fees .page-shell-inner { position: relative; }
@media (min-width: 760px) {
  .fees-notes-desktop {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    max-width: 280px;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    background: var(--cream);
    border: 1px solid var(--rule);
    border-radius: 4px;
    border-top: 1px solid var(--rule) !important;
  }
  .fees-notes-desktop .fees-notes-title {
    text-align: left;
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }
  .fees-notes-desktop .fees-notes-body {
    display: block;
    gap: 0;
  }
  .fees-notes-desktop p {
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0 0 0.4rem;
  }
  .fees-notes-desktop p:last-child { margin-bottom: 0; }
  .fees-notes-mobile { display: none; }
  /* Make space so the title/lede don't sit underneath the notes panel on narrower desktop widths. */
  .page-shell-fees .page-lede { padding-right: 300px; }
}
.fees-booking {
  margin-top: 2rem;
}
@media (max-width: 720px) {
  .fees-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .fee-card-price {
    font-size: 1.85rem;
  }
  .page-shell-fees { padding: 2rem 1.5rem 1rem !important; }
  .page-body-fees { padding: 1rem 1.5rem 2rem !important; }
}
.page-body-fees .cta-book { padding: 1rem 1.5rem 0.5rem; }
.services-booking-card .services-clinic-head {
  color: #7a2e22;
  border-bottom-color: rgba(168, 54, 42, 0.22);
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  font-size: 0.66rem;
}
.services-booking-card .booking-options {
  grid-template-columns: 1fr;
  gap: 0.45rem;
}
.services-booking-card .booking-option {
  padding: 0.55rem 0.75rem;
  background: #ffffff;
  border-color: #ecd6c1;
  border-radius: 3px;
}
.services-booking-card .booking-option:hover {
  border-color: #a8362a;
  transform: translateY(-1px);
}
.services-booking-card .booking-option-label {
  font-size: 0.6rem;
  margin-bottom: 0.2rem;
}
.services-booking-card .booking-option-name {
  font-size: 0.85rem;
  margin-bottom: 0.1rem;
}
.services-booking-card .booking-option-meta {
  font-size: 0.7rem;
  line-height: 1.35;
}

/* ===== ESSAY PAGES (added 6 Jun 2026) ===== */

.essay-page {
  background: var(--cream);
}

.essay-header {
  background: var(--paper);
  padding: 4.5rem 2rem 3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.essay-header-inner {
  max-width: 760px;
  margin: 0 auto;
}
.essay-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.6rem;
}
.essay-h1 {
  font-family: 'Inter', sans-serif;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.essay-deck {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}
.essay-byline {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.essay-body {
  background: var(--cream);
  padding: 3.5rem 2rem 4rem;
}
.essay-body-inner {
  max-width: 720px;
  margin: 0 auto;
}

.essay-prose p,
.essay-prose h2,
.essay-prose h3 {
  /* Inherit from .prose; nothing new */
}
.essay-prose h2 {
  font-size: 1.5rem;
  margin-top: 2.8rem;
  margin-bottom: 1rem;
}
.essay-prose h3 {
  /* Override the prose h3 uppercase eyebrow style for essay-style sub-heads.
     Mike uses ### as conversational sub-section markers, not eyebrow labels. */
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 2rem;
  margin-bottom: 0.7rem;
}

.essay-services-link {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
  text-align: right;
}
.essay-services-link + .prose,
.essay-services-link + .essay-prose {
  margin-top: 0;
}
.essay-services-link a {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

.clinical-disclaimer {
  margin-top: 3rem;
  padding: 1.2rem 1.4rem;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.clinical-disclaimer em {
  font-style: italic;
  font-family: inherit;
}

.essay-footer-bio {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.essay-footer-bio em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}

/* Related essays at foot of every essay */
.related-essays {
  background: var(--paper);
  padding: 4rem 2rem;
  border-top: 1px solid var(--rule-soft);
}
.related-essays-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.related-essays h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2rem;
  letter-spacing: -0.018em;
}
.related-essays-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.related-essay-card {
  display: block;
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  padding: 1.5rem 1.4rem 1.4rem;
  transition: border-color 0.2s, transform 0.2s;
  color: var(--text);
}
.related-essay-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  color: var(--text);
}
.related-essay-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.related-essay-card p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.related-essay-card .read-more {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* /writing/ hub index page */
.writing-hub-header {
  background: var(--paper);
  padding: 5rem 2rem 3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.writing-hub-header-inner {
  max-width: 900px;
  margin: 0 auto;
}
.writing-hub-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.4rem;
}
.writing-hub-h1 {
  font-family: 'Inter', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.writing-hub-intro {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 0;
}

.writing-hub-list {
  background: var(--cream);
  padding: 3.5rem 2rem 5rem;
}
.writing-hub-list-inner {
  max-width: 900px;
  margin: 0 auto;
}
.writing-hub-item {
  display: block;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--text);
  transition: padding-left 0.2s;
}
.writing-hub-item:hover {
  padding-left: 0.6rem;
  color: var(--text);
}
.writing-hub-item:first-of-type {
  border-top: 1px solid var(--rule-soft);
}
.writing-hub-item.anchor {
  background: var(--paper);
  padding: 2rem 1.5rem;
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.writing-hub-item.anchor:hover { padding-left: 1.8rem; }
.writing-hub-item-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.6rem;
}
.writing-hub-item-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  margin-bottom: 0.5rem;
  letter-spacing: -0.014em;
}
.writing-hub-item.anchor .writing-hub-item-title {
  font-size: 1.55rem;
}
.writing-hub-item-deck {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Print styles — clean reading copy for clinicians/journalists */
@media print {
  .site-nav, .mobile-overlay, .mobile-panel, .site-footer,
  .related-essays, .essay-services-link, .nav-cta {
    display: none !important;
  }
  body { font-size: 11pt; line-height: 1.55; color: #000; background: #fff; }
  .essay-header { background: #fff; padding: 1rem 0 2rem; }
  .essay-h1 { font-size: 18pt; color: #000; }
  .essay-deck { font-size: 13pt; color: #333; }
  .essay-prose { font-size: 11pt; }
  .essay-prose h2 { font-size: 14pt; page-break-after: avoid; }
  .essay-prose h3 { font-size: 12pt; page-break-after: avoid; }
  .essay-prose p { page-break-inside: avoid; }
  .clinical-disclaimer { background: #f5f5f5; border-left: 2px solid #888; font-size: 9pt; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
  a[href^="#"]::after, a[href^="/"]::after { content: ""; }
}

/* Cookie banner — UK ICO 2025-2026 compliant */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  color: #fff;
  padding: 1.4rem 1.6rem;
  z-index: 9999;
  display: none;
  border-top: 2px solid var(--accent);
}
.cookie-banner.show {
  display: block;
}
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.cookie-banner-text {
  font-size: 0.92rem;
  line-height: 1.55;
}
.cookie-banner-text a {
  color: var(--accent-light);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
}
.cookie-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--accent-light);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cookie-btn:hover {
  background: var(--accent-light);
  color: var(--ink);
}
.cookie-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
}
.cookie-btn.primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}
@media (max-width: 720px) {
  .cookie-banner-inner {
    grid-template-columns: 1fr;
  }
  .cookie-banner-actions {
    justify-content: flex-end;
  }
}

/* Footer disclaimer addition */
.footer-disclaimer {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  line-height: 1.55;
}
.footer-disclaimer em {
  font-style: italic;
}

/* Limited company statutory disclosure */
.footer-legal {
  font-size: 0.75rem;
  color: var(--text-faint, rgba(255, 255, 255, 0.45));
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.footer-legal em { font-style: normal; }

/* Essay body responsive */
@media (max-width: 720px) {
  .essay-h1 { font-size: 1.6rem; }
  .essay-deck { font-size: 1.1rem; }
  .essay-body-inner { padding: 0; }
  .essay-header { padding: 3rem 1.4rem 2rem; }
  .essay-body { padding: 2.5rem 1.4rem 3rem; }
  .essay-prose h2 { font-size: 1.25rem; }
  .essay-prose h3 { font-size: 1.05rem; }
}

/* Contact page additions (cookie consent, alt routes) */
.form-consent {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.8rem 0 1.2rem;
  line-height: 1.5;
}
.contact-alt {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: 2rem 1.6rem;
  background: var(--paper);
  border-left: 3px solid var(--accent);
}
.contact-alt h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--ink);
}
.contact-alt p {
  margin-bottom: 0.6rem;
  line-height: 1.6;
}
.contact-alt a {
  color: var(--slate);
  border-bottom: 1px solid var(--accent);
}

/* ===== SERVICE PAGE COMMON BLOCKS (added 6 Jun 2026) ===== */

.service-related-work {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.service-related-work .eyebrow {
  margin-bottom: 1rem;
}
.service-related-work-second {
  margin-top: 2rem !important;
}
.service-related-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}
.service-related-list li {
  padding: 0.65rem 0;
  border-bottom: 1px dotted var(--rule);
  font-size: 0.95rem;
  line-height: 1.5;
}
.service-related-list li:last-child {
  border-bottom: none;
}
.service-related-list a {
  color: var(--slate);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.service-related-list a:hover {
  color: var(--accent-deep);
}

/* Closing booking panel — three routes */
.service-booking-panel {
  background: var(--paper);
  padding: 4rem 2rem;
  border-top: 1px solid var(--rule-soft);
}
.service-booking-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.service-booking-inner .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 1rem;
}
.service-booking-inner h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  letter-spacing: -0.018em;
}
.service-booking-intro {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.55;
}
.service-booking-panel .booking-options {
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .service-booking-panel { padding: 2.5rem 1.4rem; }
  .service-booking-inner h2 { font-size: 1.3rem; }
}

/* ============================================================
   Pull quotes for long-form essays
   ============================================================ */
.pull-quote {
  margin: 2.2rem 0 2.2rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 3px solid var(--accent);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.4;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 100%;
}
.pull-quote p {
  margin: 0;
}
@media (min-width: 768px) {
  .pull-quote {
    font-size: 1.7rem;
    margin: 2.6rem 0;
    padding-left: 1.8rem;
  }
}
@media (min-width: 1100px) {
  .pull-quote {
    font-size: 1.85rem;
    margin: 3rem -2rem 3rem -2rem;
    padding-left: 2rem;
  }
}

/* ============================================================
   Service page hero band
   ============================================================ */
.service-hero {
  width: 100%;
  background: var(--paper);
  margin: 0;
  overflow: hidden;
}
.service-hero img {
  display: block;
  width: 100%;
  height: 260px;
  margin: 0;
  object-fit: cover;
  object-position: center;
}
/* Per-page taller-hero variant (desktop only) for portrait-heavy photos that need extra vertical room for the face.
   Mobile keeps the 21:9 aspect-ratio default so phone layout never changes. */
@media (min-width: 761px) {
  .service-hero-tall img {
    height: 360px;
  }
  /* Extra-tall for portrait poster compositions (e.g. SEXUALITY sticky-notes) */
  .service-hero-xtall img {
    height: 460px;
  }
  /* Pull title up tighter under a hero (desktop only) */
  .page-shell-tight {
    padding-top: 2rem !important;
  }
}

/* POSTER-STYLE hero — for source images whose composition is square/portrait
   (e.g. typographic posters, data-vis with margins, art prints). Displays the
   image AT ITS NATURAL ASPECT, contained, centred, with whitespace at the sides
   on desktop. Phone keeps the natural source aspect so the whole composition is
   visible. No content gets cropped. */
.service-hero-poster {
  background: #ffffff;
}
.service-hero-poster img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}
@media (min-width: 761px) {
  .service-hero-poster img {
    max-height: 520px;
    aspect-ratio: auto;
  }
}
@media (max-width: 760px) {
  .service-hero-poster img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }
}
@media (max-width: 760px) {
  .service-hero img {
    height: auto;
    aspect-ratio: 21 / 9;
  }
}

/* ============================================================
   Anonymisation case note
   ============================================================ */
.case-note {
  font-size: 0.85em;
  color: var(--text-muted, #6a6a6a);
  margin: 0.6rem 0 1.6rem 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--border, #d4d1ca);
  line-height: 1.5;
}

/* ============================================================
   FINAL CASCADE OVERRIDE — services cards 04, 05, 07 must show
   full description text.
   Higher-specificity selector needed to beat the generic
   `section#individual .individual-3col-grouped .card-group > .work-card p`
   rule (specificity 1,3,2). This rule scores 1,4,3 so it wins.
   ============================================================ */
/* Couples cards 10-12: show full descriptions (no clamp). Cards 10-12
   genuinely have longer content than 1-9; we restore full visibility so
   no "..." truncation appears mid-sentence. */
@media (min-width: 761px) {
  section#couples .tinted-card p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-height: none !important;
  }
}
section#individual .individual-3col-grouped .card-group > a.work-card[href*="partner-support"] p,
section#individual .individual-3col-grouped .card-group > a.work-card[href*="chemsex-and-recovery"] p {
  -webkit-line-clamp: unset !important;
  -webkit-line-clamp: initial !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  -webkit-box-orient: initial !important;
}
@media (max-width: 760px) {
  section#individual .individual-3col-grouped .card-group > a.work-card[href*="compulsive-sexual-behaviour"] p,
  section#individual .individual-3col-grouped .card-group > a.work-card[href*="partner-support"] p,
  section#individual .individual-3col-grouped .card-group > a.work-card[href*="chemsex-and-recovery"] p {
    -webkit-line-clamp: unset !important;
    -webkit-line-clamp: initial !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    -webkit-box-orient: initial !important;
  }
}

/* Inline form field help — small italic note below a label */
.form-field-help {
  font-size: 0.78rem;
  color: #6b6055;
  margin: 0 0 0.35rem 0;
  line-height: 1.45;
}
@media (min-width: 761px) {
  .booking-form .form-field-help {
    font-size: 0.78rem !important;
    margin: 0 0 0.45rem 0 !important;
    color: #6b6055 !important;
  }
}