/* ===========================================================================
   INNER PAGES — additive only.

   main.css is the approved reference stylesheet and is left untouched. It was
   written for a single-page homepage, so it has no page-header pattern and no
   allowance for the fixed header on a light background. Everything here fills
   those two gaps using the reference's own tokens; no colour, font or spacing
   value is invented.
   =========================================================================== */

/* The header is position:fixed. On the homepage the hero sits under it by
   design; on a bone page the content has to clear it. */
.page-top { padding-top: calc(var(--hdr-h) + clamp(2.25rem, 6vw, 5rem)); }

.page-head__title {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.018em;
  font-size: var(--t-display);
  max-width: 20ch;
}

/* Editorial row: the reference's expertise-list pattern, generalised so any
   page can list procedures, locations, articles or fees in the same voice. */
.row-list { border-top: 1px solid var(--rule); }
.erow {
  display: grid;
  gap: .5rem 2rem;
  padding-block: clamp(1.5rem, 2.6vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
  text-decoration: none;
  transition: background-color .4s var(--ease);
}
a.erow:hover { background: rgba(15, 76, 92, .04); }
.erow__n { font-size: .8125rem; letter-spacing: .1em; color: var(--ink-40); font-variant-numeric: tabular-nums; padding-top: .3rem; }
.erow__t { font-family: var(--display); font-weight: 400; font-size: var(--t-sub); line-height: 1.18; color: var(--teal); }
.erow__d { color: var(--ink-70); max-width: 56ch; }
.erow__go { color: var(--teal); white-space: nowrap; }

@media (min-width: 900px) {
  .erow     { grid-template-columns: 3.25rem minmax(0,1fr) minmax(0,1.05fr) auto; align-items: center; }
  .erow--2  { grid-template-columns: 3.25rem minmax(0,1fr); align-items: start; }
  .erow--3  { grid-template-columns: 3.25rem minmax(0,1fr) auto; align-items: center; }
  .erow--3t { grid-template-columns: 3.25rem minmax(0,1fr) auto; align-items: start; }
}

/* Full-bleed image band with the reference's teal scrim. */
.band-img { position: relative; overflow: clip; }
.band-img__media { position: absolute; inset: 0; }
.band-img__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) contrast(1.05); }
.band-img__scrim { position: absolute; inset: 0; }
.band-img__in { position: absolute; inset: 0; display: flex; align-items: flex-end; }

/* Sidebar card, in the reference's hairline idiom — no shadow, square. */
.aside-card { border: 1px solid var(--rule); padding: clamp(1.5rem, 2.4vw, 1.85rem); }
.deep .aside-card { border-color: var(--rule-teal); }

/* Two-column page shell used by most inner pages. */
.page-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 1000px) {
  .page-grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); gap: clamp(3rem, 5vw, 5.5rem); }
  .page-grid__aside { position: sticky; top: calc(var(--hdr-h) + 2rem); align-self: start; }
}

/* Form fields, square and hairlined like everything else. */
.field {
  display: block; width: 100%; margin-top: .6rem;
  padding: .85rem 1rem;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.5;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule-2); border-radius: 0;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field::placeholder { color: var(--ink-40); }
.field:hover { border-color: var(--ink-40); }
.field:focus { outline: none; border-color: var(--teal); background: rgba(91, 140, 133, .07); }
textarea.field { resize: vertical; min-height: 8rem; }
select.field { appearance: none; padding-right: 2.5rem; }

/* Quiet sea-green panel — the 6-10% tint the brand book authorises. */
.paper { background: rgba(91, 140, 133, .08); }

/* Icon sizing for the Magnific SVGs used on inner pages. */
.mic { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.mic svg { width: 100%; height: 100%; display: block; }
.mic svg * { fill: currentColor; }

/* ---------------------------------------------------------------------------
   Bridge classes.
   The inner pages were first built against a derived stylesheet whose class
   names deliberately mirror the reference's. These are the few that main.css
   does not define, expressed entirely in the reference's own tokens.
   --------------------------------------------------------------------------- */
.section--tight { padding-block: calc(var(--sec-y) * .62); }
.measure { max-width: 46ch; }
.t-week { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--teal); }
.btn--outline { --btn-fg: var(--ink); --btn-bg: transparent; border-color: var(--rule-2); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.draw { transform: scaleX(0); transform-origin: left; }
.draw.is-in { transform: scaleX(1); transition: transform 1.1s var(--ease-out, var(--ease)); }
.meta-teal { color: var(--teal); }

/* Long-form prose, in the reference's editorial voice. */
.prose-zks { max-width: 64ch; }
.prose-zks > * + * { margin-top: 1.15rem; }
.prose-zks h2 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-statement); line-height: 1.16;
  color: var(--teal); margin-top: clamp(2.5rem, 5vw, 3.75rem); margin-bottom: .35rem;
}
.prose-zks h3 { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.5; margin-top: 2rem; }
.prose-zks ul { list-style: none; padding-left: 0; }
.prose-zks ul > li { position: relative; padding-left: 1.6rem; margin-top: .6rem; }
.prose-zks ul > li::before { content: ''; position: absolute; left: 0; top: .78em; width: .7rem; height: 1px; background: var(--sea); }
.prose-zks ol { padding-left: 1.25rem; }
.prose-zks ol > li { margin-top: .6rem; }
.prose-zks a { text-decoration: underline; color: var(--teal); }
.prose-zks strong { font-weight: 600; }
.prose-zks blockquote {
  font-family: var(--display); font-size: var(--t-sub); line-height: 1.3;
  color: var(--teal); border-left: 2px solid var(--clay);
  padding-left: 1.25rem; margin-block: 2rem; max-width: 40ch;
}

/* ===========================================================================
   TWO-LEVEL MENU
   Bone panel, hairline border, square corners, no shadow — the same idiom as
   every other surface in the reference. The clay hairline along the top is the
   one accent, matching the section-numeral treatment.
   =========================================================================== */
.menu { position: relative; display: inline-flex; }

.menu__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 0 0 3px; margin: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--sans);
  font-size: .75rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-70);
  background-image: linear-gradient(var(--teal), var(--teal));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .4s var(--ease), background-size .5s var(--ease);
}
.menu__btn:hover,
.menu__btn.is-current,
.menu__btn[aria-expanded="true"] { color: var(--teal); background-size: 100% 1px; }

/* Over the hero, the header is transparent and its type is bone. */
.js .hdr:not(.is-stuck) .menu__btn { color: var(--on-teal); background-image: linear-gradient(var(--bone), var(--bone)); }
.js .hdr:not(.is-stuck) .menu__btn:hover,
.js .hdr:not(.is-stuck) .menu__btn[aria-expanded="true"] { color: var(--bone); }

.menu__chev { flex: 0 0 auto; transition: transform .35s var(--ease); }
.menu__btn[aria-expanded="true"] .menu__chev { transform: rotate(180deg); }

.menu__panel {
  position: absolute; top: calc(100% + 1.35rem); left: -1.1rem;
  z-index: 120;
  min-width: max-content;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--clay);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.menu__panel[hidden] { display: none; }
.menu.is-open .menu__panel { opacity: 1; transform: none; pointer-events: auto; }

.menu__inner { padding: .9rem 1.1rem; }

.menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.menu__list a {
  display: block; padding: .5rem .75rem; margin-inline: -.75rem;
  text-decoration: none; border-left: 2px solid transparent;
  white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.menu__list a:hover,
.menu__list a:focus-visible { background: rgba(91, 140, 133, .09); border-left-color: var(--sea); }
.menu__list a.is-current { border-left-color: var(--clay); }

.menu__label {
  display: block;
  font-family: var(--sans); font-weight: 600; font-size: .9375rem; line-height: 1.3;
  /* .nav a sets uppercase + wide tracking for the top-level items; the panel
     inherits it, which turned procedure names into labels. Menu items read as
     they are written. */
  text-transform: none; letter-spacing: .005em;
  color: var(--teal);
}
.menu__desc {
  display: block; margin-top: .2rem;
  font-size: .75rem; line-height: 1.45; color: var(--ink-55);
}

.menu__all {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .65rem; padding-top: .7rem;
  border-top: 1px solid var(--rule);
  width: 100%;
  color: var(--teal);
}

/* The floating header paints every link in .nav bone so it reads on the
   banner. The dropdown panel sits on bone, so that rule made its links
   invisible — most visibly the "All treatments" row, which looked like an
   empty rule. The panel opts back out. */
.js .hdr:not(.is-stuck) .menu__panel a { color: var(--teal); }
.js .hdr:not(.is-stuck) .menu__panel .menu__label { color: var(--teal); }

@media (max-width: 1079px) { .menu { display: none; } }

/* --- Drawer accordion ---------------------------------------------------- */
.dsub { border-bottom: 1px solid var(--rule); }
.dsub > summary {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.85rem; font-weight: 400; letter-spacing: -.015em;
}
.dsub > summary::-webkit-details-marker { display: none; }
.dsub__chev { margin-left: auto; align-self: center; color: var(--ink-40); transition: transform .3s var(--ease); }
.dsub[open] .dsub__chev { transform: rotate(180deg); }

.dsub__list { list-style: none; margin: 0 0 1.1rem; padding: 0 0 0 3.1rem; display: grid; gap: .1rem; }
.dsub__list a {
  display: block; padding: .5rem 0;
  font-size: 1rem; color: var(--ink-70); text-decoration: none;
}
.dsub__list a:hover { color: var(--teal); }
.dsub__all { color: var(--teal) !important; text-decoration: underline; }

/* No-JS fallback.
   The panels carry `hidden` so that assistive tech and the JS agree on state.
   If scripting is unavailable the inline no-js -> js swap never runs, and this
   opens the panel on hover or focus so the child pages stay reachable. */
.no-js .menu:hover .menu__panel,
.no-js .menu:focus-within .menu__panel {
  display: block;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.no-js .menu__chev { display: none; }

/* ===========================================================================
   SOLID HEADER — inner pages.

   main.css paints the header bone whenever it is not `.is-stuck`, because on
   the homepage a dark hero sits behind it. Inner pages are bone, so those
   rules render bone-on-bone and the header disappears until you scroll.

   `.hdr--solid` pins the header to its scrolled treatment from the first
   paint. Selectors carry one extra class over main.css so they win without
   !important, and main.css itself is left untouched.
   =========================================================================== */
.hdr--solid {
  background: rgba(244, 241, 234, .94);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--rule);
}

.js .hdr.hdr--solid:not(.is-stuck) .wordmark__name,
.js .hdr.hdr--solid:not(.is-stuck) .nav a,
.js .hdr.hdr--solid:not(.is-stuck) .hdr__tel { color: var(--ink); }

.js .hdr.hdr--solid:not(.is-stuck) .wordmark__mono { color: var(--teal); border-color: var(--rule-2); }
.js .hdr.hdr--solid:not(.is-stuck) .wordmark__spec { color: var(--ink-55); }
.js .hdr.hdr--solid:not(.is-stuck) .nav a { background-image: linear-gradient(var(--teal), var(--teal)); }
.js .hdr.hdr--solid:not(.is-stuck) .nav a:hover,
.js .hdr.hdr--solid:not(.is-stuck) .nav a.is-current { color: var(--teal); }
.js .hdr.hdr--solid:not(.is-stuck) .burger { color: var(--ink); border-color: var(--rule-2); }

.js .hdr.hdr--solid:not(.is-stuck) .hdr__cta {
  background: var(--teal); border-color: var(--teal); color: var(--bone);
}
.js .hdr.hdr--solid:not(.is-stuck) .hdr__cta:hover {
  background: var(--clay); border-color: var(--clay); color: var(--ink);
}

.js .hdr.hdr--solid:not(.is-stuck) .menu__btn {
  color: var(--ink-70);
  background-image: linear-gradient(var(--teal), var(--teal));
}
.js .hdr.hdr--solid:not(.is-stuck) .menu__btn:hover,
.js .hdr.hdr--solid:not(.is-stuck) .menu__btn.is-current,
.js .hdr.hdr--solid:not(.is-stuck) .menu__btn[aria-expanded="true"] { color: var(--teal); }

/* ===========================================================================
   HOVER BRIDGE

   The panel sits below the trigger with a gap. Moving the pointer across that
   gap leaves .menu and the panel closed before it could be reached. This
   pseudo-element spans the gap so the pointer never actually exits, and the
   JS adds a short close delay on top.
   =========================================================================== */
.menu__panel::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -1.6rem;
  height: 1.6rem;
}


/* ===========================================================================
   PAGE HERO — inner pages.

   The same device as the homepage banner, shortened: a full-bleed photograph,
   a teal scrim so type can sit on it, and the transparent header over the top.
   This is why inner pages no longer need `.hdr--solid` — there is something
   dark behind the header again.
   =========================================================================== */
.phero {
  position: relative;
  overflow: clip;
  background: var(--teal);
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 52vh, 560px);
  padding-top: calc(var(--hdr-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2.25rem, 5vw, 4rem);
}
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.04); }
.phero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,76,92,.94) 0%, rgba(15,76,92,.76) 46%, rgba(15,76,92,.42) 100%),
    linear-gradient(0deg, rgba(15,76,92,.55) 0%, rgba(15,76,92,0) 55%);
}
.phero__in { position: relative; z-index: 2; width: 100%; }

.phero__kicker {
  display: flex; align-items: center; gap: 1.1rem;
  color: var(--on-teal-45);
}
.phero__kicker::after { content: ''; flex: 0 1 9rem; height: 1px; background: var(--rule-teal); }

.phero__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--bone);
  margin-top: 1.25rem;
  max-width: 18ch;
}
.phero__lead {
  margin-top: 1.5rem;
  max-width: 46ch;
  color: var(--on-teal);
  font-size: var(--t-lead); line-height: 1.6;
}

/* --- Breadcrumb ---------------------------------------------------------- */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-teal);
}
.crumb a, .crumb span {
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-teal-45); text-decoration: none;
}
.crumb a { transition: color .3s var(--ease); }
.crumb a:hover { color: var(--bone); }
.crumb [aria-current="page"] { color: var(--bone); }
.crumb__sep { color: var(--on-teal-45); opacity: .6; }

/* The first section after a hero does not need its full top padding. */
.phero + .section { padding-top: clamp(3rem, 6vw, 5.5rem); }

/* ---------------------------------------------------------------------------
   Sidebar figure.

   The spacing lives here rather than on a Tailwind `mt-10` utility because
   Tailwind 4 emits its utilities inside @layer utilities, while this stylesheet
   and main.css are unlayered and load afterwards. Unlayered rules beat layered
   ones whatever their specificity, so main.css's `figure { margin: 0 }` was
   winning and the image sat flush against the block above it.
   --------------------------------------------------------------------------- */
.aside-figure { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.aside-figure figcaption { margin-top: .875rem; }

/* Editorial row with a thumbnail — the procedures list. The row is a grid, so
   the image column is declared alongside the existing ones rather than being
   dropped in and left to wrap. */
.erow__thumb { display: block; width: 100%; aspect-ratio: 16/10; }
.erow--img { grid-template-columns: 3.25rem minmax(0,1fr); }
@media (min-width: 900px) {
  .erow--img { grid-template-columns: 3.25rem 9.5rem minmax(0,1fr) minmax(0,1.05fr) auto; align-items: center; }
}

/* A photograph shown whole rather than cropped. No fixed frame: a square box
   around a 16:10 picture left a band of bare paper above and below it. The
   image sets its own height instead, so there is nothing to letterbox. */
.photo-whole img { display: block; width: 100%; height: auto; filter: saturate(.78) contrast(1.03); }

/* ---------------------------------------------------------------------------
   Split banner.

   The banner keeps everything it had — the full-bleed photograph, the scrim,
   its height — and gains a second column holding the same picture whole, so
   the reader sees the frame the background crop cuts away. Nothing here
   changes .phero itself, so every other page's banner is untouched.
   --------------------------------------------------------------------------- */
.phero--split .phero__in { display: flex; align-items: center; }
.phero--split .shell { width: 100%; }
.phero--split .phero__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }

/* The figure shrinks to the picture so the corner rules below can sit against
   the image itself rather than an empty grid cell. */
.phero--split .phero__figure { margin: 0; position: relative; }

/* A hairline held clear of the picture, drawn at opposite corners only —
   the same restrained rule the rest of the site uses, rather than a box
   around the photograph. One gap value drives all four sides so the
   spacing reads as deliberate. */
.phero--split .phero__figure { --rule-gap: .625rem; }
.phero--split .phero__figure::before,
.phero--split .phero__figure::after {
  content: ''; position: absolute;
  width: 34%; height: 38%;
  border: 1px solid #fff;
  pointer-events: none;
}
.phero--split .phero__figure::before {
  top: calc(var(--rule-gap) * -1); left: calc(var(--rule-gap) * -1);
  border-right: 0; border-bottom: 0;
}
.phero--split .phero__figure::after {
  bottom: calc(var(--rule-gap) * -1); right: calc(var(--rule-gap) * -1);
  border-left: 0; border-top: 0;
}
.phero--split .phero__figure img {
  display: block; width: 100%; height: auto;
  filter: saturate(.78) contrast(1.03);
}

@media (min-width: 900px) {
  /* 70 / 30. The picture runs out through the page gutter to the edge of
     the viewport, so the narrower column still carries a large image. */
  .phero--split .phero__grid { grid-template-columns: 7fr 3fr; }
  .phero--split .phero__title { max-width: 16ch; }
  .phero--split .phero__lead  { max-width: 42ch; }
}

/* Stacked, the picture would double the banner's height, so it is dropped —
   the same photograph is already behind the title. */
@media (max-width: 899px) {
  .phero--split .phero__figure { display: none; }
}

/* ============================================================
   FLOATING CTA — WhatsApp + Call, fixed bottom-right on every page.
   ============================================================ */
.floating-cta {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.floating-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.floating-cta__btn:hover,
.floating-cta__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.floating-cta__btn :where(span, svg) { width: 100%; height: 100%; }
.floating-cta__btn--whatsapp { background: #25D366; }
.floating-cta__btn--call    { background: var(--teal); }

@media (max-width: 599px) {
  /* bottom:.375rem (not 1rem) keeps the stack clear of the homepage hero
     slider's arrow controls, which sit just above it at this width. */
  .floating-cta { right: 1rem; bottom: .375rem; gap: .625rem; }
  .floating-cta__btn { width: 2.875rem; height: 2.875rem; }
}

/* Clear the hero slider's own arrow buttons (bottom-right of the banner)
   at wider viewports, so the two controls never sit on top of each other. */
@media (min-width: 900px) {
  .floating-cta { bottom: 10rem; }
}

/* ============================================================
   BOOK APPOINTMENT FORM — same rounded-card layout, recoloured
   to the site's own teal / bone / clay palette.
   ============================================================ */
.appt-card {
    max-width: 460px;
    margin-inline: auto;
    border-radius: 22px;
    overflow: hidden;
    background: var(--bone);
    box-shadow: 0 18px 40px rgba(15, 76, 92, .18);
}
.appt-card__head {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, var(--sea) 0%, var(--teal) 100%);
    text-align: center;
}
.appt-card__head h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.75rem;
    color: var(--bone);
}
.appt-card__body {
    padding: 1.75rem 1.5rem 2rem;
    display: grid;
    gap: 1.1rem;
}
.appt-field { display: block; }
.appt-input,
.appt-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--rule-2);
    background: #fff;
    color: var(--ink);
    font-family: var(--sans);
    font-size: .95rem;
    padding: 1rem 1.4rem;
}
.appt-input { border-radius: 999px; }
.appt-textarea { border-radius: 18px; resize: vertical; min-height: 7rem; }
.appt-input::placeholder,
.appt-textarea::placeholder { color: var(--ink-40); }
.appt-input:focus,
.appt-textarea:focus {
    outline: none;
    border-color: var(--teal);
    background: rgba(91, 140, 133, .07);
}
.appt-error {
    margin: .5rem 0 0 1rem;
    font-size: .8rem;
    color: var(--clay);
}
.appt-submit {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 1rem 1.5rem;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bone);
    background: var(--teal);
    box-shadow: 0 10px 20px rgba(15, 76, 92, .3);
    cursor: pointer;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.appt-submit:hover { background: var(--clay); color: var(--ink); }
.appt-submit:disabled { opacity: .7; cursor: default; }