/* ==========================================================================
   Hampshire Clinic — stylesheet
   Visual language reproduced from the client's reference artwork
   (1184px artboard, 1086px content width, cream + restrained gold).
   Content follows the approved landing-page brief.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --cream:        #f7f3ee;
  --cream-2:      #f0ebe5;
  --cream-3:      #f2ece6;
  --card:         #faf7f3;
  --card-soft:    #fbf9f6;
  --gold:         #a88c64;
  --gold-dark:    #93794f;
  --ink:          #211e1b;
  --body:         #4c4640;
  --muted:        #7b7268;
  --line:         rgba(0,0,0,.075);
  --line-strong:  rgba(0,0,0,.12);
  --radius:       14px;
  --radius-sm:    10px;
  --btn-radius:   6px;
  --serif:        'Cormorant Garamond', 'Times New Roman', Times, serif;
  --sans:         'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --shadow-sm:    0 1px 2px rgba(60,48,36,.04), 0 8px 24px -18px rgba(60,48,36,.35);
  --shadow-lg:    0 30px 70px -30px rgba(48,38,28,.45);

  /* section rhythm — one gap between every top-level section, all breakpoints */
  --sec-gap:      72px;
  --block-gap:    32px;   /* rhythm inside a section / between subpage content blocks */
  --band-pad:     56px;   /* vertical padding inside the CTA band */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:#fff; color:var(--ink); padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:1184px; margin:0 auto; padding:0 49px; }
.section{ padding-top:var(--sec-gap); }
/* every top-level section uses the same gap, including the first after the trust strip */
.trustbar + .section{ padding-top:var(--sec-gap); }
/* in-page anchors land clear of the sticky header (nav links carry no visible
   #fragment — see the anchor handler in main.js) */
[id]{ scroll-margin-top:100px; }

/* ---------- Type ---------- */
h1,h2,h3,h4,.serif{ font-family:var(--serif); font-weight:400; color:var(--ink); }
.eyebrow{
  font-size:12px; letter-spacing:.27em; text-transform:uppercase;
  color:#4b453d; font-weight:400; line-height:1.3;
}
h2{ font-size:42px; line-height:1.02; letter-spacing:-.012em; font-weight:400; }
.section-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:32px; margin-bottom:22px;
}
.section-head h2{ margin-bottom:6px; }
.section-head .eyebrow{ margin-top:1px; }
.lead{ font-size:16px; line-height:1.55; color:var(--body); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:400; line-height:1;
  height:40px; padding:0 22px; border-radius:var(--btn-radius);
  white-space:nowrap; transition:background-color .18s ease, color .18s ease,
  border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn .arrow{ font-size:16px; line-height:1; transform:translateY(-1px); }
.btn-gold{ background:var(--gold); color:#fff; }
.btn-gold:hover{ background:var(--gold-dark); }
.btn-outline{ background:#fff; color:var(--ink); border:1px solid #e4dcd2; }
.btn-outline:hover{ border-color:#c9b9a4; }
.btn-ghost{
  background:#fff; color:var(--gold); border:1px solid #e6ded5;
  font-size:14px; height:36px; padding:0 18px;
}
.btn-ghost:hover{ background:#fdfbf8; border-color:#d5c8b6; }
.btn-lg{ height:40px; padding:0 24px; }
.btn-block{ width:100%; }
.wa{ width:17px; height:17px; fill:currentColor; flex:0 0 auto; }
.btn-outline .wa{ fill:#2f2b27; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#f7f2ed; border-bottom:1px solid rgba(0,0,0,.045);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:88px; }
/* the client's logo artwork, used unmodified */
.logo{ display:block; line-height:0; flex:0 0 auto; }
.logo-img{ display:block; height:70px; width:auto; }
.main-nav{ margin-left:auto; }
.main-nav ul{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  font-size:15px; color:#33302c; font-weight:400;
  padding:4px 0; position:relative; transition:color .18s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .22s ease;
}
.main-nav a:hover{ color:var(--gold-dark); }
.main-nav a:hover::after{ right:0; }
.main-nav a.is-current{ color:var(--gold-dark); }
.main-nav a.is-current::after{ right:0; }
.header-actions{ display:flex; align-items:center; gap:11px; }
.header-actions .btn{ height:32px; font-size:14px; padding:0 17px; }
.header-actions .btn .arrow{ font-size:15px; }

.nav-toggle{ display:none; width:40px; height:40px; margin-left:auto; }
.nav-toggle span{
  display:block; width:20px; height:1.6px; background:var(--ink); margin:4px auto;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; height:450px; background:var(--cream-3); }
.hero-media{ position:absolute; inset:0 0 0 auto; width:55.1%; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:left center; }
.hero-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    #f2ece6 0%, #f3ede7 4%, rgba(243,237,231,.5) 9%,
    rgba(244,239,233,.16) 16%, rgba(246,241,235,.04) 26%,
    rgba(246,241,235,0) 36%);
}
.hero-inner{ position:relative; z-index:2; height:100%; display:flex; align-items:center; }
.hero-text{ padding-left:15px; padding-bottom:4px; max-width:600px; }
.hero-title{ margin:17px 0 0; text-transform:uppercase; font-weight:400; color:var(--ink); }
.hero-title span{ display:block; }
.hero-title .l1{ font-size:63px; line-height:1; letter-spacing:-.005em; }
.hero-title .l2{ font-size:42px; line-height:1; letter-spacing:-.05em; margin-top:9px; }
.hero-sub{
  font-family:var(--serif); font-size:28px; line-height:1.2; color:#2a2622;
  margin-top:11px; letter-spacing:-.005em;
}
.hero-copy{ font-size:17px; line-height:1.36; color:#4c4640; margin-top:15px; max-width:348px; }
.hero-cta{ display:flex; gap:13px; margin-top:21px; flex-wrap:wrap; }
.hero-foot{
  display:flex; align-items:center; gap:13px; margin-top:21px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:#55504a;
}
.hero-foot i{ width:3px; height:3px; border-radius:50%; background:#8d857a; }

/* ---------- Trust bar ---------- */
.trustbar{ background:var(--cream-2); padding:24px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item{
  display:flex; align-items:center; gap:13px; padding:0 18px;
  border-left:1px solid rgba(0,0,0,.075); min-height:48px;
}
.trust-item:first-child{ border-left:0; padding-left:0; }
.trust-ico{ width:44px; height:44px; flex:0 0 auto; }
.trust-item h3{
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:#26221f; line-height:1.3;
}
.trust-item p{ font-size:11.5px; color:#8a8177; line-height:1.35; margin-top:3px; }

/* ---------- Cards ---------- */
.card{
  background:var(--card); border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(80,64,48,.03);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card > img{ width:100%; height:auto; border-radius:11px; }
.card-body{ padding:16px 16px 17px; }
.card h3{
  font-family:var(--sans); font-size:15.5px; font-weight:500; color:#26221f; line-height:1.24;
}
.card p{ font-size:13.5px; line-height:1.44; color:var(--muted); margin-top:7px; }

.concern-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.concern-card{ display:flex; flex-direction:column; }
.concern-card .thumb{ padding:3px 3px 0; }
.concern-card .thumb img{ width:100%; aspect-ratio:1.06; object-fit:cover; border-radius:11px; }
.concern-card .card-body{ display:flex; flex-direction:column; flex:1; }
.concern-card .card-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--gold); padding-top:12px;
}
.concern-card .card-link .arrow{ transition:transform .2s ease; }
.concern-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.concern-card:hover .card-link .arrow{ transform:translateX(4px); }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }

.treat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.treat-card .thumb{ padding:3px 3px 0; }
.treat-card .thumb img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:11px; }
.treat-list{ margin-top:9px; }
.treat-list li{
  font-size:13.5px; line-height:1.5; color:var(--muted);
  padding-left:14px; position:relative;
}
.treat-list li::before{
  content:""; position:absolute; left:0; top:8px;
  width:4px; height:4px; border-radius:50%; background:#c4b49c;
}
.treat-list a{ color:#6a6259; border-bottom:1px solid rgba(168,140,100,.45); }
.treat-list a:hover{ color:var(--gold-dark); border-color:var(--gold); }

/* ---------- Awards ---------- */
.awards{ padding-top:var(--sec-gap); }
.award-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
/* the award artwork arrives on flat white, so each one sits on its own white
   tile — a deliberate logo chip rather than a floating white block on cream */
.award{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1.55; padding:14px 16px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(80,64,48,.03);
}
.award img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

/* ---------- Doctor ---------- */
/* contained framed card — the photo and the decorative panel bleed to the card
   edges and are clipped by the radius, so the band reads as one finished panel */
.doctor{
  display:grid; grid-template-columns:36% 1fr 20%; align-items:stretch;
  position:relative;                                   /* anchors the inner hairline */
  width:calc(100% - 98px); max-width:1086px; margin:var(--sec-gap) auto 0;
  background:var(--card);
  border:1px solid rgba(168,140,100,.24);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 22px 46px -32px rgba(33,30,27,.34), inset 0 1px 0 rgba(255,255,255,.7);
}
/* hairline gold rule that ties the card to the eyebrow/gold accents */
.doctor::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 0 0 4px rgba(255,255,255,.35);
}
.doctor-photo img,.doctor-aside img{ width:100%; height:100%; object-fit:cover; }
.doctor-photo{ position:relative; }
.doctor-photo img{ object-position:center top; }
/* the base of the portrait melts into the card instead of being cut hard */
.doctor-photo::after{
  content:""; position:absolute; inset:auto 0 0 0; height:58px; z-index:2;
  background:linear-gradient(180deg,rgba(250,247,243,0),rgba(250,247,243,.92) 88%,var(--card));
}
.doctor-aside{ position:relative; }
.doctor-aside img{ object-position:center center; }
/* blend the decorative panel's inner edge into the card */
.doctor-aside::before{
  content:""; position:absolute; inset:0 auto 0 0; width:46px; z-index:2;
  background:linear-gradient(90deg,var(--card) 0%,rgba(250,247,243,.55) 45%,rgba(250,247,243,0) 100%);
}
.doctor-body{ padding:46px 44px 38px 46px; }
.doctor-body h2{ font-size:42px; }
/* gold rule above the heading — the clinic's accent, used as a divider */
.doctor-body h2::before{
  content:""; display:block; width:46px; height:2px; border-radius:2px;
  background:var(--gold); margin-bottom:21px;
}
.doctor-body .eyebrow{ margin-top:9px; font-size:11.5px; letter-spacing:.22em; }
.doctor-name{ font-family:var(--serif); font-size:30px; color:var(--ink); margin-top:17px; line-height:1.04; }
.doctor-role{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-dark); margin-top:9px; text-wrap:balance;
}
.credentials{ margin-top:16px; }
.credentials li{
  font-size:12.5px; line-height:1.5; color:#5f594f;
  padding-left:16px; position:relative;
}
/* small gold diamond marker — echoes the clinic's geometric mark */
.credentials li::before{
  content:""; position:absolute; left:1px; top:6px; width:5px; height:5px;
  background:var(--gold); transform:rotate(45deg); border-radius:1px;
}
.doctor-copy{ font-size:14.5px; line-height:1.58; color:#4c4640; margin-top:17px; max-width:452px; }
.doctor-copy strong{ font-weight:500; color:#332e29; }
.doctor-quote{
  position:relative; margin-top:19px; overflow:hidden;
  background:linear-gradient(180deg,#f7f2ea 0%,#f2ebe2 100%);
  border-left:3px solid var(--gold); border-radius:10px;
  padding:20px 22px 6px 24px; max-width:452px;
}
.doctor-quote::before{
  content:"\201C"; position:absolute; left:9px; top:-10px;
  font-family:var(--serif); font-size:60px; line-height:1;
  color:rgba(168,140,100,.28); pointer-events:none;
}
.doctor-quote p{ position:relative; font-family:var(--serif); font-size:16px; font-style:italic; color:#332e29; line-height:1.42; }
.signature{ width:148px; height:auto; margin:4px 2px -2px auto; opacity:.92; }

/* ---------- Approach ---------- */
.approach{ padding-top:var(--sec-gap); }
.approach-grid{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:26px; }
.step{ display:flex; gap:16px; padding:0 26px; border-left:1px solid rgba(0,0,0,.075); }
.step:first-child{ border-left:0; padding-left:0; }
.step-ico{ width:54px; height:54px; flex:0 0 auto; margin-top:3px; }
.step-num{ font-size:12px; letter-spacing:.08em; color:var(--gold); display:block; }
.step h3{ font-family:var(--serif); font-size:23px; margin-top:3px; line-height:1.05; }
.step p{ font-size:12.5px; line-height:1.45; color:var(--muted); margin-top:9px; max-width:185px; }

/* ---------- Testimonials ---------- */
.testimonials{ padding-top:var(--sec-gap); }
/* the carousel arrows sit on the vertical centre of the heading block */
.testimonials .section-head{ align-items:center; }
.carousel-nav{ display:flex; gap:9px; }
.round-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid #e2dad0;
  background:#fff; color:#5f594f; display:grid; place-items:center;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.round-btn svg{ width:18px; height:18px; }
.round-btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.round-btn:disabled{ opacity:.4; cursor:default; }
.review-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px)/3);
  gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none;
}
.review-track::-webkit-scrollbar{ display:none; }
.review{ scroll-snap-align:start; padding:22px 24px 24px; background:var(--card-soft); }
.stars{ display:flex; gap:4px; }
.stars svg{ width:15px; height:15px; fill:var(--gold); }
.review-text{ font-size:14.5px; line-height:1.55; color:#4c4640; margin-top:15px; }
.review-author{ font-size:15px; font-weight:500; color:#26221f; margin-top:16px; }
.review-source{ font-size:13.5px; color:var(--muted); margin-top:2px; }
.review-source a{ border-bottom:1px solid rgba(168,140,100,.5); }
.review-source a:hover{ color:var(--gold-dark); }

/* ---------- Clinics ---------- */
.clinics{ padding-top:var(--sec-gap); }
.clinic-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.clinic img{ width:100%; aspect-ratio:1.53; object-fit:cover; border-radius:11px; }
.clinic figcaption{ font-size:15px; color:#3b3631; margin-top:11px; }

/* ---------- Locations ---------- */
.locations{ padding-top:var(--sec-gap); }
.location-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.location-card{ display:grid; grid-template-columns:38% 1fr; overflow:hidden; background:#fbf9f6; }
.location-card > img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.location-body{ padding:20px 22px 18px; }
.location-body h3{
  display:flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:19px; font-weight:500; color:#26221f;
}
.location-body .pin{ width:15px; height:15px; color:var(--gold); flex:0 0 auto; }
.location-body p{ font-size:13.5px; line-height:1.55; color:var(--muted); margin-top:12px; }
.location-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; }
.text-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; color:var(--gold);
}
.text-link .arrow{ transition:transform .2s ease; }
.text-link:hover .arrow{ transform:translateX(4px); }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; margin-top:var(--sec-gap);
  min-height:230px; display:flex; align-items:center;
  background:linear-gradient(102deg,#f6f1eb 0%,#f1e9e0 42%,#eadfd2 100%);
}
.cta-media{ position:absolute; inset:0 0 0 auto; width:49.4%; }
.cta-media img{ width:100%; height:100%; object-fit:cover; object-position:left center; }
.cta-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,#f2ebe3 0%,rgba(242,235,227,.7) 13%,rgba(242,235,227,0) 40%);
}
.cta-inner{ position:relative; z-index:2; width:100%; padding-top:var(--band-pad); padding-bottom:var(--band-pad); }
/* .container's shorthand padding is re-declared later for tablet/phone and would
   win over the single-class rule above, leaving the band with no vertical air —
   so the band re-asserts it with a two-class selector */
.cta-inner.container{ padding-top:var(--band-pad); padding-bottom:var(--band-pad); }
.cta-text h2{ font-size:38px; letter-spacing:-.012em; }
.cta-text p{ font-size:15.5px; line-height:1.5; color:#4c4640; margin-top:12px; max-width:520px; }
.smallprint{ font-size:12px; line-height:1.5; color:#7d746a; margin-top:14px; max-width:520px; }

/* ---------- Footer ---------- */
.site-footer{ background:#efeae4; padding:var(--sec-gap) 0 28px; }
.footer-inner{ display:flex; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.footer-brand{ max-width:250px; }
.footer-contacts{ display:flex; gap:38px; flex-wrap:wrap; }
.footer-col h4{
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#6d6459; font-weight:500; margin-bottom:9px;
}
.footer-col p,.footer-col a{ font-size:13px; line-height:1.65; color:#4a443d; }
.footer-col a:hover{ color:var(--gold-dark); }
.socials{ display:flex; gap:14px; }
.socials svg{ width:17px; height:17px; fill:currentColor; }
.socials a{ color:#26221f; display:block; transition:color .18s ease, transform .18s ease; }
.socials a:hover{ color:var(--gold); transform:translateY(-2px); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid rgba(0,0,0,.08); margin-top:22px; padding-top:15px;
}
.footer-bottom p{ font-size:11.5px; color:#6f675e; line-height:1.6; }
.footer-bottom a{ border-bottom:1px solid rgba(0,0,0,.18); }

/* ---------- Mobile action bar ---------- */
/* phones get a fixed booking bar: the two actions that matter, always in reach */
.mobile-cta{ display:none; }
@media (max-width:720px){
  .mobile-cta{
    display:flex; align-items:center; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(249,245,240,.93);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line-strong);
    box-shadow:0 -10px 28px -20px rgba(48,38,28,.55);
  }
  .mobile-cta .btn{ flex:1; min-width:0; height:44px; padding:0 10px; font-size:13.5px; }
  /* keep the last footer lines clear of the bar */
  .site-footer{ padding-bottom:96px; }
}

/* ---------- Booking dialog ---------- */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.is-open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(38,31,25,.45); }
.modal-panel{
  position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  background:#fdfbf8; border-radius:16px; box-shadow:var(--shadow-lg);
  padding:32px 34px 30px;
}
/* the dialog scrolls on its own quiet gold bar instead of the browser's
   default grey one (Chrome/Edge/Safari use the pseudo-elements; Firefox gets
   the guarded fallback below) */
.modal-panel::-webkit-scrollbar{ width:6px; }
.modal-panel::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
.modal-panel::-webkit-scrollbar-thumb{
  background:rgba(168,140,100,.45); border-radius:99px;
}
.modal-panel::-webkit-scrollbar-thumb:hover{ background:rgba(168,140,100,.72); }
@supports not selector(::-webkit-scrollbar){
  .modal-panel{ scrollbar-width:thin; scrollbar-color:rgba(168,140,100,.55) transparent; }
}
.modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; color:#5f594f;
  border:1px solid #e6ded5; background:#fff;
}
.modal-close:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.modal h2{ font-size:30px; }
.modal .eyebrow{ margin-top:8px; }
.modal-intro{ font-size:14px; line-height:1.55; color:var(--body); margin-top:12px; }
.form-grid{ display:grid; gap:14px; margin-top:20px; }
.field label{
  display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#6d6459; margin-bottom:7px;
}
.field input,.field select{
  width:100%; height:42px; padding:0 13px; font:400 15px var(--sans); color:var(--ink);
  background:#fff; border:1px solid #e3dbd1; border-radius:8px;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237b7268' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}
.field input:focus,.field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(168,140,100,.13); }
.field .error{ font-size:12px; color:#b4453b; margin-top:6px; display:none; }
.field.has-error input,.field.has-error select{ border-color:#cf8b82; }
.field.has-error .error{ display:block; }
.form-note{ font-size:12px; line-height:1.5; color:#7d746a; margin-top:16px; }
.form-note a{ border-bottom:1px solid rgba(0,0,0,.2); }
.modal-success{ text-align:center; padding:8px 0 4px; }
.modal-success .tick{
  width:54px; height:54px; border-radius:50%; background:rgba(168,140,100,.14);
  display:grid; place-items:center; margin:0 auto 16px; color:var(--gold);
}
.modal-success h3{ font-family:var(--serif); font-size:27px; color:var(--ink); }
.modal-success p{ font-size:14px; line-height:1.6; color:var(--body); margin-top:12px; }
.modal-success .summary{
  text-align:left; background:#f4efe8; border-radius:8px; padding:14px 16px;
  margin-top:18px; font-size:13.5px; line-height:1.6; color:#4c4640;
}
.modal-success .summary b{ font-weight:500; color:#26221f; }

/* ==========================================================================
   Concern subpages
   ========================================================================== */
.page-hero{ position:relative; overflow:hidden; background:var(--cream-3); }
.page-hero .container{ position:relative; z-index:2; padding-top:52px; padding-bottom:50px; }
.page-hero h1{ font-size:52px; line-height:1.03; margin-top:14px; letter-spacing:-.012em; }
.page-hero .intro{ font-size:17px; line-height:1.5; color:#4c4640; margin-top:16px; max-width:520px; }
.page-hero-media{ position:absolute; inset:0 0 0 auto; width:42%; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,#f3ede7 0%,rgba(243,237,231,.5) 16%,rgba(244,238,232,0) 42%);
}
.crumbs{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#6d6459; }
.crumbs a:hover{ color:var(--gold-dark); }
.page-hero + .container{ padding-top:var(--sec-gap); }
.page-hero + .container .block:first-child{ padding-top:0; }
.content-grid{ display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:start; }
.block{ padding:var(--block-gap) 0; }
.block h2{ font-size:30px; margin-bottom:12px; }
.block h3{ font-size:22px; }
.block p{ font-size:15.5px; line-height:1.68; color:var(--body); }
.block p + p{ margin-top:12px; }
.block + .block{ border-top:1px solid rgba(0,0,0,.07); }
.checklist li{
  font-size:15px; line-height:1.6; color:var(--body);
  padding-left:20px; position:relative; margin-top:8px;
}
.checklist li::before{
  content:""; position:absolute; left:2px; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--gold);
}
.side-card{
  background:var(--card); border-radius:var(--radius); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(80,64,48,.04); padding:24px 24px 26px; margin-top:32px;
}
.side-card h3{ font-family:var(--serif); font-size:24px; }
.side-card p{ font-size:13.5px; line-height:1.55; color:var(--muted); margin-top:10px; }
.side-card .btn{ margin-top:16px; }
.teaser{ border-top:1px solid rgba(0,0,0,.08); padding:18px 0; }
.teaser:last-child{ border-bottom:1px solid rgba(0,0,0,.08); }
.teaser h3{ font-family:var(--sans); font-size:15.5px; font-weight:500; color:#26221f; }
.teaser p{ font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:6px; }
.teaser .suit{ font-size:12.5px; color:#87806f; margin-top:6px; }
.teaser-links{ display:flex; gap:18px; margin-top:10px; font-size:13.5px; color:var(--gold); }
.next-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.smallprint-block{ font-size:12.5px; line-height:1.6; color:#7d746a; padding-top:26px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .main-nav ul{ gap:20px; }
  .header-inner{ gap:16px; height:80px; }
  .logo-img{ height:62px; }
  .hero-title .l1{ font-size:56px; }
  .hero-title .l2{ font-size:37px; }
  .content-grid{ grid-template-columns:1fr 300px; gap:40px; }
}

@media (max-width:980px){
  :root{ --sec-gap:56px; --block-gap:28px; --band-pad:44px; }
  .container{ padding:0 30px; }
  .main-nav{ display:none; }
  .nav-toggle{ display:block; margin-left:0; }
  .header-actions{ margin-left:auto; }
  .main-nav.open{
    display:block; position:absolute; left:0; right:0; top:80px;
    background:#f8f4ef;
    border-top:1px solid rgba(168,140,100,.24);      /* the clinic's gold hairline */
    border-bottom:1px solid rgba(0,0,0,.07);
    border-radius:0 0 var(--radius) var(--radius);   /* the site's card radius */
    padding:6px 30px 20px;
    box-shadow:0 24px 44px -28px rgba(60,48,36,.55);
  }
  .main-nav.open ul{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav.open li{ width:100%; border-bottom:1px solid rgba(0,0,0,.055); }
  .main-nav.open li:last-child{ border-bottom:0; }
  .main-nav.open a{
    display:flex; align-items:center; gap:10px;
    padding:16px 2px; font-size:16.5px; font-weight:400;
  }
  /* no sliding underline in the stacked panel — the row itself is the target */
  .main-nav.open a::after{ content:none; }
  .main-nav.open a:hover,.main-nav.open a:focus-visible{ color:var(--gold-dark); }
  /* the page you are on is marked with the clinic's gold diamond */
  .main-nav.open a.is-current{ color:var(--gold-dark); }
  .main-nav.open a.is-current::before{
    content:""; flex:0 0 5px; width:5px; height:5px;
    background:var(--gold); transform:rotate(45deg); border-radius:1px;
  }
  /* dim the page behind the open menu (:has() degrades gracefully) */
  body:has(.main-nav.open)::after{
    content:""; position:fixed; inset:0; z-index:80;
    background:rgba(38,31,25,.3);
  }
  /* the stacked hero's 40px bottom padding sat on top of the trust strip's own
     24px top padding, leaving a 64px void under the photo — the strip's own
     padding is the separation */
  .hero{ height:auto; padding:44px 0 0; display:flex; flex-direction:column; }
  .hero-inner{ order:1; display:block; }
  .hero-media{ order:2; position:relative; inset:auto; width:100%; height:300px; margin-top:30px; }
  .hero-media::before{ background:linear-gradient(180deg,rgba(247,243,238,.5) 0%,rgba(247,243,238,0) 32%); }
  .hero-inner{ display:block; }
  .hero-text{ padding-left:0; max-width:none; }
  .hero-title .l1{ font-size:48px; }
  .hero-title .l2{ font-size:32px; }
  .hero-copy{ max-width:none; }
  .concern-grid{ grid-template-columns:repeat(3,1fr); }
  .treat-grid{ grid-template-columns:repeat(2,1fr); }
  .award-grid{ grid-template-columns:repeat(3,1fr); }
  .doctor{ grid-template-columns:1fr; width:calc(100% - 60px); }
  .doctor-photo img{ height:380px; object-position:center 8%; }
  .doctor-aside{ display:none; }
  .doctor-body{ padding:30px 30px 34px; }
  .doctor-copy,.doctor-quote{ max-width:none; }
  .approach-grid,.trust-grid{ grid-template-columns:repeat(2,1fr); gap:26px 0; }
  /* the desktop cap of 185px is narrower than the mobile/tablet column and made
     the step copy wrap early with space still free on the right */
  .step p{ max-width:none; }
  .step:nth-child(3),.trust-item:nth-child(3){ border-left:0; padding-left:0; }
  .clinic-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .location-grid{ grid-template-columns:1fr; }
  .review-track{ grid-auto-columns:calc((100% - 24px)/2); }
  .cta-media{ position:relative; width:100%; height:220px; inset:auto; }
  .cta-band{ flex-direction:column; align-items:stretch; }
  .content-grid{ grid-template-columns:1fr; gap:0; }
  .next-links{ grid-template-columns:repeat(2,1fr); }
  .page-hero-media{ order:2; position:relative; inset:auto; width:100%; height:260px; }
  .page-hero{ display:flex; flex-direction:column; }
  .page-hero .container{ order:1; }
  .page-hero-media::before{ background:linear-gradient(180deg,rgba(247,243,238,.5) 0%,rgba(247,243,238,0) 30%); }
  .page-hero h1{ font-size:42px; }
  .footer-inner{ gap:28px; }
}

@media (max-width:720px){
  :root{ --sec-gap:44px; --block-gap:24px; --band-pad:32px; }
  .container{ padding:0 20px; }
  .header-inner{ gap:10px; height:72px; }
  .logo-img{ height:56px; }
  .main-nav.open{ top:72px; }
  .header-actions{ gap:8px; }
  .header-actions .btn{ height:32px; padding:0 12px; font-size:13px; }
  .header-actions .btn-gold{ display:none; }
  .doctor{ width:calc(100% - 40px); }
  .doctor-photo img{ height:450px; }
  h2,.doctor-body h2{ font-size:31px; }
  .hero-title .l1{ font-size:37px; }
  .hero-title .l2{ font-size:25px; letter-spacing:-.03em; }
  .hero-sub{ font-size:21px; }
  .hero-copy{ font-size:16px; }
  .eyebrow{ font-size:11px; letter-spacing:.18em; }
  .concern-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  /* two columns on phones, matching the concern grid above; type steps down
     with the narrower column so entries still read cleanly */
  .treat-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .treat-card .card-body{ padding:13px 12px 14px; }
  .treat-card h3{ font-size:14px; line-height:1.25; }
  .treat-list{ margin-top:8px; }
  .treat-list li{ font-size:12.5px; line-height:1.45; padding-left:13px; }
  .treat-list li::before{ top:6px; }
  .section-head{ flex-direction:column; gap:16px; }
  .section-head .btn,.section-head .carousel-nav{ align-self:flex-start; }
  /* reviews: the arrows stay level with the heading at the top-right instead of
     stacking under it (this section is a carousel, the arrows are its control) */
  .testimonials .section-head{ flex-direction:row; align-items:center; gap:14px; }
  .testimonials .section-head > div:first-child{ min-width:0; }
  .testimonials .section-head .carousel-nav{ align-self:center; flex:0 0 auto; }
  .trust-grid{ grid-template-columns:1fr; gap:18px; }
  .trust-item{ padding:0; border-left:0; }
  .approach-grid{ grid-template-columns:1fr; gap:22px; }
  .step{ padding:0; border-left:0; }
  .review-track{ grid-auto-columns:86%; }
  .location-card{ grid-template-columns:1fr; }
  .location-card > img{ height:210px; }
  .cta-text h2{ font-size:27px; }
  .award-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .award{ aspect-ratio:1.5; padding:12px 14px; }
  /* CTA band on phones: the text sat flush against the photo above and the
     band's bottom edge, so it gets its own air and a touch more side inset */
  .cta-inner.container{ padding:28px 24px 32px; }
  .clinic-grid{ grid-template-columns:1fr; }
  .next-links{ grid-template-columns:1fr; }
  .modal{ padding:0; align-items:flex-end; }
  .modal-panel{ border-radius:16px 16px 0 0; max-height:94vh; padding:26px 20px 24px; }
  .page-hero .container{ padding-top:36px; padding-bottom:34px; }
  .page-hero h1{ font-size:34px; }
  .footer-contacts{ gap:24px; }
}

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