/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --accent: #2b6777;
  --accent-light: #3d8a9c;
  --accent-dim: rgba(43, 103, 119, 0.08);
  --accent-border: rgba(43, 103, 119, 0.15);
  --bg: #f8f9fa;
  --bg-alt: #ffffff;
  --bg-card: #ffffff;
  --border: #e2e6ea;
  --border-light: #eef0f2;
  --text: #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 1120px;
  --content-width: 720px;
  --section-padding: 100px 0;
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Derived from the accent so it follows whatever a client's theme sets.
     It used to be undefined, so every rule using it fell back to a hardcoded
     teal tint from the original palette — which is why the CTA block on a
     warm-brown site was reading as cool grey. */
  --accent-dim: color-mix(in srgb, var(--accent, #2b6777) 9%, transparent);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg);
  color: var(--text-secondary);
  line-height: 1.7;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  letter-spacing: -0.03em;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

p {
  max-width: 640px;
}

.section-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}

/* ===== LAYOUT ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  padding: var(--section-padding);
}

/* ===== NAVIGATION ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 0;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

.nav.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 0.85rem 0;
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The bar breathes wider than the reading column: capped at the page's
     --max-width, a practice nav wedges its links against the logo on any
     wide monitor. Logo and menu hold the edges; the middle stays air. */
  max-width: 1400px;
}

.nav-logo {
  flex-shrink: 0;                /* the wordmark never squashes to make room */
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
/* An item's words stay on one line: a nav that wraps inside its own labels
   reads as broken. Where the row cannot fit, the menu collapses instead. */
.nav-links > li > a { white-space: nowrap; }
/* A floor on the gap between wordmark and menu, whatever the width. */
.nav-links { margin-left: 2.5rem; }
/* Between full width and the collapse point, trade air for fit. */
@media (max-width: 1400px) {
  .nav-links { gap: 1.1rem; }
}

.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition);
  letter-spacing: 0.01em;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: var(--transition);
  border-radius: 1px;
}

/* ===== BUTTONS ===== */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.btn-outline svg {
  flex-shrink: 0;
}

/* ===== HERO ===== */
.hero {
  padding: 160px 0 80px;
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-light);
}

.hero-layout {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.hero-photo {
  flex-shrink: 0;
}

.hero-photo img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-border);
  box-shadow: 0 8px 30px rgba(43, 103, 119, 0.1);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-credentials {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.hero h1 {
  margin-bottom: 0.5rem;
}

.hero h1 .accent {
  color: var(--accent);
}

.hero-title {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.75rem;
  max-width: 480px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tag {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  border: 1px solid var(--accent-border);
}

.hero-links {
  display: flex;
  gap: 0.75rem;
}

/* ===== BIO SECTION ===== */
.bio-section {
  background: var(--bg);
  position: relative;
}

.bio-content {
  max-width: var(--content-width);
}

.bio-content p {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 100%;
}

.bio-content p + p {
  margin-top: 1.25rem;
  color: var(--text-muted);
}

/* ===== LATEST ARTICLES / POSTS GRID ===== */
.latest-articles {
  position: relative;
  background: var(--bg-alt);
}

.latest-articles::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-light);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.section-header .section-label {
  margin-bottom: 0;
}

.view-all {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  transition: color var(--transition);
}

.view-all:hover {
  color: var(--accent-light);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.posts-grid-full {
  grid-template-columns: repeat(2, 1fr);
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}

.post-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.post-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.post-date,
.post-read-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.post-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.post-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Post card with image */
.post-card.has-image {
  padding: 0;
  overflow: hidden;
}

.post-card.has-image .post-card-body {
  padding: 1.5rem 2rem 2rem;
}

.post-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.post-card:hover .post-card-image img {
  transform: scale(1.03);
}

/* Article feature image */
.article-feature-image {
  margin-bottom: 2.5rem;
  border-radius: 12px;
  overflow: hidden;
}

.article-feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.read-more {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--transition);
}

.post-card:hover .read-more {
  gap: 0.6rem;
}

/* ===== PAGE HEADER ===== */
.page-header {
  padding: 160px 0 60px;
  position: relative;
  background: var(--bg-alt);
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-light);
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 480px;
}

.error-page {
  text-align: center;
  padding: 200px 0 120px;
}

.error-page h1 {
  font-size: 6rem;
  color: var(--border);
  margin-bottom: 1rem;
}

/* ===== BLOG LISTING ===== */
.blog-listing {
  padding: 60px 0 100px;
}

.empty-state {
  text-align: center;
  padding: 4rem 0;
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* ===== ARTICLE / BLOG POST ===== */
.article {
  padding: 160px 0 80px;
}

.article .container {
  max-width: 800px;
}

.article-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.article-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: 1.5rem;
  max-width: 100%;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-border);
}

.initials-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #2b6777);
  border: 2px solid var(--accent-border, rgba(255,255,255,0.1));
  letter-spacing: 0.05em;
  user-select: none;
}

.initials-avatar--large {
  width: 200px;
  height: 200px;
  font-size: 4.5rem;
}

.initials-avatar--small {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.author-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.author-title {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ===== ARTICLE BODY (rendered HTML content) ===== */
.article-body {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--text-secondary);
}

.article-body h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-top: 1rem;
}

.article-body h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.article-body p {
  margin-bottom: 1.25rem;
  max-width: 100%;
}

.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(43, 103, 119, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition);
}

.article-body a:hover {
  text-decoration-color: var(--accent);
}

.article-body ul,
.article-body ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.article-body li {
  margin-bottom: 0.5rem;
}

.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--accent-dim);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text);
}

.article-body blockquote p {
  margin-bottom: 0;
}

.article-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: #f0f2f5;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--accent);
}

.article-body pre {
  background: #f0f2f5;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.article-body pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text);
}

.article-body img {
  border-radius: 8px;
  margin: 1.5rem 0;
}

/* Inset images — float alongside text */
.article-body figure {
  margin: 1.5rem 0;
}

.article-body figure img {
  border-radius: 8px;
  margin: 0;
}

.article-body figure figcaption {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-style: italic;
}

.article-body figure.inset-right {
  float: right;
  width: 45%;
  margin: 0.5rem 0 1rem 2rem;
}

.article-body figure.inset-left {
  float: left;
  width: 45%;
  margin: 0.5rem 2rem 1rem 0;
}

.article-body figure.full-width {
  width: 100%;
  margin: 2rem 0;
}

.article-body figure.full-width img {
  width: 100%;
}

@media (max-width: 768px) {
  .article-body figure.inset-right,
  .article-body figure.inset-left {
    float: none;
    width: 100%;
    margin: 1.5rem 0;
  }
}

.article-body hr {
  border: none;
  height: 1px;
  background: var(--border-light);
  margin: 2rem 0;
}

.article-body strong {
  color: var(--text);
  font-weight: 600;
}

.article-body em {
  color: var(--text);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.article-body th,
.article-body td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.article-body th {
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
}

/* ===== ARTICLE FOOTER ===== */
/* Related posts */
.related-posts {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-light);
}

.related-posts h2 {
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.related-post-card {
  padding: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
  text-decoration: none;
}

.related-post-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.related-post-card h3 {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 0.5rem;
  color: var(--text);
}

.related-post-card p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
}

.back-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  transition: color var(--transition);
}

.back-link:hover {
  color: var(--accent-light);
}

/* ===== FOOTER ===== */
.footer {
  padding: 3rem 0;
  border-top: 1px solid var(--border-light);
  background: var(--bg-alt);
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-brand {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.footer-title {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-links a {
  color: var(--text-muted);
  transition: color var(--transition);
  display: flex;
  align-items: center;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-links svg {
  width: 18px;
  height: 18px;
}

.footer-copy {
  font-size: 0.75rem;
  color: rgba(113, 128, 150, 0.5);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
  :root {
    --section-padding: 80px 0;
  }

  .hero-layout {
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
  }

  .hero-title {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-tags {
    justify-content: center;
  }

  .hero-links {
    justify-content: center;
  }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .posts-grid-full {
    grid-template-columns: 1fr;
  }
}

/* The menu collapses well before phone width: a practice nav carries enough
   items that below here the row cannot fit without wrapping inside its own
   labels or pushing the CTA off the edge. */
@media (max-width: 1120px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 999;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    font-size: 1.2rem;
    color: var(--text);
  }

  .nav-toggle {
    display: block;
    z-index: 1001;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 64px 0;
  }

  .related-posts-grid {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 1.5rem;
  }

  .hero {
    padding: 120px 0 60px;
  }

  .hero-photo img,
  .initials-avatar--large {
    width: 150px;
    height: 150px;
    font-size: 3.5rem;
  }

  .posts-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    padding: 120px 0 40px;
  }

  .article {
    padding: 120px 0 60px;
  }

  .footer .container {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .footer-left {
    align-items: center;
  }

  .footer-right {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1.25rem;
  }

  h1 {
    font-size: 2.2rem;
  }

  .hero-photo img,
  .initials-avatar--large {
    width: 120px;
    height: 120px;
    font-size: 2.8rem;
  }

  .post-card {
    padding: 1.5rem;
  }

  .article-body {
    font-size: 1rem;
  }
}

/* ===== MEDIA PAGE ===== */
.media-page {
  padding: 6rem 0 4rem;
  min-height: 60vh;
}

.media-header {
  margin-bottom: 3rem;
}

.media-header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

.media-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.media-card {
  display: block;
  padding: 2rem;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.media-card:hover {
  border-color: var(--accent, #2b6777);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.media-card-source {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent, #2b6777);
  margin-bottom: 0.5rem;
}

.media-card h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.media-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted, #555);
  margin-bottom: 1rem;
}

.media-card-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
}

.media-date {
  color: var(--text-muted, #555);
}

.media-link {
  color: var(--accent, #2b6777);
  font-weight: 600;
}

/* ===== MEDIA HOME SECTION ===== */
.media-section {
  padding: 4rem 0;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.media-home-card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.media-home-card:hover {
  border-color: var(--accent, #2b6777);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.media-home-source {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent, #2b6777);
  margin-bottom: 0.5rem;
}

.media-home-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.media-home-date {
  font-size: 0.8rem;
  color: var(--text-muted, #555);
}

@media (max-width: 600px) {
  .media-page {
    padding: 5rem 0 3rem;
  }

  .media-card {
    padding: 1.5rem;
  }

  .media-card h2 {
    font-size: 1.2rem;
  }

  .media-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PRACTICE SITE EXTENSIONS ===== */

/* Nav dropdowns */
.has-dropdown { position: relative; }
.has-dropdown > a { display: flex; align-items: center; gap: 0.3rem; }
.has-dropdown > a svg { transition: transform 0.2s; }
.dropdown { position: absolute; top: 100%; left: 0; background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e6ea); border-radius: 8px; padding: 0.5rem 0; min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s; list-style: none; z-index: 100; }
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.has-dropdown:hover > a svg { transform: rotate(180deg); }
.dropdown li a { display: block; padding: 0.5rem 1rem; font-size: 0.9rem; color: var(--text-secondary, #4a5568); transition: background 0.15s; }
.dropdown li a:hover { background: rgba(0,0,0,0.04); color: var(--text, #1a1a2e); }

/* Nav CTA button */
/* A button never wraps: nav items may stack their words, the CTA may not. */
.nav-cta { background: var(--accent, #2b6777); color: #fff !important; padding: 0.5rem 1.2rem; border-radius: 6px; font-weight: 600; font-size: 0.85rem; transition: opacity 0.2s; white-space: nowrap; }
.nav-cta:hover { opacity: 0.9; }

/* Hero location */
.hero-location { display: flex; align-items: center; gap: 0.4rem; color: var(--text-secondary, #4a5568); font-size: 1rem; margin-top: 0.25rem; }

/* Hero actions */
.hero-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent, #2b6777); color: #fff; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: opacity 0.2s; border: none; cursor: pointer; }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--border, #e2e6ea); color: var(--text, #1a1a2e); padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: border-color 0.2s; background: transparent; cursor: pointer; }
.btn-outline:hover { border-color: var(--accent, #2b6777); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.85rem; }

/* Services grid (conditions & procedures) */
.services-section { padding: var(--section-padding); }
.services-alt { background: var(--bg-alt, #fff); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.service-card { display: block; padding: 1.5rem; background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e6ea); border-radius: var(--radius, 12px); text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.service-card:hover { border-color: var(--accent, #2b6777); box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); }
.service-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--text, #1a1a2e); }
/* The card's photograph sits in a fixed 4:3 window whatever its shape, so a
   portrait feature image cannot stretch its card past the others. */
.service-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius, 12px) - 2px);
  margin-bottom: 1rem;
}
.service-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card p { font-size: 0.9rem; color: var(--text-secondary, #4a5568); line-height: 1.6; margin-bottom: 0.75rem; max-width: none; }
.service-card .read-more { font-size: 0.85rem; font-weight: 600; color: var(--accent, #2b6777); }

/* Breadcrumbs */
.breadcrumbs { margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-muted, #718096); }
.breadcrumbs a { color: var(--accent, #2b6777); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 0.4rem; }
.breadcrumb-current { color: var(--text, #1a1a2e); }

/* Content page layout (sidebar) */
.content-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; }
/* Sidebar pages need the full site width: .article's 800px single-column
   measure is right for blog posts, but here it left the text column ~450px
   once the 300px sidebar and gap were taken out. */
.content-page .container { max-width: var(--max-width); }
.content-main { min-width: 0; }
.content-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e6ea); border-radius: var(--radius, 12px); padding: 1.5rem; }
.sidebar-card h4 { font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--text, #1a1a2e); }
.sidebar-nav { list-style: none; }
.sidebar-nav li { border-bottom: 1px solid var(--border-light, #eef0f2); }
.sidebar-nav li:last-child { border-bottom: none; }
.sidebar-nav a { display: block; padding: 0.6rem 0; font-size: 0.9rem; color: var(--text-secondary, #4a5568); text-decoration: none; transition: color 0.15s; }
.sidebar-nav a:hover { color: var(--accent, #2b6777); }
.sidebar-contact p { font-size: 0.9rem; color: var(--text-secondary, #4a5568); margin-bottom: 0.5rem; }
.sidebar-contact a { color: var(--accent, #2b6777); text-decoration: none; }

/* Content CTA */
.content-cta { margin-top: 3rem; padding: 2rem; background: var(--accent-dim, rgba(43,103,119,0.08)); border-radius: var(--radius, 12px); }
.content-cta h3 { margin-bottom: 0.5rem; }
.content-cta p { color: var(--text-secondary, #4a5568); margin-bottom: 1rem; max-width: none; }
.cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* CTA section */
.cta-section { padding: var(--section-padding); background: var(--accent, #2b6777); color: #fff; text-align: center; }
.cta-content h2 { color: #fff; margin-bottom: 0.75rem; }
.cta-content p { color: rgba(255,255,255,0.85); max-width: 600px; margin: 0 auto 1.5rem; }
.cta-section .btn-primary { background: #fff; color: var(--accent, #2b6777); }
.cta-section .btn-outline { border-color: rgba(255,255,255,0.4); color: #fff; }
.cta-section .btn-outline:hover { border-color: #fff; }

/* Contact page */
.contact-section { padding: var(--section-padding); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-details { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e6ea); border-radius: var(--radius, 12px); padding: 1.5rem; }
.contact-card h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; margin-bottom: 0.75rem; color: var(--text, #1a1a2e); }
.contact-card h3 svg { color: var(--accent, #2b6777); }
.contact-card p { font-size: 0.9rem; color: var(--text-secondary, #4a5568); line-height: 1.6; margin-bottom: 0.25rem; max-width: none; }
.contact-card a { color: var(--accent, #2b6777); text-decoration: none; }

/* About page */
.about-content { padding: var(--section-padding); }
.about-layout { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
.about-photo img { border-radius: var(--radius, 12px); width: 100%; }
.about-text p { margin-bottom: 1rem; color: var(--text-secondary, #4a5568); max-width: none; }

/* Hub listing */
.hub-listing { padding: var(--section-padding); padding-top: 0; }

/* Footer grid */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer-grid h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.4rem; }
.footer-grid li a { font-size: 0.9rem; opacity: 0.7; transition: opacity 0.2s; text-decoration: none; }
.footer-grid li a:hover { opacity: 1; }
.footer-credentials { font-size: 0.85rem; opacity: 0.6; margin-top: 0.25rem; }
/* opacity 0.6 over the calm theme's dark footer put the copyright line at
   roughly 2.6:1. The colour is already muted by the footer's own rule; the
   extra fade was doing nothing but making it unreadable. */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; opacity: 0.85; }
.footer-built a { color: inherit; text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
  .content-layout { grid-template-columns: 1fr; }
  .content-sidebar { order: -1; }
  .contact-layout { grid-template-columns: 1fr; }
  .about-layout { grid-template-columns: 1fr; }
  .about-photo { max-width: 250px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-video-actions { flex-direction: row; }  /* two short buttons fit side by side */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid li a { font-size: 1rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 1rem; background: transparent; }
}

/* ===== Multi-practitioner module: team, fees, enquiry form ===== */

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.team-card { display: block; padding: 1rem 1rem 1.25rem; background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e6ea); border-radius: var(--radius, 12px); text-decoration: none; color: inherit; text-align: left; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.team-card:hover { border-color: var(--accent, #2b6777); box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); }
/* Portraits are 2:3 and are displayed at that ratio, so nothing is cropped.
   A circular or square frame cuts roughly a third off a portrait photo and
   takes the top of the head with it. */
.team-card-photo { width: 100%; aspect-ratio: 2 / 3; margin: 0 0 1rem; border-radius: calc(var(--radius, 12px) - 2px); overflow: hidden; background: var(--accent-dim, rgba(0,0,0,0.05)); display: flex; align-items: center; justify-content: center; }
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-card-initials { font-size: 2.5rem; font-weight: 600; color: var(--accent, #2b6777); }
.team-card h3 { font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--text, #1a1a2e); }
.team-card-credentials { font-size: 0.8rem; color: var(--text-muted, #718096); margin-bottom: 0.25rem; }
.team-card-role { font-size: 0.9rem; color: var(--accent, #2b6777); font-weight: 600; margin-bottom: 0.75rem; }
.team-card-tags { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.team-card-tags li { font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--accent-dim, rgba(0,0,0,0.05)); color: var(--text-secondary, #4a5568); }
.team-grid-support { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.team-card-support .team-card-photo { width: 100%; aspect-ratio: 2 / 3; }
.team-group-heading,
.team-support-heading { margin: 3rem 0 1.25rem; font-size: 1.3rem; }
/* A named section (config.team.groups) is a heading over a centred subtitle
   over a centred grid, so it centres too. Without this the heading hangs off
   the left of its own section. */
.hub-listing .team-group-heading { text-align: center; margin: 3.25rem 0 0.4rem; font-size: 1.45rem; }

.profile-section { padding: 3rem 0 4rem; }
.profile-layout { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
.profile-photo { width: 100%; border-radius: var(--radius, 12px); display: block; margin-bottom: 1.5rem; object-fit: cover; object-position: center top; aspect-ratio: 2 / 3; }
.profile-credentials { font-size: 0.95rem; color: var(--text-muted, #718096); margin-top: 0.25rem; }
.profile-block { margin-bottom: 1.5rem; }
.profile-block h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #718096); margin-bottom: 0.5rem; }
.profile-specialties { list-style: none; padding: 0; margin: 0; }
.profile-specialties li { padding: 0.35rem 0; border-bottom: 1px solid var(--border-light, #eef0f2); font-size: 0.9rem; }
.profile-specialties li:last-child { border-bottom: none; }
.profile-book { display: block; width: 100%; text-align: center; margin-bottom: 0.6rem; }
.profile-body { max-width: var(--content-width, 720px); }
.profile-body h2 { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
.profile-body h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.profile-body p { margin-bottom: 1rem; line-height: 1.75; }
.profile-body ul, .profile-body ol { margin: 0 0 1rem 1.25rem; }
.profile-body li { margin-bottom: 0.4rem; line-height: 1.7; }
.profile-others { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--border, #e2e6ea); }
.profile-others h2 { font-size: 1.3rem; margin-bottom: 1.25rem; }

.fees-section { padding: 3rem 0 4rem; }
.fees-group { margin-bottom: 2.5rem; }
.fees-group h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.fees-table { width: 100%; border-collapse: collapse; background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e6ea); border-radius: var(--radius, 12px); overflow: hidden; }
.fees-table th, .fees-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--border-light, #eef0f2); font-size: 0.95rem; }
.fees-table thead th { background: var(--accent-dim, rgba(0,0,0,0.04)); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #4a5568); }
.fees-table tbody th { font-weight: 500; }
.fees-table tbody tr:last-child th, .fees-table tbody tr:last-child td { border-bottom: none; }
.fees-table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fees-table thead th:last-child { text-align: right; }
.fees-note { display: block; font-size: 0.8rem; color: var(--text-muted, #718096); font-weight: 400; margin-top: 0.15rem; }
.fees-copy { max-width: 46rem; }
.fees-intro { margin-bottom: 2.5rem; }
.fees-outro { margin-top: 3rem; }
.fees-footnote { margin-top: 2rem; font-size: 0.875rem; color: var(--text-muted, #718096); }
.fees-footnote p { margin-bottom: 0.4rem; }

.contact-form-card .form-group { margin-bottom: 1rem; }
.contact-form-card label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-secondary, #4a5568); }
.contact-form-card input, .contact-form-card textarea { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--border, #e2e6ea); border-radius: 8px; font-family: inherit; font-size: 0.95rem; background: var(--bg-alt, #fff); color: var(--text, #1a1a2e); }
.contact-form-card input:focus, .contact-form-card textarea:focus { outline: 2px solid var(--accent, #2b6777); outline-offset: 1px; border-color: transparent; }
.contact-form-card textarea { resize: vertical; }
.form-privacy { font-size: 0.8rem; color: var(--text-muted, #718096); margin-bottom: 1rem; line-height: 1.5; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 0.85rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.btn-secondary { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--border, #e2e6ea); background: var(--bg-alt, #fff); color: var(--text, #1a1a2e); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.btn-secondary:hover { border-color: var(--accent, #2b6777); color: var(--accent, #2b6777); }
.enquiry-confirmation { max-width: var(--content-width, 720px); }
.enquiry-confirmation p { margin-bottom: 1rem; line-height: 1.75; }
.enquiry-urgent { padding: 1rem; border-radius: 8px; background: var(--accent-dim, rgba(0,0,0,0.05)); font-size: 0.9rem; }

@media (max-width: 860px) {
  .profile-layout { grid-template-columns: 1fr; gap: 2rem; }
  .profile-photo { max-width: 260px; }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-grid-support { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .fees-table th, .fees-table td { padding: 0.7rem 0.6rem; font-size: 0.88rem; }
}

/* ===== Brand logo in nav and footer ===== */

.nav-logo-image { display: flex; align-items: center; padding: 0.35rem 0; }
.nav-logo-image img { height: var(--logo-height, 46px); width: auto; display: block; }
.footer-logo { height: var(--logo-height-footer, 52px); width: auto; display: block; margin-bottom: 0.85rem; }

/* ===== Display typeface =====
   Applied only when config.theme.displayFont is set, so sites without one are
   untouched. */

.display,
.hero-video-heading,
.section-display { font-family: var(--font-display, inherit); font-weight: 400; letter-spacing: 0; }

/* ===== Video hero ===== */

.hero-video {
  position: relative;
  height: var(--hero-height, 100svh);
  min-height: 420px;
  overflow: hidden;
  background: #efe9e3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-video-poster,
.hero-video-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video-media { z-index: 1; }
.hero-silk svg,
.hero-paint svg { width: 100%; height: 100%; display: block; }

/* ----- Drawn paint hero -----
   A still ground, unlike the silk. The client's own artwork put a white lotus
   on brushed paint and it held; on the pale silk the same lotus dissolved.
   The paint carries enough tone to be something to sit against, so the cream
   lobes can stay cream and the emblem keeps its edges. */
.has-paint .hero-breathe-ring {
  background:
    radial-gradient(60% 55% at 38% 34%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 100%),
    radial-gradient(55% 60% at 66% 70%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%);
}
.has-paint .hero-breathe-ring-2 {
  background:
    radial-gradient(58% 52% at 62% 38%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 100%),
    radial-gradient(52% 58% at 34% 66%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 100%);
}
/* Ink, not white: the hero copy sits on paint the colour of weak tea. */
.has-paint .hero-video-subline { color: var(--deep, #5C4033); text-shadow: none; }
.has-paint .hero-video-scroll { color: var(--deep, #5C4033); }
.has-paint .hero-video-actions .btn-outline { border-color: var(--deep, #5C4033); color: var(--deep, #5C4033); }
/* Over the light drawn silk, pure white cream vanishes; fold in a caramel
   lobe (inner) and a secondary-tinted one (outer) so the pour reads on the
   pale ground. */
.has-silk .hero-breathe-ring {
  background:
    radial-gradient(60% 55% at 38% 34%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 100%),
    radial-gradient(55% 60% at 66% 70%, rgba(196, 131, 92, 0.45), rgba(196, 131, 92, 0) 100%);
  background:
    radial-gradient(60% 55% at 38% 34%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 100%),
    radial-gradient(55% 60% at 66% 70%, color-mix(in srgb, var(--accent-light, #C4835C) 45%, transparent), transparent 100%);
}
.has-silk .hero-breathe-ring-2 {
  background:
    radial-gradient(58% 52% at 62% 38%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 100%),
    radial-gradient(52% 58% at 34% 66%, rgba(185, 194, 170, 0.4), rgba(185, 194, 170, 0) 100%);
  background:
    radial-gradient(58% 52% at 62% 38%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 100%),
    radial-gradient(52% 58% at 34% 66%, color-mix(in srgb, var(--secondary-light, #B9C2AA) 40%, transparent), transparent 100%);
}
.has-silk .hero-video-scroll { color: var(--deep, #5C4033); }
.hero-video-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(0, 0, 0, var(--hero-scrim, 0.15));
}
.hero-video-inner {
  position: relative; z-index: 3;
  width: 100%; padding: 0 1.5rem;
  text-align: center;
}
.hero-video-overlay {
  width: var(--overlay-width, 42%);
  max-width: 680px;
  min-width: 240px;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  animation: heroOverlayIn 1.6s ease forwards;
  animation-delay: var(--overlay-delay, 600ms);
}
@keyframes heroOverlayIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.hero-video-heading { color: #fff; font-size: clamp(2rem, 6vw, 4rem); margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.hero-video-tagline { color: #fff; font-size: clamp(0.95rem, 2vw, 1.2rem); margin-top: 0.75rem; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.hero-video-subline {
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6;
  max-width: 34rem; margin: 1.1rem auto 0;
  opacity: 0;
  animation: heroOverlayIn 1.2s ease forwards;
  animation-delay: var(--overlay-delay, 850ms);
}
.hero-video-actions {
  justify-content: center;
  opacity: 0;
  animation: heroOverlayIn 1.2s ease forwards;
  animation-delay: var(--overlay-delay, 1050ms);
}
.has-silk .hero-video-subline { color: var(--deep, #5C4033); text-shadow: none; }
.has-silk .hero-video-actions .btn-outline { border-color: var(--deep, #5C4033); color: var(--deep, #5C4033); }
@media (max-width: 640px) {
  /* On a phone the hero should hand over to the welcome section, not own
     the whole first screen. */
  .hero-video { height: min(var(--hero-height, 100svh), 86svh); }
}
.hero-video-scroll {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 4; color: #fff; opacity: 0.85;
  animation: heroBob 2.4s ease-in-out infinite;
}
.hero-video-scroll:hover { opacity: 1; }
@keyframes heroBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* Honour a reduced-motion preference: hold the poster, show the wordmark.
   The drawn silk stays visible — its SMIL animations are paused by script —
   because unlike the video it has no poster standing behind it. The drawn
   paint never moved in the first place. */
@media (prefers-reduced-motion: reduce) {
  .hero-video-media { display: none; }
  .hero-video-media.hero-silk,
  .hero-video-media.hero-paint { display: block; }
  .hero-video-overlay { opacity: 1; animation: none; }
  .hero-video-scroll { animation: none; }
}

/* ===== Practice homepage ===== */

.home-welcome { padding: 4.5rem 0 3.5rem; text-align: center; background: var(--bg-alt, #fff); }
.home-welcome h1 { font-size: clamp(2rem, 5vw, 3.1rem); color: var(--accent, #2b6777); margin-bottom: 1.5rem; }
.home-welcome p { max-width: 46rem; margin: 0 auto 1.1rem; line-height: 1.85; color: var(--text-secondary, #4a5568); }

.home-feature { background: var(--accent, #2b6777); color: #fff; padding: 3.5rem 0; text-align: center; }
.home-feature-emblem { width: 120px; height: auto; margin: 0 auto 1.5rem; display: block; }
.home-feature h2 { color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.15rem); margin-bottom: 1.5rem; max-width: 34rem; margin-left: auto; margin-right: auto; }
.home-feature-list { list-style: none; padding: 0; margin: 0 auto; max-width: 34rem; }
.home-feature-list li { padding: 0.4rem 0; font-size: 1rem; opacity: 0.95; }

.home-services { padding: 4.5rem 0; }
.home-services-intro {
  text-align: center; max-width: 38rem; margin: 0.75rem auto 2.25rem;
  color: var(--text-muted, #6a7580); line-height: 1.6;
}
.section-display { text-align: center; font-size: clamp(1.9rem, 4.5vw, 2.7rem); color: var(--accent, #2b6777); margin-bottom: 2.5rem; }
.home-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.home-service { display: block; text-decoration: none; color: inherit; text-align: center; }
.home-service-image { overflow: hidden; border-radius: var(--radius, 12px); aspect-ratio: 3 / 2; margin-bottom: 1rem; background: var(--accent-dim, rgba(0,0,0,0.05)); }
.home-service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.home-service:hover .home-service-image img { transform: scale(1.04); }
.home-service h3 { font-family: var(--font-display, inherit); font-weight: 400; font-size: 1.5rem; color: var(--accent, #2b6777); margin-bottom: 0.4rem; }
.home-service p { font-size: 0.92rem; color: var(--text-secondary, #4a5568); line-height: 1.6; max-width: 32rem; margin: 0 auto; }

.home-posts { padding: 0 0 5rem; }
.home-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.home-post {
  position: relative; display: flex; align-items: flex-end;
  min-height: 260px; padding: 1.5rem;
  border-radius: var(--radius, 12px); overflow: hidden;
  text-decoration: none; color: #fff;
  background: var(--accent, #2b6777);
}
.home-post.has-image::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--post-image); background-size: cover; background-position: center;
  transition: transform 0.5s ease;
}
.home-post.has-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.12) 100%);
}
.home-post:hover.has-image::before { transform: scale(1.05); }
.home-post-body { position: relative; z-index: 2; }
.home-post h3 {
  font-size: 1.05rem; line-height: 1.45; margin-bottom: 0.35rem; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home-post-meta { font-size: 0.8rem; opacity: 0.85; }
.home-posts-more { text-align: center; margin-top: 2rem; }
.home-posts-more a { color: var(--accent, #2b6777); font-weight: 600; text-decoration: none; }

@media (max-width: 640px) {
  .home-services-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-welcome { padding: 3rem 0 2.5rem; }
  .nav-logo-image img { height: var(--logo-height-mobile, 38px); }
}

/* Optional: apply the display face to all headings and the navigation, for
   sites whose existing identity does that. Opt-in via config.theme.displayEverywhere
   so it never surprises a site that only wants an accent face. */
body.display-everywhere h1,
body.display-everywhere h2,
body.display-everywhere h3,
body.display-everywhere h4,
body.display-everywhere .nav-links > li > a,
body.display-everywhere .page-header h1 { font-family: var(--font-display, inherit); font-weight: 400; }
body.display-everywhere .nav-links > li > a { font-size: 1.05rem; letter-spacing: 0.01em; }

/* ============================================================
   Calm theme
   ------------------------------------------------------------
   Opt-in via config.theme.calm. Built for a practice whose
   audience often arrives anxious: quieter colour, longer
   measure, slower motion, more air. Every rule here is scoped
   to body.calm so no other client site is affected.
   ============================================================ */

body.calm {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-primary);
  font-size: 17px;              /* the old site set 14px; too small to read at ease */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ----- Type scale -----
   Fraunces carries the headings. Its optical-size axis is set per level, so
   large type tightens and small type opens up, the way metal type did. */
body.calm h1, body.calm h2, body.calm h3, body.calm h4,
body.calm .display, body.calm .section-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
}
body.calm h1, body.calm .display { font-variation-settings: 'opsz' 96, 'SOFT' 30; }
body.calm h2 { font-variation-settings: 'opsz' 60, 'SOFT' 30; }
body.calm h3, body.calm h4 { font-variation-settings: 'opsz' 24, 'SOFT' 20; }

body.calm .section-display { color: var(--accent); font-weight: 400; }
body.calm .page-header h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
body.calm .page-subtitle { color: var(--text-muted); font-size: 1.05rem; max-width: 44rem; }

/* An eyebrow that says what kind of page this is, not a decorative flourish. */
body.calm .section-label {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* ----- Rhythm -----
   Generous and even. Anxious readers skim; white space is what makes a page
   feel survivable rather than dense. */
body.calm .page-header { padding: 172px 0 68px; background: var(--bg); }
body.calm .home-welcome { background: var(--bg); padding: 6rem 0 4.5rem; }
body.calm .home-welcome p {
  max-width: 38rem;             /* ~65 characters */
  font-size: 1.12rem;
  color: var(--text);
}
body.calm .home-services { padding: 5.5rem 0; background: var(--bg-alt-band, var(--bg)); }
body.calm .home-posts { padding: 5.5rem 0; }
/* The calm heading rule above out-specifies .home-post h3 and turns card
   titles ink-on-dark; white belongs on the photo cards. */
body.calm .home-post h3 { color: #fff; }

/* ----- Feature panel -----
   The secondary colour rather than the full-strength accent: it is a
   supporting statement, not a shout. */
body.calm .home-feature { background: var(--secondary); padding: 5rem 0; }
body.calm .home-feature h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
body.calm .home-feature-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1.02rem;
}
body.calm .home-feature-list li:last-child { border-bottom: none; }
body.calm .home-feature-emblem { width: 96px; opacity: 0.9; }

/* ----- Philosophy band -----
   The one place on the home page that speaks in the first person about what
   the practice believes. It carries the secondary colour, so it has to be
   dark enough for white text to pass AA — the client's own mock-up sat at
   2.95:1, which is why the token is deeper than the swatch she sent. */
.home-philosophy { background: var(--secondary); color: #fff; padding: 5.5rem 0; text-align: center; }
.home-philosophy h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 0; }
.home-philosophy-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
  margin: 0.6rem auto 0;
  max-width: 42rem;
}
.home-philosophy-intro {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.08rem;
  margin: 2.2rem auto 0;
  max-width: 38rem;
}
.home-philosophy-pillars {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.75rem 3rem;
}
.home-philosophy-pillar { flex: 0 1 15rem; }
.home-philosophy-emblem { width: 48px; height: 48px; opacity: 0.92; margin: 0 auto 1rem; display: block; }
.home-philosophy-pillar h3 {
  color: #fff;
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.home-philosophy-pillar p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}
.home-philosophy-closing {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
  margin: 3rem auto 0;
  max-width: 40rem;
}
/* body.calm .display sets the heading colour to the accent; on the band it
   has to be white, and needs the same specificity to win. */
body.calm .home-philosophy h2,
body.calm .home-philosophy .display { color: #fff; font-weight: 400; }
body.calm .home-philosophy-pillar h3 { color: #fff; }

/* ----- Service cards -----
   Photograph first, then the name. People recognise the room before they
   recognise the service. */
body.calm .home-service-image {
  border-radius: 2px;           /* almost square: soft palettes go saccharine with big radii */
  /* 4:3, not the 4:5 this started as. Cropping a 3:2 photograph into a
     portrait tile takes a third of the width out of the middle of it, which
     is how the person in the assessments photo ended up cut in half. */
  aspect-ratio: 4 / 3;
}
body.calm .home-service h3 {
  font-size: 1.35rem;
  color: var(--text);
  margin-top: 1rem;
}
body.calm .home-service p { color: var(--text-muted); font-size: 0.95rem; }
body.calm .home-service:hover h3 { color: var(--accent); }
/* Flex rather than grid so a wrapped last row centres itself: five services
   read as a composed 3+2, not a grid with a hole in the corner. */
body.calm .home-services-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2.5rem 2rem;
}
body.calm .home-services-grid .home-service { flex: 0 1 320px; }

/* ----- Buttons ----- */
body.calm .btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  padding: 0.9rem 1.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.3s ease;
}
body.calm .btn-primary:hover { background: var(--deep, var(--accent)); }
body.calm .btn-secondary { border-radius: 2px; border-color: var(--border); }
body.calm .nav-cta { border-radius: 2px; }

/* ----- Team ----- */
body.calm .team-card { border-radius: 2px; border-color: var(--border); background: var(--card-bg); }
body.calm .team-card-photo { border-radius: 2px; }
body.calm .team-card h3 { font-size: 1.2rem; }
body.calm .team-card-role { color: var(--accent); font-weight: 500; font-size: 0.9rem; }
body.calm .team-card-credentials { color: var(--text-muted); }
body.calm .team-group-heading,
body.calm .team-support-heading { color: var(--secondary); }

/* ----- Footer ----- */
body.calm .footer { background: var(--deep); color: rgba(255, 255, 255, 0.82); }
body.calm .footer h4 { color: #fff; font-family: var(--font-primary); font-size: 0.72rem; letter-spacing: 0.16em; }
body.calm .footer a { color: rgba(255, 255, 255, 0.82); }
body.calm .footer a:hover { color: #fff; }
body.calm .footer-logo { filter: brightness(0) invert(1); opacity: 0.92; }

/* ----- No italics -----
   A client instruction rather than a taste call: italics in a soft serif at
   body size are harder work than they look, and the two places the template
   used them (pull quotes, figure captions) are exactly where a reader who is
   skimming slows down. Weight and colour carry the same emphasis. */
body.calm .article-body blockquote,
body.calm .article-body figure figcaption { font-style: normal; }
body.calm .article-body blockquote { font-weight: 500; }

/* ----- Booking page (config.booking) -----
   The widget arrives in the practice's own frame: calm heading, phone
   alternative, then the embedded calendar in a quiet card. */
.book-page { padding-bottom: 4.5rem; }
.book-header { padding: 4.5rem 0 2rem; text-align: center; }
.book-header h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.book-intro { max-width: 38rem; margin: 1rem auto 0; color: var(--text-secondary, #4a5568); line-height: 1.7; }
.book-phone { margin-top: 0.75rem; font-size: 0.95rem; color: var(--text-muted, #6a7580); }
.book-phone a { color: var(--accent, #2b6777); font-weight: 600; text-decoration: none; }
.book-widget {
  max-width: 860px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border, #e2e6ea);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}
.book-widget iframe { display: block; width: 100%; height: 1150px; border: 0; }
.book-fallback { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted, #6a7580); }
.book-fallback a { color: var(--accent, #2b6777); }
@media (max-width: 640px) {
  .book-header { padding: 6rem 0 1.5rem; }  /* clear the fixed nav */
  .book-widget iframe { height: 1250px; }
}

body.calm .book-header h1 { color: var(--accent); font-weight: 400; }
body.calm .book-intro { color: var(--text-muted); }

/* Practitioner chooser (config.booking.chooser): the roster's cards, each
   leading to a calendar. Headings sit closer than on the roster, where they
   open a long section; here they label a row. */
.book-choose .hub-listing { padding-bottom: 0; }
.book-choose .hub-listing .team-group-heading { margin-top: 2.25rem; margin-bottom: 1.4rem; }
/* Smaller than the roster and centred: this page is for choosing, not for
   reading, and a section of one should not sit alone against the left edge. */
.book-choose .hub-listing .team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 1.25rem; }
.book-choose .hub-listing .team-card { flex: 0 1 200px; text-align: center; }
.book-choose .team-grid:first-child { margin-top: 1rem; }
.book-choose .team-card-role { font-size: 0.82rem; margin-bottom: 0.6rem; }
.book-choose .team-card .read-more { font-weight: 600; }
.book-choose .book-fallback { margin-top: 3rem; }
@media (max-width: 640px) {
  .book-choose .hub-listing .team-grid { gap: 1.25rem 0.75rem; }
  .book-choose .hub-listing .team-card { flex-basis: 150px; }
}

/* ----- Webinar returning visitor ----- */
.watch-return {
  margin: 2rem 0 0.5rem; padding: 0.9rem 1.15rem;
  background: var(--bg-alt-band, var(--bg-alt, #f6f8f9));
  border: 1px solid var(--border, #e2e6ea);
  border-radius: var(--radius, 12px);
  font-size: 0.95rem;
}
.watch-return p { margin: 0; }
.watch-return a { color: var(--accent, #2b6777); font-weight: 600; text-decoration: none; }
.watch-return a:hover { text-decoration: underline; }

/* ----- Gallery page (config.gallery) -----
   Full-width photo page: what the practice actually looks like inside.
   The grid is two-up with occasional full-width images (figure.wide);
   captions sit under the photo in the muted voice, never over it. */
.gallery-page { padding-bottom: 4.5rem; }
.gallery-header { padding: 4.5rem 0 1.5rem; text-align: center; }
.gallery-header h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.gallery-intro { max-width: 40rem; margin: 1rem auto 0; color: var(--text-secondary, #4a5568); font-size: 1.05rem; line-height: 1.7; }
.gallery-body h2 { text-align: center; margin: 3.25rem 0 0.25rem; font-size: 1.6rem; }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; }
/* Named sections (config.gallery.sections): a heading and an introduction
   above each group's grid, in the same voice as the page header. */
.gallery-section { margin: 0 0 4rem; }
.gallery-section h2 { text-align: center; margin: 3.25rem 0 0.25rem; font-size: 1.6rem; }
.gallery-section-intro {
  max-width: 70ch;
  margin: 0.85rem auto 0;
  text-align: center;
  color: var(--text-secondary, #4a5568);
  line-height: 1.7;
}
body.calm .gallery-section h2 { color: var(--secondary, var(--text)); }
.photo-grid figure { margin: 0; }
.photo-grid figure.wide { grid-column: 1 / -1; }
.photo-grid img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.04);
}
.photo-grid figure.wide img { aspect-ratio: 21 / 10; }
.photo-grid figure.tall img { aspect-ratio: 3 / 4; }
.photo-grid figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--text-muted, #6a7580); line-height: 1.5; }
.gallery-cta { margin: 3.5rem auto 0; text-align: center; max-width: 36rem; }
.gallery-cta p { color: var(--text-secondary, #4a5568); line-height: 1.7; margin-bottom: 1.25rem; }
@media (max-width: 640px) {
  .photo-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .photo-grid figure.wide img { aspect-ratio: 4 / 3; }
}

body.calm .gallery-header { padding: 5rem 0 1.5rem; }
body.calm .gallery-header h1 { color: var(--accent); font-weight: 400; }
body.calm .gallery-intro { color: var(--text-muted); }
body.calm .gallery-body h2 { color: var(--secondary, var(--text)); }

/* ----- Breathing lotus -----
   4 seconds in, 6 out. The longer exhale is the point: it is what actually
   settles the nervous system, and it is the practice's own technique. */
.hero-breathe {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Not rings but cream: two soft-edged lobes, heavily blurred, breathing on
   the same clock while turning far more slowly in opposite directions — the
   asymmetry folding over itself is what reads as poured cream, not geometry. */
.hero-breathe-ring {
  position: absolute;
  width: min(50vmin, 420px);
  aspect-ratio: 1;
  border-radius: 53% 47% 58% 42% / 44% 56% 41% 59%;
  background:
    radial-gradient(60% 55% at 38% 34%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 100%),
    radial-gradient(55% 60% at 66% 70%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
  filter: blur(18px);
  animation:
    breathe var(--breathe-cycle, 10s) cubic-bezier(0.4, 0, 0.3, 1) infinite,
    creamFold 43s linear infinite;
}
.hero-breathe-ring-2 {
  width: min(66vmin, 560px);
  border-radius: 44% 56% 47% 53% / 57% 43% 58% 42%;
  background:
    radial-gradient(58% 52% at 62% 38%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 100%),
    radial-gradient(52% 58% at 34% 66%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 100%);
  filter: blur(24px);
  animation:
    breathe var(--breathe-cycle, 10s) cubic-bezier(0.4, 0, 0.3, 1) infinite,
    creamFold 61s linear infinite reverse;
  animation-delay: 0.45s, 0s;
}
.hero-breathe-emblem {
  position: absolute;
  z-index: 1; /* the lotus rests on the cream, never under it */
  width: min(50vmin, 470px);
  fill: #fff;
  animation: breatheEmblem var(--breathe-cycle, 10s) cubic-bezier(0.4, 0, 0.3, 1) infinite;
}
@keyframes breathe {
  0%   { transform: scale(0.82); opacity: 0.28; }
  40%  { transform: scale(1);    opacity: 0.62; }   /* inhale, 4s of a 10s cycle */
  100% { transform: scale(0.82); opacity: 0.28; }   /* exhale, the slower 6s */
}
/* The slow turn that folds the cream. The `rotate` property composes with the
   scale in `breathe`, so both run on the one element. */
@keyframes creamFold {
  from { rotate: 0turn; }
  to   { rotate: 1turn; }
}
/* The emblem is solid ink rather than a hairline, so it moves less than the
   rings — a body breathing, not a wave expanding. */
@keyframes breatheEmblem {
  0%   { transform: scale(0.955); opacity: 0.82; }
  40%  { transform: scale(1);     opacity: 1; }
  100% { transform: scale(0.955); opacity: 0.82; }
}

/* Ambient motion is exactly what some visitors need switched off.
   The cream holds still as a soft halo; nothing turns, nothing swells. */
@media (prefers-reduced-motion: reduce) {
  .hero-breathe-ring { animation: none; opacity: 0.4; transform: scale(0.92); }
  .hero-breathe-emblem { animation: none; opacity: 0.95; }
}

/* ----- Focus -----
   Visible on every interactive element, in the accent rather than the
   browser default, so keyboard users get the same considered treatment. */
body.calm a:focus-visible,
body.calm button:focus-visible,
body.calm input:focus-visible,
body.calm textarea:focus-visible,
body.calm select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (max-width: 640px) {
  body.calm { font-size: 16px; }
  body.calm .page-header { padding: 128px 0 44px; }
  body.calm .home-welcome { padding: 3.5rem 0 3rem; }
  body.calm .home-services, body.calm .home-posts { padding: 3.5rem 0; }
}

/* ----- Arched roster (config.team.photoShape "arch") ----- */
/* Named sections centre their heading and subtitle, rows centre (including
   an incomplete last row), and each portrait sits in an arched window that
   echoes a curved hero. The arch is 3:4 rather than the roster's usual 2:3
   so the crop stays gentle on portrait photos; the 999px radii collapse to
   exactly half the frame width, giving a true semicircular top. Scoped with
   .hub-listing so these outrank the body.calm team overrides above. */
.hub-listing.team-arches .team-grid,
.hub-listing.team-arches .team-grid-support { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.25rem 1.75rem; }
.hub-listing.team-arches .team-card { flex: 0 1 230px; padding: 0; border: 0; background: transparent; text-align: center; }
.hub-listing.team-arches .team-card:hover { border: 0; box-shadow: none; }
.hub-listing.team-arches .team-card-photo { aspect-ratio: 3 / 4; border-radius: 999px 999px 6px 6px; transition: box-shadow 0.2s; }
.hub-listing.team-arches .team-card:hover .team-card-photo { box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
.hub-listing.team-arches .team-group-heading { text-align: center; color: var(--accent); font-size: 1.45rem; margin: 3.25rem 0 0.4rem; }
.team-group-subtitle { text-align: center; color: var(--text-muted, #718096); max-width: 44rem; margin: 0 auto 1.9rem; }
.hub-listing.team-arches .team-card h3 { margin: 0 0 0.15rem; }
.hub-listing.team-arches .team-card-role { font-weight: 500; color: var(--text-muted, #718096); margin-bottom: 0.4rem; }
.hub-listing.team-arches .read-more { font-size: 0.8rem; }
@media (max-width: 640px) {
  .hub-listing.team-arches .team-grid,
  .hub-listing.team-arches .team-grid-support { gap: 1.5rem 1rem; }
  .hub-listing.team-arches .team-card { flex-basis: 150px; }
}

/* ===== Expand/collapse panels (lib/accordions.js) =====
   Long service pages read better folded. <details> rather than a scripted
   accordion, so the body is in the served HTML: findable with the browser's
   own find-in-page, printable, and indexed. */
.accordion-group {
  margin: 2rem 0;
  border-top: 1px solid var(--border, #e2e6ea);
}
.accordion {
  border-bottom: 1px solid var(--border, #e2e6ea);
}
.accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  cursor: pointer;
  font-family: var(--font-display, inherit);
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--text);
  list-style: none;
  transition: color 0.2s ease;
}
.accordion-summary::-webkit-details-marker { display: none; }
.accordion-summary:hover { color: var(--accent); }
.accordion-chevron {
  flex: none;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.accordion[open] > .accordion-summary > .accordion-chevron { transform: rotate(180deg); }
.accordion-body { padding: 0 0.25rem 1.4rem; }
.accordion-body > :first-child { margin-top: 0; }
.accordion-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .accordion-chevron { transition: none; }
}

/* ===== Arched frame =====
   Used sparingly and on purpose: a practitioner's own photograph, and the one
   picture on a service page. It echoes the curve of the hero, which stops
   working the moment every image on the site is wearing it. */
.arch-frame {
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 6px 6px;
  background: var(--accent-dim, rgba(0, 0, 0, 0.05));
  aspect-ratio: 3 / 4;
}
.arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ===== Service page, feature layout (config.services.layout "feature") =====
   Text left, one photograph right, held while the reader scrolls. */
.content-layout-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 3.5rem;
  align-items: start;
}
.content-layout-feature .content-main { min-width: 0; }
.content-feature { position: sticky; top: 6.5rem; }
.arch-frame-feature { aspect-ratio: 3 / 4; }
/* A body image on a service page that opts in (config.services.archImages):
   floated beside its section's text in the same arched window. The figure is
   made at render time from a paragraph holding only an image, so the page
   editor round-trips plain markdown. Headings clear the float, keeping each
   photograph with the section it belongs to. */
.article-body .arch-frame-body {
  float: right;
  width: min(46%, 320px);
  margin: 0.35rem 0 1.5rem 1.75rem;
}
.article-body .arch-frame-body img { margin: 0; border-radius: 0; }
.article-body h2, .article-body h3 { clear: both; }
.content-cta { clear: both; }
@media (max-width: 700px) {
  .article-body .arch-frame-body { float: none; width: min(100%, 320px); margin: 0 auto 1.5rem; }
}
.content-feature-card {
  margin-top: 1.75rem;
  padding: 1.5rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e6ea);
  border-radius: var(--radius, 12px);
}
.content-feature-card h4 {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, #6a7580);
}
.content-feature-card p { margin: 0 0 0.75rem; font-size: 0.95rem; line-height: 1.6; }
.content-feature-card a[href^="tel:"] { color: var(--accent); font-weight: 600; text-decoration: none; }

.service-siblings { margin: 4rem 0 1rem; padding-top: 2.25rem; border-top: 1px solid var(--border, #e2e6ea); }
.service-siblings h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.service-siblings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; }
.service-siblings li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border, #e2e6ea);
  border-radius: var(--radius, 12px);
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.service-siblings li a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .content-layout-feature { grid-template-columns: 1fr; gap: 2.25rem; }
  /* On a phone the photograph belongs above the text, not orphaned below it. */
  .content-layout-feature .content-main { order: 2; }
  .content-feature { order: 1; position: static; max-width: 22rem; margin: 0 auto; }
}

/* ===== Team banner (config.team.banner) =====
   A landscape group photograph under the page title. Full width, generous,
   and cropped shorter on a phone so it does not push the roster off screen. */
.page-header-banner { padding-bottom: 2.25rem; }
.team-banner {
  max-width: 1360px;
  margin: 0 auto 1rem;
  padding: 0 1.5rem;
}
.team-banner img {
  width: 100%;
  height: clamp(220px, 34vw, 460px);
  object-fit: cover;
  object-position: center 28%;   /* faces, not the ceiling */
  display: block;
  border-radius: var(--radius, 12px);
}
body.calm .team-banner img { border-radius: 2px; }

/* ===== Practitioner profile, arched portrait =====
   config.team.profilePhotoShape "arch". The side alternates down the roster
   (routes/team.js), so clicking through profiles does not feel like the same
   page repeated. */
.profile-layout-arch { grid-template-columns: 340px minmax(0, 1fr); }
.profile-layout-arch .profile-photo-arch { aspect-ratio: 3 / 4; margin-bottom: 1.75rem; }
.profile-layout-arch.profile-photo-right { grid-template-columns: minmax(0, 1fr) 340px; }
.profile-layout-arch.profile-photo-right .profile-aside { order: 2; }
.profile-layout-arch.profile-photo-right .profile-body { order: 1; }
@media (max-width: 900px) {
  /* One column on a phone, and the photograph leads whichever side it was on. */
  .profile-layout-arch,
  .profile-layout-arch.profile-photo-right { grid-template-columns: 1fr; }
  .profile-layout-arch.profile-photo-right .profile-aside { order: 0; }
  .profile-layout-arch.profile-photo-right .profile-body { order: 1; }
}

/* ===== Hero lock-up (hero.lockup) =====
   The wordmark rides with the emblem instead of sitting in the flow above the
   subline, because in the practice's own artwork they are a single mark: the
   script crosses the lotus at its centre. Composing them in the flow put the
   subline and the buttons over the lower petals.

   The wordmark does not breathe with the lotus. It is type, and type that
   pulses is type that is hard to read. */
.hero-breathe-wordmark {
  position: absolute;
  z-index: 2;                              /* over the lotus, as in the artwork */
  width: calc(min(50vmin, 470px) * var(--lockup-scale, 1.355));
  height: auto;
  opacity: 0;
  animation: heroOverlayIn 1.6s ease forwards;
  animation-delay: var(--overlay-delay, 600ms);
}
/* With the mark centred, the sentence and the buttons belong under it. */
.hero-video-inner-lockup {
  align-self: flex-end;
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
}
.has-paint .hero-breathe { transform: translateY(-9%); }
@media (max-width: 700px) {
  .hero-video-inner-lockup { padding-bottom: 2.5rem; }
  .has-paint .hero-breathe { transform: translateY(-13%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-breathe-wordmark { opacity: 1; animation: none; }
}

/* ===== Photographic hero (hero.image) =====
   Shares the paint mode's treatment: a mid-tone ground means ink copy, not
   white, and the cream lobes behind the emblem stay cream. */
.hero-image { object-fit: cover; object-position: center; }
.has-image .hero-breathe-ring {
  background:
    radial-gradient(60% 55% at 38% 34%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 100%),
    radial-gradient(55% 60% at 66% 70%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%);
}
.has-image .hero-breathe-ring-2 {
  background:
    radial-gradient(58% 52% at 62% 38%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 100%),
    radial-gradient(52% 58% at 34% 66%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 100%);
}
.has-image .hero-video-subline { color: var(--deep, #5C4033); text-shadow: none; }
.has-image .hero-video-scroll { color: var(--deep, #5C4033); }
.has-image .hero-video-actions .btn-outline { border-color: var(--deep, #5C4033); color: var(--deep, #5C4033); }
.has-image .hero-breathe { transform: translateY(-9%); }
@media (max-width: 700px) {
  .has-image .hero-breathe { transform: translateY(-13%); }
}
/* A photograph is not motion; it stays put under reduced-motion like the paint. */
@media (prefers-reduced-motion: reduce) {
  .hero-video-media.hero-image { display: block; }
}

/* ===== Torn bottom edge (hero.tornEdge) =====
   The hero photograph is a sheet of paper, and the page below shows through
   where it tears. From the client's own mock-up. It sits above the media and
   below the copy, so the call to action lands on the torn strip rather than
   on the photograph — which is where she drew it. */
.hero-video { --torn-height: clamp(112px, 16vh, 190px); }
/* `section { padding: var(--section-padding) }` gives every section 100px top
   and bottom, the hero included. Harmless until the copy has to land inside a
   torn strip measured from the true bottom edge. */
.hero-video.has-torn { padding-bottom: 0; }
.hero-torn {
  position: absolute;
  left: 0; right: 0; bottom: -1px;    /* -1px: no hairline of photo under it */
  height: var(--torn-height);
  z-index: 2;
  pointer-events: none;
}
.hero-torn svg { width: 100%; height: 100%; display: block; }
/* With a tear at the foot, the copy stops above it and the buttons sit in it. */
.hero-video.has-torn .hero-video-inner-lockup {
  padding-bottom: calc(var(--torn-height) * 0.07);
}
/* Enough clear air that the sentence stays on the photograph and the buttons
   land below the tear, both proportional to the strip so they hold together
   as it scales. */
.has-torn .hero-video-actions { margin-top: calc(var(--torn-height) * 0.34); }
.has-torn .hero-video-scroll { display: none; }   /* the tear is the cue now */

/* On a phone the two buttons stack, and a strip deep enough to hold both
   would be most of the screen. The tear becomes decoration at the very foot
   and the copy sits above it, which is the same composition read vertically. */
@media (max-width: 700px) {
  .hero-video { --torn-height: clamp(52px, 7vh, 80px); }
  .hero-video.has-torn { padding-bottom: calc(var(--torn-height) + 0.5rem); }
  .hero-video.has-torn .hero-video-inner-lockup { padding-bottom: 0; }
  .has-torn .hero-video-actions { margin-top: 1.75rem; }
}

/* ===== Curved foot (hero.footCurve) =====
   The page background crosses the hero's lower edge in a single clean arc —
   the quiet sibling of the torn edge, and the curve the arched frames
   elsewhere echo. Copy and buttons stay up on the photograph. */
.hero-video { --foot-curve-height: clamp(56px, 9vh, 110px); }
.hero-video.has-foot-curve { padding-bottom: 0; }
.hero-foot-curve {
  position: absolute;
  left: 0; right: 0; bottom: -1px;    /* -1px: no hairline of photo under it */
  height: var(--foot-curve-height);
  z-index: 2;
  pointer-events: none;
}
.hero-foot-curve svg { width: 100%; height: 100%; display: block; }
/* Clear air below the buttons so they sit on the photograph, not the curve. */
.hero-video.has-foot-curve .hero-video-inner-lockup {
  padding-bottom: calc(var(--foot-curve-height) * 0.7);
}
/* The chevron would land half on the curve; the curve is the cue now. */
.has-foot-curve .hero-video-scroll { display: none; }
@media (max-width: 700px) {
  .hero-video { --foot-curve-height: clamp(32px, 5.5vh, 56px); }
}

/* ===== Wellness Hub (config.webinars.hub) =====
   The site's webinars and the practice's YouTube playlists on one page. Each
   playlist is a 16:9 embed held to the reading width; the surrounding copy
   shares the article measure so the page reads as one piece. */
.hub-intro { max-width: 46rem; margin: 0 0 2.5rem; }
.hub-section { margin-top: 3rem; }
.hub-section > h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.hub-section-blurb { color: var(--text-secondary, #4a5568); margin-bottom: 1.25rem; max-width: 46rem; }
.video-embed { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: var(--accent-dim, rgba(0, 0, 0, 0.05)); border-radius: var(--radius, 12px); overflow: hidden; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-embed-link { margin-top: 0.75rem; font-size: 0.92rem; }
.hub-channel { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border, #e2e6ea); }