/* ============================================================
   Sytek Ortho — Global Stylesheet
   PORTED VERBATIM from the approved static build's styles.css.

   This file is the source's own CSS, byte for byte, with exactly one
   rewrite: root-absolute /assets/branding/*.svg URLs became
   ../images/branding/*.svg so they resolve from assets/css/.

   Do not tidy, reformat or dedupe rules here. If a rule looks redundant
   that is a question for the port review, not something to fix in transit
   (launch prompt Rule 0.5: port the skeleton, do not interpret the design).

   Compiled Tailwind (assets/css/tailwind.css) is enqueued BEFORE this file.
   NEVER cdn.tailwindcss.com.

   The source is desktop-first with 12 max-width breakpoints of its own; they
   are NOT Tailwind's scale, which is why almost all visual weight lives here.
   ============================================================ */

/* =========================================================
   Sytek Ortho — Tokens
   ========================================================= */
:root {
  /* greens */
  --sytek-green:        #036E49;
  --sytek-green-deep:   #024A31;
  --sytek-green-mid:    #2E8A6A;
  --sytek-green-bright: #1E9F6E;
  --sytek-green-soft:   #BFEBD6; /* was #CFE3D8 (more muddy/desaturated) */
  --sytek-green-wash:   #BFEBD6; /* was #DDE9DF (muddier) — now matches green-soft mint */
  --sytek-green-fog:    #ECF2EE;

  /* creams */
  /* Original cream palette (revert if needed):
       --sytek-cream:     #F5EFE3
       --sytek-cream-mid: #F1E9D9 */
  --sytek-cream:        #FFFFFF;
  --sytek-cream-mid:    #F6F7F8;
  --sytek-cream-warm:   #EDE3D0;

  /* ink */
  --sytek-ink:          #1A1A17;
  --sytek-ink-soft:     #5C5A52;
  --sytek-ink-faint:    #A8A49B;

  /* border (neutral grey for all borders) */
  --sytek-border:       #D8D3C5;

  /* type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* radii */
  --r-card:    24px;
  --r-card-lg: 32px;
  --r-pill:    999px;

  /* timings */
  --t-fast: 200ms;
  --t-med:  400ms;
  --t-slow: 700ms;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--sytek-cream);
  color: var(--sytek-ink);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--sytek-green); color: var(--sytek-cream); }

/* =========================================================
   Scroll progress bar (motion pattern 4)
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--sytek-green-bright);
  z-index: 100;
  transition: width 60ms linear;
  pointer-events: none;
}

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: var(--sytek-border);
  padding: 14px 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.nav__mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sytek-green);
  display: grid;
  place-items: center;
  color: var(--sytek-cream);
  font-size: 14px;
  font-weight: 600;
}
.nav__links {
  display: flex;
  gap: 4px;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-pill);
  padding: 6px;
}
.nav__links a {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--sytek-ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__links a:hover { background: var(--sytek-green); color: var(--sytek-cream); }
.nav__links a.is-active { background: var(--sytek-ink); color: var(--sytek-cream); }

/* Nav dropdown group */
.nav__group {
  position: relative;
  display: inline-flex;
}
.nav__group > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__chevron {
  width: 10px;
  height: 7px;
  transition: transform var(--t-fast) var(--ease);
}
.nav__group:hover .nav__chevron,
.nav__group:focus-within .nav__chevron { transform: rotate(180deg); }
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 180px;
  background: var(--sytek-cream);
  border: 0;
  border-radius: 14px;
  padding: 8px;
  margin: 0;
  list-style: none;
  box-shadow: 0 20px 40px -12px rgba(3, 25, 18, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  z-index: 100;
  padding-top: 8px;
}
.nav__group::after {
  /* Invisible bridge so hover doesn't drop when moving from trigger to submenu */
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 99;
}
.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(15px);
}
.nav__submenu li { margin: 0; }
.nav__submenu a {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sytek-ink);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__submenu a:hover { background: var(--sytek-green); color: var(--sytek-cream); }

/* ---------- Mega menu variant (Treatments) ---------- */
.nav__submenu--mega {
  position: fixed;
  top: 85px;
  left: 50%;
  min-width: 880px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.nav__group:hover .nav__submenu--mega,
.nav__group:focus-within .nav__submenu--mega {
  transform: translateX(-50%) translateY(0);
}
.nav.is-scrolled .nav__submenu--mega,
.nav--reversed.is-scrolled .nav__submenu--mega { top: 82px; }
.nav__mega-col { display: block; }
.nav__mega-col--secondary {
  border-left: 1px solid var(--sytek-border);
  padding-left: 24px;
}
.nav__mega-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sytek-green);
  margin: 0 0 12px;
  padding: 0 6px;
}
.nav__submenu--mega .nav__mega-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sytek-ink);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space: normal;
}
.nav__submenu--mega .nav__mega-item + .nav__mega-item { margin-top: 4px; }
.nav__submenu--mega .nav__mega-item:hover {
  background: var(--sytek-green);
  color: var(--sytek-cream);
}
.nav__submenu--mega .nav__mega-item:hover .nav__mega-desc { color: rgba(245, 239, 227, 0.82); }
.nav__mega-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 2px;
}
.nav__mega-desc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--sytek-ink-soft);
  transition: color var(--t-fast) var(--ease);
}
@media (max-width: 1000px) {
  .nav__submenu--mega { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__mega-col--secondary { border-left: 0; padding-left: 0; grid-column: span 2; border-top: 1px solid var(--sytek-border); padding-top: 16px; margin-top: 4px; }
}

/* Drawer sub-link (indented mobile nav items) */
.drawer__sublink {
  padding-left: 20px !important;
  font-size: 15px !important;
  color: var(--sytek-ink-soft) !important;
}
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sytek-ink);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease);
}
.nav__phone:hover,
.nav__phone:focus-visible { color: var(--sytek-green); }
.nav__phone-icon {
  display: inline-grid;
  place-items: center;
  color: var(--sytek-green);
  width: 18px;
  height: 18px;
}
.nav__phone-icon svg { width: 16px; height: 16px; }

/* Brand logo (header + footer — identical size) */
.brand-logo {
  height: 56px;
  width: auto;
  display: block;
}

/* Nav CTA — outlined variation (the only place the primary CTA deviates) */
.nav .btn--primary {
  background: transparent;
  color: var(--sytek-green);
  border-color: var(--sytek-green);
}
.nav .btn--primary:hover {
  background: var(--sytek-green);
  color: var(--sytek-cream);
}
/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--sytek-ink);
  border-radius: 2px;
  position: relative;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top:  6px; }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 23, 0.5);
}
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--sytek-cream);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  padding: 20px 25px 28px;
  gap: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: var(--sytek-ink);
  display: grid;
  place-items: center;
}
.drawer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer__links a {
  padding: 12px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--sytek-ink);
  border-bottom: 1px solid var(--sytek-border);
  transition: color var(--t-fast) var(--ease);
}
.drawer__links a:hover,
.drawer__links a:focus-visible { color: var(--sytek-green); }

/* Mobile drawer expandable groups (Treatments / Who We Serve / What to Expect) */
.drawer__group { border-bottom: 1px solid var(--sytek-border); }
.drawer__group-summary {
  padding: 12px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--sytek-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.drawer__group-summary::-webkit-details-marker { display: none; }
.drawer__group-summary:hover { color: var(--sytek-green); }
.drawer__chevron { width: 12px; height: 8px; transition: transform var(--t-fast) var(--ease); flex-shrink: 0; }
.drawer__group[open] .drawer__group-summary { color: var(--sytek-green); }
.drawer__group[open] .drawer__chevron { transform: rotate(180deg); }
.drawer__group-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0 12px;
}
.drawer__group-list a {
  padding: 10px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--sytek-ink-soft);
  border-bottom: 0;
  transition: color var(--t-fast) var(--ease);
}
.drawer__group-list a:hover,
.drawer__group-list a:focus-visible { color: var(--sytek-green); }
.drawer__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drawer__foot .btn--primary {
  width: 100%;
  justify-content: center;
}
.drawer__phone {
  font-size: 15px;
  color: var(--sytek-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  align-self: center;
  transition: color var(--t-fast) var(--ease);
}
.drawer__phone:hover { color: var(--sytek-green); }

@media (max-width: 1100px) {
  .nav { padding: 12px 15px; }
  .nav.is-scrolled { padding: 10px 15px; }
  .nav__links, .nav__phone, .nav .nav__cta { display: none; }
  .nav .nav__toggle { display: inline-flex; }
  .brand-logo { height: 42px; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn--primary {
  background: var(--sytek-green);
  color: var(--sytek-cream);
}
.btn--primary:hover { background: var(--sytek-green-deep); }
.btn--secondary {
  background: transparent;
  color: var(--sytek-green);
  border-color: var(--sytek-green);
}
.btn--secondary:hover { background: var(--sytek-green); color: var(--sytek-cream); }
.btn--tertiary {
  background: transparent;
  color: var(--sytek-green);
  padding: 6px 0;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
}
.btn--tertiary::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.btn--tertiary:hover { color: var(--sytek-green-deep); }
.btn--tertiary:hover::after { transform: translateX(4px); }
.btn--compact { padding: 10px 18px; font-size: 14px; }

/* =========================================================
   Containers + structure
   ========================================================= */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.section {
  padding: 140px 0;
}
.section--tight { padding: 100px 0; }
.section--cream { background: var(--sytek-cream); }
.section--wash  { background: var(--sytek-green-wash); }
#treatments.section--wash { background: var(--sytek-cream-mid); }
.section--soft  { background: var(--sytek-green-soft); }
.section--deep  { background: var(--sytek-green-deep); color: var(--sytek-cream); }
.section--mid   { background: var(--sytek-cream-mid); }
.section--warm  { background: var(--sytek-cream-warm); }
.section--green { background: var(--sytek-green); color: var(--sytek-cream); }
.section--green .eyebrow { color: var(--sytek-green-soft); }
.section--green .h-section { color: var(--sytek-cream); }
.section--green .h-section .accent { color: var(--sytek-green-soft); }
.section--green .lead { color: #FFFFFF; }
.section--green .prose p:not(.eyebrow) { color: #FFFFFF; }
.section--green .prose p.eyebrow { color: var(--sytek-green-soft); }
.section--green .btn--primary {
  background: var(--sytek-cream);
  color: var(--sytek-green);
}
.section--green .btn--primary:hover {
  background: #FFFFFF;
  color: var(--sytek-green-deep);
}
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .section--tight { padding: 56px 0; }
  .container { padding: 0 20px; }

  /* All content images render 1:1 on mobile */
  .page-hero__photo,
  .split-section__photo,
  .split-section__photo--landscape,
  .split-section__photo--square,
  .pull-quote--portrait .pull-quote__photo,
  .wws-card__photo { aspect-ratio: 1 / 1; }
  .pull-quote--portrait .pull-quote__photo img,
  .split-section__photo img { object-fit: cover; object-position: center top; }

  /* Btn row: primary full-width, tertiary centered under it */
  .btn-row,
  .final-cta__row,
  .final-cta__buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .btn-row .btn--tertiary,
  .final-cta__buttons .btn--tertiary { align-self: center; }

  /* FAQ question line-height tighter on mobile */
  .faq__q { line-height: 1.25; }

  /* Rule 1 + 5: Pill buttons full-width and center-aligned on mobile */
  .btn--primary,
  .btn--secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* exceptions: nav drawer button keeps its own width handling */
  .nav .btn--primary,
  .nav__cta { width: auto; }

  /* Rule 2: tertiary/underline buttons stay inline (not full-width) */
  .btn--tertiary { width: auto; }

  /* Rule 8: Left-justify all section content on mobile by default */
  .section-head,
  .treatments .section-head,
  .trust .section-head,
  .how .section-head {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  .section-head .eyebrow,
  .section-head .h-section,
  .section-head .lead,
  .trust .section-head .h-section,
  .trust .section-head .lead {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}

/* Eyebrow */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-green);
  margin: 0 0 18px;
}
.section--deep .eyebrow { color: var(--sytek-green-soft); }

/* Section heading */
.h-section {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 20px;
  max-width: 22ch;
  text-wrap: pretty;
}
.h-section .accent { color: var(--sytek-green); font-weight: 700; }
.hero__h1 .accent { font-weight: 700; }
.visit__title .accent { font-weight: 700; }
.section--deep .h-section .accent { color: var(--sytek-green-soft); }

.lead {
  font-size: 19px;
  color: var(--sytek-ink);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 56px;
  text-wrap: pretty;
}
.section--deep .lead { color: rgba(245, 239, 227, 0.82); }

/* Eyebrow grid header layout */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head .lead { margin-bottom: 0; }
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* =========================================================
   Pill tags
   ========================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--sytek-green-soft);
  color: var(--sytek-green-deep);
  white-space: nowrap;
}
.pill--solid { background: var(--sytek-green); color: var(--sytek-cream); }
.pill--ghost { background: transparent; border: 1px solid var(--sytek-border); color: var(--sytek-ink-soft); }
.pill--paren { background: transparent; color: var(--sytek-ink-soft); padding-left: 0; padding-right: 0; font-style: normal; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: 160px 0 100px;
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 60px;
  align-items: center;
}
.hero__copy { max-width: 640px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--sytek-green-wash);
  border: 1px solid var(--sytek-border);
  color: var(--sytek-green-deep);
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 24px;
}
.hero__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sytek-green-bright);
  box-shadow: 0 0 0 4px rgba(30, 159, 110, 0.18);
}

.hero__variant { display: none; }
.hero__variant.is-active { display: block; }

.hero__h1 {
  font-size: clamp(48px, 6.4vw, 84px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 24px;
  text-wrap: balance;
}
.hero__h1 .accent { color: var(--sytek-green); }
.hero__h1 .bump   { font-weight: 600; }
.hero__h1 .badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  margin: 0 4px;
  background: var(--sytek-green);
  color: var(--sytek-cream);
  border-radius: var(--r-pill);
  font-size: 0.45em;
  font-weight: 500;
  vertical-align: middle;
  letter-spacing: 0.02em;
  transform: translateY(-0.18em);
}
.hero__sub {
  font-size: 20px;
  color: var(--sytek-ink-soft);
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 36ch;
  text-wrap: pretty;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin: 0 0 36px;
  font-size: 13.5px;
  color: var(--sytek-ink-soft);
}
.hero__trust .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sytek-green-mid);
  display: inline-block;
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero__cta-row .meta {
  font-size: 13px;
  color: var(--sytek-ink-soft);
}

.hero__media-wrap {
  position: relative;
  aspect-ratio: 1/1.05;
  min-height: 540px;
}
.hero__media {
  position: absolute;
  border-radius: var(--r-card-lg);
  overflow: hidden;
}
.hero__media--main {
  top: 0;
  right: 0;
  width: 78%;
  height: 86%;
  border-top-right-radius: 8px; /* signature asymmetry */
  z-index: 2;
  box-shadow: 0 24px 48px -16px rgba(2, 74, 49, 0.18);
}
.hero__media--main .placeholder {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--sytek-green-soft) 0%, var(--sytek-green-wash) 100%);
}
.hero__media--secondary {
  bottom: 0;
  left: 0;
  width: 48%;
  height: 38%;
  z-index: 3;
  border: 6px solid var(--sytek-cream);
  border-radius: 24px;
  box-shadow: 0 16px 40px -8px rgba(2, 74, 49, 0.20);
}
.hero__media--secondary .placeholder {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border-radius: 18px;
  background: var(--sytek-green-soft);
}

.hero__media-notch {
  position: absolute;
  top: 0; right: 0;
  width: 52px; height: 52px;
  background: var(--sytek-cream);
  border-bottom-left-radius: 18px;
  z-index: 3;
}
.hero__media-notch::before,
.hero__media-notch::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
}
.hero__media-notch::before {
  top: 0; right: -16px;
  background: radial-gradient(circle at 100% 100%, transparent 16px, var(--sytek-cream) 16.5px);
}
.hero__media-notch::after {
  left: 0; bottom: -16px;
  background: radial-gradient(circle at 100% 100%, transparent 16px, var(--sytek-cream) 16.5px);
}

/* Floating availability chip */
.hero__chip {
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 4;
  background: var(--sytek-cream);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sytek-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px -10px rgba(2, 74, 49, 0.20);
}
.hero__chip strong { font-weight: 500; color: var(--sytek-ink-soft); }
.hero__chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sytek-green-bright);
  box-shadow: 0 0 0 4px rgba(30, 159, 110, 0.20);
  animation: chip-pulse 2.6s ease-in-out infinite;
}
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(30, 159, 110, 0.20); }
  50%      { box-shadow: 0 0 0 7px rgba(30, 159, 110, 0.08); }
}

/* Floating rating card */
.hero__floater {
  position: absolute;
  right: -6px;
  bottom: 34px;
  z-index: 4;
  background: var(--sytek-cream);
  border-radius: 18px;
  padding: 18px 22px;
  width: 200px;
  box-shadow: 0 18px 40px -10px rgba(2, 74, 49, 0.22);
  border: 1px solid var(--sytek-border);
}
.hero__floater-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hero__floater-stars {
  color: var(--sytek-green);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.hero__floater-meta {
  font-size: 12px;
  color: var(--sytek-ink-soft);
}
.hero__floater-num {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--sytek-green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}
.hero__floater-num sup {
  font-size: 0.45em;
  font-weight: 500;
  vertical-align: super;
  margin-left: 2px;
}
.hero__floater-label {
  font-size: 12px;
  color: var(--sytek-ink-soft);
  line-height: 1.35;
}

/* Sticker (small year/credential badge in upper-right) */
.hero__sticker {
  position: absolute;
  top: -14px;
  right: 28px;
  z-index: 5;
  background: var(--sytek-green);
  color: var(--sytek-cream);
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 8px 24px -6px rgba(2, 74, 49, 0.35);
  transform: rotate(3deg);
}
.hero__sticker b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

@media (max-width: 860px) {
  .hero { padding: 130px 0 60px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__media-wrap { aspect-ratio: 4/4.2; min-height: 460px; max-width: 560px; }
  .hero__floater { right: 12px; }
  .hero__media--secondary { width: 52%; height: 36%; }
}
@media (max-width: 540px) {
  .hero__media-wrap { min-height: 380px; }
  .hero__floater { width: 168px; padding: 14px 16px; }
  .hero__floater-num { font-size: 36px; }
  .hero__chip { font-size: 12px; padding: 8px 14px; }
}

/* =========================================================
   Placeholder image convention
   ========================================================= */
.placeholder {
  background: var(--sytek-green-wash);
  border-radius: var(--r-card);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.placeholder span {
  font-size: 13px;
  font-weight: 400;
  color: var(--sytek-ink-faint);
  max-width: 22ch;
  line-height: 1.4;
}
.placeholder--portrait { aspect-ratio: 4/5; }
.placeholder--landscape { aspect-ratio: 4/3; }
.placeholder--square { aspect-ratio: 1/1; }
.placeholder--wide { aspect-ratio: 16/9; }
.section--deep .placeholder {
  background: rgba(245, 239, 227, 0.08);
}
.section--deep .placeholder span { color: rgba(245, 239, 227, 0.5); }

/* =========================================================
   Card variants
   ========================================================= */

/* Variant A — Tall portrait (treatment) */
/* Treatments section overrides */
.treatments .section-head {
  display: block;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.treatments .section-head .eyebrow {
  color: var(--sytek-green);
}
.treatments .section-head .h-section {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.treatments .section-head .lead {
  max-width: 60ch;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
}
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.treatments-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.treatments-grid--3col .card-a { aspect-ratio: 4 / 5; min-height: 0; }
.treatments-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.treatments-grid--4col .card-a { aspect-ratio: 3 / 4; min-height: 0; }

/* Button row — centered pair of CTAs */
.btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Teens Cost & Financing section — background doodle (hero-scale) */
.teens-cost { position: relative; overflow: hidden; }
.teens-cost::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-6.svg');
  mask-image: url('../images/branding/sytek-ortho-6.svg');
  -webkit-mask-size: 110% auto;
  mask-size: 110% auto;
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.teens-cost > .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .teens-cost::before {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center center;
    mask-position: center center;
    opacity: 0.3;
  }
}
@media (max-width: 1100px) {
  .treatments-grid--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .treatments-grid--3col { grid-template-columns: minmax(0, 1fr); }
  .treatments-grid--3col .card-a { aspect-ratio: auto; min-height: 260px; }
  .treatments-grid--4col { grid-template-columns: minmax(0, 1fr); }
  .treatments-grid--4col .card-a { aspect-ratio: auto; min-height: 260px; }
}
.treatments__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  flex-wrap: wrap;
}
@media (max-width: 800px) {
  .treatments-grid { grid-template-columns: minmax(0, 1fr); }
  .card-a { aspect-ratio: auto; min-height: 220px; width: 100%; }
}

/* Treatment card — image background with overlay */
.card-a {
  position: relative;
  border-radius: var(--r-card-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: var(--sytek-green);
  color: var(--sytek-cream);
}
.card-a__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-a:hover .card-a__bg {
  transform: scale(1.06);
}
.card-a:hover .card-a__arrow {
  background: var(--sytek-ink);
  color: var(--sytek-cream);
  transform: translate(2px, -2px);
}
.card-a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}
.card-a__topbar,
.card-a__body { position: relative; z-index: 2; }
.card-a__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-a__arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--sytek-ink);
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.card-a__arrow:hover,
.card-a__arrow:focus-visible {
  background: var(--sytek-ink);
  color: var(--sytek-cream);
  transform: translate(2px, -2px);
}
.card-a__body {
  margin-top: auto;
}
.card-a__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 8px;
}
.card-a__desc {
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  opacity: 0.92;
  max-width: 42ch;
}

/* Variant B — Stacked pill */
.card-b {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--sytek-cream);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-pill);
  padding: 16px 22px;
  min-height: 80px;
  transition: border var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.card-b:hover {
  border-width: 2px;
  border-color: var(--sytek-green);
  padding: 15px 21px; /* compensate */
}
.card-b:hover .card-b__arrow { transform: translateX(4px); }
.card-b__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--sytek-green-wash);
  color: var(--sytek-green);
  display: grid; place-items: center;
  font-size: 18px;
}
.card-b__body { flex: 1; min-width: 0; }
.card-b__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.card-b__meta {
  font-size: 13px;
  color: var(--sytek-ink-soft);
  margin: 2px 0 0;
}
.card-b__arrow {
  color: var(--sytek-green);
  font-size: 18px;
  transition: transform var(--t-fast) var(--ease);
}

/* Variant C — Quote cutout
   The "bite" is achieved by giving the card 0 radius on the top-left,
   and overlaying a cream-colored square (with a rounded bottom-right
   inner corner) that contains the patient's photo. Reads as die-cut. */
.card-c {
  position: relative;
  background: var(--sytek-green);
  color: var(--sytek-cream);
  border-radius: var(--r-card-lg);
  border-top-left-radius: 0;
  padding: 36px 36px 36px 36px;
  padding-top: 132px;       /* clear the cutout */
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-c__cutout {
  position: absolute;
  top: 0; left: 0;
  width: 116px; height: 116px;
  background: var(--sytek-cream);
  border-bottom-right-radius: 24px;
  padding: 14px 18px 18px 14px;
  /* The inner notch — push the card content away from the cutout */
}
.card-c__cutout::after {
  /* a tiny tucked corner ear that makes it look die-cut */
  content: "";
  position: absolute;
  top: 0; right: -16px;
  width: 16px; height: 16px;
  background:
    radial-gradient(circle at 100% 100%, transparent 16px, var(--sytek-cream) 16.5px);
}
.card-c__cutout::before {
  content: "";
  position: absolute;
  left: 0; bottom: -16px;
  width: 16px; height: 16px;
  background:
    radial-gradient(circle at 100% 100%, transparent 16px, var(--sytek-cream) 16.5px);
}
.card-c__cutout .placeholder {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  background: var(--sytek-green-soft);
  border-radius: 12px;
  padding: 8px;
}
.card-c__cutout .placeholder span {
  font-size: 10px;
  color: var(--sytek-green-deep);
  opacity: 0.7;
}
.card-c__quote {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.card-c__attr {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-green-soft);
}
.card-c__attr span + span::before { content: " · "; opacity: 0.6; }

/* Variant D — Stat reveal */
.card-d {
  background: #FFFFFF;
  border-radius: var(--r-card-lg);
  padding: 36px;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--sytek-border);
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.08);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-ok .card-d.reveal {
  transition: opacity 700ms var(--ease), transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-d:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -14px rgba(3, 25, 18, 0.22);
}
.card-d__top {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-ink-soft);
}
.card-d__number {
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--sytek-green-bright);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.card-d__plus {
  font-size: 0.32em;
  font-weight: 500;
  color: var(--sytek-green-bright);
  letter-spacing: -0.01em;
  vertical-align: baseline;
  position: static;
  top: auto;
  margin-left: 0.08em;
}
.card-d__unit {
  font-size: 0.32em;
  font-weight: 500;
  color: var(--sytek-green-bright);
  letter-spacing: -0.01em;
  margin-left: 0.18em;
}
.card-d__label {
  font-size: 19px;
  color: var(--sytek-ink);
  line-height: 1.5;
  margin: 0;
  max-width: 26ch;
  min-height: calc(2 * 1.5em);
}

/* Variant E — Inset photo */
.card-e {
  background: var(--sytek-cream-warm);
  border-radius: var(--r-card-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-e__photo {
  border-radius: 20px;
  aspect-ratio: 4/5;
}
.card-e__photo .placeholder { background: var(--sytek-green-wash); height: 100%; border-radius: 20px; }
.card-e__body {
  padding: 0 8px 8px;
}
.card-e__name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}
.card-e__role {
  font-size: 13px;
  color: var(--sytek-ink-soft);
  margin: 0;
}

/* =========================================================
   Section 2 — Trust grid (Variant B-style numbered cards)
   ========================================================= */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.trust-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .trust-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .trust-grid--3col { grid-template-columns: minmax(0, 1fr); }
}

.trust-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .trust-grid--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .trust-grid--4col { grid-template-columns: minmax(0, 1fr); }
}

.trust-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .trust-grid--2col { grid-template-columns: minmax(0, 1fr); }
}

/* Interactive card treatment for trust cards — matches home page's .step */
.trust-grid--cards .trust-card {
  border: 0;
  padding: 32px;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.08);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
a.trust-card { text-decoration: none; color: inherit; }
.trust-grid--cards .trust-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -14px rgba(3, 25, 18, 0.22);
}
.anim-ok .trust-grid--cards .trust-card.reveal {
  transition: opacity 700ms var(--ease), transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* FAQ head — left-justified heading with a right-aligned CTA link */
.faq-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 56px;
}
.faq-head .h-section { margin: 0; }
.faq-head__link { flex: 0 0 auto; padding-bottom: 8px; }
@media (max-width: 700px) {
  .faq-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
}

/* Stack section head — left-justified single column (eyebrow, heading, lead stacked) */
.section-head--stack {
  display: block;
  text-align: left;
  margin-bottom: 56px;
  max-width: 780px;
}
.section-head--stack .lead { max-width: 60ch; margin-bottom: 0; }

/* Centered section head — for centered eyebrow/heading/lead above cards */
.section-head--centered {
  display: block;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section-head--centered .eyebrow { margin: 0 0 16px; }
.section-head--centered .h-section {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.section-head--centered .lead {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
@media (max-width: 900px) {
  .section-head--centered { text-align: left; }
  .section-head--centered .eyebrow,
  .section-head--centered .h-section,
  .section-head--centered .lead { margin-left: 0; margin-right: 0; }
}
.trust-card {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--r-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  position: relative;
}
.trust-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--sytek-green);
  color: var(--sytek-cream);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.trust-card__icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trust-card__num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sytek-ink-soft);
  margin: 0 0 16px;
}

/* Trust section — centered head + green eyebrow */
.trust .section-head {
  display: block;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.trust .section-head .eyebrow {
  color: var(--sytek-green);
}
.trust .section-head .h-section {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.trust .section-head .lead {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.trust-card__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.2;
}
.trust-card__body {
  font-size: 19px;
  color: var(--sytek-ink);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* Wide variant — spans full grid row, horizontal layout */
.trust-card--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 48px;
  min-height: auto;
}
.trust-card--wide .trust-card__lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
}
.trust-card--wide .trust-card__lead .trust-card__icon {
  grid-row: 1 / 3;
  margin: 0;
}
.trust-card--wide .trust-card__lead .trust-card__num { grid-column: 2; margin: 0; align-self: end; }
.trust-card--wide .trust-card__lead .trust-card__title { grid-column: 2; margin: 0; align-self: start; }
.trust-card--wide .trust-card__detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trust-card--wide .trust-card__body { margin: 0; max-width: 56ch; }
.trust-card--wide .trust-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 1000px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-card--wide {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Doctor section (Sec 3) — inset photo on left, copy right
   ========================================================= */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: stretch;
}
.doc__photo-wrap {
  background: transparent;
  border-radius: 0;
  padding: 0;
  position: relative;
}
.doc__photo {
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}
.doc__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: 20px;
}
.doc .eyebrow { color: var(--sytek-green); font-size: 12px; line-height: inherit; }
.doc__copy p {
  font-size: 19px;
  color: var(--sytek-ink);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 56ch;
  text-wrap: pretty;
}
.doc__creds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--sytek-ink-soft);
  padding: 16px 0;
  border-top: 1px solid var(--sytek-border);
  border-bottom: 1px solid var(--sytek-border);
  margin: 28px 0;
}
.doc__creds .sep { color: var(--sytek-green-mid); }
.doc__quote {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  border-left: 3px solid var(--sytek-green);
  background: var(--sytek-green-wash);
  border-radius: 0 12px 12px 0;
  padding: 20px;
  margin: 0 0 28px;
  color: var(--sytek-ink);
  max-width: 50ch;
}
.doc__quote cite {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-ink-soft);
  font-weight: 500;
}
@media (max-width: 1000px) {
  .doc { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================================
   Stat row (Variant D × 3)
   ========================================================= */
.stats { padding: 20px 0; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 40px;
}
@media (max-width: 800px) {
  .stat-row { grid-template-columns: minmax(0, 1fr); padding: 0 25px; }
}

/* =========================================================
   Who We Serve — one-column horizontal cards
   ========================================================= */
.audience__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  text-align: left;
  margin-bottom: 56px;
}
.audience__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.audience__intro .h-section { max-width: 22ch; }
.audience__intro .audience__tabs { margin-top: 8px; }
@media (max-width: 800px) {
  .audience__head { grid-template-columns: 1fr; align-items: start; }
}
.audience__tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--sytek-cream-mid);
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--sytek-border);
}
.aud-tab {
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--sytek-ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.aud-tab:hover { color: var(--sytek-ink); }
.aud-tab.is-active {
  background: var(--sytek-green);
  color: var(--sytek-cream);
}
.aud-card[hidden] { display: none; }

.audience-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.aud-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--sytek-cream);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-card-lg);
  overflow: hidden;
  grid-template-areas: "photo body";
  min-height: 360px;
}
.aud-card--imgright {
  grid-template-areas: "body photo";
}
.aud-card--white { background: #FFFFFF; }
.aud-card--mid   { background: var(--sytek-cream-mid); }
.aud-card__photo {
  grid-area: photo;
  overflow: hidden;
}
.aud-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aud-card__body {
  grid-area: body;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.aud-card__pill {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aud-card__age {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sytek-ink-soft);
}
.aud-card__desc {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--sytek-ink);
  line-height: 1.25;
  margin: 0 0 28px;
  max-width: 28ch;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .audience-list { gap: 48px; }
  .aud-card,
  .aud-card--imgright {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "body";
    gap: 24px;
  }
  .aud-card__body { padding: 28px 25px; }
}

/* =========================================================
   Treatments carousel (Variant A cards)
   ========================================================= */
.carousel {
  position: relative;
}
.carousel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 40px;
}
.carousel__nav {
  display: flex;
  gap: 8px;
}
.carousel__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--sytek-green);
  background: transparent;
  color: var(--sytek-green);
  display: grid; place-items: center;
  font-size: 18px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.carousel__btn:hover { background: var(--sytek-green); color: var(--sytek-cream); }
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel__track-wrap {
  overflow: hidden;
  margin: 0 -40px;     /* bleed off container edges */
  padding: 8px 40px;
}
.carousel__track {
  display: flex;
  gap: 20px;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 0 24px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
  scroll-snap-align: start;
  width: calc((1280px - 80px - 40px) / 3.5); /* desktop: ~3.5 cards visible */
  max-width: 360px;
  flex-shrink: 0;
}
.carousel__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sytek-green-soft);
  border: 0;
  padding: 0;
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.carousel__dot.is-active {
  background: var(--sytek-green-bright);
  width: 24px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .carousel__track > * { width: 80vw; max-width: 320px; }
  .carousel__track-wrap { margin: 0 -20px; padding: 8px 20px; }
}

/* =========================================================
   Treatments index — 4 card grid
   ========================================================= */
.tx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .tx-grid { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   How it works (3 step)
   ========================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
  padding: 0;
  list-style: none;
}
.step {
  background: var(--sytek-cream);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-card);
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.08);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -14px rgba(3, 25, 18, 0.22);
}
.anim-ok .step.reveal {
  transition: opacity 700ms var(--ease), transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sytek-green);
  color: var(--sytek-cream);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.step__body {
  font-size: 19px;
  color: var(--sytek-ink);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}
.how .section-head { display: block; }
.how .section-head .h-section { max-width: 22ch; }
.how .section-head .lead { max-width: 60ch; margin-top: 16px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Testimonials carousel
   ========================================================= */
.testimonial-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0 -40px;
  padding: 8px 40px 24px;
}
.testimonial-row::-webkit-scrollbar { display: none; }
.testimonial-row > * {
  scroll-snap-align: start;
  flex: 0 0 calc((1280px - 80px - 40px) / 2.5);
  max-width: 460px;
}
@media (max-width: 900px) {
  .testimonial-row > * { flex: 0 0 80vw; max-width: 360px; }
  .testimonial-row { margin: 0 -20px; padding: 8px 20px 24px; }
}

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}
.review-meta__rating {
  display: flex;
  align-items: center;
  gap: 14px;
}
.review-meta__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--sytek-green);
  font-size: 18px;
}
.review-meta__score {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.review-meta__sub {
  font-size: 13px;
  color: var(--sytek-ink-soft);
  margin-top: 4px;
}

/* =========================================================
   FAQ accordion
   ========================================================= */
.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--sytek-border);
}
.faq__item {
  border-bottom: 1px solid var(--sytek-border);
}
.faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 28px 16px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--sytek-ink);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.faq__q:hover { color: var(--sytek-green); }
.faq__q:hover .faq__icon { background: var(--sytek-green); color: var(--sytek-cream); }
.faq__item.is-open .faq__q { color: var(--sytek-green); }
.faq__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--sytek-green);
  color: var(--sytek-green);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 14px;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background: var(--sytek-green);
  color: var(--sytek-cream);
}
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms var(--ease);
}
.faq__a-inner {
  font-size: 19px;
  color: var(--sytek-ink);
  line-height: 1.55;
  padding: 0 56px 28px 0;
  max-width: 70ch;
  text-wrap: pretty;
}
.faq__item.is-open .faq__a { max-height: 320px; }

/* =========================================================
   Local presence
   ========================================================= */
.local {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 60px;
  align-items: start;
}
.local__copy p {
  font-size: 18px;
  color: var(--sytek-ink-soft);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 50ch;
  text-wrap: pretty;
}
.local__copy .eyebrow {
  color: var(--sytek-green);
  font-size: 12px;
  line-height: inherit;
  margin: 0 0 18px;
}
.communities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0;
}
.communities .pill { background: transparent; border: 1px solid var(--sytek-border); color: var(--sytek-ink); }
.local__info {
  background: var(--sytek-cream);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-card);
  padding: 32px;
}
.local__info h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 18px;
}
.local__info dl {
  display: grid;
  gap: 18px;
  margin: 0;
}
.local__info dt {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-ink-soft);
  margin-bottom: 4px;
}
.local__info dd {
  font-size: 15px;
  color: var(--sytek-ink);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .local { grid-template-columns: 1fr; }
}

/* =========================================================
   Final CTA
   ========================================================= */
#consult { padding: 0; position: relative; overflow: hidden; }
#consult::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green);
  -webkit-mask-image: url('../images/branding/sytek-ortho-4.svg');
  mask-image: url('../images/branding/sytek-ortho-4.svg');
  -webkit-mask-size: auto 320%;
  mask-size: auto 320%;
  -webkit-mask-position: 80% center;
  mask-position: 80% center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.consult__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 32px;
  width: 100%;
}
.consult__content {
  padding: 120px 0 120px;
  padding-left: max(40px, calc((100vw - 1280px) / 2 + 40px));
  display: flex;
  align-items: center;
}
.consult__media {
  position: relative;
  align-self: stretch;
  overflow: visible;
}
.consult__media img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  pointer-events: none;
}
@media (max-width: 900px) {
  .consult__layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 0;
  }
  .consult__content {
    padding: 64px 20px 32px;
  }
  .consult__media {
    height: auto;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }
  .consult__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    margin: 0;
  }
  .final-cta { max-width: 100%; }
  .final-cta h2 { font-size: clamp(28px, 8vw, 40px); }
}
.final-cta {
  text-align: left;
  max-width: 560px;
}
.final-cta h2 {
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0 0 18px;
  text-wrap: balance;
}
.final-cta h2 .accent { color: var(--sytek-green); font-weight: 700; }
.final-cta .lead {
  margin: 0 0 32px;
  text-align: left;
  font-size: 19px;
}
.final-cta__row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.final-cta__buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.final-cta__phone {
  font-size: 15px;
  color: var(--sytek-ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease);
}
.final-cta__phone:hover,
.final-cta__phone:focus-visible { color: var(--sytek-green); }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--sytek-cream-mid);
  padding: 80px 0 40px;
  border-top: 1px solid var(--sytek-border);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}
.footer__brand p {
  font-size: 15px;
  color: var(--sytek-ink-soft);
  max-width: 32ch;
  line-height: 1.5;
  margin: 16px 0 0;
}
.footer__col h4 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-green);
  margin: 0 0 18px;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col li a {
  font-size: 15px;
  color: var(--sytek-ink);
  transition: color var(--t-fast) var(--ease);
}
.footer__col li a:hover { color: var(--sytek-green); }
.footer__cta { margin-top: 18px; align-self: flex-start; }

/* Social icons in footer brand column */
.footer__socials {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.footer__socials a {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sytek-border);
  color: var(--sytek-ink);
  background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer__socials a:hover,
.footer__socials a:focus-visible {
  background: var(--sytek-green);
  color: var(--sytek-cream);
  border-color: var(--sytek-green);
}
.footer__socials svg { width: 16px; height: 16px; fill: currentColor; }
.footer__socials svg[stroke] { fill: none; }

/* Contact column — icon + text rows */
.footer__col--contact ul { gap: 14px; }
.footer__col--contact li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15px;
  font-weight: 500;
  color: var(--sytek-ink);
  line-height: 1.5;
}
.footer__col--contact li a {
  font-size: 15px;
  font-weight: 500;
  color: var(--sytek-ink);
}
.footer__contact-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--sytek-green);
  margin-top: 2px;
}
.footer__contact-icon svg { width: 18px; height: 18px; }
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--sytek-border);
  font-size: 13px;
  color: var(--sytek-ink-soft);
}
.footer__base a {
  color: inherit;
  transition: color var(--t-fast) var(--ease);
}
.footer__base a:hover { color: var(--sytek-green); }
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__base { flex-direction: column; gap: 12px; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer__cta { align-self: stretch; }
}

/* =========================================================
   Motion: reveal
   Animation initial states only apply once JS confirms page
   is visible (avoids invisible-content stuck state if the
   document timeline is paused, e.g. background tab).
   ========================================================= */
.anim-ok .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.anim-ok .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.anim-ok .reveal[data-stagger="1"] { transition-delay: 80ms; }
.anim-ok .reveal[data-stagger="2"] { transition-delay: 160ms; }
.anim-ok .reveal[data-stagger="3"] { transition-delay: 240ms; }
.anim-ok .reveal[data-stagger="4"] { transition-delay: 320ms; }
.anim-ok .reveal[data-stagger="5"] { transition-delay: 400ms; }

/* Hero reveal (initial page-load) */
.anim-ok .hero-rev {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-rev 600ms var(--ease) forwards;
}
.anim-ok .hero-rev[data-d="0"]   { animation-delay: 0ms; }
.anim-ok .hero-rev[data-d="100"] { animation-delay: 100ms; }
.anim-ok .hero-rev[data-d="200"] { animation-delay: 200ms; }
.anim-ok .hero-rev[data-d="250"] { animation-delay: 250ms; }
.anim-ok .hero-rev[data-d="300"] { animation-delay: 300ms; }
.anim-ok .hero-rev[data-d="400"] { animation-delay: 400ms; }
@keyframes hero-rev {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .anim-ok .reveal, .anim-ok .hero-rev {
    transition-duration: 200ms;
    animation-duration: 200ms;
    transform: none !important;
  }
  .scroll-progress { display: none; }
}

/* =========================================================
   Hero v2 — Treatment picker (alt hero design)
   ========================================================= */
.hero2 {
  padding: 250px 0 140px;
  position: relative;
  overflow: hidden;
}
.hero2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-1.svg');
  mask-image: url('../images/branding/sytek-ortho-1.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: calc(100% + 280px) -100px;
  mask-position: calc(100% + 280px) -100px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.hero2__wrap { position: relative; z-index: 1; }

/* "Find your path" (audience) section embellishment — sytek-ortho-4 doodle */
.audience { position: relative; overflow: hidden; }
.audience::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-2.svg');
  mask-image: url('../images/branding/sytek-ortho-2.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
  z-index: 0;
}
.audience > .container { position: relative; z-index: 1; }

/* "What to expect" (how) section embellishment — sytek-ortho-3 doodle */
.how { position: relative; overflow: hidden; }
.how::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-3.svg');
  mask-image: url('../images/branding/sytek-ortho-3.svg');
  -webkit-mask-size: 70% auto;
  mask-size: 70% auto;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scale(-1, -1);
  pointer-events: none;
  z-index: 0;
}
.how > .container { position: relative; z-index: 1; }

/* Mobile: all section doodles center center + cover */
@media (max-width: 900px) {
  .hero2::before,
  .audience::before,
  .how::before {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center center;
    mask-position: center center;
  }
}
.hero2__wrap,
.hero2__card {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Headline + right intro column */
.hero2__head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
  padding: 0 40px;
}
.hero2__title {
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.hero2__title .br-mobile,
.hero2__title .sp-mobile { display: none; }
.hero2__title .br-desktop,
.hero2__title .sp-desktop { display: inline; }
@media (max-width: 900px) {
  .hero2__title { font-size: 44px; text-wrap: pretty; }
  .hero2__title .br-mobile,
  .hero2__title .sp-mobile { display: inline; }
  .hero2__title .br-desktop,
  .hero2__title .sp-desktop { display: none; }
}
.hero2__title .vcr-mask { line-height: 1.05; }
.hero2__title .accent { color: var(--sytek-green); font-weight: 700; }

.hero2__heading-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero2__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin: 0;
  font-size: 13.5px;
  color: var(--sytek-ink-soft);
}
.hero2__trust .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sytek-green-mid);
  display: inline-block;
}

.hero2__meta {
  font-size: 13px;
  color: var(--sytek-ink-soft);
}

.hero2__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 360px;
  justify-self: end;
}
.hero2__headshot {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--sytek-border);
}
.hero2__headshot .placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sytek-green-soft) 0%, var(--sytek-green-wash) 100%);
}
.hero2__headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 50%;
}
.hero2__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--sytek-ink);
  margin: 0;
  text-wrap: pretty;
}

/* Carousel */
.hero2__carousel {
  position: relative;
}
.hero2__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 40px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
}
.hero2__slide:first-child { margin-left: 40px; }
.hero2__slide:last-child  { margin-right: 40px; }
.hero2__track::-webkit-scrollbar { display: none; }

/* Slide base */
.hero2__slide {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 320px;
  height: 460px;
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}
.hero2__slide-eyebrow {
  align-self: flex-start;
  width: max-content;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 auto 0 0;
  white-space: nowrap;
}
.hero2__slide--accent .hero2__slide-eyebrow {
  background: rgba(3, 110, 73, 0.1);
  color: var(--sytek-green-deep);
}
/* Eyebrow inside photo-card overlay — no auto margin push */
.hero2__slide--photo .hero2__slide-eyebrow {
  margin: 0;
  background: rgba(255, 255, 255, 0.22);
  color: var(--sytek-cream);
}
.hero2__slide-body {
  margin: auto 0 24px;
}
.hero2__slide-title {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 12px;
  text-wrap: balance;
}
.hero2__slide-desc {
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  opacity: 0.85;
}

/* Featured slide (Sytek green) */
.hero2__slide--featured {
  background: var(--sytek-green-bright);
  color: var(--sytek-cream);
}
.hero2__slide--featured.hero2__slide--alt {
  background: var(--sytek-green);
}
.hero2__slide-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.hero2__slide-rows li + li { border-top: 1px solid rgba(245, 239, 227, 0.25); }
.hero2__slide-rows a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  color: var(--sytek-cream);
  font-size: 15px;
}
.hero2__slide-rows a:hover { opacity: 0.85; }
.hero2__row-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(245, 239, 227, 0.15);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}
.hero2__slide-rows a:hover .hero2__row-arrow { transform: translate(2px, -2px); }

/* Photo slide */
.hero2__slide--photo {
  padding: 0;
  background: var(--sytek-green-wash);
}
.hero2__slide-photo {
  position: absolute;
  inset: 0;
}
.hero2__slide-photo .placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--sytek-green);
}
.hero2__slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero2__slide-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 28px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  color: var(--sytek-cream);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero2__slide-overlay .hero2__slide-title { margin-bottom: 0; }
.hero2__slide--photo .hero2__slide-title { color: var(--sytek-cream); }
.hero2__slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  width: max-content;
}
.hero2__cta-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245, 239, 227, 0.18);
  display: grid;
  place-items: center;
  transition: transform var(--t-fast) var(--ease);
}
.hero2__slide-cta:hover .hero2__cta-arrow { transform: translate(2px, -2px); }

/* Accent slide (light cream/green) */
.hero2__slide--accent {
  background: var(--sytek-green-soft);
  color: var(--sytek-ink);
}
.hero2__slide--accent.hero2__slide--cream {
  background: var(--sytek-cream-warm);
}
.hero2__slide--accent .hero2__cta-arrow {
  background: var(--sytek-ink);
  color: var(--sytek-cream);
}

/* Nav arrows */
.hero2__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 0 40px;
}
.hero2__nav .carousel__dots {
  margin: 0;
  justify-content: flex-start;
}
.hero2__nav-arrows {
  display: flex;
  gap: 10px;
}

/* Hero entrance animation — auto-plays once on page load via .anim-ok */
.hero2-enter { opacity: 0; transform: translateY(20px); }
.anim-ok .hero2-enter {
  animation: hero2-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}
@keyframes hero2-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero2-enter, .anim-ok .hero2-enter { animation: none; opacity: 1; transform: none; }
}
.hero2__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--sytek-border);
  background: transparent;
  color: var(--sytek-ink);
  font-size: 18px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero2__nav-btn:hover {
  background: var(--sytek-ink);
  color: var(--sytek-cream);
  border-color: var(--sytek-ink);
}
.hero2__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .hero2 { padding: 110px 0 64px; }
  .hero2__head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
    padding: 0 25px;
  }
  .hero2__intro { justify-self: start; max-width: none; text-align: left; }
  .hero2__track { padding: 4px 0 8px; scroll-padding-left: 15px; }
  .hero2__slide:first-child { margin-left: 15px; }
  .hero2__slide:last-child  { margin-right: 15px; }
  .hero2__nav { padding: 0 25px; }
  .hero2__slide { flex: 0 0 82%; min-width: 0; height: 420px; }
}

/* =========================================================
   Reviews — single-column blockquotes with left-bar accent
   ========================================================= */
.reviews__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 80px;
  align-items: start;
}
.reviews__intro {
  position: sticky;
  top: 200px;
}
.reviews .section-head {
  display: block;
  text-align: left;
  max-width: none;
  margin: 0;
}
.reviews .section-head .h-section {
  max-width: 20ch;
  margin: 0;
}
.reviews__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media (max-width: 900px) {
  .reviews__layout { grid-template-columns: 1fr; gap: 40px; }
  .reviews__intro { position: static; }
}
.review {
  position: relative;
  padding-left: 24px;
  margin: 0;
  max-width: 36rem;
}
.review::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--sytek-green);
}
.review__quote {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sytek-ink);
  margin: 0;
  text-wrap: pretty;
}
.review__footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.review__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sytek-green-soft);
  color: var(--sytek-green-deep);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--sytek-border);
  flex-shrink: 0;
}
.review__cite {
  font-style: normal;
  font-weight: 500;
  color: var(--sytek-ink);
}
.review__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sytek-ink-faint);
  display: inline-block;
}
.review__role {
  color: var(--sytek-ink-soft);
}

/* =========================================================
   Reviews v2 — full-bleed infinite marquee
   ========================================================= */
.reviews2__head {
  display: block;
  text-align: left;
  margin: 0 0 56px;
}
.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 8px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); } /* offset by half a gap to keep loop seamless */
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

.t-card {
  flex: 0 0 360px;
  background: #FFFFFF;
  border: 0;
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 240px;
}
.t-card__quote {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--sytek-ink);
  margin: 0;
  text-wrap: pretty;
}
.t-card__footer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.t-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sytek-green-soft);
  color: var(--sytek-green-deep);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--sytek-border);
  flex-shrink: 0;
}
.t-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--sytek-ink);
}
.t-card__role {
  font-size: 13px;
  color: var(--sytek-ink-soft);
  margin-top: 2px;
}

/* =========================================================
   Visit — condensed horizontal info bar (replaces tall Local section)
   ========================================================= */
.visit { padding: 60px 0; }
.visit__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 48px;
  align-items: center;
  background: var(--sytek-cream-mid);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-card-lg);
  padding: 36px 44px;
}
.visit__intro .eyebrow { margin: 0 0 8px; }
.visit__title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  max-width: 18ch;
  text-wrap: pretty;
}
.visit__title .accent { color: var(--sytek-green); }
.visit__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
}
.visit__meta-item dt {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-ink-soft);
  margin: 0 0 6px;
}
.visit__meta-item dd {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--sytek-ink);
}
.visit__meta-item dd address { font-style: normal; }
.visit__meta-item dd a { transition: color var(--t-fast) var(--ease); }
.visit__meta-item dd a:hover { color: var(--sytek-green); }
.visit__cta { justify-self: end; }
@media (max-width: 1000px) {
  .visit__bar {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }
  .visit__cta { justify-self: start; }
}
@media (max-width: 600px) {
  .visit__meta { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================
   Vertical Cut Reveal — characters slide up from below a clip mask
   ========================================================= */
[data-vcr] { visibility: visible; }
.vcr-word {
  display: inline-flex;
  white-space: nowrap;
}
.vcr-mask {
  display: inline-block;
  overflow: hidden;
  line-height: 1.15;
  vertical-align: -0.1em;
}
.vcr-char {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.vcr-trigger .vcr-char {
  animation: vcr-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--vcr-delay, 0ms);
}
@keyframes vcr-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vcr-char { transform: none; animation: none !important; }
}

/* =========================================================
   Interior page hero — first section on non-home pages
   ========================================================= */
.page-hero {
  padding-top: 180px;
  padding-bottom: 100px;
}
@media (max-width: 900px) {
  .page-hero { padding-top: 110px; padding-bottom: 64px; }
}

/* Doc structure used as a full page hero (About) */
.doc--hero .h-section {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.doc--hero .doc__copy p {
  font-size: 20px;
  max-width: 56ch;
}
.doc--hero .doc__copy .btn { margin-top: 12px; }

/* =========================================================
   Prose blocks — long-form text sections (About story, community)
   ========================================================= */
.prose { max-width: 68ch; }
.prose p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--sytek-ink);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }
.prose p.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-green);
  line-height: 1.55;
  margin: 0 0 18px;
}

/* On the mint (soft-green) background, body copy reads as full-ink black for contrast */
.section--soft .prose p:not(.eyebrow),
.section--soft .creds-list li,
.section--soft .lead { color: var(--sytek-ink); }

/* =========================================================
   Credentials list — bulleted training/credentials
   ========================================================= */
.creds-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  max-width: 60ch;
}
.creds-list li {
  position: relative;
  padding-left: 26px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--sytek-ink);
}
.creds-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sytek-green);
}

/* Icon variant — replaces the default dot with an inline SVG check */
.creds-list--icons li { padding-left: 40px; }
.creds-list--icons li::before { display: none; }
.creds-list__icon {
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sytek-green);
  color: var(--sytek-cream);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.creds-list__icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* On green bg, invert the icon so it reads against the section */
.section--green .creds-list__icon {
  background: var(--sytek-cream);
  color: var(--sytek-green);
}

/* =========================================================
   Content flags — visible [CLIENT TO CONFIRM] / [NEEDS] blocks
   ========================================================= */
.flag {
  display: block;
  padding: 14px 18px;
  background: var(--sytek-green-soft);
  border-left: 3px solid var(--sytek-green);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--sytek-green-deep);
  line-height: 1.5;
  max-width: 68ch;
}
.flag strong { color: var(--sytek-green-deep); }
.flag strong {
  color: var(--sytek-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* =========================================================
   Steps — 6-step variant (referral process)
   ========================================================= */
.steps--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  .steps--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .steps--six { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Referral form
   ========================================================= */
.ref-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 24px;
  max-width: 900px;
  margin: 0 auto;
  background: var(--sytek-cream);
  border: 0;
  border-radius: var(--r-card);
  padding: 40px;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.08);
}
.ref-form__group--wide { grid-column: 1 / -1; }
.ref-form__intro {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sytek-border);
}
.ref-form__intro .eyebrow { margin: 0 0 16px; }
.ref-form__intro .h-section {
  margin: 0 0 16px;
  max-width: 22ch;
}
.ref-form__intro .lead {
  margin: 0;
  max-width: 60ch;
}
.ref-form__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 24px;
}
.ref-form__section-title {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-green);
  margin: 8px 0 0;
}
.ref-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ref-form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sytek-ink);
}
.ref-form__field input[type="text"],
.ref-form__field input[type="tel"],
.ref-form__field input[type="email"],
.ref-form__field input[type="date"],
.ref-form__field input[type="file"],
.ref-form__field select,
.ref-form__field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--sytek-ink);
  padding: 12px 14px;
  border: 1px solid var(--sytek-border);
  border-radius: 10px;
  background: var(--sytek-cream);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ref-form__field input:focus,
.ref-form__field select:focus,
.ref-form__field textarea:focus {
  outline: none;
  border-color: var(--sytek-green);
  box-shadow: 0 0 0 3px rgba(3, 110, 73, 0.15);
}
.ref-form__field textarea {
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
}
.ref-form__hint {
  font-size: 12px;
  color: var(--sytek-ink-soft);
}
.ref-form__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ref-form__micro {
  font-size: 13px;
  color: var(--sytek-ink-soft);
  margin: 0;
  max-width: 40ch;
}
@media (max-width: 800px) {
  .ref-form { padding: 24px; grid-template-columns: minmax(0, 1fr); }
  .ref-form__row { grid-template-columns: minmax(0, 1fr); }
  .ref-form__actions { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   Map wrapper (Contact page)
   ========================================================= */
.map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--sytek-border);
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.08);
}
.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-wrap--square { aspect-ratio: 1 / 1; }
@media (max-width: 800px) {
  .map-wrap { aspect-ratio: 4 / 5; }
  .map-wrap--square { aspect-ratio: 1 / 1; }
}

/* =========================================================
   Timeline — vertical process chronology with connecting line
   ========================================================= */
.timeline {
  --timeline-progress: 0px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  position: relative;
}
.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  left: 23px;
  top: 24px;
  width: 2px;
  z-index: 0;
  pointer-events: none;
}
.timeline__step { z-index: 1; }
.timeline__marker { z-index: 2; }
.timeline::before {
  bottom: 24px;
  background: var(--sytek-border);
}
.timeline::after {
  height: var(--timeline-progress);
  background: var(--sytek-green);
  transition: height 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline__step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 28px;
  position: relative;
  padding-bottom: 40px;
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step:last-child::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 48px;
  bottom: -40px;
  width: 4px;
  background: var(--sytek-cream);
  z-index: 0;
}
@media (max-width: 600px) {
  .timeline__step:last-child::before { left: 18px; top: 40px; }
}
.timeline__marker {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sytek-cream);
  color: var(--sytek-ink-soft);
  border: 2px solid var(--sytek-border);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
  transition: background 350ms var(--ease), color 350ms var(--ease), border-color 350ms var(--ease);
}
.timeline__step.is-active .timeline__marker {
  background: var(--sytek-green);
  color: var(--sytek-cream);
  border-color: var(--sytek-green);
}
.timeline__content { padding-top: 8px; }
.timeline__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.2;
  color: var(--sytek-ink);
  transition: color 350ms var(--ease);
}
.timeline__step.is-active .timeline__title { color: var(--sytek-green); }
.timeline__body {
  font-size: 19px;
  color: var(--sytek-ink);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .timeline__step { grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
  .timeline__marker { width: 40px; height: 40px; font-size: 13px; }
  .timeline::before,
  .timeline::after { left: 19px; }
  .timeline__title { font-size: 19px; }
}

/* =========================================================
   Visit info — 2-col dl for address / phone / email / hours
   Used alongside a map in the combined visit + map section
   ========================================================= */
.visit-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0;
}
.visit-info__item dt {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-green);
  margin: 0 0 8px;
}
.visit-info__item dd {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  color: var(--sytek-ink);
  letter-spacing: -0.005em;
}
.visit-info__item dd address { font-style: normal; }
.visit-info__item dd a {
  color: var(--sytek-ink);
  transition: color var(--t-fast) var(--ease);
}
.visit-info__item dd a:hover { color: var(--sytek-green); }
@media (max-width: 600px) {
  .visit-info { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* =========================================================
   Who We Serve hub — audience card grid
   ========================================================= */
.wws-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.wws-card {
  display: block;
  background: var(--sytek-cream);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-card-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.08);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Beat .anim-ok .reveal's transition so box-shadow eases on hover */
.anim-ok .wws-card {
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms;
}
.wws-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -14px rgba(3, 25, 18, 0.22);
}
.wws-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sytek-cream-mid);
}
.wws-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wws-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.wws-card__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: var(--sytek-ink);
}
.wws-card__cta {
  align-self: flex-start;
  transition: color 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wws-card__cta::after {
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wws-card:hover .wws-card__cta { color: var(--sytek-green-deep); }
.wws-card:hover .wws-card__cta::after { transform: translateX(4px); }
.wws-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) {
  .wws-grid { grid-template-columns: minmax(0, 1fr); }
  .wws-grid--2col { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Minimal nav — used on /book/ and /thank-you/
   ========================================================= */
.nav--minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--sytek-cream);
  border-bottom: 1px solid var(--sytek-border);
}
.nav--minimal .nav__links,
.nav--minimal .nav__cta,
.nav--minimal .nav__hamburger,
.nav--minimal .drawer { display: none !important; }
.nav__minimal-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sytek-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 18px;
  border: 1px solid var(--sytek-border);
  border-radius: 999px;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.nav__minimal-phone:hover {
  background: var(--sytek-green);
  color: #fff;
  border-color: var(--sytek-green);
}
.nav__minimal-phone svg { display: block; }
@media (max-width: 900px) {
  .nav--minimal { padding: 16px 20px; }
  .nav--minimal .brand-logo { height: 36px; width: auto; }
  .nav__minimal-phone { padding: 8px 14px; font-size: 14px; }
  .nav__minimal-phone span { display: none; }
}

/* =========================================================
   Book a Consultation — form wrapper + alt paths
   ========================================================= */
.book-form-wrap {
  max-width: 720px;
  margin: 0 auto;
}
.book-form-wrap .section-head { text-align: center; margin-bottom: 40px; }
.book-form-wrap .section-head .eyebrow,
.book-form-wrap .section-head .h-section { text-align: center; }
.book-form { display: flex; flex-direction: column; gap: 16px; }
.book-form .contact-form__submit { margin-top: 8px; width: 100%; }
.book-alt {
  margin-top: 24px;
  text-align: center;
  color: var(--sytek-ink-soft);
  font-size: 15px;
}
.book-alt__line { margin: 6px 0; }
.book-alt__line a { color: var(--sytek-green); font-weight: 600; }
.contact-form__optional { color: var(--sytek-ink-soft); font-weight: 400; font-size: 14px; }
.flag--inline {
  display: inline-block;
  background: rgba(240, 194, 76, 0.16);
  border: 1px dashed rgba(180, 130, 20, 0.4);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #7a5a10;
  margin-left: 4px;
}
@media (max-width: 900px) {
  .book-form-wrap { max-width: 100%; }
}

/* =========================================================
   Thank You — confirmation hero
   ========================================================= */
.ty-hero {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0 24px;
}
.ty-hero__check {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--sytek-cream);
  color: var(--sytek-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 32px -12px rgba(3, 110, 73, 0.4);
}
.ty-hero .eyebrow,
.ty-hero .page-hero__title,
.ty-hero .page-hero__lead { text-align: center; }
.ty-hero .page-hero__title { margin-left: auto; margin-right: auto; }
.ty-hero .page-hero__lead { max-width: 62ch; margin-left: auto; margin-right: auto; }
.ty-hero__cta { margin-top: 8px; }

/* =========================================================
   Pull quote — Lauren voice block for editorial sections
   ========================================================= */
.pull-quote {
  max-width: 68ch;
  margin: 0 auto;
  padding: 32px 36px;
  background: var(--sytek-cream);
  border-left: 4px solid var(--sytek-green);
  border-radius: 0 20px 20px 0;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.08);
}

/* Portrait variant — Dr. Sytek image replaces green left border, unified card */
.pull-quote--portrait {
  max-width: 820px;
  padding: 0;
  border-left: 0;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
.pull-quote--portrait .pull-quote__photo {
  position: relative;
  min-height: 100%;
}
.pull-quote--portrait .pull-quote__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pull-quote--portrait .pull-quote__body {
  padding: 32px 36px;
  border-left: 4px solid var(--sytek-green);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pull-quote--portrait .pull-quote__body p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sytek-ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.pull-quote--portrait .pull-quote__body cite {
  display: block;
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-ink-soft);
  font-weight: 500;
}
@media (max-width: 720px) {
  .pull-quote--portrait {
    grid-template-columns: minmax(0, 1fr);
  }
  .pull-quote--portrait .pull-quote__photo {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
  .pull-quote--portrait .pull-quote__photo img { position: static; }
  .pull-quote--portrait .pull-quote__body {
    border-left: 0;
    border-top: 4px solid var(--sytek-green);
  }
}

/* Split-section modifier: push body column top down to align with H2 (skips eyebrow height) */
.split-section--body-top .split-section__body {
  padding-top: calc(12px * 1.55 + 18px);
  margin-top: 0;
}
@media (max-width: 800px) {
  .split-section--body-top .split-section__body { padding-top: 0; }
}

/* Kids First Visit section — doodle overlapping behind image */
.kids-visit { position: relative; overflow: hidden; }
.kids-visit::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-6.svg');
  mask-image: url('../images/branding/sytek-ortho-6.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.kids-visit > .container { position: relative; z-index: 1; }
.kids-visit .split-section__photo { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .kids-visit::before {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center center;
    mask-position: center center;
    opacity: 0.3;
  }
}

/* Kids Phase 1 section — background doodle */
.kids-phase { position: relative; overflow: hidden; }
.kids-phase::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-5.svg');
  mask-image: url('../images/branding/sytek-ortho-5.svg');
  -webkit-mask-size: 60% auto;
  mask-size: 60% auto;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.kids-phase > .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .kids-phase::before {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center center;
    mask-position: center center;
    opacity: 0.35;
  }
}
.pull-quote p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sytek-ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.pull-quote p:last-of-type { margin-bottom: 20px; }
.pull-quote cite {
  display: block;
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-ink-soft);
  font-weight: 500;
}

/* =========================================================
   Contact form — hero-embedded card
   ========================================================= */
.contact-form {
  background: var(--sytek-cream);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.25);
  color: var(--sytek-ink);
}
.contact-form__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--sytek-ink);
}
.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.contact-form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sytek-ink);
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
  font: inherit;
  font-size: 15px;
  color: var(--sytek-ink);
  padding: 12px 14px;
  border: 1px solid var(--sytek-border);
  border-radius: 10px;
  background: #FFFFFF;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--sytek-green);
  box-shadow: 0 0 0 3px rgba(3, 110, 73, 0.15);
}
.contact-form textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
}
.contact-form__submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}
/* Hero variant when right column is a form — give form more room */
.page-hero--form .page-hero__grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: start;
}
.page-hero--form .page-hero__content { padding-top: 32px; }
.page-hero--form .page-hero__media {
  max-width: none;
  justify-self: stretch;
}
.page-hero--form .hero-checklist { margin: 4px 0 0; }
.page-hero--form .hero-checklist .creds-list__icon svg { stroke-width: 3; }
/* Swap doodle for the form hero variant */
.section--green.page-hero.page-hero--form::before {
  -webkit-mask-image: url('../images/branding/sytek-ortho-2.svg');
  mask-image: url('../images/branding/sytek-ortho-2.svg');
}
/* Swap doodle for the referrals hero */
.section--green.page-hero.page-hero--referrals::before {
  -webkit-mask-image: url('../images/branding/sytek-ortho-6.svg');
  mask-image: url('../images/branding/sytek-ortho-6.svg');
}

/* =========================================================
   Treatment "Who this is for" section — doodle behind image
   ========================================================= */
.tx-who { position: relative; overflow: hidden; }
.tx-who::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green);
  -webkit-mask-image: url('../images/branding/sytek-ortho-4.svg');
  mask-image: url('../images/branding/sytek-ortho-4.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(-1);
  transform-origin: center;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.tx-who > .container { position: relative; z-index: 1; }
.tx-who .split-section__photo { position: relative; z-index: 2; }

/* =========================================================
   Feature grid — 3-column info blocks (used on treatment pages)
   ========================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
}
.feature-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sytek-green);
  color: var(--sytek-cream);
  display: grid;
  place-items: center;
  margin: 0 0 16px;
}
.feature-item__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature-item__num {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sytek-green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* Timeline — white container variant for treatment pages */
.timeline--card {
  background: var(--sytek-cream);
  border-radius: var(--r-card);
  padding: 48px 40px;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.06);
  max-width: 800px;
  margin: 0 auto;
}
.timeline--card .timeline__step:last-child::before { background: var(--sytek-cream); }
.timeline--card .timeline__marker { box-shadow: 0 0 0 6px var(--sytek-cream); }
@media (max-width: 700px) {
  .timeline--card { padding: 32px 24px; }
}
.feature-grid--centered .feature-item { text-align: center; align-items: center; }
.feature-grid--centered .feature-item__icon { margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
  .feature-grid--centered .feature-item { text-align: left; align-items: flex-start; }
  .feature-grid--centered .feature-item__icon { margin-left: 0; margin-right: 0; }
}

/* Thank-you page — Return Home stays inline on mobile (don't stretch full width) */
@media (max-width: 900px) {
  .section-cta.ty-return { justify-content: flex-start; }
  .section-cta.ty-return .btn { width: auto; }
}

.feature-item__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--sytek-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.feature-item__body {
  font-size: 19px;
  line-height: 1.55;
  color: var(--sytek-ink);
  margin: 0;
}
.feature-item__body a { color: var(--sytek-green); font-weight: 600; }
.feature-item__body a:hover { color: var(--sytek-green-deep); }
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* Section CTA — centered button under grids/containers */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .section-cta { margin-top: 32px; }
  .section-cta .btn { width: 100%; }
}

/* Inline text-link CTA row — centered desktop, left-aligned on mobile */
.cta-row-inline {
  text-align: center;
  margin-top: 24px;
}
@media (max-width: 767px) {
  .cta-row-inline { text-align: left; }
}

/* Referral Partners — Submit form section doodle */
.ref-submit { position: relative; overflow: hidden; }
.ref-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green);
  -webkit-mask-image: url('../images/branding/sytek-ortho-6.svg');
  mask-image: url('../images/branding/sytek-ortho-6.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: top right;
  mask-position: top right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.ref-submit > .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .page-hero--form .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Force standard primary styling on the form submit even inside green hero */
.section--green.page-hero .contact-form .btn--primary {
  background: var(--sytek-green);
  color: var(--sytek-cream);
  border-color: var(--sytek-green);
}
.section--green.page-hero .contact-form .btn--primary:hover {
  background: var(--sytek-green-deep);
  border-color: var(--sytek-green-deep);
}
.contact-form__micro {
  font-size: 13px;
  color: var(--sytek-ink-soft);
  margin: 0;
  text-align: center;
}
@media (max-width: 600px) {
  .contact-form { padding: 24px; }
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Interior page hero — green bg, standard for internal pages
   ========================================================= */
.section--green.page-hero {
  background: var(--sytek-green);
  color: var(--sytek-cream);
  padding-top: 180px;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}
.section--green.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-cream);
  -webkit-mask-image: url('../images/branding/sytek-ortho-1.svg');
  mask-image: url('../images/branding/sytek-ortho-1.svg');
  -webkit-mask-size: auto 130%;
  mask-size: auto 130%;
  -webkit-mask-position: calc(100% + 280px) -100px;
  mask-position: calc(100% + 280px) -100px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(-1);
  transform-origin: center;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.section--green.page-hero > .container { position: relative; z-index: 1; }

/* Book page — Why it matters: PNG cutout bleeds to section top/right/bottom (mirrors the consult CTA layout) */
.book-why { padding: 0; position: relative; overflow: hidden; }
.book-why__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 32px;
  width: 100%;
}
.book-why__content {
  padding-top: 120px;
  padding-bottom: 120px;
  padding-left: max(40px, calc((100vw - 1280px) / 2 + 40px));
  padding-right: 20px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 640px;
}
.book-why__media {
  position: relative;
  align-self: stretch;
  overflow: visible;
}
.book-why__media img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  pointer-events: none;
}
@media (max-width: 900px) {
  .book-why__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .book-why__content { padding: 64px 25px 32px; max-width: none; }
  .book-why__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .book-why__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Mint variant — used on /book/ so the form panel reads with dark text on light bg */
.section--soft.page-hero {
  background: var(--sytek-green-soft);
  color: var(--sytek-ink);
  padding-top: 180px;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}
.section--soft.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green);
  -webkit-mask-image: url('../images/branding/sytek-ortho-2.svg');
  mask-image: url('../images/branding/sytek-ortho-2.svg');
  -webkit-mask-size: auto 130%;
  mask-size: auto 130%;
  -webkit-mask-position: calc(100% + 280px) -100px;
  mask-position: calc(100% + 280px) -100px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(-1);
  transform-origin: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.section--soft.page-hero > .container { position: relative; z-index: 1; }
.section--soft.page-hero .page-hero__content .eyebrow { color: var(--sytek-green); }
.section--soft.page-hero .page-hero__title { color: var(--sytek-ink); }
.section--soft.page-hero .page-hero__title .accent { color: var(--sytek-green); font-weight: 700; }
.section--soft.page-hero .page-hero__lead { color: var(--sytek-ink); }

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.page-hero__content .eyebrow {
  color: var(--sytek-green-soft);
  margin: 0 0 20px;
}
.page-hero__title {
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--sytek-cream);
  margin: 0 0 24px;
  text-wrap: balance;
}
.page-hero__title .vcr-mask { line-height: 1.05; }
.page-hero__title .accent { color: var(--sytek-green-soft); font-weight: 700; }
.page-hero__lead {
  color: #FFFFFF;
  font-size: 19px;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 32px;
}

/* CTA on green hero: solid white → white outline on hover */
.section--green.page-hero .btn--primary {
  background: var(--sytek-cream);
  color: var(--sytek-green);
  border-color: var(--sytek-cream);
}
.section--green.page-hero .btn--primary:hover {
  background: transparent;
  color: var(--sytek-cream);
  border-color: var(--sytek-cream);
}

/* Tertiary CTA on any green section: white underline, mint on hover */
.section--green .btn--tertiary { color: var(--sytek-cream); }
.section--green .btn--tertiary:hover { color: var(--sytek-green-soft); }

/* Tertiary variant: swap the default arrow for an inline external-link icon */
.btn--tertiary--external::after { content: none; }
.btn--tertiary--external .btn__icon {
  margin-left: 6px;
  transition: transform var(--t-fast) var(--ease);
}
.btn--tertiary--external:hover .btn__icon { transform: translate(3px, -3px); }

/* Hero button row — inline CTAs */
.page-hero__ctas {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

/* Inline icon inside a .btn (e.g., external-link mark) */
.btn__icon {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -3px;
  flex-shrink: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-hero__media {
  position: relative;
  width: 100%;
}
.page-hero__photo {
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
}
.page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

@media (max-width: 900px) {
  .section--green.page-hero { padding-top: 110px; padding-bottom: 64px; }
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .page-hero__title { font-size: 44px; text-wrap: pretty; }
  .page-hero__media { justify-self: stretch; max-width: 100%; }
  .page-hero__content { align-items: stretch; }
}

/* =========================================================
   About page — Team grid (3 cols × 2 rows)
   ========================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
}
.team-card__photo {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--sytek-green);
}
.team-card__photo .placeholder {
  width: 100%;
  height: 100%;
  background: var(--sytek-green);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card__name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.2;
}
.team-card__role {
  font-size: 14px;
  color: var(--sytek-ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   About page — Training & Teaching doodle (behind image)
   ========================================================= */
.about-training { position: relative; overflow: hidden; }
.about-training::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-cream);
  -webkit-mask-image: url('../images/branding/sytek-ortho-5.svg');
  mask-image: url('../images/branding/sytek-ortho-5.svg');
  -webkit-mask-size: auto 170%;
  mask-size: auto 170%;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}
.about-training > .container { position: relative; z-index: 1; }

/* =========================================================
   About page — Her Story section doodle
   ========================================================= */
.about-story { position: relative; overflow: hidden; }
.about-story::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-4.svg');
  mask-image: url('../images/branding/sytek-ortho-4.svg');
  -webkit-mask-size: auto 220%;
  mask-size: auto 220%;
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.about-story > .container { position: relative; z-index: 1; }
.about-story__split { margin-top: 64px; }
@media (max-width: 900px) {
  .about-story__split { margin-top: 40px; }
}

/* =========================================================
   Split section — editorial 2-col: intro left, body right
   Reusable pattern for interior page long-form sections
   ========================================================= */
.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.split-section__intro .eyebrow { margin: 0 0 20px; }
.split-section__intro .h-section {
  margin: 0 0 24px;
  max-width: 14ch;
}
.split-section__intro .lead {
  margin: 0;
  max-width: 44ch;
}
.split-section__body { margin-top: 8px; }
.split-section__body p:first-child { margin-top: 0; }
.split-section__body .lead { margin: 0 0 32px; max-width: 44ch; }
.split-section__body .creds-list { margin: 0 0 24px; }
.split-section__body .flag { margin-top: 0; }

/* Media slot for split-section — used when left column is an image */
.split-section__media { position: relative; }
.split-section__photo {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
}
.split-section__photo--landscape { aspect-ratio: 3 / 2; }
.split-section__photo--square { aspect-ratio: 1 / 1; }
.split-section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vertical alignment modifier: center the text block with the image */
.split-section--align-center { align-items: center; }
.split-section--align-center .split-section__body { margin-top: 0; }

/* Card panel variant — text padded inside, image bleeds to top/bottom/right of a white panel */
.split-section--card {
  background: var(--sytek-cream);
  border-radius: var(--r-card-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.06);
  gap: 0;
  align-items: stretch;
}
.split-section--card .split-section__body { padding: 48px 40px; }
.split-section--card .split-section__media { min-height: 100%; }
.split-section--card .split-section__photo,
.split-section--card .split-section__photo--landscape,
.split-section--card .split-section__photo--square {
  aspect-ratio: auto;
  border-radius: 0;
  height: 100%;
  min-height: 320px;
}
@media (max-width: 900px) {
  .split-section--card { grid-template-columns: minmax(0, 1fr); }
  .split-section--card .split-section__body { padding: 32px 24px; }
  .split-section--card .split-section__photo { min-height: 240px; }
}

/* White card sitting on a green section — restore normal text colors inside */
.section--green .split-section--card p.eyebrow,
.section--green .split-section--card .btn--tertiary { color: var(--sytek-green); }
.section--green .split-section--card .h-section,
.section--green .split-section--card .lead,
.section--green .split-section--card .prose p:not(.eyebrow) { color: var(--sytek-ink); }
.section--green .split-section--card .h-section .accent { color: var(--sytek-green); }

/* Costs & Financing — treatment range cards (blank white with placeholder range) */
.cost-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.cost-card {
  background: var(--sytek-cream);
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-card);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 4px 24px -8px rgba(3, 25, 18, 0.06);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-ok .cost-card {
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms;
}
.cost-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -14px rgba(3, 25, 18, 0.22);
}
.cost-card .pill { margin-bottom: 4px; }
.cost-card__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--sytek-ink);
  margin: 0;
}
.cost-card__range {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sytek-green);
  margin: 0;
}
.cost-card__monthly {
  font-size: 15px;
  font-weight: 500;
  color: var(--sytek-ink-soft);
  margin: -8px 0 0;
  letter-spacing: 0;
}
.cost-card__desc {
  font-size: 19px;
  line-height: 1.55;
  color: var(--sytek-ink);
  margin: 0;
}
.cost-card .flag { margin: 8px 0 0; }
@media (max-width: 900px) {
  .cost-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cost-card { padding: 28px 24px; }
  .cost-card__range { font-size: 28px; }
}

/* FAQ page — category filter pills */
.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
}
.faq-filter {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  background: var(--sytek-cream);
  color: var(--sytek-ink);
  border: 1px solid var(--sytek-border);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.faq-filter:hover {
  background: var(--sytek-green);
  color: var(--sytek-cream);
  border-color: var(--sytek-green);
}
.faq-filter:active { transform: translateY(1px); }
@media (max-width: 600px) {
  .faq-filters { gap: 8px; }
  .faq-filter { padding: 8px 16px; font-size: 14px; }
}

/* Costs page — "No nickel-and-diming" section doodle */
.costs-included { position: relative; overflow: hidden; }
.costs-included::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green);
  -webkit-mask-image: url('../images/branding/sytek-ortho-3.svg');
  mask-image: url('../images/branding/sytek-ortho-3.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
}
.costs-included > .container { position: relative; z-index: 1; }

/* First Visit — Cost & Insurance section: doodle embellishment */
.fv-cost { position: relative; overflow: hidden; }
.fv-cost::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sytek-green-soft);
  -webkit-mask-image: url('../images/branding/sytek-ortho-5.svg');
  mask-image: url('../images/branding/sytek-ortho-5.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}
.fv-cost > .container { position: relative; z-index: 1; }

/* Map variant — wider map column, narrower text column */
.split-section--map {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
}
@media (max-width: 900px) {
  .split-section--map { grid-template-columns: minmax(0, 1fr); }
}

/* Green section context — creds list bullets + text invert */
.section--green .creds-list li { color: var(--sytek-cream); }
.section--green .creds-list li::before { background: var(--sytek-green-soft); }
.section--green .flag {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--sytek-green-soft);
  color: rgba(255, 255, 255, 0.85);
}
.section--green .flag strong { color: var(--sytek-cream); }

@media (max-width: 900px) {
  .split-section { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split-section__intro .h-section { max-width: none; }
  .split-section__body { margin-top: 0; }
}

/* =========================================================
   Reversed nav — for interior pages sitting on dark hero
   ========================================================= */
.nav--reversed .brand-logo {
  filter: brightness(0) invert(1);
  transition: filter var(--t-med) var(--ease);
}
.nav--reversed .nav__phone {
  color: rgba(255, 255, 255, 0.9);
}
.nav--reversed .nav__phone-icon { color: var(--sytek-cream); }
.nav--reversed .nav__phone:hover,
.nav--reversed .nav__phone:focus-visible {
  color: var(--sytek-cream);
}
.nav--reversed .nav__links {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
.nav--reversed .nav__links a {
  color: var(--sytek-cream);
}
.nav--reversed .nav__links a:hover {
  background: rgba(255, 255, 255, 0.15);
}
.nav--reversed .nav__links a.is-active {
  background: var(--sytek-cream);
  color: var(--sytek-green);
}
/* Submenu stays light-themed even under reversed nav (it opens on hover on any bg) */
.nav--reversed .nav__submenu a { color: var(--sytek-ink); }
.nav--reversed .nav__submenu a:hover { background: var(--sytek-green); color: var(--sytek-cream); }
.nav--reversed .btn--primary {
  background: transparent;
  color: var(--sytek-cream);
  border-color: var(--sytek-cream);
}
.nav--reversed .btn--primary:hover {
  background: var(--sytek-cream);
  color: var(--sytek-green);
  border-color: var(--sytek-cream);
}
.nav--reversed .nav__toggle {
  border-color: rgba(255, 255, 255, 0.4);
}
.nav--reversed .nav__toggle-bars,
.nav--reversed .nav__toggle-bars::before,
.nav--reversed .nav__toggle-bars::after {
  background: var(--sytek-cream);
}

/* Once scrolled, drop the reversed state so nav matches light content */
.nav--reversed.is-scrolled .brand-logo { filter: none; }
.nav--reversed.is-scrolled .nav__phone { color: var(--sytek-ink-soft); }
.nav--reversed.is-scrolled .nav__phone-icon { color: var(--sytek-green); }
.nav--reversed.is-scrolled .nav__links {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--sytek-border);
}
.nav--reversed.is-scrolled .nav__links a { color: var(--sytek-ink); }
.nav--reversed.is-scrolled .nav__links a:hover { background: var(--sytek-green); color: var(--sytek-cream); }
.nav--reversed.is-scrolled .nav__links a.is-active { background: var(--sytek-ink); color: var(--sytek-cream); }
.nav--reversed.is-scrolled .btn--primary {
  background: transparent;
  color: var(--sytek-green);
  border-color: var(--sytek-green);
}
.nav--reversed.is-scrolled .btn--primary:hover {
  background: var(--sytek-green);
  color: var(--sytek-cream);
}
.nav--reversed.is-scrolled .nav__toggle { border-color: var(--sytek-border); }
.nav--reversed.is-scrolled .nav__toggle-bars,
.nav--reversed.is-scrolled .nav__toggle-bars::before,
.nav--reversed.is-scrolled .nav__toggle-bars::after {
  background: var(--sytek-ink);
}


/* ============================================================
   THEME OVERRIDES — the only rules in this file that are NOT a
   verbatim port. Kept at the end, clearly marked, so the ported
   region above stays byte-identical to the source and re-porting
   does not have to remember these.
   ============================================================ */

/* .hero2-enter must not hide content when the JS layer never runs.
 *
 * The source declares the un-entered state UNSCOPED:
 *
 *     .hero2-enter { opacity: 0; transform: translateY(20px); }   (line ~2819)
 *
 * while the very same file scopes the equivalent state for .reveal:
 *
 *     .anim-ok .reveal { opacity: 0; ... }                        (line ~2398)
 *
 * .anim-ok is added to <html> by assets/js/global.js only once
 * document.visibilityState is 'visible'. So anywhere that class never
 * arrives -- a JS error, a blocked or slow script, a prerender, an
 * offscreen or embedded webview that never composites -- everything
 * carrying .hero2-enter stays at opacity 0 permanently. That is the hero
 * PHOTOGRAPH on all 26 inner pages, and on the home page both the intro
 * column and the whole carousel.
 *
 * The failure mode is invisible content, not a missing animation, and it
 * leaves no trace anywhere. Observed directly: an offscreen tab rendered
 * /about/ with the hero image at opacity 0 while every class-parity and
 * copy check passed, because the markup was entirely correct.
 *
 * Fix matches what the source already does for .reveal: scope the hidden
 * state to .anim-ok. With the class, the entry animation is unchanged.
 * Without it, content is simply visible.
 */
.hero2-enter { opacity: 1; transform: none; }
.anim-ok .hero2-enter { opacity: 0; transform: translateY(20px); }

/* .vcr-char must not clip the heading away when nothing triggers it.
 *
 * The source declares the pre-animation state UNCONDITIONALLY:
 *
 *     .vcr-mask { overflow: hidden; }
 *     .vcr-char { transform: translateY(110%); }        (line ~3114)
 *
 * so every character sits fully outside its own clipping mask until
 * `.vcr-trigger` is added -- and that class comes from an
 * IntersectionObserver in assets/js/global.js.
 *
 * An IntersectionObserver delivers nothing in a context that never
 * composites: an offscreen tab, a prerender, some embedded webviews. In
 * those, and anywhere the JS layer fails outright, every [data-vcr]
 * heading is permanently invisible. That is 108 elements across all 29
 * pages, and it includes the <h1> of every single page and the closing
 * CTA <h2> on 25 of them.
 *
 * The copy is still in the raw HTML, so the first crawl wave is unharmed
 * -- which is exactly why no HTML-reading check catches this. It was found
 * by asking a real browser for the computed style.
 *
 * Same fix as .hero2-enter above: the hidden state is scoped to .anim-ok,
 * which only exists once the JS layer has actually run. A timed failsafe in
 * global.js covers the case where JS runs but the observer never fires.
 */
.vcr-char { transform: none; }
.anim-ok .vcr-char { transform: translateY(110%); }

/* ── Contact Form 7 ───────────────────────────────────────────────────────────
 * CF7 renders the <form> element itself, so the source's own <form> -- and the
 * classes on it -- can never exist on the page. Everything INSIDE the form is
 * now authored with the source's real class names (.contact-form__row,
 * .contact-form__field, .ref-form__row, .ref-form__field ...), so the ported CSS
 * above applies to it directly. The rules below are only the ones that cannot
 * work that way: the form element, and CF7's own chrome.
 *
 * ⚠️ THIS REPLACES A SHIM (.sytek-fg / .sytek-fg-2) THAT READ AS CORRECT.
 *
 * The shim put the two-column grid on a wrapper <div>. CF7 runs wpautop over the
 * form body, and wpautop wrapped BOTH fields of a row in ONE <p> -- so the grid
 * had a single child, filled column one, and left column two empty. Every "row"
 * on all three forms rendered as a stack in the left half of the card. The HTML
 * looked right, the class names were all present, and the defect was only
 * visible by asking a browser for geometry: name and phone shared an x of 44px,
 * 96px apart vertically, where the source has them side by side.
 *
 * inc/forms.php turns wpautop off, which is what lets the authored markup below
 * survive to the page. Do not restore the shim; fix the form body instead.
 */

/* The source's <form class="contact-form__form"> and <form class="ref-form">. */
.contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.ref-form .wpcf7-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 24px;
}
@media (max-width: 800px) {
  .ref-form .wpcf7-form { grid-template-columns: minmax(0, 1fr); }
}

/* In the source .ref-form is the card AND the grid, because there the intro is a
 * grid item inside the <form>. Here the intro is ACF content the template
 * renders outside it, so the card becomes a block and the FORM carries the grid.
 * 32px = the source's 12px intro margin plus the grid's own 20px row gap. */
.ref-form { display: block; }
.ref-form__intro { margin-bottom: 32px; }

/* CF7 emits hidden plumbing as direct children of the form, which would each
 * take a grid cell or a flex row of their own. */
.wpcf7-form > .hidden-fields-container { display: none; }
.wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; }

/* The source's submit is a <button>, covered by the `button { font: inherit }`
 * reset near the top of this file. CF7 emits ONLY <input type="submit">, which
 * that reset does not match -- so it rendered in the browser's default 17px
 * system font with no padding, no radius and no background, inside a card that
 * was otherwise correct. Measured, not guessed: 151px wide, transparent. */
/* Stands in for the `button { font: inherit }` reset near the top of this file,
 * which CF7's <input type="submit"> is not matched by.
 *
 * NOT the `font:` shorthand, and not `.wpcf7-submit`. Both outrank .btn -- an
 * attribute selector carries class-level specificity, so even this element rule
 * beats `.btn` -- and the shorthand then resets font-size and font-weight along
 * with the family. The button rendered 17px/400 instead of .btn's 15px/500 twice
 * before this was written the long way. Set only what the source's <button>
 * inherits and .btn does not restate. */
input[type="submit"] {
  font-family: inherit;
  font-style: inherit;
  line-height: inherit;
  cursor: pointer;
}
.page-hero--book .contact-form__submit { margin-top: 8px; }   /* source: .book-form */

/* CF7 appends its spinner as a SIBLING of the submit input. Left in normal flow
 * it is a 24px flex row that pushes the reassurance line down even while hidden,
 * so the actions wrapper takes it out of flow. */
.contact-form__actions { position: relative; display: flex; flex-direction: column; }
.contact-form .wpcf7-spinner { position: absolute; top: 100%; left: 50%; margin: 8px 0 0 -12px; }
.ref-form .wpcf7-spinner { margin: 0; }

/* CF7 puts size="40" on every text input, which is a real width -- 396px inside
 * a 268px column, so the fields overflowed their own grid cell. The source's
 * inputs carry no size at all and simply stretch to the flex column, so here
 * they have to be told to. Caught by measuring, not by reading the HTML.
 *
 * `display: block` for the same reason: the control is inline-level inside that
 * span, so it sits on a line box and picks up the descender space under it. On
 * the textarea that was 7px of dead height per form that no amount of reading
 * the markup would show. */
.contact-form .wpcf7-form-control-wrap > input,
.contact-form .wpcf7-form-control-wrap > select,
.contact-form .wpcf7-form-control-wrap > textarea,
.ref-form .wpcf7-form-control-wrap > input,
.ref-form .wpcf7-form-control-wrap > select,
.ref-form .wpcf7-form-control-wrap > textarea { width: 100%; display: block; }

/* CF7 wraps every control in a span; the source styles the control itself. */
.contact-form .wpcf7-form-control-wrap,
.ref-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7-not-valid-tip,
.ref-form .wpcf7-not-valid-tip { font-size: 12px; color: #b3261e; margin-top: 4px; }
.contact-form .wpcf7-response-output,
.ref-form .wpcf7-response-output { margin: 16px 0 0; border-radius: 10px; font-size: 14px; }

/* THE HONEYPOT WRAPPER RULE.
 *
 * display:none, NOT off-screen positioning. An off-screen field stays in the tab
 * order AND the accessibility tree, so a screen-reader user or anyone tabbing
 * through fills it in and is silently classified as spam -- no email, no error,
 * no stored record.
 *
 * This matters more on CF7 than elsewhere: CF7 6.x drops tabindex from its tag
 * syntax entirely, so this rule is the ONLY thing keeping the field out of the
 * tab order. Without it the honeypot renders in full view, labelled "Leave this
 * field empty", and the only people who fill it in are the ones who cannot see
 * it.
 */
.sytek-hp { display: none; }

/* Skip link. Required by the accessibility standard; the static build ships
 * none, so there is nothing to port and this is the theme's own rule.
 *
 * Visible ONLY on focus, and it must genuinely move on focus rather than being
 * display:none -- a skip link that is display:none is not focusable at all,
 * which is the same as not having one. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--sytek-green);
  color: #fff;
  border-radius: 0 0 var(--r-card) 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--sytek-green-soft);
  outline-offset: 2px;
}

/* 404 page.
 *
 * The source's 404.html uses .nf, .nf__inner, .nf__code and .nf__row, and
 * styles.css defines NONE of them -- the reference 404 is unstyled. Built here
 * from the same tokens the rest of the site uses, so it looks like the site
 * rather than like a browser default. */
.nf { display: flex; align-items: center; min-height: 60vh; }
.nf__inner { max-width: 62ch; margin: 0 auto; text-align: center; padding: 0 24px; }
.nf__code {
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sytek-ink-soft);
  margin: 0 0 16px;
}
.nf__inner h1 { margin: 0 0 16px; }
.nf__inner p { color: var(--sytek-ink-soft); margin: 0 0 28px; }
.nf__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Two classes this THEME introduces that the static build does not have, so
 * there was nothing to port and they need rules of their own. */

/* Image on the right instead of the left. Offered as an editor choice on the
 * image+prose section; the source only ever uses one direction, so without this
 * rule choosing "right" would have done nothing at all. */
.split-section--reverse .split-section__media { order: 2; }
.split-section--reverse .split-section__body  { order: 1; }

/* Wrapper around a Contact Form 7 form placed in a section. */
.form-block { max-width: 68ch; margin: 0 auto; }
.form-block__error {
  padding: 16px 18px;
  border: 1px solid var(--sytek-border);
  border-radius: var(--r-card);
  background: var(--sytek-cream-mid);
  color: var(--sytek-ink);
  font-size: 15px;
}

/* Footer column headings are <h3>, not the source's <h4>.
 *
 * The last heading in <main> is an <h2>, so <h4> skipped a level -- a WCAG 1.3.1
 * failure invisible to any class-name check, because every class was correct.
 *
 * THIS RULE IS THE OTHER HALF OF THAT RETAG. The only thing styling these
 * headings was `.footer__col h4`, keyed to the TAG, and it carried the whole
 * treatment. Retagging without this leaves three unstyled words in the footer.
 * Verified by asking the browser which selectors matched before the change,
 * not by reading class names.
 *
 * line-height is explicit because the retag is for the OUTLINE only: the type
 * must not shift. Tailwind's preflight neutralises heading sizing, so this
 * matches what <h4> computed to.
 */
.footer__col h3 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sytek-green);
  margin: 0 0 18px;
  line-height: inherit;
}