/* ==========================================================================
   Alexandrite Health — site stylesheet
   Built to capture/geometry.md. Rows are 80% capped at 1300px / 1080px.
   Divi's three tiers are reproduced: desktop >=981, tablet 768-980, phone <=767.

   RESPONSIVE RULES LIVE IN EXACTLY TWO BLOCKS AT THE END OF THIS FILE.
   Do not add a second @media block for the same tier higher up — a later
   same-breakpoint block silently wins the cascade and the earlier rule
   never renders (Coastal Craft, platform-traps.md).
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --purple:        #432f72;
  --purple-dark:   #35255c;
  --green:         #83b640;  /* brand green: backgrounds, icons, borders, rules */
  /* Green as TEXT fails WCAG on every ground this site uses:
     #83b640 scores 2.41 on #fff, 2.17 on #eaf5f9, 2.26 on #fcf7f1 — all below
     the 3.0 needed for large text. --green-text is the same hue darkened to 81%,
     the minimum that clears on all three: 3.60 / 3.24 / 3.38.
     The brand green is kept EXACTLY wherever it is not carrying text. */
  --green-text:    #6a9334;
  --pale:          #eaf5f9;
  --cream:         #fcf7f1;
  --ink:           #000000;
  --body:          #2c2c2c;
  --muted:         #333333;
  --muted-2:       #666666;
  --rule:          #cdcdcd;
  --white:         #ffffff;

  --font-display: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Lora", Georgia, "Times New Roman", serif;

  --row:        1300px;  /* wide row cap  */
  --row-narrow: 1080px;  /* Divi default cap */
  --radius:     8px;
  --radius-card: 24px;
}

/* ---------- fonts ---------- */
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4875;      /* 23.8/16, matching the original */
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}
/* height:auto is NOT optional — without it the width/height attributes stay
   authoritative after max-width shrinks the box and images render squashed. */
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
main { flex: 1 0 auto; }   /* pushes the footer to the bottom on short pages */
.site-footer { flex-shrink: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--green-text);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--purple); color: var(--white); padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- layout ---------- */
/* 80% of viewport, capped. NEVER a bare pixel width: at 1920 a fixed 1300px and
   this rule are identical, and everywhere from 981-1620 they are not. */
.row        { width: 80%; max-width: var(--row);        margin-inline: auto; }
.row--narrow{ width: 80%; max-width: var(--row-narrow); margin-inline: auto; }

.section { padding: 84px 0; background: var(--white); }
.section--tight  { padding: 54px 0; }
.section--roomy  { padding: 112px 0; }
.section--pale   { background: var(--pale); }
/* /appointments/ and /reservations/ do NOT use the flat pale fill: their intro
   is a WHITE section carrying Rectangle-8-12 as a cover background image, and
   the form card sits in a separate plain-white section below. Measured
   padding 84px top / 126px bottom, height 443 at 1920. */
.section--band {
  background: var(--white) url("../img/Rectangle-8-12.webp") 50% 50% / cover no-repeat;
  padding: 84px 0 126px;
}
.section--purple { background: var(--purple); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 300; letter-spacing: 6px;
  line-height: 23.8px; color: var(--ink); text-align: center;
}
.h-display, .h-section {
  font-family: var(--font-display);
  font-weight: 700; color: var(--ink); text-align: center;
  text-wrap: balance;
}
.h-display { font-size: 65px; line-height: 1; }
.h-section { font-size: 48px; line-height: 1; }
/* the two-tone accent every heading on this site uses */
.accent { color: var(--green-text); }

.lede {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 300; line-height: .8815;
  color: var(--body); text-align: center;
}
.body-copy { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4875; }
.center { text-align: center; }

/* utilities — these exist so no element needs a style="" attribute, which
   would force 'unsafe-inline' into the CSP style-src */
.mt-18 { margin-top: 18px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-30 { margin-top: 30px; }
.h-display--sm    { font-size: 48px; }
.h-display--serif { font-size: 40px; font-family: var(--font-body); }
.section--no-top { padding-top: 0; }
.section--tall   { padding: 120px 0; }

/* ---------- buttons ---------- */
/* Scoped so a layout selector can never restyle a button (the .site-nav a::after
   vs .btn::after specificity collision in platform-traps.md). */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; line-height: 1.7125;
  padding: 13.8px 25px;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Divi's buttons carry an ::after arrow revealed on hover — the original has it
   on every button, so it is reproduced rather than dropped. */
.btn::after {
  content: "ƒA"; display: inline-block; width: 0; opacity: 0;
  margin-left: 0; overflow: hidden;
  /* vertical-align + line-height:0 keep the inline-block out of the line-box
     height calculation. Without them the arrow silently added 6px to every
     button and the header pill measured 53px against the original's 47. */
  vertical-align: middle; line-height: 0;
  transition: width .2s ease, opacity .2s ease, margin-left .2s ease;
}
.btn:hover::after { width: .7em; opacity: 1; margin-left: .35em; }
.btn--primary { background: var(--purple); color: var(--white); }
.btn--primary:hover { background: var(--purple-dark); }
.btn--green   { background: var(--green); color: var(--purple); font-weight: 700; }
.btn--green:hover { background: #94c451; }
.btn--outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
.site-nav__cta .btn--outline { padding: 10.5px 23px; }  /* border adds 4px; keep the box at 47 */
.btn--outline:hover { background: var(--white); color: var(--purple); }
.btn--explore {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500; line-height: 1.7;
  text-transform: uppercase;
  padding: 6px 20px;
  border: 2px solid var(--green);
  background: transparent; color: var(--purple);
}
.btn--explore:hover { background: var(--green); color: var(--purple); }
.btn--block { display: block; width: 100%; }

/* ---------- header ---------- */
.site-header {
  background: var(--purple);
  position: relative; z-index: 50;
}
.site-header__inner {
  /* Measured across 981-1920: the columns are PROPORTIONAL, not fixed —
     29.69% / 64.85% with a 5.46% gutter at every width (233/509 at 981 through
     386/843 at 1300). Column 2 therefore starts at 35.15% of the row, which
     puts the nav at x=767 at 1920 exactly. A fixed 386px column matched at
     1920 and overflowed the 80% row by 201px at 981. */
  display: grid; grid-template-columns: 29.69% 64.85%; gap: 5.46%;
  align-items: center; min-height: 109px;
}
.site-logo { display: flex; align-items: center; }
.site-logo img { width: 20%; min-width: 44px; max-width: 77px; height: auto; aspect-ratio: 1; }
.site-nav { display: flex; align-items: center; gap: clamp(8px, 11.4%, 58px); min-width: 0; }
.site-nav__list { display: flex; align-items: center; gap: clamp(7px, 8.25%, 42px); min-width: 0; }
/* :not(.btn) keeps this off the two header buttons */
.site-nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--white);
  padding-bottom: 8px; position: relative;
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--green);
  transition: width .2s ease;
}
.site-nav a:not(.btn):hover::after { width: 100%; }
/* No [aria-current] rule: the original shows no persistent active-page marker.
   The hover underline stays (hover states are a permitted addition). */
.site-nav__cta { display: flex; align-items: center; gap: clamp(6px, 3%, 16px); flex-shrink: 0; }
.site-nav__cta .btn { padding: 12.5px 25px; font-size: 16px; font-weight: 700; line-height: 1.375; white-space: nowrap; }  /* nowrap: without it CONTACT US wrapped to 3 lines (155x73 vs 1 line) */

.nav-toggle {
  display: none;
  background: transparent; border: 0; padding: 10px;
  width: 48px; height: 48px; cursor: pointer;
}
.nav-toggle__bar { display: block; width: 26px; height: 3px; background: var(--white); margin: 5px auto; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  background: var(--white) url("../img/Rectangle-2.webp") 50% 50% / cover no-repeat;
  padding: 84px 0 54px;
  text-align: center;
}
.hero__lede { margin-top: 63px; }
.hero__intro { margin: 19px auto 0; max-width: 910px; text-align: center; }  /* measured: the original DOES cap this at 910px */
.hero__cta { margin-top: 36px; }
/* Full-bleed tree band. In the original this is a SECTION BACKGROUND on an
   empty full-width section (background-size: cover), not an <img> inside a row.
   Building it as a row-constrained <img> boxed it into 1080px and lost the
   edge-to-edge bleed entirely. Measured row heights: 537px from 1440 up
   (tapering to ~522 at 981), 160 tablet, 84 phone; section padding 54/50. */
.hero-art {
  background: var(--white) url("../img/Screenshot-2025-11-28-at-11.57.25-PM-Photoroom.webp") 50% 50% / cover no-repeat;
  height: 645px;   /* 537 content + 54px top/bottom padding */
}

/* ---------- feature icons ---------- */
.features { background: var(--white) url("../img/Rectangle-2.webp") 50% 50% / cover no-repeat; padding: 8px 0 5px; }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.46%; min-height: 129px; align-items: center; }  /* 386/1300 cols, 71/1300 gap */
.feature { display: flex; align-items: center; gap: 18px; }
.feature__icon { flex: 0 0 auto; }
/* Frame-3-1 / Frame-5 / Frame-7 are the finished purple circles at 70px —
   wrapping them in a CSS circle and shrinking the art to 30px was wrong. */
.feature__icon img { width: 70px; height: 70px; }
.feature__label { font-family: var(--font-display); font-size: 24px; font-weight: 300; line-height: 1.15; color: var(--muted-2); }

/* ---------- purple check bar ---------- */
.check-bar { background: var(--purple); padding: 57px 0; }   /* was 22/30 implicit; +120% per request */
.check-bar__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.check-item { display: flex; align-items: center; justify-content: center; gap: 14px; }
.check-item__mark { color: var(--white); font-size: 26px; line-height: 1; }
.check-item__label { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--white); }

/* ---------- generic section head ---------- */
.section-head { text-align: center; }
.section-head .h-section,
.section-head .h-display { margin-top: 25px; }
.section-head__intro { margin: 44px auto 0; text-align: center; }  /* full row width, as measured */
.section-head__intro--lg { font-size: 18px; }   /* the conditions intro measures 18px */

/* ---------- service cards ---------- */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.38%; margin-top: 48px; }
.service-card {
  background: var(--white);
  border: 1px solid var(--green);
  border-radius: var(--radius-card);
  padding: 28px 24px 32px;
  display: flex; flex-direction: column;
}
.service-card__icon { width: 74px; height: 74px; margin-bottom: 24px; }
.service-card__icon img { width: 100%; height: 100%; object-fit: contain; }
/* one size for all three: the original hand-tuned 25/24/22px so each fitted a
   single line, which reads as three different roles. Approved normalisation. */
.service-card__title { font-family: var(--font-display); font-size: 25px; font-weight: 300; line-height: 1.2; color: var(--muted); margin-bottom: 12px; }
.service-card__body { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4875; color: var(--body); }
.services__cta { text-align: center; margin-top: 46px; }

/* ---------- expert ---------- */
.expert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5.54%; align-items: center; }
.expert__media { position: relative; }
.expert__photo { border-radius: var(--radius-card); width: 100%; }
.expert__art { position: absolute; right: -10%; bottom: -14%; width: 42%; pointer-events: none; z-index: -1; }
.expert__eyebrow { text-align: left; }
.expert__name { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--ink); margin-top: 26px; text-align: left; }
.expert__role { font-family: var(--font-display); font-size: 24px; font-weight: 300; color: var(--body); margin-top: 22px; }
.expert__bio { margin-top: 24px; }
.expert__cta { margin-top: 36px; }

/* ---------- condition cards ---------- */
.conditions__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5.6%; margin-top: 48px; }   /* 73/1300 */
.condition-card {
  background: var(--cream);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-align: center;
}
/* The purple circular icon, the rounded top corners and the cream strip are all
   baked into the source image (Untitled-design-56..59, 398x280). It renders at
   its natural aspect with no crop — do not add an aspect-ratio here or the
   icon gets sliced. */
.condition-card__media img { width: 100%; }
.condition-card__body { padding: 26px 18px 34px; display: flex; flex-direction: column; flex: 1; }
.condition-card__title { font-family: var(--font-display); font-size: 24px; font-weight: 300; line-height: 1.2; color: var(--ink); }
.condition-card__text { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4875; color: var(--ink); margin-top: 12px; }
/* margin-top:auto pins the button to the card bottom so a two-line title
   (Cognitive Behavioral Therapy) cannot shove it out of line with its row */
.condition-card__cta { margin-top: auto; padding-top: 24px; }

/* ---------- testimonials ---------- */
.testimonials { background: linear-gradient(var(--pale) 0%, var(--white) 100%); padding: 84px 0 54px; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.46%; margin-top: 48px; }  /* 71/1300 */
.testimonial {
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 34px 32px 36px;
  display: flex; flex-direction: column;
}
.testimonial__mark { width: 51px; height: auto; }   /* 51x43 natural; a fixed 46px height stretched it 7% */
.testimonial__quote { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4875; color: var(--body); margin-top: 22px; }
/* auto pins attribution to the bottom: the original let it float, so the
   shortest quote pushed its avatar LOWER than the longest one. Approved fix. */
.testimonial__by { margin-top: auto; padding-top: 34px; }   /* block: avatar removed, name stacks over role */
.testimonial__name { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--muted); }
.testimonial__role { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 300; color: var(--muted-2); margin-top: 2px; }

/* ---------- contact ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.46%; margin-top: 44px; }  /* 71/1300 */
.contact-card {
  border: 1px solid var(--green);
  border-radius: var(--radius-card);
  padding: 28px 20px 30px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(67,47,114,.10); }
.contact-card__icon { width: auto; height: 50px; margin: 0 auto 16px; }   /* natural size: 40x50 / 50x50 / 63x50 */
.contact-card__title { font-family: var(--font-display); font-size: 24px; font-weight: 300; color: var(--muted); }
.contact-card__text { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--muted-2); margin-top: 14px; word-break: break-word; }
.contact-card a:hover { color: var(--purple); text-decoration: underline; }

.contact__split { display: grid; grid-template-columns: 1fr 1fr; gap: 5.77%; margin-top: 54px; align-items: start; }  /* 75/1300 */
.contact__map { border-radius: var(--radius); overflow: hidden; border: 0; }
.contact__map iframe { width: 100%; height: 460px; border: 0; display: block; }

/* ---------- forms ---------- */
.field { margin-bottom: 18px; }
.field__label { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted-2); margin-bottom: 8px; }
.field__control {
  width: 100%;
  font-family: var(--font-display);
  font-size: 16px;              /* >=16px: below this iOS auto-zooms the page */
  padding: 15px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--body);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field__control::placeholder { color: #767676; }
.field__control:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(67,47,114,.14); outline: none; }
.field__control[aria-invalid="true"] { border-color: #b3261e; }
textarea.field__control { min-height: 168px; resize: vertical; }
.field__error { display: none; font-family: var(--font-display); font-size: 14px; color: #b3261e; margin-top: 6px; }
.field__error.is-shown { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__status { margin-top: 14px; font-family: var(--font-display); font-size: 18px; color: var(--green-text); }
.form__note { font-family: var(--font-display); font-size: 14px; color: var(--muted-2); margin-top: 14px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- inner page hero ---------- */
.page-hero { background: var(--pale); padding: 84px 0; text-align: center; }
.page-hero .h-display { font-size: 65px; }
.page-hero__intro { margin: 24px auto 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 14px; margin-top: 30px; }
.faq__item { background: var(--cream); border-radius: 8px; overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  /* measured on the original: 21px / 700 / #000, not 16px / 500 / #333 */
  font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--ink);
  padding: 18px 52px 18px 22px; position: relative; min-height: 48px;
}
.faq__q::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--muted-2); }
.faq__q[aria-expanded="true"]::after { content: "\2013"; }
.faq__a { padding: 0 22px 20px; font-family: var(--font-body); font-size: 16px; line-height: 1.4875; color: var(--body); }
.faq__a[hidden] { display: none; }

/* ---------- products ---------- */
.products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.38%; margin-top: 48px; }
.product-card { background: var(--cream); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; text-align: center; }
.product-card img { width: 100%; aspect-ratio: 615 / 443; object-fit: cover; }
.product-card__body { padding: 26px 22px 30px; display: flex; flex-direction: column; flex: 1; }
.product-card__title { font-family: var(--font-display); font-size: 25px; font-weight: 300; color: var(--muted); }
.product-card__price { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--purple); margin-top: 10px; }
.product-card__text { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--body); margin-top: 14px; }
.product-card__cta { margin-top: auto; padding-top: 22px; }

/* ---------- split content (about / condition pages) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 5.54%; align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-card); width: 100%; }
.split__title { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.08; color: var(--ink); }
.split__body { margin-top: 20px; }
.split__body p + p { margin-top: 16px; }

/* ---------- education (about) — 2x2 grid, left rule per entry ---------- */
.edu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 84px; margin-top: 48px; }
.edu { border-left: 2px solid var(--purple); padding-left: 30px; }
.edu__school { display: flex; align-items: center; gap: 8px; }
.edu__school img { width: 26px; height: 21px; flex: 0 0 auto; }
.edu__name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--green-text); }
.edu__year { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--green-text); margin-left: auto; }
.edu__title { font-family: var(--font-display); font-size: 32px; font-weight: 300; line-height: 1.2; color: var(--muted); margin-top: 10px; }
.edu__level { font-family: var(--font-display); font-size: 24px; font-weight: 300; color: var(--muted-2); margin-top: 6px; }

/* ---------- condition pages ---------- */
.split--wide { grid-template-columns: 1.05fr .78fr; gap: 6.9%; align-items: start; }
.cond__title { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.16; color: var(--ink); margin-top: 6px; }
.cond__p { margin-top: 18px; }
.cond__list { list-style: disc; margin: 18px 0 0; padding-left: 22px; }
.cond__list li { font-family: var(--font-body); font-size: 16px; line-height: 1.4875; color: var(--body); margin-bottom: 8px; }
.cond__side { display: grid; gap: 34px; }
.cond__card { background: var(--white); border-radius: var(--radius-card); padding: 34px 32px 38px; }
.cond__card-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.cond__card-title + p + .cond__card-cta + .cond__card-title { margin-top: 30px; }
.cond__card .cond__card-title ~ .cond__card-title { margin-top: 30px; }
.cond__card-cta { margin-top: 22px; margin-bottom: 30px; }
.cond__img { border-radius: var(--radius-card); width: 100%; }

/* ---------- intake card (new patient application) ---------- */
.intake-card { background: var(--white); border-radius: var(--radius-card); padding: 34px 32px 38px; max-width: 720px; margin: 34px auto 0; box-shadow: 0 10px 30px rgba(67,47,114,.07); }

/* ---------- steps (how it works) ---------- */
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.38%; margin-top: 48px; }
/* The original's steps are NOT cards: each column is transparent with a 2px
   green RIGHT RULE and padding 0 28px 0 0. Rendering them as bordered rounded
   panels added a structural container the original does not have. */
.step { background: transparent; border: 0; border-right: 2px solid var(--green); border-radius: 0; padding: 0 28px 0 0; }
.step__title { font-family: var(--font-display); font-size: 34px; font-weight: 300; line-height: 1.15; color: var(--muted); margin-bottom: 16px; }
.step__body { font-family: var(--font-body); font-size: 16px; line-height: 1.4875; color: var(--body); }

/* ---------- booking CTA (rebuilt from the empty SimplePractice card) ---------- */
.booking {
  background: var(--white);
  border: 1px solid var(--green);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* The booking card straddles the band/white boundary, overlapping upward by
   exactly one third of its OWN height. translateY takes a percentage of the
   element's height, so this holds at every width - the card is 258px tall on
   desktop but 393px at 360, and a fixed pixel offset would only be a third at
   one of them. The section carries no vertical padding: the layout space the
   card vacates becomes the gap beneath it, which lands at H/3 and so scales
   with the card. */
.section.section--overlap { padding: 0; }   /* .section.x beats the later @media .section padding rules */
/* No position/z-index here. With `position: relative` the section's wrapper
   painted above the FOLLOWING section, clipping the next heading to a few
   pixels once the negative margin pulled it up into this box. The card already
   paints over the band above it by DOM order, so nothing is needed. */
.section--overlap .booking,
.section--overlap .intake-card {
  /* margin-top must be zero or it offsets the transform and the overlap comes
     out as H/3 minus the margin (0.258 instead of 0.333 on the intake card) */
  margin-top: 0;
  transform: translateY(-33.333%);
}

/* The intake card is far taller than the booking card (449px vs 258 on desktop,
   640 vs 393 at 360), so its one-third overlap is 150/213px and needs more
   clearance than the shared band provides. */
.section--band--deep { padding-bottom: 195px; }

/* padding above the section that follows an overlapping card, cut 40%:
   .section 84 -> 50, .section--tight 54 -> 32 */
.section.section--pull-up { padding-top: 84px; }    /* +25px .section-head margin = 109 gap, matching /reservations/ */
.section.section--tight.section--pull-up { padding-top: 109px; }   /* reservations: 182 -> 109, a 40% cut to the VISIBLE gap */

/* An overlapping card leaves H/3 of empty layout space below its visual bottom
   (150px on /reservations/, 86px on /appointments/), so trimming the following
   section's padding barely moves the VISIBLE gap - cutting 54 to 19 only took
   182px down to 169. Reclaim the vacated space with a negative margin, then set
   the padding to the gap you actually want. Values are per-card because they
   depend on card height. */
.section--overlap { margin-bottom: -86px; }        /* booking card vacates 86px */
.section--overlap--deep { margin-bottom: -150px; } /* intake card vacates 150px */
.booking__title { font-family: var(--font-display); font-size: 25px; font-weight: 300; color: var(--muted); }
.booking__text { margin-top: 12px; }
.booking__cta { margin-top: 24px; }

/* ---------- footer ---------- */
.site-footer { background: var(--purple); padding: 8px 0 0; }
.site-footer__inner {
  /* Measured as 510/510 with a 60px gutter in the 1080px row at 1920 — but
     those are PROPORTIONS (47.22% / 47.22%, 5.56% gutter), not fixed widths.
     Hard-coded they total 1080px and overflowed the 80% row by 197px at 981. */
  display: grid; grid-template-columns: 47.22% 47.22%; gap: 5.56%;
  align-items: center; min-height: 57px;   /* + 8px padding-top = 65 total */
}
.site-footer img { width: 51px; height: 51px; }
.site-footer__copy { font-family: var(--font-body); font-size: 18px; font-weight: 400; color: var(--white); text-align: center; }

/* ---------- 404 ---------- */
.error-page { padding: 120px 0; text-align: center; }
.error-page__code { font-family: var(--font-display); font-size: 96px; font-weight: 700; color: var(--purple); line-height: 1; }

/* ==========================================================================
   TABLET TIER — 768 to 980
   Divi keeps desktop-sized backgrounds here but switches to the burger.
   ========================================================================== */
@media (max-width: 980px) {
  /* the desktop 386px logo column overflows the 288px row on phones and
     pushed the hamburger off-screen — reset it for both lower tiers */
  .site-header__inner { grid-template-columns: 1fr auto; min-height: 171px; }
  .site-logo img { width: 151px; height: 151px; max-width: 151px; }   /* max-width must rise with it, or the square logo squashes */
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--purple); padding: 10px 0 24px;
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a:not(.btn) { display: block; padding: 14px 10%; }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav__cta { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 10% 0; }

  .h-display { font-size: 33px; line-height: 1.1; }
  .h-section { font-size: 33px; line-height: 1.1; }
  .page-hero .h-display { font-size: 33px; }
  .lede { font-size: 21px; line-height: 1.3; }
  .eyebrow { font-size: 18px; letter-spacing: 4px; }

  .hero-art { height: 260px; }
  .hero__lede { margin-top: 30px; }
  .features__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .feature__label { font-size: 17px; }
  .check-bar__grid { grid-template-columns: repeat(3, 1fr); }
  .check-item__label { font-size: 14px; }

  .services__grid,
  .testimonials__grid,
  .products__grid,
  .steps__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .step__title { font-size: 26px; }
  .conditions__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .contact-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .expert__grid, .split, .split--wide, .contact__split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__media { order: 0; }
  .expert__art { right: 0; bottom: -8%; width: 34%; }
  .expert__name, .split__title { font-size: 33px; }
  .contact__map iframe { height: 340px; }

  /* both lower tiers are touch tiers: the contact links need a real hit area */
  .contact-card__text a { display: inline-block; padding: 13px 10px; min-height: 46px; }
  .edu__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
  .edu__title { font-size: 24px; }
  .edu__name, .edu__year, .edu__level { font-size: 19px; }
  .cond__title { font-size: 30px; }
}

/* ==========================================================================
   PHONE TIER — 767 and below
   ========================================================================== */
@media (max-width: 767px) {
  .site-header__inner { min-height: 127px; }
  .site-logo img { width: 84px; height: 84px; max-width: 84px; }   /* max-width must rise too or the square logo renders 77x84 */

  .section { padding: 50px 0; }
  .section--roomy { padding: 56px 0; }
  .section--band { padding: 60px 0 175px; }   /* clears the booking card's H/3 overlap (131px at 360, 148 at 320) */
  .section--band--deep { padding-bottom: 260px; }   /* intake card's overlap is 213px at 360 */
  .section.section--pull-up { padding-top: 46px; }             /* +25px .section-head margin = 71px gap, matching /reservations/ */
  /* eyebrow -> heading: 25px baseline +150% = 62px */
  .section-head .h-display { margin-top: 62px; }
  /* gap below the form card cut 50%: 142 -> 71 */
  .section.section--tight.section--pull-up { padding-top: 71px; }
  .section--overlap { margin-bottom: -131px; }        /* booking card vacates 131px at 360 */
  .section--overlap--deep { margin-bottom: -213px; }  /* intake card vacates 213px at 360 */
  .section--tight { padding: 40px 0; }

  .h-display { font-size: 29.4px; line-height: 1.1; }
  .h-section { font-size: 23px; line-height: 1.1; }
  .page-hero { padding: 46px 0; }
  .page-hero .h-display { font-size: 29.4px; }
  .lede { font-size: 18px; line-height: 1.32; }
  .eyebrow { font-size: 15px; letter-spacing: 3px; }
  .expert__name, .split__title { font-size: 26px; }
  .hero { padding: 42px 0 50px; }
  .hero__lede { margin-top: 12px; }   /* measured on the original at 360 */
  .hero-art { height: 184px; }

  .features__grid { grid-template-columns: 1fr; gap: 20px; padding: 18px 0; }
  .feature { justify-content: flex-start; }
  .feature__icon img { width: 55px; height: 55px; }   /* measured on the original at 360 */
  .feature__label { font-size: 18px; }

  .check-bar { padding: 25px 0; }   /* was 14/8; +120% */
  .check-bar__grid { grid-template-columns: 1fr; gap: 12px; }
  .check-item { justify-content: flex-start; min-height: 0; }

  .services__grid,
  .conditions__grid,
  .testimonials__grid,
  .products__grid,
  .steps__grid,
  .contact-cards { grid-template-columns: 1fr; gap: 24px; }
  /* single column: the right rule becomes a left rule, as the original does */
  .step { border-right: 0; border-left: 2px solid var(--green); padding: 0 0 0 22px; }
  .step__title { font-size: 24px; }

  .expert__grid, .split, .split--wide, .contact__split { grid-template-columns: 1fr; gap: 32px; }
  .expert__art { display: none; }   /* decoration would sit over the CTA at this width */

  .edu__grid { grid-template-columns: 1fr; gap: 26px; }
  .edu { padding-left: 20px; }
  .edu__title { font-size: 21px; }
  .edu__name, .edu__year { font-size: 17px; }
  .edu__level { font-size: 16px; }
  .cond__title { font-size: 26px; }
  /* the original sets this per module: 48px on /products/, 25px on /services/ */
  .split__title { font-size: 25px; }
  .split__title--lg { font-size: 48px; line-height: 1; }
  .cond__card, .intake-card { padding: 26px 22px 30px; }
  /* the original keeps this block ranged left at 360 — centring it was an
     unrequested change, not a mobile improvement */

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact__map iframe { height: 280px; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 12px; justify-items: center; text-align: center; padding: 16px 0; }
  .site-footer__copy { font-size: 15px; }

  .error-page { padding: 70px 0; }
  .error-page__code { font-size: 64px; }

  /* touch targets: >=44px with >=8px spacing */
  .btn { padding: 15px 24px; min-height: 48px; }
  .btn--explore { padding: 10px 22px; min-height: 46px; }
  .site-nav a:not(.btn) { min-height: 48px; display: flex; align-items: center; }
}

.form__status.is-error { color: #b3261e; }

/* ==========================================================================
   NARROW DESKTOP — 981 to 1329
   Not a guess: the original drops the whole nav from 16px to 10px here (verified
   10px at 1320, 16px at 1340), which is the ONLY reason its five nav items fit
   inside the 64.85% column at 981. Reproducing the columns without this made
   the header overflow by 197px at 981 while matching perfectly at 1920.
   ========================================================================== */
@media (min-width: 981px) and (max-width: 1329px) {
  .site-nav a:not(.btn) { font-size: 10px; }
  .site-nav__cta .btn { font-size: 10px; padding: 15px 25px 8px 26px; }
  .site-nav__cta .btn--outline { padding: 13px 23px 6px 24px; }
}

/* thank-you page: the original runs an Albert Sans eyebrow above the serif H1
   and a 17px paragraph below it */
/* thank-you: measured on the original — ground #e4e4e4 (sampled from pixels;
   the computed value on the section reports the header's purple), eyebrow
   uppercase black, H1 Lora 500 #333, and a 30px pill button rather than the
   8px radius every other button on the site uses. */
  /* DELIBERATE DEVIATION: the original ground is #e4e4e4 grey (sampled from its
     pixels). David asked for white, so the thank-you page runs white throughout. */
  .ty { background: var(--white); }
.ty-icon { width: 47px; height: 50px; margin: 0 auto 20px; }
.ty-eyebrow { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); text-transform: uppercase; margin-bottom: 14px; }
.ty-h1 { font-weight: 500; color: var(--muted); }
.btn--pill { border-radius: 30px; padding: 12.3px 40px; }   /* -> 276x52, matching the original */
.ty-body { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--body); margin: 22px auto 0; max-width: 760px; }
.cta-pair { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   LARGE PHONE — 481 to 767
   The booking card's copy rewraps across the phone range, so its height runs
   284px at 600 down from 444px at 320. Its one-third overlap therefore varies
   95-148px while the reclaim is a single pixel value, and the gap below it
   drifted 35-88px. One intermediate reclaim flattens that. (The intake card
   does not rewrap, so /reservations/ is stable without this.)
   ========================================================================== */
@media (min-width: 481px) and (max-width: 767px) {
  /* :not() is load-bearing. Without it this also matched the deep variant,
     under-reclaimed it by 113px and blew the reservations gap out to 184px.
     Third time a shared .section--overlap value has caught the wrong card. */
  .section--overlap:not(.section--overlap--deep) { margin-bottom: -100px; }
}