/* ==========================================================================
   The Hand and Wrist Institute: paid landing page system (MOCKUP)
   Built to deliverables/brand/brand-kit.md

   DESIGN SYSTEM, declared once and used everywhere.

   Colour: two blues only, per brand-kit section 8 item 1.
     #6ABAE8 light blue field, #0D416D navy type and rules,
     #0F416D navy button fill (brand-kit section 3), #0A3255 its pressed state.
     Never white type on #6ABAE8 (brand-kit section 8 item 2).
   Neutrals: three text tones (ink / muted / faint), one control border that
     passes WCAG 2.2 SC 1.4.11 at 3:1 on white, one decorative hairline.
   Two utility colours that are not brand colours, each used for one job:
     --hwi-dark   near black photographic field behind the hero
     --hwi-star   Google amber, review card star rows only, so the cards read
                  as the platform they came from
   Spacing: 8px scale, --s1 .. --s8. No inline styles anywhere.
   Buttons: one hierarchy. Solid navy primary, outlined navy secondary,
     text link tertiary. On dark surfaces the same hierarchy inverts:
     solid white primary, outlined white secondary.
   Type: Open Sans 400-800 self hosted (latin subset), 1.6 leading.
     Cinzel carries the serif wordmark lockup only.
   ========================================================================== */

/* Self hosted, latin subset, variable weight. No external font request, so the
   page makes zero third party connections. font-display is optional, not swap:
   both files are preloaded, and optional means a late arrival can never reflow
   the page, which is what held CLS at zero. */
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-latin.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel-latin.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: optional;
}

/* Metric matched fallbacks so the swap cannot move the page. */
@font-face {
  font-family: "Open Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  ascent-override: 101.68%;
  descent-override: 27.88%;
  line-gap-override: 0%;
  size-adjust: 105.28%;
}
@font-face {
  font-family: "Cinzel Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  ascent-override: 82.5%;
  descent-override: 21.5%;
  line-gap-override: 0%;
  size-adjust: 118%;
}

:root {
  /* Brand blues */
  --hwi-blue: #6ABAE8;
  --hwi-navy: #0D416D;
  --hwi-navy-button: #0F416D;
  --hwi-navy-dark: #0A3255;

  /* Neutrals */
  --hwi-white: #FFFFFF;
  --hwi-tint: #F6F6F6;
  --hwi-ink: #111111;
  --hwi-muted: #35404A;
  --hwi-faint: #5A646D;
  --hwi-line: #767676;
  --hwi-hair: #D9DEE3;

  /* Single purpose utilities */
  --hwi-dark: #0B0D0E;
  --hwi-star: #FBBC04;
  --hwi-flag: #7D0006;

  /* Spacing, 8px scale */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s7: 56px;
  --s8: 72px;

  --wrap: 1160px;
  --radius: 6px;
  --callbar-h: 72px;
  --shadow-sm: 0 1px 2px rgba(13, 65, 109, .08), 0 2px 8px rgba(13, 65, 109, .06);
  --shadow-md: 0 2px 4px rgba(13, 65, 109, .08), 0 12px 28px rgba(13, 65, 109, .10);
}

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

/* Author display rules must never beat the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Open Sans", "Open Sans Fallback", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hwi-ink);
  background: var(--hwi-white);
  overflow-x: hidden;
  /* Reserve the sticky call bar so no content can ever sit under it. */
  padding-bottom: var(--callbar-h);
}

img, svg { max-width: 100%; }
/* Every img carries width and height for CLS. Those attributes also arrive as UA
   presentational hints, so height is reset here and re-set where a box needs it. */
img { height: auto; }

a { color: var(--hwi-navy); }

h1, h2, h3, h4 {
  color: var(--hwi-navy);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(27px, 5vw, 46px); line-height: 1.12; }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: 20px; }

/* Wrapping. Headings are balanced so a two line heading splits evenly instead of
   leaving one word on the last line. Body copy is set to about 62 characters and
   asks the browser for a pretty last line, which kills orphans. Both properties
   degrade to normal wrapping where they are not supported. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption, blockquote, label, summary { text-wrap: pretty; }

p { margin: 0 0 .85em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
/* Paragraphs that are not running text must not inherit the measure. */
.masthead p, .footer p, .callbar p, .mockbar p, .field p, .form-status,
.gr__name, .gr__meta, .proof p, .hero__rating, .stars, .loc__rating { max-width: none; }

.lede { max-width: 62ch; }
/* Short leads read better balanced than ragged. */
.lede, .section-head p { text-wrap: balance; }
/* Short strings that must never break across a line. */
.nobr { white-space: nowrap; }
.section-head p { max-width: 62ch; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: var(--s3) 0; }
.section--tint { background: var(--hwi-tint); }
.section-head { max-width: 760px; margin-bottom: 12px; }
.section-head p { color: var(--hwi-muted); }

/* One focus treatment for every interactive thing on the page. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--hwi-navy);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark a:focus-visible,
.on-dark .btn:focus-visible { outline-color: var(--hwi-blue); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Mockup ribbon ---------- */
.mockbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
  background: var(--hwi-navy-dark);
  color: var(--hwi-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 16px;
  text-align: center;
  line-height: 1.3;
}
.mockbar__x {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
  color: var(--hwi-white);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
  padding: 2px 10px;
  min-height: 24px;
  cursor: pointer;
}

/* ---------- Wordmark, rebuilt in type ---------- */
.wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--hwi-navy);
  line-height: 1;
}
.wordmark__top {
  display: block;
  font-family: "Cinzel", "Cinzel Fallback", "Times New Roman", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .015em;
  white-space: nowrap;
}
.wordmark__top .wm-sm { font-size: .74em; }
.wordmark__top .wm-reg { font-size: .46em; vertical-align: super; font-weight: 400; }
.wordmark__rule {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 5px;
}
.wordmark__rule::before,
.wordmark__rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.wordmark__bottom {
  font-family: "Cinzel", "Cinzel Fallback", "Times New Roman", Georgia, serif;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  white-space: nowrap;
}
.wordmark--light, .wordmark--light .wordmark__bottom { color: var(--hwi-white); }

/* ---------- Masthead ---------- */
.masthead {
  background: var(--hwi-blue);
  border-bottom: 1px solid rgba(13, 65, 109, .18);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 66px;
  padding-top: var(--s1);
  padding-bottom: var(--s1);
}
.masthead__cta { text-align: right; }
.masthead__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--hwi-navy);
  line-height: 1.2;
}
.masthead__phone {
  display: inline-block;
  font-size: clamp(17px, 2.3vw, 23px);
  font-weight: 700;
  color: var(--hwi-navy);
  text-decoration: none;
  line-height: 1.2;
  padding: 6px 0;
  white-space: nowrap;
}
.masthead__phone:hover { text-decoration: underline; }

/* ---------- Buttons: one hierarchy ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 15px var(--s3);
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary {
  background: var(--hwi-navy-button);
  color: var(--hwi-white);
  border-color: var(--hwi-navy-button);
}
.btn--primary:hover { background: var(--hwi-navy-dark); border-color: var(--hwi-navy-dark); }
.btn--secondary {
  background: var(--hwi-white);
  color: var(--hwi-navy);
  border-color: var(--hwi-navy);
}
.btn--secondary:hover { background: var(--hwi-tint); }
.btn--block { width: 100%; }
.btn svg { flex: 0 0 auto; }

/* Same hierarchy, inverted, on the dark hero and the closing panel. */
.on-dark .btn--primary {
  background: var(--hwi-white);
  color: var(--hwi-navy);
  border-color: var(--hwi-white);
}
.on-dark .btn--primary:hover { background: var(--hwi-blue); border-color: var(--hwi-blue); }
.on-dark .btn--secondary {
  background: transparent;
  color: var(--hwi-white);
  border-color: rgba(255, 255, 255, .8);
}
.on-dark .btn--secondary:hover { background: rgba(255, 255, 255, .12); }

.link-tertiary {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--hwi-navy);
  padding: 8px 0;
}
.on-dark .link-tertiary { color: var(--hwi-blue); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--hwi-dark);
  color: var(--hwi-white);
  overflow: hidden;
}
.hero__inner {
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}
.hero__media {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 82%;
}
.hero__lineart {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  max-width: 360px;
  height: auto;
  opacity: .16;
  pointer-events: none;
}
.hero h1 { color: var(--hwi-white); margin-bottom: var(--s2); }
.hero__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
  font-size: 14px;
  font-weight: 700;
  color: var(--hwi-white);
  margin: 0 0 var(--s2);
}
.hero__spec {
  font-size: 16px;
  color: rgba(255, 255, 255, .9);
  margin: var(--s2) 0 0;
  max-width: 34em;
}
.promise {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--hwi-blue);
  color: var(--hwi-navy);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 var(--s3);
  max-width: 30em;
}
.promise svg { flex: 0 0 auto; margin-top: 2px; }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}
.hero__micro { font-size: 15px; color: rgba(255, 255, 255, .88); margin: var(--s1) 0 0; }

/* ---------- Star rows ---------- */
.stars { display: inline-flex; gap: 2px; line-height: 0; }
.stars svg { fill: var(--hwi-star); }

/* ---------- Proof strip ---------- */
.proof { background: var(--hwi-blue); color: var(--hwi-navy); padding: var(--s2) 0; }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(13, 65, 109, .18);
  border-radius: var(--radius);
  overflow: hidden;
}
.proof__item {
  background: var(--hwi-blue);
  padding: 12px 10px;
  text-align: center;
}
.proof__big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.proof__lead {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
.proof__icon { display: block; margin: 0 auto var(--s1); }
.proof__small {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 4px;
}

/* ---------- Cards, steps ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.card {
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 18px; margin-bottom: 6px; }
.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hwi-blue);
  color: var(--hwi-navy);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}
.card p { color: var(--hwi-muted); line-height: 1.5; }

/* Section banner image */
.banner {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 2;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--radius);
  margin-bottom: var(--s2);
  background: var(--hwi-tint);
}

/* ---------- Treatment ladder ---------- */
.ladder { display: grid; gap: var(--s2); }
.rung {
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-left: 5px solid var(--hwi-blue);
  border-radius: var(--radius);
}
.rung:last-child { border-left-color: var(--hwi-navy); }
.rung__sum {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px 1fr 14px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}
.rung__sum::-webkit-details-marker { display: none; }
.rung__sum::after {
  content: "";
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--hwi-navy);
  border-bottom: 2px solid var(--hwi-navy);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-top: -4px;
}
.rung[open] .rung__sum::after { transform: rotate(-135deg); margin-top: 4px; }
.rung__title { margin: 2px 0 0; }
.rung__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--hwi-navy);
  color: var(--hwi-navy);
  font-weight: 800;
}
.rung p { color: var(--hwi-muted); line-height: 1.5; margin-bottom: 0; }
.rung__tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--hwi-navy);
  background: var(--hwi-blue);
  border-radius: var(--radius);
  padding: 2px 8px;
}
.rung__body { display: grid; gap: 12px; padding: 0 16px 16px 68px; }
.note-callout {
  margin-top: var(--s2);
  background: var(--hwi-blue);
  color: var(--hwi-navy);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-weight: 700;
}

/* ---------- Google review cards ---------- */
.gr-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s2);
}
.gr-strip__item {
  display: flex;
  align-items: center;
  gap: var(--s1);
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--hwi-navy);
}
.g-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--hwi-navy);
  color: var(--hwi-navy);
  font-family: "Open Sans", "Open Sans Fallback", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.reviews { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.reviews > * { min-width: 0; }
.gr {
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
/* The Local Guide badge is a bordered pill and a plain meta line is not, so the
   two head shapes differ by 4px. Pinning the meta row height keeps the star row,
   the clamped body, the More control and the attribution aligned across a row
   of cards. min-width:0 lets a long display name wrap instead of overflowing. */
.gr__head { display: flex; align-items: flex-start; gap: 8px; }
.gr__head > div { min-width: 0; }
.gr__name { overflow-wrap: break-word; }
.gr__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hwi-navy);
  color: var(--hwi-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.gr__name { font-size: 14px; font-weight: 700; color: var(--hwi-ink); margin: 0; line-height: 1.3; }
.gr__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--hwi-faint);
  margin: 2px 0 0;
  min-height: 25px;
}
.gr__badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--hwi-navy);
  background: var(--hwi-tint);
  border: 1px solid var(--hwi-hair);
  border-radius: 20px;
  padding: 1px 8px;
  white-space: nowrap;
}
.gr__rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 8px 0 6px;
}
.gr__rate .stars svg { width: 13px; height: 13px; }
.gr__date { font-size: 13px; color: var(--hwi-faint); white-space: nowrap; }
.gr__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hwi-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
/* Google clamps a review card to about four lines and offers More.
   The full text is always in the document; the control only expands it. */
.gr--open .gr__body { display: block; -webkit-line-clamp: unset; }
.gr__more {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--hwi-navy);
  background: transparent;
  border: 0;
  padding: 6px 0 0;
  min-height: 24px;
  cursor: pointer;
  text-decoration: underline;
}
.gr__attr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--hwi-hair);
  font-size: 13px;
  line-height: 1.4;
  color: var(--hwi-faint);
}
.gr__attr .g-mark { width: 17px; height: 17px; font-size: 11px; margin-top: 1px; }
.reviews__note { font-size: 14px; color: var(--hwi-faint); margin: 12px 0 0; }
.reviews__note--mock { font-weight: 700; color: var(--hwi-muted); }

/* ---------- Credentials ---------- */
.creds {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  align-items: start;
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: var(--s2);
  box-shadow: var(--shadow-sm);
}
.creds__photo {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  border: 3px solid var(--hwi-blue);
  background: var(--hwi-tint);
}
.creds h3 { margin-top: 0; }
.creds p { color: var(--hwi-muted); }

/* ---------- Insurance and cost ---------- */
.split { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.checklist { list-style: none; margin: 12px 0 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--s1);
  line-height: 1.5;
  color: var(--hwi-muted);
}
.checklist li:last-child { margin-bottom: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--hwi-blue);
  box-shadow: inset 0 0 0 2px var(--hwi-navy);
}
.facts { margin: 0; }
.facts dt {
  font-weight: 700;
  color: var(--hwi-navy);
  margin-top: var(--s2);
}
.facts dt:first-of-type { margin-top: 0; }
.facts dd { margin: 4px 0 0; color: var(--hwi-muted); line-height: 1.5; }

/* ---------- Form ---------- */
.form-card {
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-top: 5px solid var(--hwi-navy);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.form-card h3 { margin-top: 0; }
.form-card__lead { font-size: 15px; color: var(--hwi-muted); }
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--hwi-navy);
  margin-bottom: 4px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--hwi-ink);
  background: var(--hwi-white);
  border: 1px solid var(--hwi-line);
  border-radius: var(--radius);
  padding: 11px 12px;
}
.field--error input { border-color: var(--hwi-flag); border-width: 2px; }
.field__err { display: block; font-size: 14px; font-weight: 700; color: var(--hwi-flag); margin-top: 6px; }
.consent { font-size: 14px; color: var(--hwi-muted); margin: 14px 0 0; }
.form-note { font-size: 14px; color: var(--hwi-faint); margin: 10px 0 0; }
.form-status {
  margin-top: 14px;
  background: var(--hwi-blue);
  color: var(--hwi-navy);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-weight: 700;
}

/* ---------- Locations ---------- */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .15;
}
.loc {
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  padding: 18px;
}
.loc h3 { margin-bottom: 8px; font-size: 18px; }
.loc address { font-style: normal; color: var(--hwi-muted); margin-bottom: 8px; }
.loc__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  background: var(--hwi-blue);
  color: var(--hwi-navy);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 5px 9px;
  margin-bottom: 10px;
}
.loc__hours { font-size: 14px; color: var(--hwi-muted); margin: 0; }
.loc-foot { margin-top: var(--s2); color: var(--hwi-muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details {
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  background: var(--hwi-white);
  margin-bottom: var(--s1);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  color: var(--hwi-navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--hwi-navy);
  border-bottom: 2px solid var(--hwi-navy);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-top: -4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq .faq__body { padding: 0 16px 14px; color: var(--hwi-muted); line-height: 1.5; }

/* ---------- Where does it hurt: real tabs ----------
   Chips are tabs. Each carries a line glyph for its region. The selected chip
   changes fill AND gains a tick, so the state is never carried by colour alone
   (WCAG 2.2 SC 1.4.1). Every chip is at least 44px tall (SC 2.5.8). */
.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hwi-navy);
  background: var(--hwi-white);
  border: 2px solid var(--hwi-navy);
  border-radius: var(--radius);
  padding: 8px 14px;
  min-height: 44px;
  cursor: pointer;
}
.chip__glyph { flex: 0 0 auto; }
.chip:hover { background: var(--hwi-tint); }
.chip[aria-selected="true"] {
  background: var(--hwi-navy);
  color: var(--hwi-white);
  border-color: var(--hwi-navy);
}
.chip[aria-selected="true"]:hover { background: var(--hwi-navy-dark); }
/* Shape, not colour: a tick appears only on the selected tab. */
.chip[aria-selected="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 11px;
  margin: -3px 0 0 2px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

/* The panel. One column on phones (symptoms, then the booking card), two from
   700px. min-height is set per breakpoint below so all five panels are the same
   height and switching tabs never shifts the page. */
.cond {
  background: var(--hwi-white);
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: var(--s2);
  align-content: start;
  box-shadow: var(--shadow-sm);
  /* Measured equal-height bands: the tallest of the five panels at each width,
     so no tab switch can move the page. See the band rules in the responsive
     section. From 700px the two column layout already makes all five identical,
     so the floor is released there. */
  min-height: 777px;
}
.cond__main { display: flex; flex-direction: column; }
.cond__h {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hwi-faint);
  margin: 0 0 10px;
}
.cond__list {
  margin: 0;
  padding-left: 20px;
  color: var(--hwi-muted);
  line-height: 1.5;
  max-width: 62ch;
}
.cond__list li { margin-bottom: 8px; }
.cond__list li:last-child { margin-bottom: 0; }
.cond__check {
  /* Sits on the bottom rule of the column so the two columns read as one card
     rather than two stacks of different length. */
  margin: var(--s2) 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hwi-hair);
  color: var(--hwi-muted);
  font-size: 15px;
  line-height: 1.5;
  max-width: 62ch;
}
.cond__check-k {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hwi-navy);
  margin-bottom: 4px;
}

/* Booking card. Same button hierarchy as the rest of the page. */
.cond__act {
  background: var(--hwi-tint);
  border: 1px solid var(--hwi-hair);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cond__fig {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  margin: 0;
}
/* The line art ships as white strokes for the dark hero. Inverted and held at
   low opacity it reads as a faint anatomical figure on this light card. It is a
   background rather than an <img> so the file is named once: the browser fetches
   it only for the panel that is on screen, and the self contained standalone
   build carries one copy instead of five. */
.cond__art {
  display: block;
  width: 96px;
  height: 96px;
  background: url("img/hand-anatomy-lineart.png") center / contain no-repeat;
  filter: invert(1);
  opacity: .18;
}
.cond__pin {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--hwi-navy);
  box-shadow: 0 0 0 4px rgba(106, 186, 232, .6);
}
/* Approximate anatomy, which is all a region marker needs to be. */
.cond--thumb   .cond__pin { left: 63%; top: 47%; }
.cond--fingers .cond__pin { left: 45%; top: 28%; }
.cond--wrist   .cond__pin { left: 49%; top: 68%; }
.cond--palm    .cond__pin { left: 46%; top: 54%; }
.cond--numb    .cond__pin { left: 38%; top: 19%; }

.cond__act-top { display: flex; align-items: center; gap: 14px; }
.cond__act-h { font-size: 18px; margin: 0; }
/* The call button carries a 19 character label. Trim its side padding so the
   label can never wrap inside this narrower column. */
.cond__act .btn { padding-left: var(--s2); padding-right: var(--s2); }
.cond__healow { align-self: center; text-align: center; }
.cond__reassure {
  text-wrap: balance;
  font-size: 14px;
  line-height: 1.45;
  color: var(--hwi-faint);
  margin: 0;
  max-width: 46ch;
}

/* Ladder strip: the one photograph the treatment section carries, as a band
   under the closing note rather than a thumbnail inside step one. */
.ladder-strip { margin: var(--s2) 0 0; }
.ladder-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: 50% 52%;
  border-radius: var(--radius);
  background: var(--hwi-tint);
}
.ladder-strip figcaption {
  font-size: 14px;
  color: var(--hwi-faint);
  margin-top: 8px;
  max-width: 62ch;
}

/* ---------- Final CTA ---------- */
.finalcta { background: var(--hwi-navy); color: var(--hwi-white); padding: var(--s4) 0; }
.finalcta h2 { color: var(--hwi-white); }
.finalcta p { color: rgba(255, 255, 255, .9); max-width: 62ch; text-wrap: balance; }
.finalcta__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s3); }
.finalcta__note { font-size: 15px; color: rgba(255, 255, 255, .88); margin-top: var(--s2); }

/* ---------- Mockup notes ---------- */
.mocknotes {
  background: var(--hwi-tint);
  border-top: 3px solid var(--hwi-blue);
  padding: var(--s2) 0;
  font-size: 15px;
  color: var(--hwi-muted);
}
.mocknotes summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: var(--hwi-navy);
  padding: 6px 0;
  min-height: 24px;
}
.mocknotes summary::-webkit-details-marker { display: none; }
.mocknotes summary::before { content: "+ "; }
.mocknotes details[open] summary::before { content: "- "; }
.mocknotes ul { margin: var(--s1) 0 0; padding-left: 20px; }
.mocknotes li { margin-bottom: var(--s1); }
.mocknotes li:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--hwi-navy-dark); color: rgba(255, 255, 255, .88); padding: var(--s3) 0; font-size: 15px; }
.footer__grid { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.footer__tag {
  font-family: "Cinzel", "Cinzel Fallback", "Times New Roman", Georgia, serif;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hwi-white);
  margin-top: 12px;
}
.footer a { color: var(--hwi-white); }
.footer__tel { display: inline-block; padding: 8px 0; font-weight: 700; }
.footer__links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: var(--s3); }
.footer__links a { display: inline-block; padding: 8px 0; }
.footer__legal { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 13px; }
.footer__legal p { margin-bottom: 8px; }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: var(--s1);
  padding: var(--s1) 10px calc(var(--s1) + env(safe-area-inset-bottom, 0px));
  background: var(--hwi-navy);
  border-top: 3px solid var(--hwi-blue);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
}
.callbar .btn {
  flex: 1 1 0;
  min-width: 0;
  font-size: 15px;
  padding: 12px 8px;
  min-height: 46px;
  white-space: nowrap;
}
.callbar__call { background: var(--hwi-white); color: var(--hwi-navy); border-color: var(--hwi-white); }
.callbar__form { background: transparent; color: var(--hwi-white); border-color: rgba(255, 255, 255, .8); }
.callbar .btn:focus-visible { outline-color: var(--hwi-blue); }

/* ---------- Privacy stub page ---------- */
.doc { max-width: 720px; }
.doc h2 { font-size: 22px; margin-top: var(--s4); }
.doc p, .doc li { color: var(--hwi-muted); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: var(--s1); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 479px) {
  .masthead__cta { display: none; }
  .masthead__inner { min-height: 56px; }
  /* Two word headings in a narrow column: drop a step rather than leave one
     word alone on the second line. */
  .creds h3 { font-size: 18px; }
  .rung__title { font-size: 18px; }
}

@media (max-width: 380px) {
  .doc h2 { font-size: 20px; }
  /* Reclaim width for the step title so a two word clinical term fits one line. */
  .rung__title { font-size: 16px; }
  .rung__sum { padding: 14px 12px; grid-template-columns: 30px 1fr 12px; gap: 8px; }
  .rung__step { width: 30px; height: 30px; font-size: 15px; }
  .rung__body { padding: 0 12px 14px 50px; }
  .wordmark__top { font-size: 15px; }
  .wordmark__bottom { font-size: 9px; letter-spacing: .3em; text-indent: .3em; }
  .masthead__label { display: none; }
  .masthead__phone { font-size: 16px; }
  .btn { font-size: 15px; padding: 14px 16px; }
  .callbar .btn { font-size: 14px; padding: 12px 6px; }
  .callbar__call svg { display: none; }
  .hero__ctas .btn { width: 100%; }
  .gr { padding: 16px; }
}

@media (min-width: 360px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .creds { grid-template-columns: 88px 1fr; gap: var(--s2); }
  .creds__photo { width: 88px; height: 88px; }
}

/* Two review cards abreast need room for a display name, a Local Guide pill and
   a date. Below 480px they get a column each instead. */
@media (min-width: 480px) {
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .split--locs { grid-template-columns: repeat(2, 1fr); }
}

/* "Where does it hurt?" equal-height bands, measured panel by panel. */
@media (min-width: 340px) { .cond { min-height: 753px; } }
@media (min-width: 390px) { .cond { min-height: 713px; } }
@media (min-width: 480px) { .cond { min-height: 692px; } }
@media (min-width: 520px) { .cond { min-height: 668px; } }
@media (min-width: 560px) { .cond { min-height: 646px; } }
@media (min-width: 600px) { .cond { min-height: 622px; } }

@media (min-width: 560px) {
  .creds { grid-template-columns: 104px 1fr; }
  .creds__photo { width: 104px; height: 104px; }
}

@media (min-width: 700px) {
  body { font-size: 17px; }
  /* Two column panel: what people tell us, then the booking card. */
  .cond {
    grid-template-columns: minmax(0, 1.6fr) minmax(288px, .85fr);
    gap: var(--s3);
    align-items: stretch;
    min-height: 0;
  }
  .cond__check { margin-top: auto; }
  .cond__act { justify-content: center; gap: 12px; }
  .cond__fig { width: 92px; height: 92px; }
  .cond__art { width: 92px; height: 92px; }
  /* The symptom lines are the substance of this panel, so they get the room. */
  .cond__list { font-size: 17px; line-height: 1.65; }
  .cond__list li { margin-bottom: 14px; }
  .cond__h { margin-bottom: 14px; }
  .faq summary { padding: 16px 20px; }
  .faq .faq__body { padding: 0 20px 18px; line-height: 1.6; }
  .cond { padding: var(--s3); }
  p { margin: 0 0 1em; }
  .card p, .rung p, .facts dd, .checklist li { line-height: 1.6; }
  .gr { padding: 20px; }
  .proof { padding: var(--s3) 0; }
  .hero__inner { padding-top: var(--s5); padding-bottom: var(--s5); }
  .finalcta { padding: var(--s6) 0; }
  .footer { padding: var(--s5) 0; }
  .field input, .field select, .field textarea { padding: 12px 14px; }
  .section-head { margin-bottom: var(--s3); }
  .banner { aspect-ratio: 4 / 1; }
  .gr__body { line-height: 1.55; }
  .card { padding: var(--s3); }
  .card h3 { font-size: 20px; }
  .cards { gap: var(--s3); }
  .gr__rate .stars svg { width: 15px; height: 15px; }
  .gr__date { font-size: 14px; }
  .gr__attr { font-size: 14px; }
  .gr__body { font-size: 15px; }
  .rung__sum { padding: 18px 20px; }
  .rung__body { padding: 0 20px 20px 72px; }
  .proof__item { padding: var(--s2) 12px; }
  .loc__hours { font-size: 15px; }
  .section { padding: var(--s7) 0; }
  .section-head { margin-bottom: var(--s3); }
  .cards { gap: var(--s3); }
  .reviews { gap: var(--s3); }
  .split { gap: var(--s3); }
  .card { padding: var(--s3); }
  .rung { padding: var(--s3) 20px; }
  .gr { padding: 20px; }
  .loc { padding: var(--s3); }
  .cond { padding: var(--s3); }
  .form-card { padding: var(--s3); }
  .creds { padding: var(--s3); }
  .footer { padding: var(--s5) 0; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .proof__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .banner { aspect-ratio: 4 / 1; }
}

@media (min-width: 980px) {
  body { font-size: 18px; padding-bottom: 0; }
  .cond { grid-template-columns: minmax(0, 1.7fr) 304px; }
  h3 { font-size: 24px; }
  .section { padding: var(--s8) 0; }
  .section-head { margin-bottom: var(--s4); }
  .masthead__inner { min-height: 78px; }
  .wordmark__top { font-size: 26px; }
  .wordmark__bottom { font-size: 13px; }
  .callbar { display: none; }

  /* Desktop hero: one photographic field, headline sitting in the right hand
     negative space the shot was framed to leave. */
  .hero__inner {
    grid-row: 1;
    grid-column: 1;
    display: grid;
    grid-template-columns: 1fr minmax(420px, 46%);
    align-items: center;
    min-height: 520px;
    padding-top: var(--s8);
    padding-bottom: var(--s8);
  }
  .hero__copy { grid-column: 2; }
  .hero__media {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: auto;
    position: absolute;
    inset: 0;
  }
  .hero__photo { object-position: 24% 50%; }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 13, 14, 0) 0%, rgba(11, 13, 14, .12) 32%, rgba(11, 13, 14, .8) 50%, rgba(11, 13, 14, .95) 64%, rgba(11, 13, 14, .97) 100%);
  }
  .hero__lineart {
    right: auto;
    left: 3%;
    bottom: -14%;
    width: 32%;
    max-width: 440px;
    opacity: .14;
  }
  .hero__rating { font-size: 15px; }
  .hero__spec { font-size: 17px; }
  .promise { font-size: 17px; }
  .creds { grid-template-columns: 128px 1fr; padding: var(--s4); }
  .creds__photo { width: 128px; height: 128px; }
}

@media (min-width: 1100px) {
  .reviews { grid-template-columns: repeat(4, 1fr); }
  .gr__body { font-size: 15px; }
}

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