:root {
  --black: #000000;
  --gold: #d0a96f;
  --cream: #f1f3f4;
  --white: #ffffff;
  --slate: #000000;
  --sky: #c1b7aa;
  --stone: #909294;
  --text: #171717;
  --muted: #666666;
  --line: rgba(0, 0, 0, .12);
  --max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 9999;
  background: var(--gold);
  color: #000;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { top: 16px; }

.shell {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .96);
  border-bottom: 1px solid rgba(208, 169, 111, .28);
  backdrop-filter: blur(14px);
}
.nav-wrap {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { width: clamp(220px, 22vw, 360px); flex: 0 0 auto; }
.brand img { display: block; width: 100%; height: auto; max-height: 62px; object-fit: contain; object-position: left center; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.main-nav a {
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: color .2s ease;
}
.main-nav a:not(.nav-cta):hover { color: var(--gold); }
.main-nav .nav-cta {
  color: #000;
  background: var(--gold);
  padding: 13px 18px;
  letter-spacing: .025em;
}
.main-nav .nav-cta:hover { background: #e0be8b; }
.menu-toggle { display: none; }

.hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  background: var(--black);
  color: var(--white);
}
.hero-copy { display: flex; align-items: center; }
.hero-copy-inner {
  width: min(590px, calc(100% - 64px));
  margin-left: max(24px, calc((100vw - var(--max)) / 2));
  padding: 80px 48px 80px 0;
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: .72rem;
  font-weight: 700;
}
.eyebrow-dark { color: #8c6e42; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(3.5rem, 6vw, 6.8rem); font-weight: 600; }
h2 { font-size: clamp(2.4rem, 4.4vw, 4.5rem); font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.hero-lede {
  margin: 30px 0 34px;
  max-width: 570px;
  color: rgba(255,255,255,.78);
  font-size: 1.05rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 21px;
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 700;
  transition: all .2s ease;
}
.button-gold { background: var(--gold); color: #000; }
.button-gold:hover { background: #e0be8b; transform: translateY(-1px); }
.button-black { background: #000; color: #fff; }
.button-black:hover { background: #242424; transform: translateY(-1px); }
.button-outline-light { border-color: rgba(255,255,255,.44); color: #fff; }
.button-outline-light:hover { border-color: var(--gold); color: var(--gold); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.text-link span { font-size: 1.1rem; transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.text-link-light { color: #fff; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-image { margin: 0; overflow: hidden; min-height: 760px; }
.hero-image img { height: 100%; object-fit: cover; object-position: 58% center; }

.section { padding: 110px 0; }
.section-heading { margin-bottom: 54px; }
.section-heading.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-heading.narrow { max-width: 800px; }
.section-heading p:not(.eyebrow) { color: var(--muted); margin: 22px auto 0; max-width: 720px; }

.conditions-preview { background: var(--cream); }
.condition-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.condition-card {
  position: relative;
  min-height: 330px;
  padding: 34px 28px 36px;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: transform .22s ease, background .22s ease;
}
.condition-card:hover { background: #faf8f4; transform: translateY(-4px); }
.card-number {
  display: block;
  margin-bottom: 76px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.condition-card h3 { margin-bottom: 16px; }
.condition-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.center-cta { text-align: center; margin-top: 46px; }

.solutions { background: var(--black); color: #fff; overflow: hidden; }
.solution-layout {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 88px;
  align-items: center;
}
.solution-image-wrap { position: relative; min-height: 700px; }
.solution-main {
  width: 78%;
  height: 650px;
  object-fit: cover;
  object-position: center;
}
.solution-detail {
  position: absolute;
  width: 48%;
  height: 320px;
  right: 0;
  bottom: -30px;
  object-fit: cover;
  border: 10px solid #000;
}
.solution-copy h2 { max-width: 640px; }
.solution-copy .intro { color: rgba(255,255,255,.70); max-width: 610px; margin: 28px 0 34px; }
.solution-list { border-top: 1px solid rgba(255,255,255,.16); }
.solution-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}
.solution-list a b { color: var(--gold); font-size: 1.1rem; }
.solution-list a:hover span { color: var(--gold); }
.split-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

.results-preview { background: #fff; }
.split-heading {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 70px;
  align-items: end;
}
.split-heading > p { margin: 0 0 10px; color: var(--muted); max-width: 520px; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.result-card { margin: 0; background: var(--cream); }
.result-card img { aspect-ratio: 1.45 / 1; object-fit: cover; }
.result-card figcaption {
  padding: 16px 18px 18px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.story-section { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 760px; background: #000; color: #fff; }
.story-image img { height: 100%; object-fit: cover; object-position: center; }
.story-copy { display: flex; align-items: center; }
.story-inner { padding: 82px clamp(46px, 6vw, 92px); max-width: 730px; }
.story-inner h2 { margin-bottom: 30px; }
.story-inner > p:not(.eyebrow):not(.brand-line) { color: rgba(255,255,255,.72); }
.brand-line {
  margin: 38px 0 28px;
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.testimonials { background: #f7f5f1; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonial-grid blockquote {
  margin: 0;
  min-height: 250px;
  padding: 34px;
  background: #fff;
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial-grid blockquote p { margin: 0 0 30px; font-size: 1.15rem; line-height: 1.5; font-weight: 500; }
.testimonial-grid cite { font-style: normal; color: var(--muted); font-size: .78rem; font-weight: 600; }

.visit-preview { background: var(--white); }
.visit-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 84px; align-items: center; }
.visit-copy h2 { max-width: 590px; }
.visit-copy > p:not(.eyebrow) { color: var(--muted); max-width: 590px; margin: 26px 0 30px; }
.visit-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0 36px; }
.visit-details > div { padding-top: 18px; border-top: 1px solid var(--line); }
.visit-details span { display: block; color: #8c6e42; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.visit-details strong { font-size: .86rem; line-height: 1.55; }
.visit-details a { text-decoration: none; }
.visit-images { position: relative; min-height: 610px; }
.visit-exterior { width: 84%; height: 510px; margin-left: auto; object-fit: cover; }
.visit-interior {
  position: absolute;
  width: 50%;
  height: 280px;
  left: 0;
  bottom: 0;
  object-fit: cover;
  border: 10px solid #fff;
}

.final-cta { background: #000; color: #fff; padding: 84px 0; border-top: 1px solid rgba(208,169,111,.3); }
.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 70px; }
.final-cta-inner h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
.final-cta-inner p:not(.eyebrow) { color: rgba(255,255,255,.68); max-width: 640px; margin-bottom: 0; }
.final-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; flex: 0 0 auto; }
.phone-link { color: #fff; text-decoration: none; font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }
.phone-link:hover { color: var(--gold); }

.site-footer { background: #090909; color: rgba(255,255,255,.72); padding: 72px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .9fr; gap: 80px; }
.footer-brand img { width: 155px; margin-bottom: 18px; }
.footer-brand p { max-width: 420px; margin: 0; font-size: .85rem; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-links h3 { color: #fff; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.footer-links a, .footer-links p { color: rgba(255,255,255,.66); text-decoration: none; font-size: .8rem; margin: 0; }
.footer-links a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.42);
  font-size: .68rem;
}
.footer-bottom p { margin: 0; }
.medical-note { max-width: 680px; text-align: right; }

@media (max-width: 1080px) {
  .condition-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-layout { gap: 54px; }
  .solution-image-wrap { min-height: 610px; }
  .solution-main { height: 570px; width: 82%; }
  .solution-detail { height: 250px; }
  .visit-layout { gap: 54px; }
}

@media (max-width: 900px) {
  .shell { width: min(calc(100% - 36px), var(--max)); }
  .site-header { position: sticky; }
  .nav-wrap { min-height: 72px; }
  .brand { width: 132px; }
  .brand { width: min(230px, 62vw); }
  .brand img { width: 100%; height: auto; max-height: 52px; }
  .menu-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .menu-toggle span { width: 24px; height: 2px; background: var(--gold); display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #000;
    padding: 16px 18px 24px;
    border-top: 1px solid rgba(208,169,111,.2);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.10); }
  .main-nav .nav-cta { margin-top: 12px; text-align: center; border: 0; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy-inner { width: min(100% - 36px, 760px); margin: 0 auto; padding: 82px 0 64px; }
  .hero-image { min-height: 520px; max-height: 650px; }
  .hero-image img { object-position: 55% center; }
  .section { padding: 86px 0; }
  .solution-layout, .visit-layout { grid-template-columns: 1fr; }
  .solution-image-wrap { order: 2; }
  .solution-copy { order: 1; }
  .results-grid { grid-template-columns: 1fr; }
  .result-card img { aspect-ratio: 1.7 / 1; }
  .split-heading { grid-template-columns: 1fr; gap: 24px; }
  .story-section { grid-template-columns: 1fr; }
  .story-image { min-height: 520px; }
  .story-inner { padding: 72px 36px; max-width: 760px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-grid blockquote { min-height: 0; }
  .visit-images { min-height: 560px; }
  .final-cta-inner { align-items: flex-start; flex-direction: column; gap: 32px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr; gap: 48px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .shell { width: min(calc(100% - 28px), var(--max)); }
  h1 { font-size: clamp(3rem, 14vw, 4.4rem); }
  h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .hero-copy-inner { width: min(100% - 28px, 760px); padding: 64px 0 54px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-trust { flex-direction: column; gap: 7px; margin-top: 38px; }
  .hero-image { min-height: 420px; }
  .section { padding: 72px 0; }
  .condition-grid { grid-template-columns: 1fr; }
  .condition-card { min-height: 250px; }
  .card-number { margin-bottom: 44px; }
  .solution-image-wrap { min-height: 490px; }
  .solution-main { height: 450px; width: 88%; }
  .solution-detail { width: 52%; height: 200px; border-width: 7px; }
  .split-actions { flex-direction: column; align-items: stretch; }
  .split-actions .button { width: 100%; }
  .story-image { min-height: 390px; }
  .story-inner { padding: 58px 22px; }
  .visit-details { grid-template-columns: 1fr; }
  .visit-images { min-height: 430px; }
  .visit-exterior { width: 91%; height: 360px; }
  .visit-interior { width: 56%; height: 190px; border-width: 7px; }
  .final-cta { padding: 68px 0; }
  .final-actions { width: 100%; }
  .final-actions .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .medical-note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}


.hero-about { min-height: 680px; }
.about-intro { background: #fff; }
.intro-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 64px;
  align-items: start;
}
.intro-layout p:not(.eyebrow) { margin-top: 0; color: var(--muted); }
.bio-list { display: grid; gap: 34px; }
.bio-card {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 42px;
  align-items: center;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
}
.bio-card.reverse { grid-template-columns: 1fr 360px; }
.bio-card.reverse .bio-photo { order: 2; }
.bio-card.reverse .bio-copy { order: 1; }
.bio-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.bio-copy h2 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 18px; }
.bio-copy p:not(.eyebrow) { color: var(--muted); margin: 0 0 16px; }
@media (max-width: 900px) {
  .intro-layout { grid-template-columns: 1fr; gap: 24px; }
  .bio-card, .bio-card.reverse { grid-template-columns: 1fr; gap: 24px; }
  .bio-card.reverse .bio-photo, .bio-card.reverse .bio-copy { order: initial; }
}
@media (max-width: 620px) {
  .bio-card { padding: 22px; }
}


/* Supporting page system */
.page-hero { min-height: 690px; display:grid; grid-template-columns: 46% 54%; background:#000; color:#fff; }
.page-hero-copy { display:flex; align-items:center; }
.page-hero-inner { width:min(590px, calc(100% - 64px)); margin-left:max(24px, calc((100vw - var(--max))/2)); padding:80px 48px 80px 0; }
.page-hero-image { margin:0; min-height:690px; overflow:hidden; }
.page-hero-image img { height:100%; object-fit:cover; object-position:center; }
.page-hero h1, .gallery-hero h1 { font-size:clamp(3.2rem,5.6vw,6.4rem); }
.soft-section { background:#f7f5f1; }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.topic-card { min-height:270px; padding:28px; background:#fff; border:1px solid var(--line); text-decoration:none; transition:.2s ease; }
.topic-card:hover { transform:translateY(-4px); border-color:rgba(208,169,111,.7); }
.topic-card > span, .service-card > span, .three-step span { display:block; color:#8c6e42; font-weight:700; font-size:.72rem; letter-spacing:.12em; margin-bottom:54px; }
.topic-card h3 { margin-bottom:14px; }
.topic-card p, .service-card p { color:var(--muted); font-size:.9rem; margin:0; }
.content-band { padding:110px 0; background:#fff; }
.dark-band { background:#000; color:#fff; }
.media-split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.reverse-media .content-copy { order:2; }
.reverse-media .content-image { order:1; }
.content-copy h2 { margin-bottom:24px; }
.content-copy > p:not(.eyebrow) { color:var(--muted); }
.dark-band .content-copy > p:not(.eyebrow), .dark-band .clean-list { color:rgba(255,255,255,.72); }
.content-image { margin:0; }
.content-image img { min-height:480px; max-height:650px; object-fit:cover; }
.inline-actions { margin-top:28px; }
.stacked-guide { display:grid; gap:0; }
.guide-row { display:grid; grid-template-columns:110px 1fr; gap:30px; padding:54px 0; border-bottom:1px solid var(--line); }
.guide-row:first-child { border-top:1px solid var(--line); }
.guide-number { color:var(--gold); font-weight:700; letter-spacing:.1em; }
.guide-row h2 { font-size:clamp(2rem,3.4vw,3.2rem); margin-bottom:18px; }
.guide-row p:last-child { max-width:820px; color:var(--muted); }
.notice-section { padding:76px 0; background:var(--slate); color:#fff; }
.notice-card { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.notice-card h2 { font-size:clamp(2rem,3vw,3rem); }
.notice-card > p { color:rgba(255,255,255,.78); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { background:#fff; border:1px solid var(--line); overflow:hidden; }
.feature-card img { aspect-ratio:1.15/1; object-fit:cover; }
.feature-card > div { padding:26px; }
.feature-card h3 { margin-bottom:14px; }
.feature-card p:not(.eyebrow) { color:var(--muted); min-height:105px; }
.clean-list { list-style:none; padding:0; margin:30px 0 0; }
.clean-list li { padding:13px 0 13px 25px; border-bottom:1px solid rgba(255,255,255,.14); position:relative; }
.clean-list li::before { content:'—'; position:absolute; left:0; color:var(--gold); }
.dark-list { color:var(--text); }
.dark-list li { border-bottom:1px solid var(--line); }
.info-panel { padding:46px; background:#fff; border-top:3px solid var(--gold); }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-card { background:#fff; padding:38px; border-top:3px solid var(--gold); }
.compare-card p { color:var(--muted); }
.three-step { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.three-step > div { min-height:250px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.three-step span { margin-bottom:60px; }
.three-step p { color:var(--muted); }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.service-card { min-height:300px; padding:36px; background:#f7f5f1; border:1px solid var(--line); }
.service-card > span { margin-bottom:72px; }
.gallery-hero { padding:90px 0; background:#000; color:#fff; }
.gallery-hero-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.gallery-hero p:not(.eyebrow) { color:rgba(255,255,255,.72); max-width:620px; }
.gallery-hero img { max-height:600px; object-fit:cover; }
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.gallery-card { margin:0; background:#f7f5f1; }
.gallery-card img { width:100%; aspect-ratio:1.5/1; object-fit:cover; }
.gallery-card figcaption { padding:16px 18px 18px; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; }
.proof-band { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.proof-band p:not(.eyebrow) { color:rgba(255,255,255,.72); }
.visit-page-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.visit-page-grid > div:first-child > p:not(.eyebrow) { color:var(--muted); }
.contact-stack { margin-top:34px; display:grid; gap:0; }
.contact-stack > div { padding:18px 0; border-top:1px solid var(--line); }
.contact-stack span { display:block; font-size:.68rem; font-weight:700; color:#8c6e42; text-transform:uppercase; letter-spacing:.1em; }
.contact-stack a, .contact-stack strong { display:block; margin-top:5px; font-size:1rem; color:var(--text); text-decoration:none; }
.visit-photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.visit-photo-grid img:first-child { grid-column:1/-1; aspect-ratio:1.9/1; }
.visit-photo-grid img { height:100%; min-height:230px; object-fit:cover; }
.schedule-form-zone { padding:90px 0; background:#000; color:#fff; }
.form-placeholder { border:1px solid rgba(208,169,111,.45); padding:48px; display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center; }
.form-placeholder h2 { font-size:clamp(2.2rem,3.8vw,3.6rem); }
.form-placeholder p:not(.eyebrow) { color:rgba(255,255,255,.7); }
.form-placeholder-actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.faq-mini { max-width:900px; margin:0 auto; border-top:1px solid var(--line); }
.faq-mini details { border-bottom:1px solid var(--line); padding:18px 0; }
.faq-mini summary { cursor:pointer; font-weight:700; }
.faq-mini details p { color:var(--muted); }

@media (max-width: 1080px) {
  .topic-grid { grid-template-columns:repeat(2,1fr); }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { display:grid; grid-template-columns:42% 58%; }
  .feature-card img { height:100%; aspect-ratio:auto; }
  .feature-card p:not(.eyebrow) { min-height:0; }
}
@media (max-width: 900px) {
  .page-hero { grid-template-columns:1fr; min-height:0; }
  .page-hero-inner { width:min(100% - 36px,760px); margin:0 auto; padding:82px 0 64px; }
  .page-hero-image { min-height:500px; }
  .media-split, .gallery-hero-inner, .proof-band, .visit-page-grid, .notice-card, .form-placeholder { grid-template-columns:1fr; gap:38px; }
  .reverse-media .content-copy, .reverse-media .content-image { order:initial; }
  .gallery-grid { grid-template-columns:1fr; }
  .three-step { grid-template-columns:1fr; }
  .service-grid { grid-template-columns:1fr; }
  .form-placeholder-actions { justify-content:flex-start; }
}
@media (max-width: 620px) {
  .topic-grid, .comparison-grid { grid-template-columns:1fr; }
  .topic-card { min-height:230px; }
  .guide-row { grid-template-columns:1fr; gap:10px; padding:40px 0; }
  .feature-card { grid-template-columns:1fr; }
  .content-image img { min-height:360px; }
  .gallery-hero { padding:70px 0; }
  .visit-photo-grid { grid-template-columns:1fr; }
  .visit-photo-grid img:first-child { grid-column:auto; aspect-ratio:auto; }
  .form-placeholder { padding:30px 22px; }
  .form-placeholder-actions { flex-direction:column; }
}

/* Compact consultation form */
.journey-strip { background:#f7f5f1; border-bottom:1px solid var(--line); }
.journey-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.journey-grid > div { min-height:190px; padding:30px 26px; border-right:1px solid var(--line); }
.journey-grid > div:first-child { border-left:1px solid var(--line); }
.journey-grid span { display:block; color:#8c6e42; font-size:.7rem; font-weight:700; letter-spacing:.12em; margin-bottom:32px; }
.journey-grid strong { display:block; font-size:1rem; margin-bottom:8px; }
.journey-grid p { margin:0; color:var(--muted); font-size:.82rem; }
.journey-grid a { display:inline-block; margin-top:10px; color:#8c6e42; font-size:.75rem; font-weight:700; text-decoration:none; }

.compact-form-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:72px; align-items:start; }
.form-intro { position:sticky; top:118px; }
.form-intro h2 { font-size:clamp(2.7rem,4vw,4.6rem); }
.form-intro > p:not(.eyebrow) { color:rgba(255,255,255,.7); max-width:500px; }
.form-reassurance { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.form-reassurance span { border:1px solid rgba(208,169,111,.38); color:var(--gold); padding:8px 11px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }

.consultation-form { background:#fff; color:var(--text); padding:42px; border-top:4px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.22); }
.form-progress { display:none; grid-template-columns:1fr auto; gap:18px; align-items:center; margin-bottom:34px; }
html.js .form-progress { display:grid; }
.progress-track { height:4px; background:#e8e4dc; overflow:hidden; }
.progress-fill { display:block; width:33.333%; height:100%; background:var(--gold); transition:width .25s ease; }
.form-progress p { margin:0; color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }

.form-step { border:0; padding:0; margin:0 0 34px; min-width:0; }
html.js .consultation-form.is-enhanced .form-step { display:none; }
html.js .consultation-form.is-enhanced .form-step.is-active { display:block; }
.form-step legend { width:100%; padding:0; margin:0 0 10px; font-size:clamp(1.7rem,2.7vw,2.5rem); font-weight:600; letter-spacing:-.035em; line-height:1.12; }
.form-step legend span { color:var(--gold); font-size:.76rem; letter-spacing:.12em; vertical-align:middle; margin-right:10px; }
.step-help { margin:0 0 24px; color:var(--muted); font-size:.9rem; }
.step-error { min-height:22px; margin:12px 0 0; color:#9f2d20; font-size:.78rem; font-weight:700; }

.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice-grid-single { grid-template-columns:1fr; }
.choice-card { position:relative; display:block; cursor:pointer; }
.choice-card input { position:absolute; opacity:0; pointer-events:none; }
.choice-card span { display:block; min-height:100%; padding:18px 18px 17px; border:1px solid #d8d4cd; background:#fff; transition:.18s ease; }
.choice-card b { display:block; margin-bottom:5px; font-size:.86rem; }
.choice-card small { display:block; color:var(--muted); font-size:.74rem; line-height:1.45; }
.choice-card:hover span { border-color:#b89a6c; background:#fcfaf6; }
.choice-card input:checked + span { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); background:#fbf7ef; }
.choice-card input:focus-visible + span { outline:3px solid rgba(30,84,92,.25); outline-offset:2px; }

.results-nudge { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:18px; padding:14px 16px; background:#f7f5f1; font-size:.76rem; }
.results-nudge a { color:#8c6e42; font-weight:700; text-decoration:none; }

.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { margin-bottom:18px; }
.field label, .field-label { display:block; margin-bottom:7px; font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.field label small { color:var(--muted); text-transform:none; letter-spacing:0; font-weight:500; }
.field input, .field textarea { width:100%; border:1px solid #d1cdc5; border-radius:0; background:#fff; padding:13px 14px; color:var(--text); outline:none; }
.field input:focus, .field textarea:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(208,169,111,.2); }
.field textarea { resize:vertical; min-height:110px; }
.contact-method { margin:4px 0 20px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.contact-method .field-label { margin:0 8px 0 0; }
.contact-method label { font-size:.84rem; cursor:pointer; }
.contact-method input { accent-color:var(--gold); }
.consent-line { display:flex; align-items:flex-start; gap:10px; margin-top:4px; font-size:.79rem; line-height:1.45; cursor:pointer; }
.consent-line input { margin-top:3px; accent-color:var(--gold); }
.privacy-note { color:var(--muted); font-size:.7rem; margin:13px 0 0; }
.form-step-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.button-outline-dark { border-color:#bbb5aa; color:#222; background:transparent; }
.button-outline-dark:hover { border-color:#000; }
.js-only { display:none; }
html.js .js-only { display:flex; }
.form-status { display:none; margin-bottom:22px; padding:13px 15px; font-size:.8rem; font-weight:600; }
.form-status.is-error { display:block; color:#7d241b; background:#fff0ec; border-left:3px solid #a73627; }
.hp-field { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.confirmation-page { min-height:100vh; display:grid; place-items:center; background:#000; color:#fff; padding:30px; }
.confirmation-card { max-width:760px; text-align:center; padding:64px 44px; border:1px solid rgba(208,169,111,.38); }
.confirmation-card > img { width:190px; margin:0 auto 42px; }
.confirmation-card h1 { font-size:clamp(3rem,7vw,6rem); }
.confirmation-card > p:not(.eyebrow) { max-width:570px; margin:24px auto 34px; color:rgba(255,255,255,.72); }
.confirmation-actions { display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; }

@media (max-width: 900px) {
  .journey-grid { grid-template-columns:1fr 1fr; }
  .journey-grid > div:nth-child(3) { border-left:1px solid var(--line); border-top:1px solid var(--line); }
  .journey-grid > div:nth-child(4) { border-top:1px solid var(--line); }
  .compact-form-layout { grid-template-columns:1fr; gap:38px; }
  .form-intro { position:static; }
}
@media (max-width: 620px) {
  .journey-grid { grid-template-columns:1fr; }
  .journey-grid > div { min-height:0; border-left:1px solid var(--line); border-top:1px solid var(--line); }
  .journey-grid > div:first-child { border-top:0; }
  .journey-grid span { margin-bottom:18px; }
  .consultation-form { padding:28px 20px; }
  .choice-grid, .field-grid { grid-template-columns:1fr; }
  .results-nudge { align-items:flex-start; flex-direction:column; gap:6px; }
  .contact-method { align-items:flex-start; flex-direction:column; gap:10px; }
  .form-step-actions, .final-form-actions { flex-direction:column-reverse; align-items:stretch; }
  .form-step-actions .button { width:100%; }
  .confirmation-card { padding:48px 24px; }
}


/* Launch polish */
.main-nav a[aria-current="page"]:not(.nav-cta) { color: var(--gold); }
.page-home .hero-image img { object-position: 50% 48%; }
.page-about .page-hero-image img { object-position: 50% 43%; }
.page-conditions .page-hero-image img { object-position: 50% 42%; }
.page-treatments .page-hero-image img { object-position: 50% 42%; }
.page-services .page-hero-image img { object-position: 50% 50%; }
.page-schedule .page-hero-image img { object-position: 50% 50%; }
.content-image img { width:100%; aspect-ratio:4/3; min-height:0; max-height:none; }
.feature-card img { aspect-ratio:4/3; }
.testimonial-card { margin:0; min-height:250px; padding:34px; background:#fff; border-top:3px solid var(--gold); display:flex; flex-direction:column; justify-content:flex-start; }
.testimonial-card h3 { margin:0 0 18px; font-size:1.15rem; }
.testimonial-card p { margin:0; color:var(--muted); font-size:.95rem; line-height:1.65; }
.field-grid { grid-template-columns:1fr 1fr; }
.field-grid .field:first-child { grid-column:1/-1; }
@media (max-width:620px) { .field-grid .field:first-child { grid-column:auto; } }

.page-about .hero-image img { object-position: 50% 45%; }


/* v6 visual corrections — preserve full team hero, repair footer logo sizing, and show before/after images uncropped */
.footer-brand img {
  width: 155px;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
}
.site-footer img { height: auto; }

/* Homepage hero: the team portrait must be shown in full. No shoulder/edge cropping. */
.page-home .hero {
  min-height: 650px;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
}
.page-home .hero-image {
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 24px 0;
}
.page-home .hero-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center center;
}

/* Before/after images are evidence, not decorative crops. Always show the whole comparison. */
.results-grid { align-items: start; }
.result-card {
  overflow: hidden;
  border: 1px solid var(--line);
}
.result-card img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #111;
}
.gallery-grid { align-items: start; }
.gallery-card {
  overflow: hidden;
  border: 1px solid var(--line);
}
.gallery-card img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #111;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .page-home .hero { min-height: 590px; grid-template-columns: 42% 58%; }
  .page-home .hero-image { min-height: 590px; }
}

@media (max-width: 900px) {
  .page-home .hero { min-height: 0; grid-template-columns: 1fr; }
  .page-home .hero-image {
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  .page-home .hero-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}


/* v7 targeted browser-tested corrections */
/* Home hero: keep the team photo in its natural landscape geometry instead of stretching with the text column. */
.page-home .hero {
  min-height: 0;
  align-items: start;
}
.page-home .hero-image {
  align-self: start;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
}
.page-home .hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 45%;
}

/* Bio images: explicitly override raw HTML height attributes from the source photos. */
.bio-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Supporting service/treatment media: enforce the wrapper proportion so raw pixel dimensions cannot blow up the layout. */
.content-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.content-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.page-services .content-image img { object-position: 50% 45%; }

@media (max-width: 900px) {
  .page-home .hero-image {
    aspect-ratio: 3 / 2;
    min-height: 0;
    max-height: none;
  }
  .page-home .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% 45%;
  }
}


/* v8 layout corrections: treatment cards + schedule hero */
/* Treatment cards: give every treatment image an intentional, consistent viewport. */
.page-treatments .feature-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-treatments .feature-card img {
  display: block;
  width: 100%;
  height: 240px !important;
  min-height: 240px;
  max-height: 240px;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: 50% 50%;
}
.page-treatments .feature-card:nth-child(1) img { object-position: 50% 38%; }
.page-treatments .feature-card:nth-child(2) img { object-position: 50% 48%; }
.page-treatments .feature-card:nth-child(3) img { object-position: 50% 50%; }
.page-treatments .feature-card > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.page-treatments .feature-card .text-link { margin-top: auto; }
.page-treatments .feature-card p:not(.eyebrow) { min-height: 0; }

/* Schedule hero: keep the image in its own column and prevent large headline text from painting underneath it. */
.page-schedule .page-hero {
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  min-height: 650px;
  align-items: stretch;
}
.page-schedule .page-hero-copy,
.page-schedule .page-hero-inner {
  min-width: 0;
}
.page-schedule .page-hero-inner {
  width: min(650px, calc(100% - 56px));
  padding-right: 28px;
}
.page-schedule .page-hero h1 {
  max-width: 620px;
  font-size: clamp(3.5rem, 4.8vw, 5.4rem);
  line-height: 1.04;
}
.page-schedule .page-hero-image {
  min-height: 650px;
  position: relative;
  z-index: 1;
}
.page-schedule .page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
}

@media (max-width: 1080px) {
  .page-treatments .feature-card {
    display: grid !important;
    grid-template-columns: 38% 62%;
    min-height: 280px;
  }
  .page-treatments .feature-card img {
    width: 100%;
    height: 100% !important;
    min-height: 280px;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .page-schedule .page-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .page-schedule .page-hero-inner {
    width: min(100% - 36px, 760px);
    padding-right: 0;
  }
  .page-schedule .page-hero h1 {
    max-width: 720px;
    font-size: clamp(3.2rem, 9vw, 5rem);
  }
  .page-schedule .page-hero-image {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .page-schedule .page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 620px) {
  .page-treatments .feature-card {
    display: flex !important;
    min-height: 0;
  }
  .page-treatments .feature-card img {
    height: 220px !important;
    min-height: 220px;
    max-height: 220px;
  }
  .page-schedule .page-hero h1 {
    font-size: clamp(2.9rem, 14vw, 4.2rem);
  }
}


/* v9 About hero correction — preserve the entire four-person portrait without cropping either edge. */
.page-about .hero {
  min-height: 760px;
  align-items: stretch;
}
.page-about .hero-image {
  min-height: 0;
  height: 760px;
  max-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  padding: 0;
}
.page-about .hero-image img {
  display: block;
  width: auto;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  .page-about .hero { min-height: 0; }
  .page-about .hero-image {
    min-height: 0;
    height: min(760px, 100vw * 1.5);
    max-height: 760px;
    background: #000;
  }
  .page-about .hero-image img {
    width: auto;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width: 620px) {
  .page-about .hero-image {
    height: auto;
    max-height: none;
  }
  .page-about .hero-image img {
    width: 100%;
    height: auto !important;
    max-height: none;
  }
}


/* v10 updates */
.page-about .bio-photo img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #f6f6f3;
  padding: 0;
}


/* v10 supplied Meet The Team artwork */
.team-bio-art-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  max-width: 1080px;
  margin: 0 auto;
}
.team-bio-art {
  margin: 0;
  background: #000;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}
.team-bio-art img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .team-bio-art-grid { grid-template-columns: 1fr; gap: 24px; }
}


/* =========================================================
   v11 CLIENT REVISION — BLACK + GOLD + SANDY BEACH
   Brand-guide reference: Sandy Beach #C1B7AA, Luxury Sun #D0A96F,
   Rich Black #000000, Bistro Cream #F1F3F4.
   Teal is intentionally removed from card/text-box backgrounds.
   ========================================================= */
:root {
  --sandstone: #c1b7aa;
  --sandstone-soft: #efeae4;
  --sandstone-pale: #f7f4f0;
  --gold-deep: #8b6a3e;
  --slate: #000000;
  --sky: #c1b7aa;
}
.eyebrow-dark { color: var(--gold-deep); }
.soft-section, .sand-section, .journey-strip { background: var(--sandstone-soft); }
.notice-section { background: #000; }
.notice-black { background:#000; }
.topic-card, .service-card, .compare-card, .info-panel, .testimonial-card { background: var(--sandstone-pale); }
.feature-card { background: var(--sandstone-pale); border-color: rgba(0,0,0,.14); }
.feature-card > div { background: var(--sandstone-pale); }
.feature-card:hover { border-color: rgba(208,169,111,.8); box-shadow:0 12px 30px rgba(0,0,0,.08); transform:translateY(-3px); }

/* Homepage: two consolidated Types of Hair Loss cards */
.condition-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; border:0; }
.condition-grid-two .condition-card { border:1px solid rgba(0,0,0,.12); min-height:300px; background:var(--sandstone-pale); }
.condition-grid-two .card-number { margin-bottom:48px; }
.condition-card-link { display:block; text-decoration:none; }
.condition-card-link .card-arrow { display:block; margin-top:28px; color:var(--gold-deep); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.condition-card-link:hover .card-arrow { color:#000; }

/* Supporting pages use one consistent three-card system */
.page-conditions .feature-grid,
.page-treatments .feature-grid,
.page-services .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.page-conditions .feature-card,
.page-treatments .feature-card,
.page-services .feature-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.page-conditions .feature-card img,
.page-treatments .feature-card img,
.page-services .feature-card img { width:100%; height:255px!important; min-height:255px; max-height:255px; object-fit:cover; aspect-ratio:auto!important; }
.page-conditions .feature-card > div,
.page-treatments .feature-card > div,
.page-services .feature-card > div { padding:28px; flex:1; display:flex; flex-direction:column; }
.page-conditions .feature-card p:not(.eyebrow),
.page-treatments .feature-card p:not(.eyebrow),
.page-services .feature-card p:not(.eyebrow) { min-height:0; }
.page-conditions .feature-card .text-link,
.page-treatments .feature-card .text-link,
.page-services .feature-card .text-link { margin-top:auto; padding-top:22px; }

/* More comfortable content rhythm */
.content-band { padding:96px 0; }
.content-copy > p:not(.eyebrow) { font-size:1rem; line-height:1.75; }
.micro-note { margin-top:22px!important; font-size:.82rem!important; color:#6b6258!important; }
.clean-list.dark-list li { border-bottom:1px solid rgba(0,0,0,.11); }

/* Small three-up explainer rows */
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0; }
.mini-grid > div { background:var(--sandstone-pale); border-top:3px solid var(--gold); padding:22px; }
.mini-grid strong { display:block; margin-bottom:7px; }
.mini-grid span { display:block; color:var(--muted); font-size:.82rem; line-height:1.5; }

/* Services custom-hair detail grid */
.service-detail-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-bottom:54px; }
.service-detail-grid article { min-height:270px; padding:28px; background:var(--sandstone-pale); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-detail-grid article > span { display:block; color:var(--gold-deep); font-size:.72rem; font-weight:700; letter-spacing:.12em; margin-bottom:48px; }
.service-detail-grid article p { color:var(--muted); font-size:.88rem; }
.section-media-wide { display:grid; grid-template-columns:1.15fr .85fr; gap:0; background:#000; color:#fff; align-items:stretch; }
.section-media-wide img { width:100%; min-height:430px; height:100%; object-fit:cover; }
.section-media-wide > div { padding:54px; align-self:center; }
.section-media-wide > div p:not(.eyebrow) { color:rgba(255,255,255,.72); }

/* Alma TED photo pair supplied by client */
.alma-gallery { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin:0 0 28px; }
.alma-gallery figure { margin:0; overflow:hidden; background:#000; }
.alma-gallery img { width:100%; height:520px; object-fit:cover; }
.alma-gallery figure:first-child img { object-position:50% 50%; }
.alma-gallery figure:last-child img { object-position:50% 46%; }
.service-copy-panel { max-width:980px; margin:0 auto; padding:42px; background:#fff; border-top:3px solid var(--gold); }
.service-copy-panel > p { color:var(--muted); }

/* Lashes: custom vector treatment graphic instead of generic stock imagery */
.feature-card-graphic > .lash-graphic { height:255px; min-height:255px; max-height:255px; }
.lash-graphic { position:relative; display:grid; place-items:center; background:#000; overflow:hidden; }
.lash-graphic::before { content:''; width:150px; height:68px; border-bottom:3px solid var(--gold); border-radius:0 0 55% 55%; transform:rotate(-3deg); }
.lash-graphic::after { content:''; position:absolute; width:132px; height:56px; border-bottom:1px solid rgba(255,255,255,.28); border-radius:0 0 55% 55%; transform:translateY(-2px) rotate(-3deg); }
.lash-graphic span, .lash-graphic span::before, .lash-graphic span::after { position:absolute; content:''; display:block; width:2px; height:32px; background:var(--gold); border-radius:50%; transform-origin:bottom; }
.lash-graphic span { transform:translate(-30px,5px) rotate(-28deg); }
.lash-graphic span::before { left:28px; top:4px; transform:rotate(19deg); }
.lash-graphic span::after { left:58px; top:8px; transform:rotate(38deg); }
.lash-panel { background:#000; min-height:470px; display:flex; flex-direction:column; justify-content:center; padding:44px; color:#fff; }
.lash-graphic-large { min-height:260px; margin-bottom:24px; }
.lash-panel p { color:rgba(255,255,255,.72); margin:0; text-align:center; }

/* Scalp Spa callout stays on Services while preserving the 3 primary sections */
.scalp-spa-callout { display:grid; grid-template-columns:.8fr 1.2fr; gap:54px; align-items:center; margin-top:86px; padding-top:70px; border-top:1px solid var(--line); }
.scalp-spa-callout > div:first-child > p:not(.eyebrow) { color:var(--muted); }
.scalp-spa-images { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.scalp-spa-images img { width:100%; height:360px; object-fit:cover; }

/* Schedule: use the approved exterior hero and keep the form clean */
.page-schedule .page-hero-image img { object-position:50% 52%; }
.page-schedule .intake-section { border-top-color:var(--gold); }

/* Replace teal focus shadows with gold/black family */
.choice-card input:focus-visible + span { outline-color:rgba(208,169,111,.35); }

@media (max-width:1080px) {
  .page-conditions .feature-grid,.page-treatments .feature-grid,.page-services .feature-grid { grid-template-columns:1fr; }
  .page-conditions .feature-card,.page-treatments .feature-card,.page-services .feature-card { display:grid!important; grid-template-columns:38% 62%; min-height:285px; }
  .page-conditions .feature-card img,.page-treatments .feature-card img,.page-services .feature-card img,.feature-card-graphic > .lash-graphic { height:100%!important; min-height:285px; max-height:none; }
  .service-detail-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .condition-grid-two,.mini-grid,.alma-gallery,.section-media-wide,.scalp-spa-callout { grid-template-columns:1fr; }
  .condition-grid-two .condition-card { min-height:0; }
  .section-media-wide img { min-height:360px; }
  .service-detail-grid { grid-template-columns:1fr 1fr; }
  .alma-gallery img { height:auto; max-height:600px; }
}
@media (max-width:620px) {
  .page-conditions .feature-card,.page-treatments .feature-card,.page-services .feature-card { grid-template-columns:1fr!important; }
  .page-conditions .feature-card img,.page-treatments .feature-card img,.page-services .feature-card img,.feature-card-graphic > .lash-graphic { height:240px!important; min-height:240px; }
  .service-detail-grid,.scalp-spa-images { grid-template-columns:1fr; }
  .service-detail-grid article { min-height:0; }
  .scalp-spa-images img { height:auto; }
  .service-copy-panel { padding:28px 22px; }
}


/* ===== v12 client revisions ===== */
:root { --sandstone:#c1b7aa; --sandstone-pale:#f3f0ec; --gold-deep:#8c6e42; }
body { background:#fff; }

/* About dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown-toggle { border:0; background:transparent; color:#fff; font:inherit; font-size:.82rem; font-weight:600; letter-spacing:.04em; padding:0; cursor:pointer; }
.nav-dropdown-toggle span { color:var(--gold); margin-left:4px; }
.nav-dropdown.current .nav-dropdown-toggle, .nav-dropdown-toggle:hover { color:var(--gold); }
.nav-submenu { display:none; position:absolute; top:calc(100% + 18px); right:-24px; width:260px; background:#0a0a0a; border:1px solid rgba(208,169,111,.35); padding:10px; box-shadow:0 18px 45px rgba(0,0,0,.28); }
.nav-submenu a { display:block; padding:11px 12px!important; border-bottom:1px solid rgba(255,255,255,.08); font-size:.76rem; }
.nav-submenu a:last-child { border-bottom:0; }
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu, .nav-dropdown.open .nav-submenu { display:block; }

/* Footer expanded to four columns */
.footer-grid { grid-template-columns:1.4fr .75fr .9fr 1fr; }

/* Flexible treatment card grid: 3 + 2 */
.feature-grid-five { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
.feature-grid-five .feature-card { grid-column:span 2; }
.feature-grid-five .feature-card:nth-child(4), .feature-grid-five .feature-card:nth-child(5) { grid-column:span 3; }

/* Accordion system */
.accordion-group { border-top:1px solid rgba(0,0,0,.18); margin-top:34px; }
.accordion-item { border-bottom:1px solid rgba(0,0,0,.18); background:transparent; }
.accordion-item summary { list-style:none; cursor:pointer; position:relative; padding:24px 52px 24px 0; font-weight:700; font-size:1.02rem; color:#111; }
.accordion-item summary::-webkit-details-marker { display:none; }
.accordion-item summary::after { content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--gold-deep); font-size:1.7rem; font-weight:400; }
.accordion-item[open] summary::after { content:'–'; }
.accordion-content { max-width:920px; padding:0 48px 24px 0; color:var(--muted); }
.accordion-content p { margin:0; }
.section-text-link { display:inline-flex; margin-top:28px; color:#111; text-decoration:none; font-weight:700; border-bottom:2px solid var(--gold); padding-bottom:4px; }
.section-text-link:hover { color:var(--gold-deep); }
.treatment-media { display:grid; grid-template-columns:.92fr 1.08fr; gap:54px; align-items:start; margin-top:32px; }
.treatment-media.reverse { grid-template-columns:1.08fr .92fr; }
.treatment-media img { width:100%; max-height:540px; object-fit:cover; }

/* Resource and About pages */
.resource-hero { padding:82px 0; background:var(--sandstone-pale); }
.resource-hero-grid { display:grid; grid-template-columns:1fr .9fr; gap:72px; align-items:center; }
.resource-hero h1 { font-size:clamp(3rem,5vw,5.8rem); color:#000; }
.resource-hero p:not(.eyebrow) { color:#5f5a54; max-width:700px; }
.resource-hero img { width:100%; max-height:560px; object-fit:cover; }
.resource-hero .button { margin-top:24px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.resource-card { display:block; text-decoration:none; min-height:230px; padding:30px; background:#fff; border:1px solid rgba(0,0,0,.13); border-top:4px solid var(--gold); transition:.2s ease; }
.resource-card:hover { transform:translateY(-4px); box-shadow:0 15px 34px rgba(0,0,0,.08); }
.resource-card span, .policy-grid article>span, .info-trio article>span { color:var(--gold-deep); font-size:.72rem; letter-spacing:.12em; font-weight:700; }
.resource-card h3 { margin:42px 0 10px; }
.resource-card p { color:var(--muted); }
.policy-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.policy-grid article { padding:34px; background:var(--sandstone-pale); border-top:4px solid var(--gold); }
.policy-grid h2 { font-size:2rem; margin:34px 0 16px; }
.policy-grid p { color:var(--muted); }
.info-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.info-trio article { padding:32px; background:#fff; border:1px solid rgba(0,0,0,.12); }
.info-trio h3 { margin:34px 0 12px; }
.info-trio p { color:var(--muted); }
.finance-note { margin:32px 0 0; color:var(--muted); font-size:.82rem; }
.blog-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.blog-card { padding:34px; background:var(--sandstone-pale); border-top:4px solid var(--gold); }
.blog-card h2 { font-size:2rem; margin-bottom:16px; }
.blog-card p:not(.eyebrow) { color:var(--muted); }

/* FAQ */
.faq-layout { display:grid; grid-template-columns:260px 1fr; gap:70px; align-items:start; }
.faq-jump { position:sticky; top:120px; padding:24px; background:var(--sandstone-pale); }
.faq-jump a { display:block; padding:11px 0; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.12); font-weight:600; font-size:.85rem; }
.faq-section { scroll-margin-top:120px; margin-bottom:64px; }
.faq-section h2 { font-size:clamp(2rem,3vw,3rem); margin-bottom:20px; }
.faq-item { border-top:1px solid rgba(0,0,0,.18); }
.faq-item:last-child { border-bottom:1px solid rgba(0,0,0,.18); }
.faq-item summary { list-style:none; cursor:pointer; padding:22px 52px 22px 0; position:relative; font-weight:700; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:8px; color:var(--gold-deep); font-size:1.5rem; top:15px; }
.faq-item[open] summary::after { content:'–'; }
.faq-answer { padding:0 52px 22px 0; max-width:900px; color:var(--muted); }
.faq-answer p { margin:0; }
.source-note { background:#f7f7f7; padding:24px 0; color:#6b6b6b; font-size:.78rem; }
.faq-bridge { padding:46px 0; background:var(--sandstone-pale); border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); }
.faq-bridge-inner { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.faq-bridge h2 { font-size:clamp(1.7rem,2.7vw,2.6rem); }
.text-link-strong { font-weight:700; white-space:nowrap; }

/* Gallery repair: never force before/after images into a crop */
.page-gallery .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.page-gallery .gallery-card { background:var(--sandstone-pale); overflow:hidden; }
.page-gallery .gallery-card img { display:block; width:100%; height:auto!important; max-height:none!important; aspect-ratio:auto!important; object-fit:contain!important; background:#111; }
.page-gallery .gallery-card figcaption { background:var(--sandstone-pale); }

/* Never use old solid black learn-more blocks inside content sections */
.content-band .button-black { background:transparent; color:#111; border:0; border-bottom:2px solid var(--gold); padding:0 0 4px; min-height:0; }

@media(max-width:1080px){
 .feature-grid-five{grid-template-columns:1fr 1fr}.feature-grid-five .feature-card,.feature-grid-five .feature-card:nth-child(4),.feature-grid-five .feature-card:nth-child(5){grid-column:auto}
 .footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-brand{grid-column:1/-1}
 .resource-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
 .main-nav .nav-dropdown { border-bottom:1px solid rgba(255,255,255,.1); }
 .nav-dropdown-toggle { width:100%; text-align:left; padding:14px 4px; }
 .nav-submenu { position:static; width:auto; background:#111; border:0; box-shadow:none; margin:0 0 8px; padding:0 12px; display:none!important; }
 .nav-dropdown.open .nav-submenu { display:block!important; }
 .nav-submenu a { padding:11px 6px!important; }
 .resource-hero-grid,.treatment-media,.treatment-media.reverse,.faq-layout{grid-template-columns:1fr;gap:34px}
 .resource-grid,.policy-grid,.info-trio,.blog-grid{grid-template-columns:1fr}
 .faq-jump{position:static}
 .faq-bridge-inner{align-items:flex-start;flex-direction:column}
 .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
 .page-gallery .gallery-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
 .feature-grid-five{grid-template-columns:1fr}
 .resource-hero{padding:58px 0}
 .resource-grid{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr}
 .footer-brand{grid-column:auto}
 .accordion-item summary{padding-right:42px}
 .accordion-content{padding-right:8px}
}

/* ===== v13 working revisions: homepage simplification + unified hero banners ===== */

/* Homepage: keep the question, remove the card wall, and move directly into solutions. */
.page-home .conditions-preview {
  padding: 82px 0 64px;
  background: #fff;
}
.page-home .conditions-preview .section-heading {
  margin-bottom: 0;
}
.page-home .conditions-preview .section-heading > p:not(.eyebrow) {
  margin-bottom: 22px;
}

/* Home story: concise brand statement after moving the supporting copy into the hero. */
.page-home .story-section {
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  min-height: 500px;
}
.page-home .story-image {
  min-height: 500px;
  max-height: 500px;
  overflow: hidden;
}
.page-home .story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
}
.page-home .story-inner {
  padding: 58px clamp(42px, 6vw, 92px);
}
.page-home .story-inner h2 {
  margin-bottom: 16px;
}
.page-home .brand-line {
  margin: 10px 0 22px;
  font-size: clamp(1.8rem, 2.7vw, 2.8rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Client-review slider replaces the Confidence / Privacy / Trust cards. */
.testimonials {
  background: var(--sandstone-pale);
}
.testimonial-slider {
  max-width: 940px;
  margin: 44px auto 0;
}
.testimonial-track {
  position: relative;
  min-height: 290px;
}
.testimonial-slide {
  display: none;
  margin: 0;
  min-height: 290px;
  padding: 54px clamp(34px, 6vw, 76px);
  background: #fff;
  border-top: 4px solid var(--gold);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.testimonial-slide.is-active {
  display: flex;
}
.review-stars {
  color: var(--gold-deep);
  letter-spacing: .16em;
  font-size: 1rem;
  margin-bottom: 26px;
}
.testimonial-slide > p {
  margin: 0;
  max-width: 760px;
  color: #111;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  line-height: 1.34;
  font-weight: 600;
  letter-spacing: -.025em;
}
.testimonial-slide footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 30px;
}
.testimonial-slide footer strong {
  font-size: .92rem;
}
.testimonial-slide footer span {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 22px;
}
.testimonial-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.22);
  background: transparent;
  color: #000;
  font-size: 1.1rem;
  cursor: pointer;
}
.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
.testimonial-dots {
  display: flex;
  gap: 8px;
}
.testimonial-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c8c1b7;
  cursor: pointer;
}
.testimonial-dot.is-active {
  background: #000;
}

/*
   Unified top-banner geometry.
   The main navigational pages now share the same 44/56 text-to-image split and height,
   so moving page-to-page feels deliberate rather than like separate templates.
*/
.page-home .hero,
.page-conditions .page-hero,
.page-treatments .page-hero,
.page-services .page-hero,
.page-about .page-hero,
.page-team .page-hero,
.page-schedule .page-hero {
  min-height: 620px !important;
  height: 620px;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%) !important;
  align-items: stretch;
  background: #000;
}
.page-home .hero-copy,
.page-conditions .page-hero-copy,
.page-treatments .page-hero-copy,
.page-services .page-hero-copy,
.page-about .page-hero-copy,
.page-team .page-hero-copy,
.page-schedule .page-hero-copy {
  min-width: 0;
  padding-left: max(32px, calc((100vw - var(--max))/2));
  display: flex;
  align-items: center;
}
.page-home .hero-copy-inner,
.page-conditions .page-hero-inner,
.page-treatments .page-hero-inner,
.page-services .page-hero-inner,
.page-about .page-hero-inner,
.page-team .page-hero-inner,
.page-schedule .page-hero-inner {
  width: 100% !important;
  max-width: 610px;
  margin: 0 !important;
  padding: 62px 42px 62px 0 !important;
}
.page-home .hero-image,
.page-conditions .page-hero-image,
.page-treatments .page-hero-image,
.page-services .page-hero-image,
.page-about .page-hero-image,
.page-team .page-hero-image,
.page-schedule .page-hero-image {
  min-height: 620px !important;
  height: 620px !important;
  max-height: 620px !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #111;
}
.page-home .hero-image img,
.page-conditions .page-hero-image img,
.page-treatments .page-hero-image img,
.page-services .page-hero-image img,
.page-about .page-hero-image img,
.page-team .page-hero-image img,
.page-schedule .page-hero-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  padding: 0 !important;
}
.page-home .hero-image img { object-position: 50% 45% !important; }
.page-conditions .page-hero-image img { object-position: 50% 42% !important; }
.page-treatments .page-hero-image img { object-position: 50% 46% !important; }
.page-services .page-hero-image img { object-position: 50% 48% !important; }
.page-about .page-hero-image img,
.page-team .page-hero-image img { object-position: 50% 45% !important; }
/* v17.34 — the hero box keeps a fixed 570px height while growing wider, so on
   large screens cover was cropping 193px vertically and clipping the doors.
   The photo was trimmed to a 1.10 aspect (sky off the top, a little pavement
   off the bottom) which sits between the narrow-screen box (0.94) and the
   wide-screen box (1.24), so neither extreme crops much. Focal point sits a
   little low so any residual trim comes off sky, never the entrance. */
.page-schedule .page-hero-image img { object-position: 50% 56% !important; }

/* Prevent individual page heading rules from creating visually different banner scales. */
.page-home .hero h1,
.page-hero h1 {
  max-width: 610px !important;
  font-size: clamp(3.5rem, 5vw, 5.6rem) !important;
  line-height: 1.02 !important;
}
.page-home .hero-lede,
.page-hero .hero-lede {
  max-width: 590px;
  line-height: 1.68;
}

/* Gallery uses the same banner geometry, while retaining its own black editorial treatment. */
.gallery-hero {
  min-height: 620px;
  height: 620px;
  padding: 0 !important;
  background: #000;
}
.gallery-hero .gallery-hero-inner {
  width: 100%;
  max-width: none;
  min-height: 620px;
  height: 620px;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0,44%) minmax(0,56%);
  gap: 0;
  align-items: stretch;
}
.gallery-hero .gallery-hero-inner > div {
  padding: 62px 42px 62px max(32px, calc((100vw - var(--max))/2));
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.gallery-hero img {
  width: 100%;
  height: 620px;
  max-height: 620px;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Resource/About-subpages use the same physical banner dimensions, but a light sandstone treatment for variation. */
.resource-hero {
  min-height: 620px;
  height: 620px;
  padding: 0 !important;
  background: var(--sandstone-pale);
}
.resource-hero .resource-hero-grid {
  width: 100%;
  max-width: none;
  min-height: 620px;
  height: 620px;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0,44%) minmax(0,56%);
  gap: 0;
  align-items: stretch;
}
.resource-hero .resource-hero-grid > div {
  padding: 62px 42px 62px max(32px, calc((100vw - var(--max))/2));
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.resource-hero h1 {
  font-size: clamp(3.25rem, 4.7vw, 5.35rem);
  line-height: 1.03;
}
.resource-hero img {
  width: 100%;
  height: 620px;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .page-home .hero,
  .page-conditions .page-hero,
  .page-treatments .page-hero,
  .page-services .page-hero,
  .page-about .page-hero,
  .page-team .page-hero,
  .page-schedule .page-hero,
  .gallery-hero,
  .resource-hero {
    height: auto;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .page-home .hero-copy,
  .page-conditions .page-hero-copy,
  .page-treatments .page-hero-copy,
  .page-services .page-hero-copy,
  .page-about .page-hero-copy,
  .page-team .page-hero-copy,
  .page-schedule .page-hero-copy {
    padding-left: 0;
  }
  .page-home .hero-copy-inner,
  .page-conditions .page-hero-inner,
  .page-treatments .page-hero-inner,
  .page-services .page-hero-inner,
  .page-about .page-hero-inner,
  .page-team .page-hero-inner,
  .page-schedule .page-hero-inner {
    width: min(100% - 36px, 760px) !important;
    max-width: 760px;
    margin: 0 auto !important;
    padding: 64px 0 58px !important;
  }
  .page-home .hero-image,
  .page-conditions .page-hero-image,
  .page-treatments .page-hero-image,
  .page-services .page-hero-image,
  .page-about .page-hero-image,
  .page-team .page-hero-image,
  .page-schedule .page-hero-image {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 2;
  }
  .gallery-hero .gallery-hero-inner,
  .resource-hero .resource-hero-grid {
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .gallery-hero .gallery-hero-inner > div,
  .resource-hero .resource-hero-grid > div {
    padding: 64px 18px 58px;
  }
  .gallery-hero img,
  .resource-hero img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .page-home .story-section {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .page-home .story-image {
    min-height: 0;
    max-height: none;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .testimonial-track,
  .testimonial-slide {
    min-height: 270px;
  }
}

@media (max-width: 620px) {
  .page-home .conditions-preview { padding: 66px 0 50px; }
  .page-home .story-inner { padding: 48px 24px; }
  .testimonial-slide { padding: 42px 24px; }
  .testimonial-slide > p { font-size: 1.45rem; }
}


/* ===== v14 working revisions: treatment consistency, light CTAs, gallery alignment ===== */

/* Keep end-of-page calls to action visually distinct from adjacent black content bands. */
.final-cta.final-cta-sand {
  background: #c1b7aa;
  color: #111;
  border-top: 1px solid rgba(0,0,0,.12);
}
.final-cta.final-cta-sand .eyebrow { color: #745a35; }
.final-cta.final-cta-sand .final-cta-inner p:not(.eyebrow) { color: #4d4945; }
.final-cta.final-cta-sand .phone-link { color: #111; }
.final-cta.final-cta-sand .phone-link:hover { color: #745a35; }
.final-cta.final-cta-sand .button-gold {
  background: #000;
  color: #fff;
  border-color: #000;
}
.final-cta.final-cta-sand .button-gold:hover {
  background: #1b1b1b;
  color: #fff;
}

/* CRLAB intentionally uses a simple four-point list rather than another accordion. */
.crlab-points {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,.16);
}
.crlab-points li {
  position: relative;
  padding: 17px 0 17px 28px;
  border-bottom: 1px solid rgba(0,0,0,.13);
  color: #353535;
  line-height: 1.55;
}
.crlab-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 25px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.crlab-points strong { color: #111; }

/* Alma TED now uses the same media + accordion rhythm as Trichology and Laser. */
.page-treatments #alma-ted .treatment-media > img {
  max-height: 570px;
  object-position: center 42%;
}

/* Gallery: equal display frames without cropping the before/after evidence. */
.page-gallery .gallery-grid {
  align-items: stretch;
}
.page-gallery .gallery-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sandstone-pale);
}
.page-gallery .gallery-card img {
  width: 100%;
  height: clamp(280px, 28vw, 390px) !important;
  max-height: 390px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #f1f3f4;
}
.page-gallery .gallery-card figcaption {
  min-height: 58px;
  display: flex;
  align-items: center;
}

@media (max-width: 900px) {
  .page-gallery .gallery-card img {
    height: clamp(250px, 60vw, 380px) !important;
  }
}

/* v14 full-site guardrail: never stack two large black callout bands at page bottoms. */
.notice-section + .final-cta:not(.final-cta-sand),
.dark-band + .final-cta:not(.final-cta-sand),
.content-band.dark-band + .final-cta:not(.final-cta-sand) {
  background: var(--sandstone);
  color: #111;
  border-top-color: rgba(0,0,0,.12);
}
.notice-section + .final-cta:not(.final-cta-sand) .eyebrow,
.dark-band + .final-cta:not(.final-cta-sand) .eyebrow,
.content-band.dark-band + .final-cta:not(.final-cta-sand) .eyebrow { color: #745a35; }
.notice-section + .final-cta:not(.final-cta-sand) .final-cta-inner p:not(.eyebrow),
.dark-band + .final-cta:not(.final-cta-sand) .final-cta-inner p:not(.eyebrow),
.content-band.dark-band + .final-cta:not(.final-cta-sand) .final-cta-inner p:not(.eyebrow) { color: #4d4945; }
.notice-section + .final-cta:not(.final-cta-sand) .phone-link,
.dark-band + .final-cta:not(.final-cta-sand) .phone-link,
.content-band.dark-band + .final-cta:not(.final-cta-sand) .phone-link { color: #111; }


/* =========================================================
   v16 CONSOLIDATED THREAD RESTORATION
   Approved visual system preserved; missing thread edits restored.
   ========================================================= */

/* Unified banners: one geometry across Home, Conditions, Treatments, Services, About, Team and Schedule. */
.page-home .hero,
.page-conditions .page-hero,
.page-treatments .page-hero,
.page-services .page-hero,
.page-about .page-hero,
.page-team .page-hero,
.page-schedule .page-hero {
  width:100%; min-height:620px !important; height:620px !important;
  grid-template-columns:minmax(0,44%) minmax(0,56%) !important;
  overflow:hidden; background:#000;
}
.page-home .hero-image,
.page-conditions .page-hero-image,
.page-treatments .page-hero-image,
.page-services .page-hero-image,
.page-about .page-hero-image,
.page-team .page-hero-image,
.page-schedule .page-hero-image {
  width:100% !important; min-width:0; height:620px !important; min-height:620px !important; max-height:620px !important;
  margin:0 !important; padding:0 !important; overflow:hidden;
}
.page-home .hero-image img,
.page-conditions .page-hero-image img,
.page-treatments .page-hero-image img,
.page-services .page-hero-image img,
.page-about .page-hero-image img,
.page-team .page-hero-image img,
.page-schedule .page-hero-image img {
  width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; max-width:none !important;
}
/* Another Look occupies the LEFT suite in the approved exterior photo. */
.page-home .hero-image img,
.page-home .visit-exterior,
.page-schedule .page-hero-image img { object-position:12% 50% !important; }

/* Hero copy added from the former Hair Loss Is Personal paragraph. */
.page-home .hero-support { max-width:590px; color:rgba(255,255,255,.72); line-height:1.6; margin:14px 0 8px; }
.page-home .hero-gallery-link { display:inline-flex; margin:2px 0 22px; }

/* Matching Conditions / Treatments / Services detail anatomy. */
.structured-band { padding:96px 0; }
.structured-detail {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:64px; align-items:start;
}
.structured-detail.reverse-detail { grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr); }
.structured-detail.reverse-detail .structured-copy { grid-column:2; grid-row:1; }
.structured-detail.reverse-detail .structured-photo { grid-column:1; grid-row:1; }
.structured-copy h2 { font-size:clamp(2.2rem,3.5vw,3.7rem); margin-bottom:20px; }
.structured-intro { color:#4d4945; line-height:1.7; margin-bottom:28px; }
.structured-photo { margin:0; overflow:hidden; min-height:520px; background:#e8e4de; }
.structured-photo img { display:block; width:100%; height:520px; object-fit:cover; object-position:center; }
.structured-copy .accordion-group { margin-top:10px; }
.structured-copy .section-text-link { margin-top:26px; }

/* Accordion + link guardrail: no 'Ask About' or 'Learn More' black boxes. */
.accordion-item { background:transparent !important; box-shadow:none !important; }
.section-text-link,
.content-band .button-black,
.content-band .button,
.page-treatments .section-text-link,
.page-services .section-text-link,
.page-conditions .section-text-link {
  display:inline-flex !important; align-items:center; gap:8px;
  width:auto !important; min-height:0 !important; padding:0 0 4px !important;
  margin-left:0; background:transparent !important; color:#111 !important;
  border:0 !important; border-bottom:2px solid var(--gold) !important; border-radius:0 !important;
  box-shadow:none !important; text-transform:none; letter-spacing:0; font-weight:700;
}
.section-text-link:hover,
.content-band .button-black:hover,
.content-band .button:hover { color:#745a35 !important; background:transparent !important; }

/* Footer is the only black background block at the bottom of pages. */
.final-cta,
.final-cta.final-cta-sand {
  background:var(--sandstone) !important; color:#111 !important;
  border-top:1px solid rgba(0,0,0,.12) !important;
}
.final-cta .eyebrow { color:#745a35 !important; }
.final-cta .final-cta-inner p:not(.eyebrow) { color:#4d4945 !important; }
.final-cta .phone-link { color:#111 !important; }
.final-cta .button-gold { background:#000 !important; color:#fff !important; border-color:#000 !important; }
.notice-section.notice-light,
.notice-light { background:var(--sandstone-pale) !important; color:#111 !important; }
.notice-light .eyebrow { color:#745a35 !important; }
.notice-light .notice-card > p { color:#4d4945 !important; }
.notice-light .clean-list li { border-bottom:1px solid rgba(0,0,0,.12) !important; color:#333 !important; }

/* Home inline condition links are copy links, not boxes. */
.page-home .conditions-preview .section-heading p a { color:inherit; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px; }

/* Testimonials remain a slider, not three static cards. */
.testimonial-slider { max-width:920px; margin:34px auto 0; }

/* Schedule privacy + clinic policies using the approved sandy/white/gold system. */
.consultation-privacy { max-width:760px; margin:14px auto 0; color:#4d4945; line-height:1.65; }
.clinic-policies { background:var(--sandstone-pale); padding:78px 24px; border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); }
.clinic-policies-inner { width:min(1180px,100%); margin:0 auto; }
.clinic-policies-eyebrow { margin:0 0 12px; color:#745a35; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.clinic-policies h2 { margin:0 0 16px; font-size:clamp(2.2rem,4vw,3.6rem); color:#111; }
.clinic-policies-intro { max-width:760px; margin:0 0 34px; color:#4d4945; }
.clinic-policies-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.policy-card { background:#fff; border:1px solid rgba(0,0,0,.13); border-top:4px solid var(--gold); padding:28px; }
.policy-card h3 { margin:0 0 14px; color:#111; font-size:1.15rem; }
.policy-card p { color:#4d4945; line-height:1.65; }
.policy-card p:last-child { margin-bottom:0; }
.clinic-policies-more { margin:26px 0 0; }

@media (max-width:900px) {
  .structured-detail,.structured-detail.reverse-detail { grid-template-columns:1fr; gap:30px; }
  .structured-detail.reverse-detail .structured-copy,
  .structured-detail.reverse-detail .structured-photo { grid-column:auto; grid-row:auto; }
  .structured-detail .structured-copy { order:1; }
  .structured-detail .structured-photo { order:2; }
  .structured-detail.reverse-detail .structured-photo { order:2; }
  .structured-photo,.structured-photo img { min-height:0; height:clamp(360px,70vw,520px); }
  .page-home .hero-image img,.page-home .visit-exterior,.page-schedule .page-hero-image img { object-position:18% 50% !important; }
}
@media (max-width:760px) {
  .page-home .hero,.page-conditions .page-hero,.page-treatments .page-hero,.page-services .page-hero,.page-about .page-hero,.page-team .page-hero,.page-schedule .page-hero { height:auto !important; min-height:0 !important; grid-template-columns:1fr !important; }
  .page-home .hero-image,.page-conditions .page-hero-image,.page-treatments .page-hero-image,.page-services .page-hero-image,.page-about .page-hero-image,.page-team .page-hero-image,.page-schedule .page-hero-image { height:430px !important; min-height:430px !important; }
  .clinic-policies { padding:56px 20px; }
  .clinic-policies-grid { grid-template-columns:1fr; }
  .policy-card { padding:24px; }
}


/* =========================================================
   v17 FINAL FORMAT + BRAND GUIDE CORRECTIONS
   August 28, 2026
   Layout architecture stays intact. These rules correct scale,
   logo use, menu usability, banner consistency and bottom bands.
   ========================================================= */

/* Official secondary horizontal logo with vertical bar is used in the limited-height header. */
.brand {
  width: clamp(285px, 24vw, 390px) !important;
}
.brand img {
  width: auto !important;
  max-width: 100% !important;
  height: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.footer-brand img {
  width: 190px !important;
  max-width: 100% !important;
  height: auto !important;
  margin-bottom: 20px !important;
  object-fit: contain !important;
}

/* About dropdown: no dead zone. Hover/focus opens and stays open while crossing into submenu. */
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
.nav-submenu {
  top: 100% !important;
  margin-top: 0 !important;
  padding-top: 16px !important;
}
@media (min-width: 901px) {
  .nav-dropdown:hover .nav-submenu,
  .nav-dropdown:focus-within .nav-submenu {
    display: block !important;
  }
}

/* Home hero correction: TEAM photo. Crop brick edges, never people. */
.page-home .hero-image img {
  object-fit: cover !important;
  object-position: 50% 44% !important;
}

/* Unified desktop banner geometry. Main pages remain black; resource pages remain light.
   All use the same 50/50 proportions and flexible height so headings never clip. */
.page-home .hero,
.page-conditions .page-hero,
.page-treatments .page-hero,
.page-services .page-hero,
.page-about .page-hero,
.page-team .page-hero,
.page-schedule .page-hero,
.gallery-hero,
.resource-hero {
  min-height: 570px !important;
  height: auto !important;
  overflow: hidden;
}
.page-home .hero,
.page-conditions .page-hero,
.page-treatments .page-hero,
.page-services .page-hero,
.page-about .page-hero,
.page-team .page-hero,
.page-schedule .page-hero {
  grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
}
.gallery-hero .gallery-hero-inner,
.resource-hero .resource-hero-grid {
  min-height: 570px !important;
  height: auto !important;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
}
.page-home .hero-copy-inner,
.page-conditions .page-hero-inner,
.page-treatments .page-hero-inner,
.page-services .page-hero-inner,
.page-about .page-hero-inner,
.page-team .page-hero-inner,
.page-schedule .page-hero-inner,
.gallery-hero .gallery-hero-inner > div,
.resource-hero .resource-hero-grid > div {
  max-width: 650px !important;
  padding-top: 66px !important;
  padding-bottom: 66px !important;
}
.page-home .hero-image,
.page-conditions .page-hero-image,
.page-treatments .page-hero-image,
.page-services .page-hero-image,
.page-about .page-hero-image,
.page-team .page-hero-image,
.page-schedule .page-hero-image,
.gallery-hero img,
.resource-hero img {
  min-height: 570px !important;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
}
.page-home .hero-image img,
.page-conditions .page-hero-image img,
.page-treatments .page-hero-image img,
.page-services .page-hero-image img,
.page-about .page-hero-image img,
.page-team .page-hero-image img,
.page-schedule .page-hero-image img,
.gallery-hero img,
.resource-hero img {
  min-height: 570px !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}
.page-home .hero h1,
.page-hero h1,
.gallery-hero h1,
.resource-hero h1 {
  font-size: clamp(3rem, 4.35vw, 4.85rem) !important;
  line-height: 1.03 !important;
}
.page-team .page-hero h1 { font-size: clamp(3rem, 4.05vw, 4.55rem) !important; }
.resource-hero p,
.page-hero .hero-lede,
.page-home .hero-lede { max-width: 590px; }

/* Landscape team photo on About and Team banners. Preserve all four people. */
.page-about .page-hero-image img,
.page-team .page-hero-image img {
  object-position: 50% 46% !important;
}

/* Keep Schedule exterior focused on the LEFT-suite entrance. */
.page-schedule .page-hero-image img,
.page-home .visit-exterior { object-position: 12% 50% !important; }

/* The medium Sandy Beach end band was visually too heavy next to the footer.
   Brand guide allows Cream/Soft Gray as preferred background floods. */
.final-cta,
.final-cta.final-cta-sand {
  background: #f1f3f4 !important; /* Bistro Cream */
  color: #111 !important;
  border-top: 2px solid rgba(208,169,111,.72) !important;
}
.final-cta .eyebrow { color: #745a35 !important; }
.final-cta .final-cta-inner p:not(.eyebrow) { color: #514d48 !important; }
.final-cta .phone-link { color: #111 !important; }
.final-cta .button-gold {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* Keep information-card bands lighter than Sandy Beach so three cards + CTA + footer do not feel stacked. */
.sand-section:has(.info-trio) { background: #f7f4f0 !important; }
.info-trio article { background: #fff !important; }

/* Footer stays the only black block at the page bottom. */
.site-footer { background: #090909 !important; }

@media (max-width: 900px) {
  .brand { width: min(280px, 66vw) !important; }
  .brand img { height: 48px !important; max-height: 48px !important; }
  .nav-submenu { padding-top: 0 !important; }
  .page-home .hero,
  .page-conditions .page-hero,
  .page-treatments .page-hero,
  .page-services .page-hero,
  .page-about .page-hero,
  .page-team .page-hero,
  .page-schedule .page-hero,
  .gallery-hero,
  .resource-hero { min-height: 0 !important; }
  .page-home .hero-image,
  .page-conditions .page-hero-image,
  .page-treatments .page-hero-image,
  .page-services .page-hero-image,
  .page-about .page-hero-image,
  .page-team .page-hero-image,
  .page-schedule .page-hero-image,
  .gallery-hero img,
  .resource-hero img {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }
}

@media (max-width: 620px) {
  .brand { width: min(230px, 64vw) !important; }
  .brand img { height: 42px !important; max-height: 42px !important; }
  .page-home .hero h1,
  .page-hero h1,
  .gallery-hero h1,
  .resource-hero h1 { font-size: clamp(2.75rem, 13vw, 4rem) !important; }
}


/* === v17.3 UNIFIED PAGE BANNER GEOMETRY ===
   Repair only. Existing hero styling above is untouched.
   Problem: the hero photo had no definite height, so a portrait image
   set the banner height (Conditions 829px, Treatments 961px, Gallery 960px)
   while landscape pages sat at the intended 570px. The photo now crops to
   fill its half instead of driving the banner height. */
@media (min-width: 901px) {
  .page-hero { min-height: 570px !important; height: auto !important; align-items: stretch; }
  .page-hero-image { position: relative; min-height: 570px; height: auto; overflow: hidden; }
  .page-hero-image > img { position: absolute; inset: 0; display: block;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important; object-fit: cover; }
  .gallery-hero { min-height: 570px !important; height: auto !important; }
  .gallery-hero-inner { align-items: stretch; }
  .gallery-hero-inner > img { display: block; width: 100%;
    height: 570px !important; min-height: 570px; max-height: 570px !important; object-fit: cover; }
}
@media (max-width: 900px) {
  .page-hero-image { position: relative; overflow: hidden; }
  .page-hero-image > img { position: absolute; inset: 0; display: block;
    width: 100% !important; height: 100% !important; object-fit: cover; }
}


/* === v17.3 ABOUT DROPDOWN HOVER BRIDGE ===
   The submenu sits 18px below the About link (top: calc(100% + 18px)).
   That gap is outside .nav-dropdown, so the pointer left the hover area on
   the way down and the menu closed. This adds an invisible bridge across the
   gap while About is hovered or focused. Visual spacing is unchanged. */
@media (min-width: 901px) {
  .nav-dropdown:hover::after,
  .nav-dropdown:focus-within::after {
    content: ""; position: absolute; top: 100%; left: -12px; right: -24px;
    height: 22px; background: transparent;
  }
  .nav-dropdown:hover .nav-submenu,
  .nav-dropdown:focus-within .nav-submenu { display: block; }
  .nav-submenu:hover { display: block; }
}


/* === v17.3 MOBILE BANNER RESET ===
   Several generations of hero CSS were appended after the mobile media
   queries, and the last base rule carries !important at two-class
   specificity, so it was winning on phones: at 390px the banner rendered
   as two 186px columns with a squeezed photo. Selectors are doubled here
   to match that specificity; this block is last in the file. */
@media (max-width: 900px) {
  .page-hero.page-hero { grid-template-columns: 1fr !important;
    min-height: 0 !important; height: auto !important; }
  .page-hero.page-hero .page-hero-copy { order: 1; }
  .page-hero.page-hero .page-hero-image { order: 2; position: relative; overflow: hidden;
    height: clamp(320px, 62vw, 500px) !important; min-height: 0 !important; }
  .page-hero.page-hero .page-hero-image > img { position: absolute; inset: 0; display: block;
    width: 100% !important; height: 100% !important;
    min-height: 0 !important; max-height: none !important; object-fit: cover; }
  .page-home .hero.hero { grid-template-columns: 1fr !important;
    min-height: 0 !important; height: auto !important; }
  .page-home .hero.hero .hero-copy { order: 1; }
  .page-home .hero.hero .hero-image { order: 2; position: relative; overflow: hidden;
    height: clamp(320px, 62vw, 500px) !important; min-height: 0 !important; }
  .page-home .hero.hero .hero-image > img { position: absolute; inset: 0; display: block;
    width: 100% !important; height: 100% !important;
    min-height: 0 !important; max-height: none !important; object-fit: cover; }
  .gallery-hero.gallery-hero { min-height: 0 !important; height: auto !important; }
  .gallery-hero.gallery-hero .gallery-hero-inner { grid-template-columns: 1fr !important; }
  .gallery-hero.gallery-hero .gallery-hero-inner > img { display: block; width: 100%;
    height: clamp(320px, 62vw, 500px) !important; min-height: 0 !important;
    max-height: none !important; object-fit: cover; }
}


/* === v17.10 RESOURCE / ABOUT BANNER ALIGNMENT ===
   The About-section pages (Clinic Policies, Gift Cards, Cherry Financing,
   Blog, Shop, FAQ) use .resource-hero, which was left out of the earlier
   banner repair. Its photo had no definite height and max-height:none, so a
   portrait image set the banner height: Clinic Policies and Gift Cards ran
   1063px and Financing 917px against the 570px used everywhere else. The
   photo now crops to 570px like every other banner. Hero copy on these pages
   tops out at 413px, so nothing is crowded or clipped.
   The About landing banner also ran 19px long on its three-line headline;
   its vertical padding is trimmed so it lands on 570px too. */
@media (min-width: 901px) {
  .resource-hero.resource-hero { min-height: 570px !important; height: auto !important; }
  .resource-hero.resource-hero .resource-hero-grid {
    min-height: 570px !important; height: auto !important; align-items: center;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important; }
  /* FAQ and Cherry Financing carry four-line headlines; 66px block padding
     pushed them to 617px and 612px. 42px lands every one of them on 570px
     with the copy still vertically centred. */
  .resource-hero.resource-hero .resource-hero-grid > div {
    padding-top: 42px !important; padding-bottom: 42px !important; }
  .resource-hero.resource-hero .resource-hero-grid > img {
    display: block; align-self: stretch; width: 100% !important;
    height: 570px !important; min-height: 570px !important; max-height: 570px !important;
    object-fit: cover; }
  .about-landing-hero.about-landing-hero .page-hero-inner {
    padding-top: 54px !important; padding-bottom: 54px !important; }
}
@media (max-width: 900px) {
  .resource-hero.resource-hero .resource-hero-grid { grid-template-columns: 1fr !important; }
  .resource-hero.resource-hero .resource-hero-grid > img {
    display: block; width: 100% !important;
    height: clamp(320px, 62vw, 500px) !important;
    min-height: 0 !important; max-height: none !important; object-fit: cover; }
}


/* === v17.12 BAND SEPARATION, FIVE-ACROSS TREATMENT CARDS, CLEAN RESULTS ===

   1. Band separation. The three light bands above the footer were
   #f3f0ec, #f3f0ec and #f1f3f4 - two identical and one nearly so. They now
   alternate warm sandstone / white / Bistro Cream. Conditions is flipped
   because its notice band comes before the FAQ bridge; every other page
   has them the other way round. */
/* SUPERSEDED by the v17.14 block at the end of this file. The alternating
   colours below read as stripes on short bands; they are neutralised there. */
.final-cta.final-cta-sand { background: var(--cream) !important; }

/* 2. Five treatment cards across the page. .feature-card carries
   grid-column: span 2 inside a three-column grid, so each card claimed a
   full row and the five ran 2,643px down the page. They now sit in one
   five-column row with a shorter photo. Everything below is untouched. */
@media (min-width: 1081px) {
  .feature-grid.feature-grid-five { grid-template-columns: repeat(5, 1fr) !important; gap: 18px !important; }
  .feature-grid.feature-grid-five > .feature-card { grid-column: auto !important; }
  .feature-grid.feature-grid-five .feature-card img {
    min-height: 0 !important; height: 180px !important; width: 100%; object-fit: cover; display: block; }
  .feature-grid.feature-grid-five .feature-card > div { padding: 20px !important; }
  .feature-grid.feature-grid-five .feature-card h3 { font-size: 1rem; line-height: 1.28; }
  .feature-grid.feature-grid-five .feature-card p:not(.eyebrow) { font-size: .82rem; line-height: 1.5; }
  .feature-grid.feature-grid-five .feature-card .text-link { margin-top: auto; font-size: .72rem; }
}

/* 3. Home results section. The three before/after photos were removed from
   the markup; this gives the remaining heading and gallery link room. */
.results-preview-clean { padding-top: 104px; padding-bottom: 104px; }
.results-preview-clean .section-heading { margin-bottom: 0; }
.results-preview-clean .results-gallery-link { display: inline-flex; margin-top: 34px; }
@media (max-width: 900px) { .results-preview-clean { padding-top: 64px; padding-bottom: 64px; } }


/* === v17.13 LEAVE US A REVIEW LINK ===
   Centred text link under the testimonial slider. .text-link is display:flex,
   so it needs inline-flex to sit centred inside the centred section. */
.testimonial-review-cta { margin-top: 32px; text-align: center; }
.testimonial-review-cta .text-link { display: inline-flex; }
@media (max-width: 900px) { .testimonial-review-cta { margin-top: 24px; } }


/* === v17.14 ONE CONTINUOUS LIGHT FIELD ===
   Background colour now marks chapters, not paragraphs. The disclaimer band
   and the FAQ bridge are short (177px and 340px), so giving each its own
   tone produced stripes. They now sit on the same white field as the content
   bands above them, separated by a hairline and generous padding. Only the
   pre-footer CTA changes tone - one deliberate step-down into the black
   footer, using the gold rule already in the design. */
.faq-bridge.faq-bridge,
.notice-section.notice-light { background: #ffffff !important; }
.faq-bridge.faq-bridge,
.notice-section.notice-light { border-top: 1px solid rgba(0, 0, 0, .09) !important; }
.faq-bridge.faq-bridge { padding-top: 64px !important; padding-bottom: 64px !important; }
.final-cta.final-cta-sand { background: var(--cream) !important;
  border-top: 1.5px solid rgba(208, 169, 111, .72) !important; }
@media (max-width: 900px) {
  .faq-bridge.faq-bridge { padding-top: 44px !important; padding-bottom: 44px !important; }
}


/* === v17.16 RESULTS HEADING ===
   Lede moved under the title (it is now inside the left column of the split
   heading) and the gallery link became a Luxury Sun button with black text,
   sitting to the right of the header. */
.results-heading { align-items: start; }
.results-heading .results-lede { margin-top: 18px; max-width: 640px; }
.results-action { display: flex; justify-content: flex-end; align-items: flex-start; }
.results-action .button { white-space: nowrap; }
.results-action .button span { margin-left: 8px; }
@media (max-width: 900px) {
  .results-action { justify-content: flex-start; margin-top: 26px; }
  .results-action .button { white-space: normal; }
}




/* === v17.17 BANNER DEPTH — SITEWIDE ===
   Every top banner was a flat field with a hard seam against its photo:
   no gradient, no overlay, no image treatment. Five additive changes.
   Type, copy, layout, photos and banner heights are all unchanged.
     1. warm off-centre radial gives the black depth instead of dead flat
     2. the photo's inner edge is masked so it emerges from the panel
        rather than butting against it (works on light banners too, since
        a mask fades into whatever sits behind it)
     3. ~4.5% grain stops banding across the large dark fields
     4. a gold hairline leads every banner eyebrow
     5. a light grade settles the photos into the palette */

/* 1 + 3 — depth and grain, black banners only */
.page-home .hero.hero,
.page-hero.page-hero,
.gallery-hero.gallery-hero {
  position: relative; background-color: #000;
  background-image: radial-gradient(118% 88% at 22% 26%, #17140f 0%, #050505 58%, #000 100%);
}
.page-home .hero.hero::after,
.page-hero.page-hero::after,
.gallery-hero.gallery-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px;
}

/* 2 — the photo emerges from the panel. Left-edge mask on desktop,
   top-edge on mobile where the banner stacks. */
@media (min-width: 901px) {
  .page-home .hero .hero-image img,
  .page-hero .page-hero-image img,
  .gallery-hero .gallery-hero-inner > img {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 2.5%, #000 6%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 2.5%, #000 6%); }
  .resource-hero .resource-hero-grid > img {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 2.5%, #000 6%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 2.5%, #000 6%); }
}
@media (max-width: 900px) {
  .page-home .hero .hero-image img,
  .page-hero .page-hero-image img,
  .gallery-hero .gallery-hero-inner > img,
  .resource-hero .resource-hero-grid > img {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 3%, #000 8%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 3%, #000 8%); }
}

/* 4 — gold hairline leading each banner eyebrow */
.page-home .hero .eyebrow,
.page-hero .eyebrow,
.gallery-hero .eyebrow,
.resource-hero .eyebrow {
  display: flex; align-items: center; gap: 14px; }
.page-home .hero .eyebrow::before,
.page-hero .eyebrow::before,
.gallery-hero .eyebrow::before,
.resource-hero .eyebrow::before {
  content: ""; flex: none; width: 38px; height: 1px; background: var(--gold); opacity: .85; }
@media (max-width: 900px) {
.page-home .hero .eyebrow::before,
.page-hero .eyebrow::before,
.gallery-hero .eyebrow::before,
.resource-hero .eyebrow::before { width: 26px; }
}

/* 5 — light grade so photos sit in the palette */
.page-home .hero .hero-image img,
.page-hero .page-hero-image img,
.gallery-hero .gallery-hero-inner > img,
.resource-hero .resource-hero-grid > img {
  filter: saturate(.94) contrast(1.04); }


/* v17.18 — eyebrow hairline suppressed between 901px and 1100px, where the copy
   column is narrow enough that the extra 52px pushed the banner eyebrow onto
   a second line. Restored above 1100px and on mobile, where it fits. */
@media (min-width: 901px) and (max-width: 1100px) {
  .page-home .hero .eyebrow::before,
  .page-hero .eyebrow::before,
  .gallery-hero .eyebrow::before,
  .resource-hero .eyebrow::before { display: none; }
  .page-home .hero .eyebrow,
  .page-hero .eyebrow,
  .gallery-hero .eyebrow,
  .resource-hero .eyebrow { gap: 0; }
}


/* === v17.20 STORY BAND EDGE + RESULTS BUTTON ALIGNMENT ===
   The banner fade was reaching 38% across and washing out Carrie, who stands
   at the left edge of the team photo. It is now a narrow soften-only edge:
   it never reaches full transparency, so it blurs the divider without
   erasing anyone. Same treatment on the story band, mirrored, because its
   photo is full-bleed on the LEFT and meets the copy on its right edge.
   The Results button is now centred against the heading block instead of
   floating above the eyebrow. */
@media (min-width: 901px) {
  .story-section img {
    -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 2.5%, #000 6%);
    mask-image: linear-gradient(270deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 2.5%, #000 6%); }
}
.results-heading { align-items: center; }
.results-action { align-items: center; }


/* === v17.22 LONGER GOOGLE REVIEWS ===
   The slider was built for 40-60 character pull-quotes at 37px display type.
   The four new Google reviews run 185-275 characters, so they get a smaller
   reading size instead of being trimmed - the wording stays exactly as the
   reviewers wrote it. The track min-height is raised so the card does not
   jump between a short quote and a long one as the slider advances. */
.testimonial-slide.is-long > p {
  font-size: clamp(1.02rem, 1.42vw, 1.3rem);
  line-height: 1.58; font-weight: 500; letter-spacing: -.005em; max-width: 720px; }
.testimonial-track, .testimonial-slide { min-height: 372px; }
@media (max-width: 900px) {
  .testimonial-track, .testimonial-slide { min-height: 340px; }
  .testimonial-slide.is-long > p { font-size: 1rem; line-height: 1.55; }
}


/* === v17.24 HOME HERO — PHOTO DISSOLVES INTO THE FIELD ===
   Home page only. The team photo is a landscape 2048x1366 source in a
   portrait 767x847 box, so 251px is already cropped from each side and the
   four women span the visible width edge to edge - there is no spare image
   on the left to feather into, which is what washed Carrie out before.
   There IS spare image above and below: doorway and brickwork over their
   heads, legs against a dark ground beneath. The photo now dissolves into
   the black field top and bottom (they are dressed in black, so the lower
   fade reads as the figures melting into the field) while the left edge
   keeps the narrow soften that leaves Carrie untouched. */
.page-home .hero.hero .hero-image { background: transparent; }
@media (min-width: 901px) {
  .page-home .hero.hero .hero-image img {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.78) 3%, #000 8%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 6%, #000 17%, #000 79%, rgba(0,0,0,.5) 93%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.78) 3%, #000 8%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 6%, #000 17%, #000 79%, rgba(0,0,0,.5) 93%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect; }
}
@media (max-width: 900px) {
  .page-home .hero.hero .hero-image img {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 6%, #000 17%, #000 79%, rgba(0,0,0,.5) 93%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 6%, #000 17%, #000 79%, rgba(0,0,0,.5) 93%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add; }
}


/* === v17.25 HOME HERO — NEW PORTRAIT SOURCE, WIDE LEFT DISSOLVE ===
   The hero photo is now Anotherlook-32, a PORTRAIT 2048x3071 source
   (resized to 1400x2099 WebP). The previous landscape source lost 251px off
   each side in this portrait box, which pinned Carrie to the left edge with
   zero margin. A portrait source keeps the full frame width, so the brick
   pillar is back in shot and the left dissolve has somewhere to go.
   Laddered at 14/20/26/32% against the real crop: clean through 20%, starts
   touching her arm near 32%. Set to 22% - about 3.7x the previous blend. */
@media (min-width: 901px) {
  .page-home .hero.hero .hero-image img {
    /* An older base rule carries object-position: 50% 45% !important, so this
       needs !important too. 44-45% is the right framing for the new portrait
       source: heads clear of the top fade, bodies cut at the knee. */
    object-position: 50% 44% !important;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 5%, rgba(0,0,0,.72) 11%, #000 18%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 6%, #000 17%, #000 79%, rgba(0,0,0,.5) 93%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 5%, rgba(0,0,0,.72) 11%, #000 18%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 6%, #000 17%, #000 79%, rgba(0,0,0,.5) 93%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect; }
}
@media (max-width: 900px) {
  .page-home .hero.hero .hero-image img { object-position: 50% 40% !important; }
}


/* v17.27 — closer crop. The hero photo box is unchanged; the source file is
   cropped instead. Measured on a percentage grid, the four women span 17%-84%
   of the original frame, leaving 17% of brick on the left (which the dissolve
   needs) and 16% on the right (expendable). So 13% comes off the RIGHT only,
   the full left pillar is kept, and everyone renders 1.15x larger. The group
   now sits 19.5%-96.6% across, so the dissolve tightens 22% -> 18% and still
   lands entirely on brick. Any closer and it starts eating the left pillar:
   a 1.3x crop would force the blend down to ~12%, 1.4x back to ~6%. */


/* === v17.28 SOLUTIONS SECTION ===
   "Not Sure Where to Start?" is an h2 for structure, but it is a lead-in to
   the three wayfinding links, not a second headline. Left at the inherited
   60px it competed with "There Isn't One Answer to Hair Loss." - two display
   headlines stacked. Sized down and given room to breathe; the tag and the
   document outline are unchanged. */
.section.solutions .solution-prompt {
  font-size: 1.12rem;
  line-height: 1.3; font-weight: 600; letter-spacing: -.005em;
  color: #fff; margin: 40px 0 16px; }
/* v17.36 — the consultation link is now a Luxury Sun button with black text,
   matching the hero CTA. The three Explore links above it stay as text links,
   so the button is the one emphasised action in the section. */
.section.solutions .solution-consult-link { display: inline-flex; margin-top: 30px; }
.section.solutions .solution-list { margin-top: 0; }
@media (max-width: 900px) {
  .section.solutions .solution-prompt { font-size: 1.05rem; margin: 32px 0 14px; }
  .section.solutions .solution-consult-link { margin-top: 24px; }
}


/* === v17.31 SCHEDULE — CHERRY FINANCING NOTE ===
   Replaces the four-step journey strip above the consultation form with a
   quiet payment-options line. Wording is taken verbatim from the approved
   Cherry page so no new claim is introduced, and it stays out of the form
   itself - the Cherry question was deliberately removed from the intake. */
.financing-note { background: var(--sandstone-soft); padding: 30px 0; }
.financing-note-inner { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }
.financing-note-inner .eyebrow { flex: none; margin: 0; }
.financing-note-copy { margin: 0; color: #4d4945; font-size: .92rem; max-width: 640px; }
.financing-note-inner .text-link { display: inline-flex; margin-left: auto; padding: 0; }
@media (max-width: 760px) {
  .financing-note { padding: 24px 0; }
  .financing-note-inner { display: block; }
  .financing-note-copy { margin: 8px 0 12px; }
  .financing-note-inner .text-link { margin-left: 0; }
}


/* v17.32 — schedule exterior recrop. The photo is cropped to 850x915 (aspect 0.929,
   against a 0.905 box) so almost the whole frame now shows: the left suite,
   its entrance and the centre tree. The second tenant's entrance, their
   signage and the cars on that side are cropped out entirely. Because the
   crop already isolates the left suite, the old 12% focal nudge is dropped
   and the frame sits centred. */
.page-schedule .page-hero-image img { object-position: 50% 50% !important; }


/* === v17.35 HOME VISIT PREVIEW ===
   The interior photo overlaps the bottom-left 40% x 35% of the exterior
   photo, which is where the entrance was sitting. Switched to the same
   cropped exterior used on the Schedule page and shifted the focal point so
   the doors sit in the right-hand half, clear of the overlay. The interior
   photo itself is untouched. */
.visit-preview .visit-images img[src*='exterior-main-left'] {
  object-position: 25% 50% !important; }


/* === v17.41 RESOURCE BANNER HEADLINE CAP ===
   The resource banner h1 uses clamp(3rem, 4.35vw, 4.85rem), so it keeps
   growing with the viewport - but the text column does NOT: the copy sits
   against the 1220px shell, so its usable width is a constant 568px on every
   screen wider than 1220. Bigger type in a fixed column means more line
   breaks, and the banners grew far past their 570px standard at 1920px:
   Blog 844px, Shop 820px, FAQ 971px, Cherry Financing 1025px, with headlines
   shredding to seven and eight one-word lines. Capping the size where the
   column stops growing holds every resource banner at 570px. The base rule
   carries !important, so this cap needs it too. */
@media (min-width: 1220px) {
  .resource-hero h1 { font-size: 3.9rem !important; }
}


/* === v17.43 RESOURCE BANNER COPY COLUMN ===
   The real cause of the runaway banners. The copy div is capped at 650px wide
   but its left padding is max(32px, (100vw - 1220)/2), which grows with the
   viewport to keep the copy aligned to the shell. Capped width + growing
   padding means the usable text area SHRINKS as the screen gets wider:
   498px at 1440, 368px at 1700, 258px at 1920 - which is why headlines broke
   one word per line and banners hit 671-1025px. Lifting the cap lets the
   column absorb the padding, giving a constant 560px of text at every width
   above 1220. */
@media (min-width: 1220px) {
  /* the 650px cap is set !important on a shared selector list, so this
     override needs !important and higher specificity. Scoped to the resource
     banner only - the home and page-hero copy columns keep their 650px. */
  .resource-hero.resource-hero .resource-hero-grid > div { max-width: none !important; }
}


/* v17.46 primary CTA boxes - Luxury Sun */ body .final-cta .button.button-gold, body .final-cta.final-cta-sand .button.button-gold, body .visit-preview .button.button-black, body .visit-preview .button.button-gold { background: var(--gold) !important; color: #000 !important; border-color: var(--gold) !important; } body .final-cta .button.button-gold:hover, body .final-cta.final-cta-sand .button.button-gold:hover, body .visit-preview .button.button-black:hover, body .visit-preview .button.button-gold:hover { background: #e0be8b !important; color: #000 !important; }

/* === v17.47 CHAMPAGNE SPECKLE ON BLACK SECTIONS === */
.hero, .page-hero, .gallery-hero, .story-section,
.content-band.dark-band, .site-footer { position: relative; }
.hero > *, .page-hero > *, .gallery-hero > *, .story-section > *,
.content-band.dark-band > *, .site-footer > * { position: relative; z-index: 1; }
.hero::before, .page-hero::before, .gallery-hero::before, .story-section::before,
.content-band.dark-band::before, .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .08;
  background-image:
    radial-gradient(circle at 18% 26%, rgba(208,169,111,.95) 0 1px,   transparent 1.3px),
    radial-gradient(circle at 72% 61%, rgba(208,169,111,.75) 0 1.4px, transparent 1.7px),
    radial-gradient(circle at 44% 88%, rgba(208,169,111,.60) 0 1px,   transparent 1.3px),
    radial-gradient(circle at 88% 14%, rgba(208,169,111,.50) 0 1px,   transparent 1.2px);
  background-size: 130px 130px, 210px 210px, 90px 90px, 160px 160px;
}


/* === v17.48 HERO PHOTO ALIGNED TO CONTENT COLUMN === */
@media (min-width: 901px) {
  .page-home .hero,
  .page-conditions .page-hero,
  .page-treatments .page-hero,
  .page-services .page-hero,
  .page-about .page-hero,
  .page-team .page-hero,
  .page-schedule .page-hero {
    grid-template-columns: 50% calc(min(100% - 48px, var(--max)) / 2) 1fr !important;
  }
}
/* === v17.48 BLOG ARTICLE PAGES === */
.article-shell { max-width: 760px; }
.article-head { padding-bottom: 0; }
.article-back { color: var(--gold); text-decoration: none; }
.article-back:hover { text-decoration: underline; }
.article-date { color: #6b6560; }
.article-head h1 { margin: 14px 0 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.article-lede { margin: 20px 0 0; font-size: 1.2rem; line-height: 1.6; color: #4d4945; }
.article-body-section { padding: 40px 0 90px; }
.article-body { font-size: 1.05rem; line-height: 1.75; }
.article-body p { margin: 0 0 22px; }
.article-body h2 { font-size: 1.5rem; line-height: 1.25; margin: 44px 0 16px; }
.article-body h3 { font-size: 1.06rem; line-height: 1.35; margin: 0 0 6px; }
.article-body a { color: #745a35; text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 22px; }
.article-body li { margin: 0 0 14px; }
.article-list li { margin: 0 0 26px; }
.article-list li p { margin: 0; }
.article-contact { border-top: 1px solid rgba(0,0,0,.12); padding-top: 20px; }
.article-return { margin: 36px 0 0; }
@media (max-width: 900px) { .article-body-section { padding: 24px 0 64px; } }


/* ---- Homepage path boxes (below hero) ---- */
.path-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.path-card { display:flex; flex-direction:column; padding:28px; background:var(--sandstone-pale); border:1px solid rgba(0,0,0,.14); text-decoration:none; color:var(--text); transition:.2s ease; }
.path-card:hover { transform:translateY(-4px); border-color:rgba(208,169,111,.8); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.path-card h3 { margin:0 0 12px; font-size:1.05rem; line-height:1.4; }
.path-card p { margin:0 0 22px; color:var(--muted); font-size:.88rem; }
.path-card-link { margin-top:auto; display:inline-flex; align-items:center; gap:10px; color:#8c6e42; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.path-card-link span { font-size:1.05rem; transition:transform .2s ease; }
.path-card:hover .path-card-link span { transform:translateX(4px); }
@media (max-width: 900px) { .path-grid { grid-template-columns:1fr; gap:14px; } }

/* Hero copy width fix - 2026-09-02
   The left gutter padding on the hero copy column grows with the viewport,
   but the column was capped at 650px total, so on wide screens the padding
   consumed the whole column and text wrapped one word per line.
   Cap now includes the gutter + right padding so 650px of copy survives. */
.gallery-hero .gallery-hero-inner > div,
.resource-hero .resource-hero-grid > div {
  max-width: calc(650px + 42px + max(32px, (100vw - var(--max)) / 2)) !important;
}


/* Team page hero (Sept 2026): show the full width of team-hero-laughing.webp on desktop.
   The desktop frame is close to square, so "cover" was cutting the people at the left and right edges.
   "contain" shows the whole 3:2 photo, centered in the black hero band. Mobile already uses a 3:2 frame. */
@media (min-width: 901px) {
  .page-team .page-hero-image > img {
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }
}

/* Home hero quick consultation form (added 2026-09-30) */
.quick-consult { margin: 30px 0 22px; padding: 24px; border: 1px solid rgba(208, 169, 111, .45); background: rgba(0, 0, 0, .55); }
.quick-consult-title { margin: 0 0 16px; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.quick-consult-title::before { content: "\2014"; margin-right: 10px; }
.quick-consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.qc-field { display: flex; flex-direction: column; gap: 6px; }
.qc-field-wide { grid-column: 1 / -1; }
.qc-field label { color: var(--white); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.qc-field label em { color: var(--stone); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.qc-field input, .qc-field select { width: 100%; border: 1px solid #d1cdc5; border-radius: 0; background: #fff; padding: 12px 13px; color: var(--text); font: inherit; font-size: 1rem; outline: none; }
.qc-field input:focus, .qc-field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(208, 169, 111, .35); }
.quick-consult-submit { width: 100%; margin-top: 18px; justify-content: center; border: 0; cursor: pointer; }
.quick-consult-note { margin: 12px 0 0; color: var(--sky); font-size: .85rem; line-height: 1.5; }
.quick-consult-note a { color: var(--gold); font-weight: 600; white-space: nowrap; }
.quick-consult-status { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(208, 169, 111, .12); color: var(--white); font-size: .9rem; }
.hero .hero-actions { margin-top: 0; }
@media (max-width: 560px) {
  .quick-consult { padding: 18px; }
  .quick-consult-grid { grid-template-columns: 1fr; }
}