/* Shared styles for interior pages (consultation, treatment information).
   Reuses the exact design tokens, nav, buttons and footer from the homepage
   so branding is identical. The homepage keeps its own inline styles. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:   #f7f4ef;
  --warm:    #ede8e0;
  --stone:   #c4b8a4;
  --mist:    #8a9e9a;
  --deep:    #2b3a38;
  --ink:     #1a2422;
  --gold:    #b8975a;
  --gold-lt: #d4b87a;
  --white:   #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

/* ── NAV (identical to homepage) ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  background: rgba(27, 36, 34, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.06em;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand span { color: var(--gold); }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a.active { color: var(--gold); }
.nav-cta {
  color: var(--ink) !important;
  background: var(--gold);
  padding: 9px 18px;
  border-radius: 2px;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--gold-lt); color: var(--ink) !important; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 32px;
  height: 32px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--stone);
  transition: all 0.3s ease;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ── BUTTONS (identical to homepage) ── */
.btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.25s ease;
  cursor: pointer;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-lt); }
.btn-ghost { border: 1px solid var(--stone); color: var(--deep); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-lt); }
.btn-dark { background: var(--deep); color: var(--white); }
.btn-dark:hover { background: var(--gold); color: var(--ink); }

/* ── GOLD DIVIDER ── */
.gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto;
  max-width: 900px;
  width: 90%;
}

/* ── PAGE HERO (interior) ── */
.page-hero {
  background: var(--deep);
  padding: 150px 40px 68px;
}
.page-hero-inner { max-width: 900px; margin: 0 auto; }
.breadcrumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-lt); }
.page-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
}
.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.08;
  margin-bottom: 22px;
}
.page-title em { font-style: italic; color: var(--gold-lt); }
.page-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 300;
  color: #e4dcca;
  line-height: 1.5;
  max-width: 720px;
}

/* ── CONTENT SECTIONS ── */
section { padding: 58px 40px 68px; }
.section-inner { max-width: 900px; margin: 0 auto; }
.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}
.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 300;
  color: var(--deep);
  line-height: 1.12;
  margin-bottom: 30px;
}
.section-heading.on-dark { color: var(--cream); }

/* Prose */
.prose p {
  font-size: 15.5px;
  font-weight: 300;
  color: #4a5755;
  line-height: 1.9;
  margin-bottom: 22px;
  max-width: 720px;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--deep); }
.prose a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(184,151,90,0.4); }
.prose h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
  font-weight: 400;
  color: var(--deep);
  margin: 34px 0 12px;
}

/* Numbered steps */
.steps { display: grid; gap: 2px; margin-top: 8px; }
.step {
  background: var(--white);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--deep);
  margin-bottom: 8px;
}
.step-body { font-size: 14.5px; font-weight: 300; color: #6a7d7a; line-height: 1.8; }

/* Feature cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  margin-top: 8px;
}
.info-card {
  background: var(--white);
  padding: 30px 30px;
  border-top: 2px solid var(--gold);
}
.info-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--deep);
  margin-bottom: 10px;
}
.info-card p { font-size: 14px; font-weight: 300; color: #6a7d7a; line-height: 1.75; }

/* Notice / disclaimer box */
.notice {
  background: var(--warm);
  border-left: 3px solid var(--gold);
  padding: 24px 28px;
  margin: 34px 0;
  border-radius: 3px;
}
.notice p { font-size: 14px; font-weight: 300; color: #4a5755; line-height: 1.8; margin: 0; }
.notice p + p { margin-top: 12px; }
.notice strong { font-weight: 500; color: var(--deep); }

/* Price / fee table (factual page) */
.fee-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.fee-table caption {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 12px;
}
.fee-table th, .fee-table td {
  text-align: left;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(43,58,56,0.1);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--deep);
}
.fee-table th { font-weight: 500; color: var(--mist); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.fee-table td:last-child { text-align: right; color: var(--gold); font-weight: 500; white-space: nowrap; }

/* CTA band */
.cta-band { background: var(--ink); }
.cta-band .section-inner { text-align: center; }
.cta-band h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 18px;
}
.cta-band p { color: #a0b0ae; font-weight: 300; max-width: 560px; margin: 0 auto 30px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER (identical to homepage) ── */
footer {
  background: var(--ink);
  padding: 26px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--stone);
  letter-spacing: 0.06em;
}
.footer-note {
  font-size: 11px;
  color: rgba(138,158,154,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 18px 24px; }
  .nav-links { gap: 22px; }
  section { padding: 46px 24px 54px; }
  .page-hero { padding: 120px 24px 54px; }
  .step { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(27, 36, 34, 0.98);
    flex-direction: column;
    padding: 18px 28px 24px;
    gap: 4px;
    border-top: 1px solid rgba(196,184,164,0.1);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links li a {
    display: block;
    padding: 10px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(196,184,164,0.08);
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-cta { text-align: center; margin-top: 6px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0 0 3px 0;
}
.skip-link:focus { left: 0; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── DEFINITION-STYLE DETAIL LIST (booking) ── */
.detail-list { list-style: none; margin: 8px 0 0; padding: 0; }
.detail-list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(43,58,56,0.1);
  font-size: 14.5px;
  font-weight: 300;
  color: #4a5755;
  line-height: 1.7;
}
.detail-list li:last-child { border-bottom: none; }
.detail-list .dt {
  font-weight: 500;
  color: var(--deep);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 640px) { .detail-list li { grid-template-columns: 1fr; gap: 4px; } }

/* ── TIMELINE (about / qualifications) ── */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(43,58,56,0.1);
}
.timeline li:last-child { border-bottom: none; }
.timeline .year {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 2px;
}
.timeline .qual { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 400; color: var(--deep); line-height: 1.3; }
.timeline .inst { font-size: 13px; font-weight: 300; color: var(--mist); margin-top: 3px; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 4px; } }

/* ── FORMS (booking / enquiry) ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.form-group label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.form-group .opt { text-transform: none; letter-spacing: 0; opacity: 0.6; font-size: 9px; }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--white);
  border: 1px solid rgba(43,58,56,0.18);
  border-radius: 2px;
  padding: 13px 15px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.form-group select { appearance: none; -webkit-appearance: none; }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); }
.form-hint { font-size: 12.5px; font-weight: 300; color: var(--mist); line-height: 1.5; margin-top: -4px; }
.field-error { font-size: 12.5px; font-weight: 400; color: #b3452f; margin-top: -2px; }
.form-submit {
  display: inline-block;
  padding: 15px 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  margin-top: 6px;
}
.form-submit:hover { background: var(--gold-lt); }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.form-status { margin-top: 16px; font-size: 14px; font-weight: 400; display: none; }
.form-status.success { color: #2f6f4f; display: block; }
.form-status.error   { color: #b3452f; display: block; }
.form-privacy { margin-top: 18px; font-size: 12.5px; font-weight: 300; color: var(--mist); line-height: 1.6; }
.form-privacy a { color: var(--gold); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* Two-column layout for booking (details + form) */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; gap: 40px; } }