/* =========================================================
   Family Hearing Center — "The Hearing Atelier"
   Warm camel + dusty navy + cream · Source Serif + Inter
   Mature-audience accessibility · 19px body · AAA contrast
   ========================================================= */

:root{
  /* Ormond Hearing — "Atlantic Coastal" · deep ocean blue + warm sand + cream */
  --cream:        #F7F2E8;
  --cream-soft:   #FCF8EF;
  --cream-deep:   #EBE2D0;
  --sand:         #E4D8C0;
  --rule:         #D4C7A9;
  --camel:        #C68A38;   /* warm sand-gold accent */
  --camel-deep:   #95641F;   /* deeper gold for text/links on cream (AA) */
  --camel-soft:   #E8C988;   /* light sand-gold for dark backgrounds */
  --navy:         #0E3A53;   /* deep Atlantic ocean blue */
  --navy-deep:    #082836;
  --navy-soft:    #16597E;   /* coastal mid-blue */
  --ink:          #15242C;
  --ink-soft:     #36474F;
  --muted:        #5F6A6E;
  --seafoam:      #2E8C9E;   /* coastal teal — small accents */

  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --max:   1280px;
  --max-narrow: 980px;
  --max-read:   720px;

  --gap-1: 8px;  --gap-2: 16px;  --gap-3: 24px;
  --gap-4: 32px; --gap-5: 48px;  --gap-6: 64px;
  --gap-7: 96px; --gap-8: 128px;

  --tap: 56px;   /* mature-audience minimum tap target */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 22px;

  --shadow-1: 0 1px 2px rgba(8,40,58,.06), 0 1px 1px rgba(8,40,58,.04);
  --shadow-2: 0 14px 40px -22px rgba(8,40,58,.35), 0 2px 6px rgba(8,40,58,.06);
  --shadow-3: 0 40px 80px -36px rgba(8,40,58,.45), 0 6px 14px rgba(8,40,58,.08);
}

/* -------- reset -------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:19px;            /* mature audience baseline */
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
input,textarea,select{ font:inherit; color:inherit }
::selection{ background:var(--camel); color:#fff }

/* -------- typography -------- */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  color:var(--navy);
  font-weight:500;
  letter-spacing:-.012em;
  line-height:1.12;
  margin:0 0 .4em;
  font-variation-settings: "opsz" 32, "wght" 480;
}
h1{ font-size:clamp(44px, 6.6vw, 92px); line-height:1.04; letter-spacing:-.022em }
h2{ font-size:clamp(34px, 4.4vw, 60px); letter-spacing:-.018em }
h3{ font-size:clamp(24px, 2.6vw, 34px) }
h4{ font-size:clamp(20px, 1.9vw, 24px) }
.serif-italic{ font-style:italic; font-variation-settings:"opsz" 12, "wght" 420 }
em.accent{
  font-family:var(--serif); font-style:italic; color:var(--camel-deep);
  font-variation-settings:"opsz" 8, "wght" 400;
}
p{ margin:0 0 1.05em; max-width:68ch }
.lead{ font-size:clamp(20px, 1.4vw, 23px); color:var(--ink-soft); line-height:1.55 }
.mono{
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--camel-deep);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:32px; height:1px; background:var(--camel);
  display:inline-block;
}

/* -------- layout helpers -------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px }
.wrap-narrow{ max-width:var(--max-narrow); margin:0 auto; padding:0 32px }
.wrap-read{ max-width:var(--max-read); margin:0 auto; padding:0 32px }
.section{ padding:var(--gap-7) 0 }
.section-tight{ padding:var(--gap-6) 0 }
.section-loose{ padding:var(--gap-8) 0 }
.divider{
  height:1px; background:var(--rule); border:0;
  max-width:var(--max); margin:0 auto;
}
.divider-camel{ background:linear-gradient(90deg,transparent,var(--camel),transparent); height:1px }

.grid{ display:grid; gap:var(--gap-4) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }

/* -------- buttons (mature-audience: 56px+ tap target, generous label) -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--tap);
  padding:0 30px;
  font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:.01em;
  border-radius:var(--radius-sm);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn-primary{
  background:var(--navy); color:#fff;
  box-shadow:var(--shadow-2);
}
.btn-primary:hover{ background:var(--navy-deep); transform:translateY(-2px) }
.btn-camel{
  background:var(--camel); color:var(--navy-deep);
  box-shadow:var(--shadow-2);
}
.btn-camel:hover{ background:var(--camel-deep); color:#fff; transform:translateY(-2px) }
.btn-ghost{
  background:transparent; color:var(--navy); border:1.5px solid var(--navy);
}
.btn-ghost:hover{ background:var(--navy); color:#fff }
.btn-cream-on-dark{
  background:var(--cream); color:var(--navy-deep);
}
.btn-cream-on-dark:hover{ background:#fff; transform:translateY(-2px) }
.btn-arrow::after{
  content:"→"; font-family:var(--serif); font-size:1.15em; line-height:1;
}

/* -------- top bar / nav -------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(247,241,230,.92);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom:1px solid var(--rule);
}
.topbar-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; gap:32px;
  padding:14px 32px; min-height:74px;
}
.brand-mark{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--navy);
}
.brand-mark svg{ width:40px; height:40px }
.brand-mark .b-name{
  font-family:var(--serif); font-size:21px; font-weight:500;
  letter-spacing:-.005em; line-height:1.05;
}
.brand-mark .b-sub{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--camel-deep);
}
.main-nav{ display:flex; gap:6px; margin-left:auto; align-items:center }
.main-nav a{
  font-size:15px; font-weight:500; color:var(--navy);
  padding:10px 14px; border-radius:6px;
  transition:background .2s ease, color .2s ease;
}
.main-nav a:hover{ background:var(--cream-deep); color:var(--navy-deep) }
.main-nav a.current{ color:var(--camel-deep) }
.nav-phone{
  font-family:var(--serif); font-size:18px; color:var(--navy);
  font-weight:500; padding:8px 16px;
  border-left:1px solid var(--rule); margin-left:6px;
}
.nav-cta{
  background:var(--navy); color:#fff !important;
  padding:14px 22px !important; border-radius:6px;
  font-weight:600 !important; min-height:48px;
  display:inline-flex; align-items:center;
}
.nav-cta:hover{ background:var(--navy-deep) !important; color:#fff !important }
.nav-toggle{ display:none }

@media (max-width: 960px){
  .main-nav{ display:none; position:absolute; top:74px; left:0; right:0;
    background:var(--cream); border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:stretch; padding:14px 24px 24px;
  }
  .main-nav.open{ display:flex }
  .main-nav a{ padding:14px 8px; font-size:18px; border-bottom:1px solid var(--rule) }
  .main-nav a:last-child{ border-bottom:0 }
  .nav-phone{ border-left:0; padding:14px 8px; font-size:22px }
  .nav-cta{ width:100%; justify-content:center; margin-top:6px }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; margin-left:auto;
    border-radius:8px; background:transparent;
  }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:""; display:block; width:22px; height:2px; background:var(--navy);
    position:relative;
  }
  .nav-toggle span::before{ position:absolute; top:-7px; left:0 }
  .nav-toggle span::after{ position:absolute; top:7px; left:0 }
}

/* -------- HERO -------- */
.hero{
  position:relative;
  background:var(--cream);
  padding:var(--gap-7) 0 var(--gap-7);
  overflow:hidden;
}
.hero-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:var(--gap-6);
  align-items:center;
}
.hero-copy h1 .accent{ color:var(--camel-deep); font-style:italic; font-weight:420 }
.hero-meta{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  margin:36px 0 38px;
  padding:18px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.hero-meta-cell{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.hero-meta-cell strong{ color:var(--navy); font-weight:600 }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px }

.hero-photo{
  position:relative;
  aspect-ratio: 4/5;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--sand);
  box-shadow:var(--shadow-3);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover }
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,40,58,.18));
  pointer-events:none;
}
.hero-photo-caption{
  position:absolute; left:24px; bottom:24px; right:24px;
  color:#fff; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:18px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.seal{
  position:absolute; top:24px; right:24px;
  width:118px; height:118px;
}
.seal svg{ width:100%; height:100%; animation:slow-spin 32s linear infinite }
@keyframes slow-spin{ to{ transform:rotate(360deg) } }

@media (max-width: 960px){
  .hero{ padding:48px 0 56px }
  .hero-grid{ grid-template-columns:1fr; gap:40px }
  .hero-photo{ aspect-ratio: 4/4.4 }
  .seal{ width:90px; height:90px; top:16px; right:16px }
}

/* -------- TRUST BAR -------- */
.trust-bar{
  background:var(--navy);
  color:var(--cream);
  padding:38px 0;
}
.trust-grid{
  max-width:var(--max); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:36px;
  align-items:start;
}
.trust-cell .num{
  font-family:var(--serif); font-size:46px; color:var(--camel-soft);
  display:block; line-height:1;
  font-variation-settings: "opsz" 24, "wght" 460;
}
.trust-cell .lbl{
  display:block; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(247,241,230,.7);
  margin-top:10px;
}
@media (max-width:760px){
  .trust-grid{ grid-template-columns:repeat(2, 1fr); gap:28px }
  .trust-cell .num{ font-size:38px }
}

/* -------- DOCTORS preview cards (home) -------- */
.doc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--gap-4);
}
.doc-card{
  background:var(--cream-soft);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.doc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2) }
.doc-card .photo{
  aspect-ratio:4/4.6; background:var(--sand);
  overflow:hidden; position:relative;
}
.doc-card .photo img{ width:100%; height:100%; object-fit:cover }
.doc-card .photo .pill{
  position:absolute; top:16px; left:16px;
  background:var(--cream); color:var(--navy);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; padding:8px 12px; border-radius:4px;
}
.doc-card .body{ padding:24px 26px 28px }
.doc-card h3{ margin-bottom:.18em }
.doc-card .credentials{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--camel-deep); margin-bottom:14px;
}
.doc-card p{ color:var(--ink-soft); font-size:17px; line-height:1.55; margin-bottom:14px }
.doc-card .years-band{
  display:inline-block; padding:6px 12px;
  background:var(--cream); border:1px solid var(--rule);
  border-radius:4px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
}
@media (max-width:960px){
  .doc-grid{ grid-template-columns:1fr; gap:24px }
}

/* -------- INDEPENDENT explainer -------- */
.independent{
  background:var(--cream-soft);
  padding:var(--gap-7) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.independent-grid{
  max-width:var(--max-narrow); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns: .9fr 1.1fr; gap:var(--gap-6);
  align-items:start;
}
.indep-stack > * + *{ margin-top:28px }
.indep-stack h4{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--camel-deep); margin-bottom:8px;
}
.indep-stack p{ color:var(--ink-soft) }
.indep-vs{
  background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius);
  padding:30px 30px; box-shadow:var(--shadow-1);
}
.indep-vs table{ width:100%; border-collapse:collapse }
.indep-vs th, .indep-vs td{
  text-align:left; padding:14px 0;
  border-bottom:1px solid var(--rule); font-size:16px;
}
.indep-vs th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
.indep-vs td.us{ color:var(--navy); font-weight:600 }
.indep-vs td.them{ color:var(--ink-soft); font-style:italic }
.indep-vs tr:last-child td{ border-bottom:0 }
@media (max-width:860px){
  .independent-grid{ grid-template-columns:1fr; gap:36px }
}

/* -------- SERVICES strip -------- */
.svc-list{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:0; border-top:1px solid var(--rule);
}
.svc-item{
  padding:32px 28px;
  border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:48px 1fr; gap:22px;
  align-items:start;
}
.svc-item:nth-child(odd){ border-right:1px solid var(--rule) }
.svc-icon{
  width:46px; height:46px; border-radius:50%;
  background:var(--camel); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:20px; font-weight:600;
  font-variation-settings:"opsz" 12, "wght" 500;
}
.svc-item h4{
  font-size:21px; margin-bottom:6px; color:var(--navy);
}
.svc-item p{ font-size:16.5px; color:var(--ink-soft); margin:0 }
@media (max-width:760px){
  .svc-list{ grid-template-columns:1fr }
  .svc-item:nth-child(odd){ border-right:0 }
}

/* -------- BRANDS grid -------- */
.brand-band{ background:var(--navy); color:var(--cream); padding:var(--gap-7) 0 }
.brand-band h2{ color:#fff }
.brand-band .lead{ color:rgba(247,241,230,.78) }
.brand-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:22px;
  margin-top:48px;
}
.brand-tile{
  background:rgba(247,241,230,.05);
  border:1px solid rgba(247,241,230,.15);
  border-radius:var(--radius-sm);
  padding:30px 22px;
  min-height:130px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  transition:background .25s ease, transform .25s ease;
}
.brand-tile:hover{
  background:rgba(247,241,230,.08); transform:translateY(-3px);
}
.brand-tile .b-name{
  font-family:var(--serif); font-size:22px; color:var(--cream);
  margin-bottom:6px;
}
.brand-tile .b-note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--camel-soft); line-height:1.5;
}
@media (max-width:960px){ .brand-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:560px){ .brand-grid{ grid-template-columns:repeat(2,1fr) } }

/* -------- PROCESS steps -------- */
.process-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--gap-3); position:relative;
}
.process-step{
  background:var(--cream-soft); border:1px solid var(--rule);
  border-radius:var(--radius); padding:34px 28px 36px;
  position:relative;
}
.process-step .num{
  font-family:var(--serif); font-size:54px; color:var(--camel);
  display:block; line-height:1; margin-bottom:18px;
  font-variation-settings:"opsz" 32, "wght" 460;
}
.process-step h4{ font-size:22px; margin-bottom:10px }
.process-step p{ font-size:16px; color:var(--ink-soft); margin:0 }
@media (max-width:960px){ .process-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr } }

/* -------- REVIEWS -------- */
.review-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap-3);
}
.review-card{
  background:var(--cream-soft);
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:34px 32px;
}
.review-card .stars{
  color:var(--camel-deep); font-size:18px; letter-spacing:4px;
  margin-bottom:14px;
}
.review-card blockquote{
  margin:0 0 20px; font-family:var(--serif);
  font-size:21px; line-height:1.5; color:var(--navy);
  font-variation-settings:"opsz" 20, "wght" 420;
  font-style:italic;
}
.review-card .who{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
@media (max-width:960px){ .review-grid{ grid-template-columns:1fr } }

/* -------- INSURANCE bar -------- */
.insurance{
  background:var(--cream-deep);
  padding:var(--gap-6) 0;
}
.insurance-grid{
  max-width:var(--max-narrow); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns: 1fr 1fr; gap:var(--gap-5);
  align-items:start;
}
.insur-list{ list-style:none; padding:0; margin:18px 0 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px; }
.insur-list li{
  font-size:16px; color:var(--ink-soft);
  padding-left:18px; position:relative;
}
.insur-list li::before{
  content:"●"; color:var(--camel); position:absolute; left:0; top:0;
  font-size:14px;
}
@media (max-width:760px){
  .insurance-grid{ grid-template-columns:1fr }
  .insur-list{ grid-template-columns:1fr }
}

/* -------- FAQ -------- */
.faq-list{
  border-top:1px solid var(--rule);
}
.faq-item{
  border-bottom:1px solid var(--rule);
  padding:0;
}
.faq-item summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:28px 0;
  cursor:pointer;
  font-family:var(--serif); font-size:22px; color:var(--navy);
  font-variation-settings:"opsz" 18, "wght" 480;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item .indic{
  font-family:var(--serif); font-size:26px; color:var(--camel-deep);
  transition:transform .3s ease; flex-shrink:0;
}
.faq-item[open] .indic{ transform:rotate(45deg) }
.faq-item .ans{
  padding:0 0 28px;
  max-width:78ch; color:var(--ink-soft); font-size:17.5px;
  line-height:1.6;
}

/* -------- FORM (schedule) -------- */
.form-wrap{
  background:var(--cream-soft);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  padding:48px 44px;
  box-shadow:var(--shadow-2);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px }
.field{ display:flex; flex-direction:column; gap:8px }
.field label{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--navy);
}
.field input, .field select, .field textarea{
  background:#fff; border:1.5px solid var(--rule);
  border-radius:6px; padding:16px 18px;
  font-size:17px; color:var(--ink); min-height:56px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ min-height:140px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--camel-deep);
  box-shadow:0 0 0 4px rgba(168,122,69,.15);
}
.form-actions{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap }
.form-fineprint{
  font-size:14px; color:var(--muted); max-width:48ch;
}
@media (max-width:720px){
  .form-row{ grid-template-columns:1fr }
  .form-wrap{ padding:32px 24px }
}

/* -------- VISIT -------- */
.visit-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:var(--gap-5);
  align-items:start;
}
.visit-info-card{
  background:var(--cream-soft); border:1px solid var(--rule);
  border-radius:var(--radius); padding:36px 38px;
}
.visit-info-card h4{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--camel-deep);
  margin:0 0 8px;
}
.visit-info-card .big{
  font-family:var(--serif); font-size:24px; color:var(--navy);
  margin:0 0 26px; line-height:1.4;
}
.hours-row{
  display:flex; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--rule);
  font-size:16.5px;
}
.hours-row:last-child{ border-bottom:0 }
.hours-row .day{ color:var(--navy); font-weight:500 }
.hours-row .time{ color:var(--ink-soft); font-family:var(--mono); font-size:14px }
.map-card{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--rule); aspect-ratio: 4/3.4;
  box-shadow:var(--shadow-2);
}
.map-card iframe{ width:100%; height:100%; border:0; display:block }
@media (max-width:860px){
  .visit-grid{ grid-template-columns:1fr; gap:36px }
}

/* -------- DARK CTA band -------- */
.cta-band{
  background:var(--navy-deep); color:var(--cream);
  padding:var(--gap-7) 0;
  text-align:center;
}
.cta-band h2{ color:#fff; max-width:22ch; margin:0 auto .35em }
.cta-band p{ color:rgba(247,241,230,.78); margin:0 auto 36px; max-width:54ch }
.cta-band .cta-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap }

/* -------- footer -------- */
footer{
  background:var(--navy-deep); color:var(--cream);
  padding:72px 0 32px;
}
.foot-grid{
  max-width:var(--max); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:48px;
}
.foot-col h5{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--camel-soft);
  margin:0 0 18px;
}
.foot-col a, .foot-col p{
  display:block; color:rgba(247,241,230,.78);
  font-size:15.5px; margin-bottom:8px;
  text-decoration:none; transition:color .2s ease;
}
.foot-col a:hover{ color:#fff }
.foot-brand{
  font-family:var(--serif); font-size:22px; color:#fff; margin-bottom:14px;
}
.foot-mini{
  border-top:1px solid rgba(247,241,230,.12);
  margin:54px auto 0; padding:24px 32px 0;
  max-width:var(--max);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(247,241,230,.55);
}
.foot-credit a{ color:var(--camel-soft) }
@media (max-width:860px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:36px }
}
@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr }
}

/* -------- reveals (FAIL-OPEN: hidden class added only by JS after off-screen check) -------- */
.reveal--hidden{
  opacity:0; transform:translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal--in{ opacity:1; transform:none }

/* -------- accessibility -------- */
:focus-visible{
  outline: 3px solid var(--camel-deep);
  outline-offset: 3px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* -------- print -------- */
@media print{
  .topbar,.cta-band,footer{ display:none }
  body{ background:#fff; color:#000 }
}

/* =========================================================
   PREMIUM SIGNATURE LAYER  (v2 — real assets + audiology motifs)
   ========================================================= */

/* ---- real logo lockup in header ---- */
.brand-mark .logo-img{ height:42px; width:auto; display:block; border-radius:4px }

/* ---- AUDIOGRAM hero graphic (signature audiology motif) ---- */
.audiogram{
  position:relative; width:100%; aspect-ratio:1/1;
  background:var(--cream-soft);
  border:1px solid var(--rule); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); overflow:hidden;
  padding:30px 30px 26px;
}
.audiogram::before{
  content:"AUDIOGRAM · 250 – 8000 Hz"; position:absolute;
  top:18px; left:24px; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; color:var(--muted);
}
.audiogram svg{ width:100%; height:100%; overflow:visible }
.ag-grid line{ stroke:var(--rule); stroke-width:1 }
.ag-axis{ stroke:var(--navy); stroke-width:1.3 }
.ag-label{ font-family:var(--mono); font-size:8.5px; fill:var(--muted); letter-spacing:.06em }
.ag-band{ fill:var(--camel); opacity:.10 }
.ag-line{
  fill:none; stroke:var(--camel-deep); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
}
.ag-line.draw{ animation:ag-draw 2.4s cubic-bezier(.6,0,.2,1) .25s forwards }
@keyframes ag-draw{ to{ stroke-dashoffset:0 } }
.ag-dot{ fill:#fff; stroke:var(--camel-deep); stroke-width:2.4; opacity:0; }
.ag-dot.show{ animation:ag-pop .4s ease forwards }
@keyframes ag-pop{ from{opacity:0;transform:scale(.4)} to{opacity:1;transform:scale(1)} }
.audiogram-caption{
  position:absolute; left:24px; right:24px; bottom:18px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:14px;
}
.audiogram-caption .ac-read{
  font-family:var(--serif); font-size:15px; color:var(--navy); font-style:italic;
  font-variation-settings:"opsz" 12,"wght" 420;
}
.audiogram-caption .ac-tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--camel-deep);
}

/* ---- equalizer accent (small soundwave bars) ---- */
.eq{ display:inline-flex; align-items:flex-end; gap:3px; height:18px; margin-right:2px; vertical-align:middle }
.eq span{ width:3px; background:var(--camel); border-radius:2px; height:40%;
  animation:eq-bounce 1.1s ease-in-out infinite }
.eq span:nth-child(2){ animation-delay:.15s } .eq span:nth-child(3){ animation-delay:.3s }
.eq span:nth-child(4){ animation-delay:.45s } .eq span:nth-child(5){ animation-delay:.6s }
@keyframes eq-bounce{ 0%,100%{height:30%} 50%{height:100%} }

/* ---- Smoky Mountain ridgeline divider (place identity) ---- */
.ridge{ display:block; width:100%; height:54px; color:var(--cream-soft) }
.ridge--navy{ color:var(--navy) }
.ridge--deep{ color:var(--navy-deep) }
.ridge--cream{ color:var(--cream) }

/* ---- real-photo warm framing ---- */
.photo-frame{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--sand) }
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block }
.photo-frame--duo img{ filter:saturate(.92) contrast(1.02) }
.photo-frame::after{ content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(31,45,68,.10); border-radius:inherit; pointer-events:none }

/* ---- PLACE band (Smoky Mountain emotional opener) ---- */
.place{ position:relative; background:var(--navy); color:var(--cream); padding:var(--gap-7) 0; overflow:hidden }
.place .wrap-read{ position:relative; z-index:2; text-align:center }
.place h2{ color:#fff }
.place .lead{ color:rgba(247,241,230,.86) }
.place .place-quote{
  font-family:var(--serif); font-style:italic; font-size:clamp(24px,3vw,38px);
  line-height:1.4; color:#fff; max-width:24ch; margin:0 auto;
  font-variation-settings:"opsz" 28,"wght" 420;
}
.place .place-attrib{ font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--camel-soft); margin-top:24px }
.place-topo{ position:absolute; inset:0; opacity:.08; z-index:1;
  background-image:repeating-linear-gradient(115deg, transparent 0 38px, rgba(231,201,155,.5) 38px 39px) }

/* ---- real brand logo WALL ---- */
.logo-wall{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid rgba(247,241,230,.16); border-radius:var(--radius); overflow:hidden;
  margin-top:46px; background:rgba(247,241,230,.04);
}
.logo-wall .cell{
  display:flex; align-items:center; justify-content:center;
  padding:30px 22px; min-height:118px;
  border-right:1px solid rgba(247,241,230,.12); border-bottom:1px solid rgba(247,241,230,.12);
  background:rgba(247,241,230,.96); transition:transform .25s ease, background .25s ease;
}
.logo-wall .cell:hover{ background:#fff; transform:translateY(-2px) }
.logo-wall .cell img{ max-height:46px; width:auto; object-fit:contain; filter:saturate(1) }
.logo-wall .cell:nth-child(5n){ border-right:0 }
@media (max-width:960px){ .logo-wall{ grid-template-columns:repeat(3,1fr) }
  .logo-wall .cell:nth-child(5n){ border-right:1px solid rgba(247,241,230,.12) }
  .logo-wall .cell:nth-child(3n){ border-right:0 } }
@media (max-width:560px){ .logo-wall{ grid-template-columns:repeat(2,1fr) }
  .logo-wall .cell{ min-height:96px; padding:22px 16px }
  .logo-wall .cell:nth-child(3n){ border-right:1px solid rgba(247,241,230,.12) }
  .logo-wall .cell:nth-child(2n){ border-right:0 } }

/* ---- split feature row (real photo + copy) ---- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-6); align-items:center }
.feature--flip .feature-media{ order:2 }
.feature-media{ aspect-ratio:4/3.2; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-2); background:var(--sand) }
.feature-media img{ width:100%; height:100%; object-fit:cover }
.feature h3{ margin-bottom:.4em }
.feature p{ color:var(--ink-soft) }
@media (max-width:860px){ .feature{ grid-template-columns:1fr; gap:32px }
  .feature--flip .feature-media{ order:0 } }

/* ---- hero photo overlay tweaks: parallax hook ---- */
.hero-photo img.parallax{ will-change:transform; transform:scale(1.06) }

/* ---- magnetic CTA ---- */
.btn-magnetic{ will-change:transform }

/* ---- stat ring (about/process) ---- */
.statline{ display:flex; gap:40px; flex-wrap:wrap; margin-top:34px }
.statline .s .n{ font-family:var(--serif); font-size:44px; color:var(--camel-deep); line-height:1;
  font-variation-settings:"opsz" 24,"wght" 460 }
.statline .s .l{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:8px; display:block }

/* ---- doctor card real photo polish ---- */
.doc-card .photo img{ filter:saturate(.95) }

/* ---- second-office card ---- */
.office-2{ background:var(--cream-soft); border:1px solid var(--rule); border-radius:var(--radius);
  padding:32px 34px; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center }
.office-2 .badge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--camel-deep); background:var(--cream); border:1px solid var(--rule); border-radius:6px;
  padding:8px 12px; align-self:start }
@media (max-width:560px){ .office-2{ grid-template-columns:1fr } }

/* ---- header elevation on scroll ---- */
.topbar.is-scrolled{ box-shadow:0 6px 24px -16px rgba(8,40,58,.4); background:rgba(247,242,232,.97) }

/* ---- tick list (Ormond) ---- */
.tick-list{ list-style:none; margin:18px 0 4px; padding:0; display:grid; gap:10px }
.tick-list li{ position:relative; padding-left:32px; color:var(--ink-soft); font-size:17px; line-height:1.5 }
.tick-list li::before{
  content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%;
  background:var(--camel); box-shadow:0 0 0 4px rgba(198,138,56,.16);
}
.tick-list li::after{
  content:""; position:absolute; left:7px; top:9px; width:6px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}