@charset "UTF-8";
/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --font1: "Source Sans 3", sans-serif;
  --font2: "Barlow Condensed", sans-serif;
  --bg1: #FFFFFFFF;
  --bg2: #F7F7F7FF;
  --c1: #1F2124FF;
  --c2: #55575AFF;
  --ca: #2F7A5EFF;
  --border1: 1px solid #02587D1A;
  --border2: 1px solid #02587D33;
  --border3: 4px solid #2F7A5EFF;
  --f1: 42px;
  --f2: 33px;
  --f3: 26px;
  --f4: 20px;
  --f5: 16px;
  --f6: 13px;
  --g1: 66px;
  --g2: 53px;
  --g3: 43px;
  --g4: 34px;
  --g5: 28px;
  --g6: 24px;
  --x1: 45px;
  --x2: 28px;
  --x3: 17px;
  --x4: 11px;
  --x5: 7px;
  --x6: 4px;
  --phi: 1.6180339887;
  --w-content: 720px;
  --w-total: 1120px;
  --gutter-full: 28px;
  --gutter-mobile: 28px;
  --navy: #005978;
  --navy-deep: #013E58;
  --sage: #BBBBBB;
  --sage-on-dark: #8FE0C4;
  --sage-tint: #EAF3EF;
  --rule-soft: #02587D1A;
  --rule-mid: #02587D26;
  --rule-input: #02587D33;
  --on-dark-70: #FFFFFFB3;
  --on-dark-80: #FFFFFFCC;
  --glass-fill: #FFFFFF14;
  --glass-edge: #FFFFFF29;
  --star-gold: #8A6D0A;
  --invalid: #D64545;
  --shadow: 0 20px 40px rgba(0, 89, 120, 0.14);
  --radius-full: 9999px;
}

/* ============================================================
   2. RESET
   ============================================================ */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4 {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  word-break: normal;
}

img, fieldset {
  border: 0;
}

abbr {
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

iframe, video, embed, object {
  display: block;
  max-width: 100%;
  border: 0;
}

.left, .right, .center {
  display: block;
}

.center {
  float: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

button, input[type=submit] {
  cursor: pointer;
  overflow: visible;
}

ul {
  list-style: none;
}

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

/* ============================================================
   3. BODY AND STRUCTURAL FOUNDATIONS
   ============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background-color: var(--bg1);
  overflow-x: hidden;
}

.container {
  box-sizing: border-box;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
@media all and (min-width: 776px) {
  .container {
    max-width: var(--w-content);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 776px) {
  .container {
    max-width: 100%;
    padding-left: var(--gutter-full);
    padding-right: var(--gutter-full);
    margin-left: 0;
    margin-right: 0;
  }
}
@media all and (min-width: 1176px) {
  .container {
    max-width: var(--w-total);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

.text, .container-prose {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.container-narrow, .container-tight {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}

.section-alt {
  background-color: var(--bg2);
}

::selection {
  background-color: var(--sage-tint);
  color: var(--navy);
}

.skip-link {
  position: absolute;
  left: var(--x5);
  top: -60px;
  background-color: var(--navy);
  color: var(--bg1);
  font-size: var(--f5);
  line-height: var(--g5);
  font-weight: 700;
  padding: var(--x4) var(--x3);
  border-radius: var(--x5);
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--x5);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ca);
  outline-offset: 2px;
}

/* ============================================================
   4. COMMON CONTENT ELEMENTS
   ============================================================ */
h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--f2);
  line-height: var(--g2);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
}

h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--f3);
  line-height: var(--g3);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
}

h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
}

h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
}

blockquote {
  color: #1f2124;
  background-color: #f7f7f7;
  padding: var(--x3);
  border-left: var(--border3);
  border-radius: 0 var(--x4) var(--x4) 0;
}
blockquote > :last-child {
  margin-bottom: 0;
}

sub, sup {
  color: var(--c2);
  line-height: 0.5em;
}

code, pre, kbd {
  font-size: 15px;
  line-height: var(--g5);
}

code {
  background-color: rgba(0, 0, 0, 0.08);
  padding: var(--x6);
  border-radius: var(--x5);
  margin: 0 1px;
}

pre {
  color: #1f2124;
  background-color: #f7f7f7;
  padding: var(--x3);
  border-left: var(--border3);
  border-radius: 0 var(--x4) var(--x4) 0;
  overflow: auto;
  word-wrap: normal;
  tab-size: 4;
}

hr {
  border: var(--border1);
  border-width: 0 0 1px 0;
  margin: var(--x2) 0;
}

.drop-cap {
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--f1);
  line-height: 1em;
  font-weight: bold;
  color: #2f7a5e;
  margin-right: var(--x5);
  float: left;
}

.small {
  font-size: var(--f6);
  line-height: var(--g6);
  color: #55575a;
}

.caption {
  font-size: var(--f6);
  line-height: var(--g6);
  color: #55575a;
}
.center + .caption {
  text-align: center;
}
.caption.tight {
  margin-top: calc(var(--x3) * -1);
}

.callout {
  color: var(--c1);
  background-color: #eaf3ef;
  padding: 17px;
  border-left: var(--border3);
  border-radius: 0 var(--x4) var(--x4) 0;
}
.callout p {
  color: var(--navy);
  font-weight: 700;
}
.callout.alert {
  color: var(--c1);
  background-color: #fdecec;
  border-left-color: var(--invalid);
}
.callout.note {
  color: var(--c1);
  background-color: #eaf3ef;
  border-left-color: var(--navy);
}

.highlight {
  background-color: #eaf3ef;
  padding: var(--x6) 0;
}

.impact {
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 700;
  color: #2f7a5e;
}

.pop {
  box-shadow: 0 0 var(--x4) rgba(0, 0, 0, 0.4);
}

.eyebrow {
  display: block;
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ca);
  margin-bottom: var(--x5);
}

@media all and (min-width: 776px) {
  h1 {
    font-size: var(--f1);
    line-height: var(--g1);
  }
  h2 {
    font-size: var(--f2);
    line-height: var(--g2);
  }
  h3 {
    font-size: var(--f3);
    line-height: var(--g3);
  }
  h4 {
    font-size: var(--f4);
    line-height: var(--g4);
  }
  .impact {
    font-size: var(--f3);
    line-height: var(--g3);
  }
}
/* ============================================================
   5. DYNAMIC CONTENT ELEMENTS
   ============================================================ */
.page-container + .page-container {
  margin-top: var(--x1);
}

.page-container, .headline-area, .page-content {
  display: flow-root;
}

.page-content h1 {
  margin-bottom: var(--x2);
}
.page-content h2 {
  margin-top: var(--x1);
  margin-bottom: var(--x3);
}
.page-content h3 {
  margin-top: var(--x2);
  margin-bottom: var(--x3);
}
.page-content h4 {
  margin-bottom: var(--x4);
}
.page-content h1 + h2, .page-content h2 + h3, .page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child, .page-content hr + h2 {
  margin-top: 0;
}
.page-content > :last-child {
  margin-bottom: 0;
}
.page-content ul {
  list-style-type: disc;
  margin-left: 28px;
}
.page-content ol {
  margin-left: 28px;
}
.page-content ul ul, .page-content ul ol, .page-content ol ul, .page-content ol ol {
  margin-top: 7px;
  margin-bottom: 0;
  margin-left: 17px;
}
.page-content li {
  margin-bottom: 7px;
}
.page-content li:last-child {
  margin-bottom: 0;
}
.page-content a {
  color: var(--ca);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-content a:hover {
  color: var(--navy);
}
.page-content strong {
  color: var(--navy);
}
.page-content .callout > :last-child {
  margin-bottom: 0;
}
.page-content .caption {
  margin-top: -24px;
}
.page-content p, .page-content ul, .page-content ol, .page-content blockquote, .page-content pre, .page-content img, .page-content .callout, .page-content .caption {
  margin-bottom: var(--x2);
}
.page-content p:last-child, .page-content ul:last-child, .page-content ol:last-child, .page-content blockquote:last-child, .page-content pre:last-child, .page-content img:last-child, .page-content .callout:last-child, .page-content .caption:last-child {
  margin-bottom: 0;
}

.page-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
  max-width: 20ch;
}
.page-title a {
  color: var(--navy);
}
.page-title a:hover {
  color: var(--ca);
}

.byline {
  font-size: 13px;
  line-height: var(--g6);
  color: #55575a;
  margin-bottom: var(--x2);
}

/* ============================================================
   6. FORMS
   ============================================================ */
label {
  display: block;
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--navy);
  font-weight: bold;
  margin-bottom: var(--x5);
}
label .required {
  font-weight: normal;
  color: #d64545;
}

input, textarea, select {
  display: block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1em;
  font-weight: inherit;
  color: var(--c1);
  padding: 11px;
  border: 1px solid rgba(2, 88, 125, 0.2);
  border-radius: var(--x5);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ca);
}
input.invalid, textarea.invalid, select.invalid {
  border-color: var(--invalid);
}

input[type=checkbox], input[type=radio], input[type=image], input[type=submit], select {
  width: auto;
}

input[type=checkbox], input[type=radio] {
  display: inline-block;
}
input[type=checkbox] + label, input[type=radio] + label {
  display: inline;
  font-weight: normal;
  margin-left: var(--x6);
  user-select: none;
}

textarea {
  line-height: inherit;
  padding: 11px;
  border: 1px solid rgba(2, 88, 125, 0.2);
  resize: vertical;
}

select {
  border: 1px solid rgba(2, 88, 125, 0.2);
}

button, input[type=submit], .button {
  display: inline-block;
  width: auto;
  font-family: inherit;
  font-size: inherit;
  line-height: 1em;
  font-weight: 700;
  vertical-align: top;
  color: var(--bg1);
  text-decoration: none;
  background-color: #2f7a5e;
  padding: 17px 28px;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
button:hover, button:active, input[type=submit]:hover, input[type=submit]:active, .button:hover, .button:active {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

button.save, .button.save {
  color: var(--bg1);
  background-color: #2f7a5e;
}
button.delete, .button.delete {
  color: var(--bg1);
  background-color: #d64545;
}
button.action, .button.action {
  color: var(--ca);
  background-color: transparent;
  border: 2px solid var(--ca);
}
button.action:hover, button.action:active, .button.action:hover, .button.action:active {
  color: var(--bg1);
  background-color: var(--ca);
  transform: none;
  box-shadow: none;
}
button.update, .button.update {
  color: var(--navy);
  background-color: transparent;
  padding: var(--x3) var(--x5);
}
button.update:hover, button.update:active, .button.update:hover, .button.update:active {
  transform: none;
  box-shadow: none;
}
button svg, .button svg {
  vertical-align: inherit;
}

.button svg {
  width: var(--f4);
  height: var(--f4);
  vertical-align: text-bottom;
}

/* ============================================================
   7. SHARED COMPONENT STYLES
   ============================================================ */
.topbar {
  background-color: var(--navy);
  color: var(--bg1);
  font-size: var(--f6);
  line-height: var(--g6);
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--x5);
  padding-bottom: var(--x5);
  flex-wrap: wrap;
  gap: var(--x5);
}
.topbar a {
  opacity: 0.9;
  white-space: nowrap;
}
.topbar .phone-pill {
  background-color: var(--ca);
  font-weight: 700;
  padding: var(--x6) var(--x3);
  border-radius: var(--radius-full);
  opacity: 1;
}

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--w-total);
  padding: var(--x3) var(--gutter-mobile);
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
.site-header img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
@media all and (min-width: 776px) {
  .site-header {
    padding-left: var(--gutter-full);
    padding-right: var(--gutter-full);
  }
}

.main-nav {
  display: none;
  gap: var(--x2);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
}
.main-nav a {
  white-space: nowrap;
  transition: color 0.15s ease;
}
.main-nav a:hover {
  color: var(--ca);
}
.main-nav.nav-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg1);
  padding: var(--x5) var(--gutter-mobile) var(--x2);
  box-shadow: var(--shadow);
  gap: var(--x6);
  z-index: 500;
}
.main-nav.nav-open a {
  padding: var(--x4) 0;
  border-bottom: var(--border1);
}
.main-nav.nav-open a:last-child {
  border-bottom: 0;
}
@media all and (min-width: 900px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    position: static;
    padding: 0;
    box-shadow: none;
  }
  .main-nav.nav-open a {
    padding: 0;
    border-bottom: 0;
  }
}

.nav-toggle {
  background: none;
  background-color: transparent;
  color: var(--ca);
  border: 2px solid var(--ca);
  border-radius: var(--x5);
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav-toggle:hover, .nav-toggle:active {
  transform: none;
  box-shadow: none;
}
.nav-toggle svg {
  stroke: var(--ca);
  width: 20px;
  height: 20px;
}
@media all and (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

.site-footer {
  background-color: #005978;
  color: rgba(255, 255, 255, 0.7019607843);
  font-size: var(--f6);
  line-height: var(--g6);
  padding-top: 28px;
  padding-bottom: 28px;
  text-align: center;
}
.site-footer .footer-logo {
  height: 36px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--x4);
}
.site-footer p {
  margin-bottom: 0;
}
.site-footer .footer-hours {
  margin-top: var(--x5);
  margin-bottom: 0;
}
.site-footer .footer-legal {
  margin-top: var(--x4);
}
.site-footer .footer-legal a {
  color: var(--sage-on-dark);
  text-decoration: underline;
  text-decoration-color: var(--sage-on-dark);
  text-underline-offset: 2px;
}

.breadcrumb-bar {
  background-color: var(--bg2);
  padding-top: var(--x3);
  padding-bottom: var(--x3);
  font-size: var(--f6);
  line-height: var(--g6);
}
.breadcrumb-bar a {
  color: var(--ca);
  font-weight: 700;
  white-space: nowrap;
}

.section-head {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--x1);
  text-align: center;
}

.section-sub {
  color: var(--c2);
  margin-top: var(--x4);
}

/* ============================================================
   8. TEMPLATE SECTIONS
   ============================================================ */
/* --- Home: Hero (source-fidelity zone) --- */
.hero {
  background: linear-gradient(180deg, var(--sage-tint), var(--bg1) 85%);
  padding: 56px 0 64px;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x1);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin-bottom: var(--x3);
}
.hero .lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--c2);
  max-width: 46ch;
  margin-bottom: var(--x2);
}
@media all and (min-width: 860px) {
  .hero .container {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--x3);
  flex-wrap: wrap;
}

.hero-call {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.hero-photo {
  position: relative;
  justify-self: center;
}
.hero-photo img {
  border-radius: var(--x4);
  max-height: 420px;
  width: auto;
}

.hero-tag {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background-color: var(--bg1);
  color: var(--ca);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 700;
  border-radius: var(--x4);
  box-shadow: var(--shadow);
  padding: 14px 20px;
}

/* --- Home: Emergency CTA --- */
.emergency-cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}
.emergency-cta .eyebrow {
  color: var(--sage-on-dark);
}
.emergency-cta h2 {
  color: var(--bg1);
  margin-bottom: var(--x4);
}
.emergency-cta .section-sub {
  color: var(--on-dark-80);
  max-width: var(--w-content);
  margin-top: 0;
}

.emergency-inner {
  display: flex;
  flex-direction: column;
  gap: var(--x2);
  align-items: flex-start;
}
@media all and (min-width: 800px) {
  .emergency-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.emergency-call {
  font-size: 1.05rem;
  line-height: 1.6;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Home: Approach --- */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
}
@media all and (min-width: 760px) {
  .approach-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.approach-card {
  background-color: var(--bg1);
  border: var(--border1);
  border-radius: var(--x4);
  padding: var(--x2);
  box-shadow: var(--shadow);
}
.approach-card h3 {
  font-size: 1.3rem;
  line-height: 1.15;
  margin-bottom: var(--x4);
}
.approach-card p {
  color: var(--c2);
  margin-bottom: 0;
}

.approach-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: 1em;
  font-weight: 800;
  color: var(--bg1);
  background-color: var(--ca);
  width: 32px;
  height: 32px;
  border-radius: var(--x5);
  margin-bottom: var(--x3);
}

/* --- Home: Discover widget --- */
.discover-widget {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg1);
  border-radius: var(--x4);
  box-shadow: var(--shadow);
  padding: var(--x1);
}
.discover-widget textarea, .discover-widget input {
  width: 100%;
  margin-bottom: var(--x2);
}
@media all and (max-width: 560px) {
  .discover-widget {
    padding: var(--x2) var(--x3);
  }
}

.discover-progress {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 800;
  color: var(--ca);
  margin-bottom: var(--x4);
}

.discover-step h3 {
  font-size: 1.3rem;
  line-height: 1.15;
  margin-bottom: var(--x3);
}
.discover-step[hidden] {
  display: none;
}

.discover-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x4);
  margin-bottom: var(--x2);
}

.chip {
  background-color: var(--sage-tint);
  color: var(--navy);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  padding: 10px 18px;
  font-family: var(--font1);
  font-size: 0.92rem;
  line-height: 1em;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chip:hover {
  border-color: var(--ca);
  transform: none;
  box-shadow: none;
}
.chip.selected {
  background-color: var(--ca);
  border-color: var(--ca);
  color: var(--bg1);
}

.discover-matches {
  margin-bottom: var(--x2);
}
.discover-matches[hidden] {
  display: none;
}

.discover-matches-label {
  font-weight: 700;
  color: var(--navy);
  font-size: var(--f6);
  line-height: var(--g6);
  margin-bottom: var(--x4);
}

.discover-matches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x4);
}
.discover-matches-grid[hidden] {
  display: none;
}

.discover-match {
  display: flex;
  align-items: center;
  gap: var(--x5);
  background-color: var(--sage-tint);
  color: var(--navy);
  border-radius: var(--radius-full);
  padding: var(--x5) var(--x3) var(--x5) var(--x5);
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.discover-match:hover {
  background-color: var(--ca);
  color: var(--bg1);
}
.discover-match img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.discover-match-noimg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--sage);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font2);
  font-weight: 800;
}

.discover-label {
  display: block;
  font-weight: 700;
  color: var(--navy);
  font-size: var(--f6);
  line-height: var(--g6);
  margin-bottom: var(--x5);
}

.discover-fields {
  display: grid;
  gap: var(--x3);
  margin-bottom: var(--x5);
}

.discover-actions {
  display: flex;
  align-items: center;
  gap: var(--x3);
  flex-wrap: wrap;
  margin-top: var(--x5);
}

.discover-summary {
  background-color: var(--sage-tint);
  color: var(--navy);
  border-radius: var(--x4);
  padding: var(--x3) var(--x3);
  font-weight: 600;
  margin-bottom: var(--x3);
}

.discover-done h3 {
  color: var(--ca);
}

/* --- Home: Beliefs --- */
.beliefs {
  background-color: var(--navy);
  color: var(--bg1);
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}
.beliefs .section-head .eyebrow {
  color: var(--sage-on-dark);
}
.beliefs .section-head h2 {
  color: var(--bg1);
}
.beliefs .section-sub {
  color: var(--on-dark-70);
}

.belief-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
}
@media all and (min-width: 700px) {
  .belief-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.belief-card {
  background-color: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--x4);
  padding: var(--x2);
  font-size: 1.05rem;
  line-height: 1.6;
}
.belief-card .mark {
  display: block;
  font-family: var(--font2);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--sage);
  margin-bottom: var(--x4);
}

/* --- Home: Reviews --- */
.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x3);
}
@media all and (min-width: 700px) {
  .review-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.review-card {
  position: relative;
  background-color: var(--bg1);
  border: var(--border1);
  border-radius: var(--x4);
  padding: var(--x2);
  box-shadow: var(--shadow);
}
.review-card .stars {
  color: var(--star-gold);
  letter-spacing: 2px;
  margin-bottom: var(--x4);
}
.review-card .who {
  font-weight: 800;
  color: var(--navy);
  margin-top: var(--x4);
}
.review-card .when {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}
.review-card p {
  margin-bottom: 0;
}

.review-tag {
  position: absolute;
  top: var(--x3);
  right: var(--x3);
  background-color: var(--sage-tint);
  color: var(--ca);
  font-weight: 800;
  font-size: var(--f6);
  line-height: 1em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--x6) var(--x4);
  border-radius: var(--radius-full);
}

/* --- Home: Legacy --- */
.legacy .container {
  display: grid;
  gap: var(--x2);
  align-items: center;
}
@media all and (min-width: 860px) {
  .legacy .container {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.legacy-figure {
  background-color: var(--sage-tint);
  border-radius: var(--x4);
  padding: var(--x1);
  text-align: center;
}
.legacy-figure .big-year {
  font-family: var(--font2);
  font-size: 3rem;
  line-height: 1.15;
  color: var(--ca);
}

/* --- Home: Founder --- */
.founder-card {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg2);
  border-left: var(--border3);
  border-radius: 0 var(--x4) var(--x4) 0;
  padding: var(--x2);
  display: flex;
  gap: var(--x2);
  align-items: flex-start;
}
.founder-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
@media all and (max-width: 560px) {
  .founder-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.founder-body p {
  margin-bottom: var(--x3);
}
.founder-body p:last-child {
  margin-bottom: 0;
  color: var(--c2);
  font-style: italic;
}

/* --- Home: Smile Gallery, story cards --- */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
  margin-bottom: var(--x1);
}
@media all and (min-width: 700px) {
  .story-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (min-width: 1000px) {
  .story-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.story-card {
  background-color: var(--bg1);
  border: var(--border1);
  border-radius: var(--x4);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.story-card:hover {
  transform: translateY(-3px);
}

.story-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-photo.story-photo--placeholder {
  background-color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-photo.story-photo--placeholder span {
  font-family: var(--font2);
  font-size: 3rem;
  line-height: 1.15;
  color: var(--navy);
}

.story-body {
  padding: var(--x3) var(--x3) var(--x2);
}
.story-body h3 {
  font-size: 1.25rem;
  line-height: 1.15;
  margin-bottom: var(--x5);
}
.story-body p {
  color: var(--c2);
  font-size: var(--f6);
  line-height: var(--g6);
  margin-bottom: 0;
}

/* --- Home: Before / after sliders --- */
.ba-head {
  text-align: center;
  margin-bottom: var(--x2);
}
.ba-head h3 {
  font-family: var(--font2);
  font-size: 1.8rem;
  line-height: 1.15;
  color: var(--navy);
}

.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
}
@media all and (min-width: 700px) {
  .ba-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (min-width: 1000px) {
  .ba-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ba-frame {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: var(--x4);
  overflow: hidden;
  box-shadow: var(--shadow);
  --pos: 50%;
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.ba-before-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background-color: var(--bg1);
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.ba-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg1);
  border: 2px solid var(--ca);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow);
}

.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
}

.ba-tag {
  position: absolute;
  bottom: var(--x4);
  font-size: var(--f6);
  line-height: 1em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: rgba(0, 0, 0, 0.55);
  color: var(--bg1);
  padding: var(--x6) var(--x4);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.ba-tag-before {
  left: var(--x4);
}

.ba-tag-after {
  right: var(--x4);
}

/* --- Home: Patient cases --- */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}
.case-grid .case-more {
  display: none;
}
.case-grid.expanded .case-more {
  display: block;
}
@media all and (min-width: 900px) {
  .case-grid {
    max-width: none;
    grid-template-columns: repeat(2, 1fr);
  }
}

.case-grid-more {
  text-align: center;
  margin-top: var(--x1);
}

.case-card {
  background-color: var(--bg1);
  border-radius: var(--x4);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.case-card .ba-slider .ba-frame {
  border-radius: var(--x4) var(--x4) 0 0;
  box-shadow: none;
}
.case-card .case-portrait + .ba-slider .ba-frame {
  border-radius: 0;
}

.case-portrait {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--x4) var(--x4) 0 0;
}
.case-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.case-body {
  padding: var(--x2) var(--x2) var(--x2);
}
.case-body h3 {
  font-size: 1.4rem;
  line-height: 1.15;
  margin-bottom: var(--x4);
}
.case-body p {
  margin-bottom: var(--x4);
  color: var(--c1);
}
.case-body p:last-child {
  margin-bottom: 0;
}
.case-body strong {
  color: var(--navy);
}

/* --- Home: Services grid --- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--x3);
}
@media all and (min-width: 700px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  display: block;
  background-color: var(--bg1);
  border: var(--border1);
  border-radius: var(--x4);
  padding: var(--x3) var(--x3);
  text-align: center;
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 700;
  color: var(--navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.service-card .icon {
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--x4);
  color: var(--ca);
}

/* --- Home: Doctors --- */
.doctor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
}
@media all and (min-width: 760px) {
  .doctor-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.doctor-card {
  background-color: var(--bg2);
  border-radius: var(--x4);
  padding: var(--x2);
  display: flex;
  gap: var(--x3);
  align-items: flex-start;
}
.doctor-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.doctor-card h3 {
  margin-bottom: var(--x6);
}
.doctor-card .role {
  color: var(--ca);
  font-weight: 700;
  font-size: var(--f6);
  line-height: var(--g6);
  margin-bottom: var(--x4);
}
.doctor-card p {
  margin-bottom: 0;
}
.doctor-card .avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--sage);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font2);
  font-size: 1.6rem;
  line-height: 1.15;
  flex-shrink: 0;
}

.doctor-link {
  display: inline-block;
  margin-top: var(--x4);
  font-weight: 800;
  color: var(--navy);
}

/* --- Home: Invisalign --- */
.invisalign {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--bg1);
  border-radius: var(--x4);
  padding: var(--x1);
  display: grid;
  gap: var(--x2);
}
.invisalign h2 {
  color: var(--bg1);
}
.invisalign .eyebrow {
  color: var(--sage-on-dark);
}
.invisalign ul {
  display: grid;
  gap: var(--x4);
  margin-top: var(--x3);
  margin-bottom: 0;
}
.invisalign li::before {
  content: "✓ ";
  color: var(--sage-on-dark);
  font-weight: 800;
}
@media all and (min-width: 800px) {
  .invisalign {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Home: Insurance and payment --- */
.insurance-story {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--x1);
}
.insurance-story p {
  margin-bottom: var(--x3);
  color: var(--c1);
}
.insurance-story p:last-child {
  margin-bottom: 0;
}
.insurance-story strong {
  color: var(--navy);
}
.insurance-story a {
  color: var(--ca);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.insurance-story a:hover {
  color: var(--navy);
}

.payment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x3);
}
@media all and (min-width: 760px) {
  .payment-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.payment-card {
  background-color: var(--bg1);
  border: var(--border1);
  border-radius: var(--x4);
  padding: var(--x2);
}
.payment-card h3 {
  font-size: 1.1rem;
  line-height: 1.15;
  margin-bottom: var(--x4);
}
.payment-card p {
  margin-bottom: 0;
}

/* --- Home: Articles --- */
.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x3);
}
@media all and (min-width: 760px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article-card {
  display: block;
  background-color: var(--bg1);
  border: var(--border1);
  border-radius: var(--x4);
  padding: var(--x2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.article-card h3 {
  font-size: 1.3rem;
  line-height: 1.15;
  margin-bottom: var(--x4);
}
.article-card p {
  color: var(--c2);
  font-size: var(--f6);
  line-height: var(--g6);
  margin-bottom: 0;
}

.article-tag {
  display: inline-block;
  background-color: var(--sage-tint);
  color: var(--ca);
  font-weight: 800;
  font-size: var(--f6);
  line-height: 1em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--x6) var(--x4);
  border-radius: var(--radius-full);
  margin-bottom: var(--x4);
}

/* --- Home: FAQ --- */
.faq-item {
  border-bottom: 1px solid var(--rule-mid);
}
.faq-item.open .faq-q .plus {
  transform: rotate(45deg);
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding-bottom: var(--x3);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--x3) 0;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.faq-q:hover, .faq-q:active {
  transform: none;
  box-shadow: none;
}
.faq-q .plus {
  transition: transform 0.2s ease;
  color: var(--ca);
  font-size: 1.4rem;
  line-height: 1em;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  color: var(--c2);
}
.faq-a p {
  margin-bottom: 0;
}

/* --- Home: Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
}
@media all and (min-width: 800px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-card {
  background-color: var(--bg1);
  border-radius: var(--x4);
  box-shadow: var(--shadow);
  padding: var(--x2);
}
.contact-card h3 {
  margin-bottom: var(--x4);
}
.contact-card p {
  margin-bottom: var(--x4);
}
.contact-card p:last-child {
  margin-bottom: 0;
}

.map-embed {
  margin-top: var(--x2);
  border-radius: var(--x4);
  overflow: hidden;
  box-shadow: var(--shadow);
  line-height: 0;
}
.map-embed iframe {
  display: block;
  border: 0;
}

/* --- Page template --- */
.page-hero {
  padding-top: 56px;
  padding-bottom: var(--x3);
}
.page-hero .page-meta {
  color: var(--c2);
  font-size: var(--f6);
  line-height: var(--g6);
  margin-top: var(--x4);
}

.page-hero-inner {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.prose-page .page-content {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--x3);
  padding-bottom: calc(var(--x1) * var(--phi));
}
.prose-page .page-content ul {
  list-style: none;
  margin-left: 0;
  display: grid;
  gap: var(--x4);
}
.prose-page .page-content li {
  padding-left: var(--x2);
  position: relative;
}
.prose-page .page-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ca);
}
.prose-page .page-content .about-photo {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--x4);
  box-shadow: var(--shadow);
}
.prose-page .page-content .room-photo {
  width: 100%;
  border-radius: var(--x4);
  box-shadow: var(--shadow);
}

/* --- Doctor Bio template --- */
.doctor-hero-section {
  padding-top: 56px;
  padding-bottom: var(--x3);
}
.doctor-hero-section .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x2);
  align-items: center;
}
@media all and (min-width: 760px) {
  .doctor-hero-section .container {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.doctor-portrait img {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   9. UTILITY CLASSES
   ============================================================ */
.gallery-section .container > :last-child {
  margin-bottom: 0;
}
/*pm-css m:0*/