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

  :root {
    --cream: #F8F3EC;
    --cream-deep: #EFE8DF;
    --linen: #E8D8C8;
    --taupe: #C49A8A;
    --taupe-dark: #A0806E;
    --sage: #8FAF8A;
    --sage-light: #D4E6D2;
    --sage-deep: #5A7F55;
    --clay: #C4735A;
    --clay-light: #E8C4B0;
    --charcoal: #6B4C3B;
    --stone: #6B4C3B;
    --mist: #A0806E;
    --white: #FFFFFF;
    --meadow: #F8E882;
    --sand: #E8D8C8;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', sans-serif;
    --font-serif: var(--font-display);
    --font-sans: var(--font-body);
    --content-max: 1300px;
    --content-pad: 40px;
    --section-gap: 6.25rem; /* 100px — generous vertical breathing room between sections */
    --card-padding: 3rem 2.5rem; /* 48px 40px — uniform content-card padding */
  }

  html, body { overflow-x: hidden; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--header-height, 112px); }

  body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--charcoal);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  /* NAV */
  /* --header-height is set by JS (sizeHeader) to the real combined height of
     the banner + nav, so nav always sits flush against the bottom of the
     banner — including when the banner text wraps onto two lines on small
     screens. The 112px fallback covers the pre-JS instant. */
  .header-sticky-wrapper {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  }
  nav {
    position: relative; left: 0; right: 0; z-index: 100;
    background: rgba(248, 243, 236, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linen);
    padding: 0 max(var(--content-pad), calc((100% - var(--content-max)) / 2));
    height: 80px;
    display: flex; align-items: center; justify-content: space-between;
    transition: margin-top 0.2s ease;
  }
  .nav-logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 0.2rem;
    white-space: nowrap;
  }
  .nav-logo-bespoke {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--charcoal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .nav-logo-sub {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--stone);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  /* gap reduced from 2.5rem to fit 7 nav items (added when Core/Specialty
     Services split into two links) without truncating any label or
     wrapping the nav onto a second line on standard laptop widths */
  .nav-links { display: flex; gap: 1.6rem; list-style: none; }
  .nav-links a { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; color: var(--stone); text-decoration: none; transition: color 0.2s; position: relative; padding-bottom: 0.3rem; white-space: nowrap; }
  .nav-links a:hover { color: var(--clay); }
  .nav-links a.active { color: var(--charcoal); font-weight: 500; }
  .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.55rem; height: 2px; background: var(--clay); }
  .nav-cta {
    background: var(--sage);
    color: var(--white);
    padding: 0.6rem 1.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 400;
    transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--clay); }

  /* HERO */
  /* padding-top is set inline via var(--header-height), which JS keeps in
     sync with the real banner+nav height — see sizeHeader() */
  .hero {
    /* height (not just min-height) caps the row — otherwise the photo's
       own tall intrinsic aspect ratio (portrait, ~0.67 w/h) drives the grid
       row taller than intended, since height:100% on the image lets it
       dictate the row size rather than being cropped by object-fit: cover
       to whatever height the section actually is. */
    height: 85vh;
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-left {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8% 6% 8% 8%;
  }
  .hero-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 400;
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.8rem;
  }
  .hero-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--clay); }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 4.8rem);
    font-weight: 300;
    line-height: 1.08;
    color: var(--charcoal);
    margin-bottom: 1.8rem;
    letter-spacing: -0.01em;
  }
  .hero-title em { font-style: italic; color: var(--clay); }
  .hero-desc {
    font-size: 1rem;
    color: var(--stone);
    max-width: 440px;
    line-height: 1.8;
    margin-bottom: 2.8rem;
    font-weight: 300;
  }
  .hero-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
  .btn-primary {
    background: var(--clay);
    color: var(--white);
    padding: 0.9rem 2.2rem;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 400;
    transition: background 0.25s;
    display: inline-block;
  }
  .btn-primary:hover { background: var(--charcoal); }
  .btn-ghost {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone);
    text-decoration: none;
    font-weight: 400;
    border-bottom: 1px solid var(--taupe);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
  }
  .btn-ghost:hover { color: var(--clay); border-color: var(--clay); }
  .hero-right {
    background: var(--linen);
    position: relative;
    overflow: hidden;
  }
  .hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
  .hero-image-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--linen) 0%, var(--cream-deep) 40%, var(--clay-light) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem;
  }
  .hero-badge {
    position: absolute;
    bottom: 2.5rem; left: -1.5rem;
    background: var(--white);
    border: 1px solid var(--linen);
    padding: 1.2rem 1.6rem;
    max-width: 220px;
    box-shadow: 0 8px 32px rgba(44,40,37,0.08);
  }
  .hero-badge .badge-num { font-family: var(--font-display); font-size: 2.4rem; color: var(--charcoal); font-weight: 300; line-height: 1; }
  .hero-badge .badge-text { font-size: 0.75rem; color: var(--mist); letter-spacing: 0.06em; margin-top: 0.3rem; }

  .hero-illustration {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
  }

  /* STATS BAR */
  .stats-bar {
    background: #6B4C3B;
    padding: 2.5rem max(var(--content-pad), calc((100% - var(--content-max)) / 2));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  .stat { text-align: center; }
  .stat-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--cream); font-weight: 300; letter-spacing: -0.01em; }
  .stat-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); margin-top: 0.3rem; }

  /* SECTION COMMON */
  /* Horizontal padding is calculated so content never exceeds --content-max
     (1300px) on wide screens — keeping paragraph line-length in the
     readable 50-75 character range — while never going below
     --content-pad (40px) as a safety margin on any screen size.
     This achieves the same effect as a max-width wrapper div, without
     having to touch every section's inner markup. */
  section { padding: var(--section-gap, 7rem) max(var(--content-pad), calc((100% - var(--content-max)) / 2)); }
  /* On pages without a hero (which sets its own inline offset), the first
     section needs this same top clearance so content doesn't start tucked
     under the fixed header-sticky-wrapper. Declared AFTER the section rule
     above on purpose: section's shorthand `padding` sets all four sides,
     so a `padding-top` override before it gets silently overwritten. */
  /* calc() adds real breathing room on top of the exact header height —
     padding-top: var(--header-height) alone puts content flush against
     the header with zero visual gap, which is what was happening before. */
  .page-top-spacer { padding-top: calc(var(--header-height, 112px) + 3.5rem); }
  .section-eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); font-weight: 400; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.8rem; }
  .section-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--clay); }
  .section-title { font-family: var(--font-display); font-size: clamp(2.2rem, 3.5vw, 3.4rem); font-weight: 300; line-height: 1.15; color: var(--charcoal); margin-bottom: 1.2rem; }
  .section-title em { font-style: italic; color: var(--clay); }
  .section-body { font-size: 1rem; color: var(--stone); max-width: 580px; line-height: 1.85; font-weight: 300; }

  /* HOW DPC WORKS */
  .dpc-section { background: var(--cream); }
  /* align-items: start (not center) — center was fine when the left column
     had several stacked steps making it roughly as tall as the visual card,
     but with shorter text content the visual card would float upward,
     sitting too close to the header. */
  .dpc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
  .dpc-steps { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 3rem; }
  .dpc-step { display: flex; gap: 1.5rem; align-items: flex-start; }
  .step-num { font-family: var(--font-display); font-size: 3rem; color: var(--linen); font-weight: 300; line-height: 1; min-width: 2.2rem; margin-top: -0.3rem; }
  .step-content h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--charcoal); margin-bottom: 0.4rem; }
  .step-content p { font-size: 0.9rem; color: var(--mist); line-height: 1.75; font-weight: 300; }
  .dpc-visual {
    background: var(--cream-deep);
    border: 1px solid var(--linen);
    padding: var(--card-padding);
    position: relative;
  }
  .comparison-table { width: 100%; border-collapse: collapse; }
  /* Wraps comparison-table and price-table so that on narrow screens the
     table can be swiped horizontally in its own scroll container, instead
     of either squashing its columns unreadably or forcing the whole page
     to overflow/zoom out. The rest of the page stays put. */
  .table-mobile-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-mobile-responsive table { min-width: 480px; }
  .comparison-table th { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); padding: 0 1rem 1rem; text-align: left; }
  .comparison-table th:last-child { color: var(--clay); }
  .comparison-table td { padding: 0.85rem 1rem; font-size: 0.88rem; border-top: 1px solid var(--linen); color: var(--stone); font-weight: 300; }
  .comparison-table tr td:first-child { color: var(--charcoal); }
  .comparison-table td.check { color: var(--sage-deep); font-size: 1rem; }
  .comparison-table td.cross { color: var(--taupe); font-size: 1rem; }
  .comparison-table td.highlight { color: var(--clay); font-weight: 500; }

  /* PRICING */
  .pricing-section { background: var(--cream-deep); }
  .pricing-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 4rem; align-items: end; }
  .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .pricing-card {
    background: var(--white);
    border: 1px solid var(--linen);
    padding: var(--card-padding);
    position: relative;
    transition: border-color 0.25s, transform 0.25s;
  }
  .pricing-card:hover { border-color: var(--taupe); transform: translateY(-4px); }
  .pricing-card.featured { border-color: var(--clay); background: var(--charcoal); color: var(--cream); }
  .pricing-card.featured:hover { transform: translateY(-4px); }
  .featured-label { position: absolute; top: -1px; right: 1.5rem; background: var(--clay); color: var(--white); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.9rem; }
  .card-banner { position: relative; z-index: 1; margin: 0.9rem 0 1.6rem; text-align: left; }
  .card-banner span { position: relative; display: inline-block; max-width: calc(100% + 2.5rem); margin-left: -2.5rem; background: linear-gradient(180deg, #cb7c63 0%, var(--clay) 100%); color: #fff; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; line-height: 1.4; padding: 0.6rem 1.8rem 0.6rem 2.5rem; clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 50%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); filter: drop-shadow(0 3px 6px rgba(107,76,59,0.20)); }
  .card-banner-note { font-size: 0.72rem; color: var(--mist); font-style: italic; font-weight: 300; margin: -0.7rem 0 1.4rem; }
  .plan-name { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); margin-bottom: 1.2rem; }
  .pricing-card.featured .plan-name { color: var(--taupe); }
  .plan-price { font-family: var(--font-display); font-size: 3rem; font-weight: 300; color: var(--charcoal); line-height: 1; }
  .pricing-card.featured .plan-price { color: var(--cream); }
  .plan-price sup { font-size: 1.3rem; vertical-align: super; }
  .plan-period { font-size: 0.8rem; color: var(--mist); margin-top: 0.4rem; margin-bottom: 1.5rem; font-weight: 300; }
  .pricing-card.featured .plan-period { color: var(--taupe); }
  .plan-divider { height: 1px; background: var(--linen); margin-bottom: 1.5rem; }
  .pricing-card.featured .plan-divider { background: rgba(255,255,255,0.12); }
  .plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
  .plan-features li { font-size: 0.88rem; color: var(--stone); display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 300; }
  .pricing-card.featured .plan-features li { color: rgba(250,247,242,0.8); }
  .plan-features li::before { content: '✓'; color: var(--sage-deep); font-size: 0.8rem; margin-top: 0.18rem; flex-shrink: 0; }
  .pricing-card.featured .plan-features li::before { color: var(--clay-light); }
  .plan-cta {
    display: block; width: 100%; text-align: center;
    padding: 0.85rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none; font-family: var(--font-body); font-weight: 400;
    background: transparent; border: 1px solid var(--charcoal); color: var(--charcoal);
    cursor: pointer; transition: background 0.2s, color 0.2s;
  }
  .plan-cta:hover { background: var(--charcoal); color: var(--cream); }
  .pricing-card.featured .plan-cta { border-color: var(--cream); color: var(--cream); }
  .pricing-card.featured .plan-cta:hover { background: var(--cream); color: var(--charcoal); }
  .pricing-note { margin-top: 1.5rem; font-size: 0.82rem; color: var(--mist); text-align: center; font-style: italic; }

  /* SERVICES */
  .services-section { background: var(--cream); }
  .services-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3.5rem; flex-wrap: wrap; gap: 2rem; }
  /* SERVICES SECTION BACKGROUND PHOTO */
  .services-section { position: relative; }
  .services-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('Oliver_flower.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, rgba(0,0,0,0.6) 72%, transparent 90%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, rgba(0,0,0,0.6) 72%, transparent 90%);
    pointer-events: none;
    z-index: 0;
  }
  .services-section > * { position: relative; z-index: 1; }
  @media (max-width: 900px) {
    .services-section::before { display: none; }
  }
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linen); }
  .service-item {
    background: var(--cream);
    padding: 2.2rem 2rem;
    transition: background 0.2s;
  }
  .service-item:hover { background: var(--cream-deep); }
  .service-icon { font-size: 1.4rem; margin-bottom: 1rem; }
  .service-item h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--charcoal); margin-bottom: 0.5rem; }
  .service-item p { font-size: 0.85rem; color: var(--mist); line-height: 1.7; font-weight: 300; }

  /* SERVICES MASTER-DETAIL */
  .svc-tabs { display: grid; grid-template-columns: 4fr 6fr; gap: 0; align-items: start; }
  .svc-list { display: flex; flex-direction: column; padding-right: 2.5rem; }
  .svc-tab {
    text-align: left; background: none; border: none; cursor: pointer;
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 400;
    color: var(--mist); line-height: 1.3;
    padding: 0.62rem 0 0.62rem 1.1rem;
    border-left: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }
  .svc-tab:hover { color: var(--clay); }
  .svc-tab.active { color: var(--charcoal); border-left-color: var(--clay); font-weight: 500; }
  .svc-panel { border-left: 1px solid var(--linen); padding-left: 3rem; min-height: 210px; }
  .svc-pane { display: none; }
  .svc-pane.active { display: block; animation: svcFade 0.38s ease both; }
  .svc-pane h3 { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--charcoal); line-height: 1.15; margin-bottom: 1.1rem; }
  .svc-pane p { font-size: 0.98rem; color: var(--stone); line-height: 1.85; font-weight: 300; max-width: 560px; }
  @keyframes svcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  /* AUXILIARY / A LA CARTE SERVICES */
  .aux-section { background: var(--cream-deep); }
  .aux-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .aux-card { background: var(--cream); border: 1px solid var(--linen); padding: var(--card-padding); }
  .aux-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; }
  .aux-card h4 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--charcoal); line-height: 1.18; }
  .aux-fee { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); border: 1px solid var(--clay-light); padding: 0.32rem 0.7rem; white-space: nowrap; flex-shrink: 0; }
  .aux-card > p { font-size: 0.92rem; color: var(--mist); line-height: 1.75; font-weight: 300; }
  .aux-list { margin: 0.85rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
  .aux-list li { font-size: 0.9rem; color: var(--stone); font-weight: 300; line-height: 1.55; padding-left: 1.15rem; position: relative; }
  .aux-list li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }
  /* Same visual treatment as .aux-list, reused for the service tab panes so
     each one lists exactly what's included instead of leaving it implied
     in the paragraph above. */
  .svc-list-items { margin: 1.1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
  .svc-list-items li { font-size: 0.9rem; color: var(--stone); font-weight: 300; line-height: 1.55; padding-left: 1.15rem; position: relative; }
  .svc-list-items li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }

  /* PLAN DETAILS STRIP — fixed 4-column grid (not auto-fit) so all four
     cards stay equal width regardless of content length; previously
     auto-fit let the longer Enrollment Fee card visually unbalance the row. */
  .plan-details-strip { background:var(--cream-deep); border:1px solid var(--taupe); padding:2.2rem 2.5rem; margin-bottom:1.5rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; }
  /* Visible divider between each card instead of relying on grid gap alone
     — gap-only spacing didn't read as a strong enough separation. */
  .plan-detail-item { padding: 0 1.75rem; border-right: 1px solid var(--taupe); }
  .plan-detail-item:first-child { padding-left: 0; }
  .plan-detail-item:last-child { border-right: none; padding-right: 0; }
  @media (max-width: 900px) {
    .plan-details-strip { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 0; padding: 1.8rem; }
    .plan-detail-item { border-right: none; border-bottom: 1px solid var(--taupe); padding: 0 0 1.4rem 0; }
    .plan-detail-item:nth-child(odd) { padding-right: 1.2rem; border-right: 1px solid var(--taupe); }
    .plan-detail-item:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
  }
  .pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin-top: 3rem; }
  .pillar { text-align: center; }
  .pillar-icon { width: 56px; height: 56px; margin: 0 auto 1.2rem; color: var(--sage-deep); }
  .pillar-icon svg { width: 100%; height: 100%; }
  .pillar h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--charcoal); margin-bottom: 0.6rem; }
  .pillar p { font-size: 0.85rem; color: var(--stone); line-height: 1.65; font-weight: 300; max-width: 220px; margin: 0 auto; }
  @media (max-width: 900px) {
    .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  }
  .price-table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
  .price-table thead th { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--mist); padding-bottom: 0.75rem; border-bottom: 1px solid var(--taupe); text-align: right; white-space: nowrap; }
  .price-table thead th:first-child { text-align: left; }
  .price-table thead th.member-col { color: var(--clay); }
  .price-table tbody td { padding: 0.85rem 0; border-bottom: 1px solid var(--linen); text-align: right; white-space: nowrap; font-size: 0.95rem; color: var(--stone); font-variant-numeric: tabular-nums; vertical-align: top; }
  .price-table tbody td:not(:first-child) { padding-left: 1.6rem; }
  .price-table tbody td:first-child { text-align: left; white-space: normal; padding-right: 1rem; width: 99%; }
  .price-table .member-col { color: var(--clay); font-weight: 500; }
  .pt-name { display: block; font-size: 0.98rem; color: var(--charcoal); font-weight: 400; line-height: 1.3; }
  .pt-note { display: block; font-size: 0.78rem; color: var(--mist); font-weight: 300; margin-top: 0.15rem; }
  .pt-foot { margin-top: 0.95rem; font-size: 0.75rem; color: var(--mist); font-weight: 300; font-style: italic; line-height: 1.5; }
  .tp-package { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--taupe); }
  .tp-package h5 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--charcoal); margin-bottom: 0.5rem; line-height: 1.2; }
  .tp-sub { font-size: 0.9rem; color: var(--mist); line-height: 1.7; font-weight: 300; margin-bottom: 0.2rem; }
  .tp-example { margin-top: 1.4rem; background: var(--cream-deep); border-left: 3px solid var(--clay); padding: 1.05rem 1.25rem; }
  .tp-example-label { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--charcoal); line-height: 1.2; }
  .tp-example-detail { display: block; font-size: 0.78rem; color: var(--mist); margin: 0.25rem 0 0.6rem; font-weight: 300; }
  .tp-example-price { display: block; font-size: 0.98rem; color: var(--stone); }
  .tp-example-price strong { font-weight: 600; }

  /* MEET THE DOCTOR */
  .doctor-section { background: #E8D8C8; }
  .doctor-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 5rem; align-items: center; }
  .doctor-photo {
    aspect-ratio: 3/4;
    background: var(--cream-deep);
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .doctor-photo-inner {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, var(--cream) 0%, var(--clay-light) 60%, var(--taupe) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding-bottom: 2rem;
  }
  .doctor-initials { font-family: var(--font-display); font-size: 5rem; color: rgba(44,40,37,0.18); font-weight: 300; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); }
  .photo-note { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
  .credentials { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; margin-bottom: 2rem; }
  .cred-tag { background: var(--cream); border: 1px solid var(--taupe); padding: 0.35rem 0.9rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
  .doctor-quote { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--charcoal); line-height: 1.5; border-left: 2px solid var(--clay); padding-left: 1.5rem; margin: 2rem 0; font-weight: 300; }
  .doctor-bio { font-size: 0.92rem; color: var(--stone); line-height: 1.85; font-weight: 300; }

  /* TEAM ROSTER  (reuses .doctor-photo, .credentials, .cred-tag, .doctor-quote, .doctor-bio) */
  /* TEAM INTRO — text left, photo right, photo matches text block height exactly */
  .team-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: stretch; /* both columns same height */
    margin-bottom: 3.5rem;
  }
  .team-intro-photo {
    display: flex;
    align-items: stretch;
  }
  .team-intro-photo img {
    width: 100%;
    height: 100%; /* fills the column which equals the text column height */
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 2px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%);
    mask-image: linear-gradient(to right, transparent 0%, black 35%);
  }
  @media (max-width: 900px) {
    .team-intro-grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
    .team-intro-photo { min-height: 260px; }
    .team-intro-photo img {
      height: 260px;
      -webkit-mask-image: none;
      mask-image: none;
    }
  }
  @media (max-width: 900px) {
    .team-intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .team-intro-photo { order: -1; }
  }
  .team-intro .doctor-quote { margin: 1.5rem 0 0; }
  .team-roster { display: flex; flex-direction: column; }
  .clinician { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; padding: 3.5rem 0; }
  .clinician:first-child { padding-top: 0; }
  .clinician:not(:first-child) { border-top: 1px solid rgba(107,76,59,0.18); }
  .clinician-name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; color: var(--charcoal); line-height: 1.1; }
  .clinician-role { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin-top: 0.45rem; }

  /* FAQ */
  .faq-section { background: var(--cream); }
  .faq-layout { display: grid; grid-template-columns: 4fr 6fr; gap: 6rem; }
  .faq-list { display: flex; flex-direction: column; gap: 0; }
  .faq-item { border-top: 1px solid var(--linen); }
  .faq-item:last-child { border-bottom: 1px solid var(--linen); }
  .faq-question {
    width: 100%; background: none; border: none; text-align: left;
    padding: 1.5rem 0;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
    color: var(--charcoal); gap: 1rem;
  }
  .faq-question:hover { color: var(--clay); }
  .faq-question .faq-icon { font-size: 1.2rem; color: var(--taupe); flex-shrink: 0; transition: transform 0.25s; }
  .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--clay); }
  .faq-answer { font-size: 0.9rem; color: var(--mist); line-height: 1.8; padding-bottom: 1.5rem; font-weight: 300; display: none; }
  .faq-answer.open { display: block; }

  /* CONTACT */
  .contact-section { background: #6B4C3B; }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
  .contact-section .section-title { color: var(--cream); }
  .contact-section .section-eyebrow { color: var(--clay-light); }
  .contact-section .section-eyebrow::before { background: var(--clay-light); }
  .contact-detail { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.5rem; }
  .contact-item { display: flex; gap: 1.2rem; align-items: flex-start; }
  .contact-icon { width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
  .contact-item-text h5 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-light); margin-bottom: 0.3rem; font-weight: 400; }
  .contact-item-text p { font-size: 0.9rem; color: var(--cream); font-weight: 300; }
  .membership-form { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); padding: var(--card-padding); }
  .form-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--cream); font-weight: 300; margin-bottom: 1.8rem; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
  .form-group.full { grid-column: 1 / -1; }
  .form-group label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-light); font-weight: 400; }
  .form-group input, .form-group select, .form-group textarea {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: var(--cream); padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.88rem;
    font-weight: 300; outline: none; width: 100%;
    transition: border-color 0.2s;
  }
  .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(248,243,236,0.35); }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--clay-light); }
  .form-group select option { background: #6B4C3B; }
  .form-group textarea { resize: none; height: 90px; }
  .form-submit {
    margin-top: 1.5rem; width: 100%; padding: 1rem; background: var(--clay);
    border: none; color: var(--white); font-family: var(--font-body); font-size: 0.8rem;
    letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
    transition: background 0.2s; font-weight: 400;
  }
  .form-submit:hover { background: var(--sage); }
  .form-privacy { font-size: 0.75rem; color: rgba(248,243,236,0.4); margin-top: 0.75rem; text-align: center; font-weight: 300; }

  /* FOOTER */
  footer {
    background: #E8D8C8;
    padding: 2.5rem max(var(--content-pad), calc((100% - var(--content-max)) / 2));
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
  }
  .footer-logo { font-family: var(--font-display); font-size: 1.1rem; color: var(--charcoal); font-weight: 300; }
  .footer-copy { font-size: 0.75rem; color: var(--mist); font-weight: 300; }
  .footer-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
  .footer-links a { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); text-decoration: none; transition: color 0.2s; }
  .footer-links a:hover { color: var(--charcoal); }

  /* MOBILE MENU TOGGLE */
  .nav-mobile-toggle { display: none; }

  /* MOBILE NAV DRAWER
     Slides in from the right, sits below the sticky header (uses the same
     --header-height JS keeps in sync), and lists every page plus the
     membership CTA. Hidden entirely above the 900px breakpoint. */
  .nav-drawer-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(44, 40, 37, 0.45);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease;
  }
  .nav-drawer-overlay.open { opacity: 1; visibility: visible; }
  .nav-drawer {
    position: fixed; top: var(--header-height, 112px); right: 0; bottom: 0;
    width: min(78vw, 320px); z-index: 160;
    background: var(--cream);
    border-left: 1px solid var(--linen);
    box-shadow: -12px 0 32px rgba(44,40,37,0.12);
    padding: 2rem 1.75rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .nav-drawer.open { transform: translateX(0); }
  .nav-drawer a {
    font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 400;
    color: var(--charcoal);
    text-decoration: none;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--linen);
    transition: color 0.2s;
  }
  .nav-drawer a:hover, .nav-drawer a:focus-visible { color: var(--clay); }
  .nav-drawer a.active { color: var(--clay); }
  .nav-drawer .nav-cta { margin-top: 1.5rem; text-align: center; border: none; }
  .nav-drawer-close {
    align-self: flex-end;
    background: none; border: none; color: var(--stone);
    font-size: 1.3rem; cursor: pointer; line-height: 1;
    padding: 0.25rem; margin-bottom: 0.75rem;
  }
  .nav-drawer-close:hover { color: var(--clay); }
  body.drawer-open { overflow: hidden; }

  @media (max-width: 900px) {
    :root {
      --section-gap: 4rem;       /* tighter vertical rhythm than desktop's 100px so the page doesn't feel like an endless scroll on mobile */
      --card-padding: 2rem 1.5rem; /* desktop's 48px/40px would eat too much width on phone screens */
      --content-pad: 24px;
    }
    .hero { grid-template-columns: 1fr; height: auto; min-height: auto; }
    .hero-right { min-height: 40vw; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .dpc-grid, .doctor-grid, .clinician, .contact-grid, .faq-layout { grid-template-columns: 1fr; gap: 3rem; }
    .pricing-intro { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .svc-tabs { grid-template-columns: 1fr; }
    .svc-list { padding-right: 0; margin-bottom: 1.8rem; }
    .svc-panel { border-left: none; padding-left: 0; border-top: 1px solid var(--linen); padding-top: 1.8rem; min-height: 0; }
    .aux-grid { grid-template-columns: 1fr; }
    .card-banner span { max-width: calc(100% + 1.5rem); margin-left: -1.5rem; padding-left: 1.5rem; }
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-mobile-toggle { display: block; background: none; border: 1px solid var(--linen); padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
  }

  /* ANIMATIONS */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* DECORATIVE ELEMENTS */
  .ornament { color: var(--clay); font-family: var(--font-display); font-size: 4rem; opacity: 0.08; position: absolute; line-height: 1; pointer-events: none; }
  .announcement-banner {
    position: relative; left: 0; right: 0; z-index: 200;
    background: #8FAF8A;
    padding: 0.6rem max(var(--content-pad), calc((100% - var(--content-max)) / 2));
    display: flex; align-items: center; justify-content: center; gap: 1.5rem;
    flex-wrap: wrap;
  }
  .announcement-banner p {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: #fff;
    font-weight: 400;
    text-align: center;
  }
  .announcement-banner strong { font-weight: 500; }
  .announcement-banner a {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #fff;
    color: #6B4C3B;
    padding: 0.35rem 1rem;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .announcement-banner a:hover { background: #F8E882; }
  .banner-close {
    position: absolute; right: 1.5rem;
    background: none; border: none; color: rgba(255,255,255,0.7);
    font-size: 1.1rem; cursor: pointer; line-height: 1;
    transition: color 0.2s;
  }
  .banner-close:hover { color: #fff; }