
/* Head of Design spec, after the shared sheet so these rules win. */
html, body { margin: 0; }
:root {
  --surface: transparent;
  --border: rgba(141,141,141,.35);
  --border-col: rgba(141,141,141,.35);
  --grey-3: rgba(141,141,141,.35);
}
.site-header { background: rgba(17,17,17,.88); border-bottom: 1px solid rgba(141,141,141,.35); }
.skip-link { color: #111111; }
.rule { border: none; border-top: 1px solid #8D8D8D; margin: 0; }
button, input, select, textarea { font-family: inherit; }
p, li, .door p, .case-card p { text-wrap: pretty; }
h1, h2, h3, .proof-stat { text-wrap: balance; }
@media (max-width: 640px) {
  .symptoms-section,
  .pathway-section,
  .cases-section,
  .about-section,
  .contact-section,
  .guarantee-section,
  .faq-section {
    padding-top: clamp(72px, 12vw, 136px);
    padding-bottom: clamp(72px, 12vw, 136px);
  }
}

.proof-strip{margin-top:clamp(56px,6vw,88px);padding:0 0 clamp(56px,6vw,80px);border-bottom:0}
.proof-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid rgba(141,141,141,.35);border-bottom:1px solid rgba(141,141,141,.35)}
.proof-list>li{display:flex}
.proof-list a{display:flex;flex-direction:column;gap:10px;width:100%;padding:32px 32px 28px;color:#D2D2D2;text-decoration:none}
.proof-list>li+li a{border-left:1px solid rgba(141,141,141,.35)}
.proof-list>li:first-child a{padding-left:0}
.proof-list>li:last-child a{padding-right:0}
.proof-mark{height:24px;width:auto;max-width:none;margin-bottom:6px}
.proof-list a{border-bottom:0}
.proof-logo{height:100%;width:auto;max-width:150px;object-fit:contain;object-position:left center}
.proof-stat{font-family:Lora,Georgia,serif;font-size:clamp(34px,3.4vw,52px);line-height:1.05;font-weight:400;letter-spacing:-0.01em;color:#F0EDE8;font-variant-numeric:lining-nums}
.proof-desc{font-size:14px;line-height:1.45;color:#D2D2D2;text-wrap:balance;max-width:28ch}
.proof-more{margin-top:auto;padding-top:14px;font-size:13px;letter-spacing:.02em;color:#8D8D8D}
.proof-list a:hover .proof-more,.proof-list a:focus-visible .proof-more{color:#F0EDE8}
.proof-list a:hover .proof-stat{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.proof-list a:focus-visible{outline:1px solid #D2D2D2;outline-offset:4px}
@media (max-width: 900px) {
  .proof-list a { padding: 24px 20px; }
  .proof-stat { font-size: clamp(28px, 4vw, 36px); }
}
@media (max-width: 640px) {
  .proof-strip{margin-top:40px;padding-bottom:48px}
  .proof-list{grid-template-columns:1fr}
  .proof-list>li+li a{border-left:0;border-top:1px solid rgba(141,141,141,.35)}
  .proof-list a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"mark mark" "stat more" "desc desc";
    column-gap:16px;row-gap:6px;padding:20px 0!important}
  .proof-mark{grid-area:mark;height:20px;margin:0 0 4px}
  .proof-stat{grid-area:stat;font-size:clamp(30px,8.5vw,38px)}
  .proof-more{grid-area:more;align-self:end;margin:0;padding:0 0 6px}
  .proof-desc{grid-area:desc;font-size:14px}
}
.hero-art { margin-top: 0; }

h1 { font-size: inherit; line-height: 1.08; }
.hero.hero--v4 { padding: clamp(96px, 10vw, 136px) 0 0; }
.hero-main .h1-v4,
.hero--v4 .h1-v4 {
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-main .lede { max-width: 34em; margin: 20px 0 24px; }
.hero-caps li { font-size: 13px; }
.hero-grid--split { align-items: end; }
.hero-cta-box {
  background: transparent;
  border: 1px solid rgba(141,141,141,.35);
  padding: 32px;
}
.hero-cta-box::before,
.callout::before { content: none; }
.hero-points li,
.hero-cta-box .hero-points li { font-size: 13px; line-height: 1.5; color: #D2D2D2; }
.btn-primary { white-space: nowrap; }
.btn-arrow { margin-left: 8px; }
.hero-cta-box .btn-primary { gap: 10px; white-space: nowrap; }
@media (max-width: 640px) {
  .hero-main .lede { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 380px) {
  .hero-cta-box .btn-primary { white-space: nowrap; }
}

.callout-left .contact-phone,
.contact-phone { display: block; margin-top: 10px; }
.callout-book { display: inline-flex; margin-top: 28px; }
.callout {
  background: transparent;
  border: 1px solid rgba(141,141,141,.35);
}
.form-alt { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: #D2D2D2; }
.form-alt a { color: #F0EDE8; text-decoration: underline; text-underline-offset: 4px; }
.callout-note { font-size: 13px; line-height: 1.6; }
.form-label,
.form-field .form-label,
.form-field label { font-size: 13px; }
.form-field { border-bottom-color: rgba(141,141,141,.35); }
.form-field:focus-within { border-bottom-color: #D2D2D2; }
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible { box-shadow: 0 1px 0 0 #D2D2D2; }
.contact-form .btn-primary,
.enquiry-form .btn-primary {
  background: transparent !important;
  color: #F0EDE8 !important;
  border: 1px solid #8D8D8D !important;
}
.contact-form .btn-primary:hover,
.contact-form .btn-primary:focus-visible,
.enquiry-form .btn-primary:hover,
.enquiry-form .btn-primary:focus-visible {
  background: transparent !important;
  color: #F0EDE8 !important;
  border-color: #F0EDE8 !important;
}
@media (max-width: 860px) {
  .callout-book { width: 100%; justify-content: center; }
}

.nav-links .btn-primary,
a.nav-cta-mobile,
.hero-cta-box .btn-primary,
.callout-book,
a.sticky-cta {
  font-size: 13px;
  letter-spacing: .02em;
  font-weight: 500;
  min-height: 44px;
  padding: 12px 18px;
}
a.sticky-cta.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 768px) {
  a.sticky-cta,
  a.sticky-cta.is-on {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    min-height: 56px;
  }
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-right: 24px;
}
.form-field select::-ms-expand { display: none; }
.form-field:has(> select) { position: relative; }
.form-field:has(> select)::after {
  content: '>';
  position: absolute;
  right: 2px;
  bottom: 15px;
  font-family: var(--font-serif);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--cream);
  pointer-events: none;
}
.form-field select:has(option[value=""]:checked) { color: var(--grey-2); }
.callout.in-view .form-field:nth-child(7) { animation-delay: 0.30s; }
.callout.in-view .form-field:nth-child(8) { animation-delay: 0.35s; }
