/* =========================================================
   NIRA — a dental practice as a phone app
   ---------------------------------------------------------
   Three layouts live in this file, in this order:

   1. Base            one long stacked page. This is what you
                      get with no JavaScript, and it is a
                      perfectly good website on its own.
   2. `html.app`      the phone app shell. main.js adds the
                      class, so the shell only exists once the
                      script is definitely running.
   3. min-width 900   desktop. The tab bar goes away, every
                      screen becomes a section of one page, and
                      the booking sheet becomes a panel.

   Building it in that order means a script error degrades to a
   readable page rather than a blank one.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --brand: #4F46E5;
  --ink:   #0B1020;

  --bg:    #F5F6FB;
  --card:  #FFFFFF;
  --sink:  #0A0E1C;

  --muted: #626B85;
  --line:  rgba(11, 16, 32, .09);
  --line-2: rgba(11, 16, 32, .055);

  --gut:   18px;
  --max:   1140px;
  --r:     24px;
  --r-sm:  14px;

  --lift:  0 1px 2px rgba(11,16,32,.04), 0 10px 30px -14px rgba(11,16,32,.18);
  --lift-2: 0 2px 8px rgba(11,16,32,.06), 0 26px 50px -22px rgba(11,16,32,.3);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);

  --nav-h: 58px;
  --tab-h: 74px;
  --safe:  env(safe-area-inset-bottom, 0px);

  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Panels here are laid out with flex and grid, and any `display`
   value beats the browser's own rule for [hidden]. Without this an
   invisible overlay sits on the page swallowing every tap. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* clears the tab bar in the no-JavaScript stacked layout */
  padding-bottom: calc(var(--tab-h) + var(--safe));
}

h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button, input, select { font: inherit; color: inherit; touch-action: manipulation; }
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* ---------- 3. Launch screen ---------- */
/* Animates itself away with fill-mode forwards, so it clears even
   if main.js never runs. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--brand);
  animation: bootOut .5s var(--ease) 1s forwards;
}
.boot__mark {
  width: 60px; height: 60px;
  border-radius: 19px;
  background: #fff;
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--brand) 78%, #fff);
  animation: bootMark .8s var(--spring) both;
}
.boot__name {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  animation: bootName .6s var(--ease) .18s both;
}
@keyframes bootMark {
  from { opacity: 0; transform: scale(.6) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes bootName {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bootOut {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- 4. Layout primitives ---------- */
.pad {
  padding-inline: var(--gut);
  padding-bottom: 34px;
  max-width: var(--max);
  margin-inline: auto;
}

.lead { padding-block: 26px 20px; }
.lead p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

.kick {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 11px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.big {
  font-size: clamp(31px, 8.6vw, 46px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
}
.big em { font-style: normal; color: var(--brand); }
.big--sm { font-size: clamp(27px, 7.4vw, 38px); }

.block { padding-top: 34px; }
.block__head { margin-bottom: 16px; }
.block__head h2 { font-size: clamp(21px, 5.6vw, 27px); font-weight: 800; letter-spacing: -.03em; }
.block__head p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }

.note {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--muted);
  font-size: 13.5px;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 100px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .16s var(--ease), background .18s, box-shadow .18s;
}
.btn:active { transform: scale(.965); }
.btn--go {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 80%, transparent);
}
.btn--go:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }
.btn--soft {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.btn--soft:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.btn--wide { width: 100%; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }

/* ---------- 6. Top bar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
  padding-inline: var(--gut);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav__logo { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.nav__mark {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--brand);
  box-shadow: inset 0 0 0 3.5px color-mix(in srgb, var(--brand) 22%, #fff);
  flex: none;
}
.nav__logotype { min-width: 0; }
.nav__logotype b {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__logotype i {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The compact title that takes over as the big one scrolls away.
   Hidden in the base layout — only the app shell uses it. */
.nav__title { display: none; }

.nav__links { display: none; }

.nav__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  flex: none;
  transition: transform .16s var(--ease);
}
.nav__call:active { transform: scale(.92); }
.nav__call span { display: none; }

/* ---------- 7. Cover ---------- */
.cover {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 15% 0%, color-mix(in srgb, var(--brand) 88%, #fff) 0%, transparent 60%),
    linear-gradient(155deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, var(--sink)) 100%);
  color: #fff;
}
.cover__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .34;
  animation: coverIn 1.4s var(--ease) both;
}
@keyframes coverIn {
  from { opacity: 0; transform: scale(1.1); }
  to   { opacity: .34; transform: none; }
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,28,.34) 0%, rgba(10,14,28,.06) 42%, rgba(10,14,28,.5) 100%);
}
.cover__in {
  position: relative;
  z-index: 1;
  padding: 30px var(--gut) 34px;
  max-width: var(--max);
  margin-inline: auto;
}
.cover__p {
  margin-top: 14px;
  max-width: 30em;
  color: rgba(255,255,255,.84);
  font-size: 15.5px;
}
/* A full-strength rule under a 60px word reads as a marker pen, so the
   emphasis is carried by a translucent hairline instead. */
.cover .big em {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-decoration-color: rgba(255, 255, 255, .4);
  text-underline-offset: .16em;
}

.pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.pill b { color: #fff; font-weight: 700; }
.pill svg { color: #FBBF24; font-size: 13px; }
.pill--live i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 3px rgba(52,211,153,.24);
  animation: blink 2.4s ease-in-out infinite;
}
.pill--live.is-shut i { background: #FB7185; box-shadow: 0 0 0 3px rgba(251,113,133,.22); animation: none; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- 8. Quick actions ---------- */
.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: -20px;               /* lifts the row onto the cover edge */
  position: relative;
  z-index: 2;
}
.quick a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 13px 4px 12px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--lift);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  transition: transform .16s var(--ease), box-shadow .2s;
}
.quick a:active { transform: scale(.94); }
.quick__ico {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 18px;
}

/* ---------- 9. Numbers ---------- */
.figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 22px;
}
.fig {
  padding: 16px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.fig dd {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.fig dt { margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ---------- 10. Photo reel ---------- */
/* Circular thumbnails that open full-screen, the way a phone shows
   photos. Nothing here is a lightbox — main.js builds a story
   viewer with progress bars instead. */
.reel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gut) * -1);
  padding: 4px var(--gut) 8px;
}
.reel::-webkit-scrollbar { display: none; }
.reel__item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.reel__item:active { transform: scale(.93); }
.reel__ring {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, var(--brand), #A78BFA, #F472B6, var(--brand));
}
.reel__ring img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2.5px var(--bg);
}
.reel__item i {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 11. Trust cards ---------- */
.cards { display: grid; gap: 9px; }
.card {
  display: flex;
  gap: 13px;
  padding: 16px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.card__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 19px;
}
.card h3 { font-size: 15.5px; font-weight: 700; }
.card p { margin-top: 5px; color: var(--muted); font-size: 14px; }

/* ---------- 12. Reviews ---------- */
.score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform .16s var(--ease);
}
.score:active { transform: scale(.985); }
.score > b {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.score__body { flex: 1; min-width: 0; }
.score__body i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
}
.score__go { color: var(--brand); font-size: 18px; }
.stars { display: flex; gap: 2px; color: #FBBF24; font-size: 13px; }

.rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 12px calc(var(--gut) * -1) 0;
  padding: 2px var(--gut) 12px;
  scroll-padding-inline: var(--gut);
}
.rail::-webkit-scrollbar { display: none; }
.rail > :not(template) { flex: 0 0 80%; scroll-snap-align: center; min-width: 0; }

.say {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 18px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.say blockquote { margin: 11px 0 0; flex: 1; font-size: 15px; letter-spacing: -.005em; }
.say figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.say figcaption b { display: block; font-size: 14px; font-weight: 700; }
.say figcaption span { font-size: 12px; color: var(--muted); }

.pips { display: flex; justify-content: center; gap: 5px; }
.pips i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: width .25s var(--ease), background .25s;
}
.pips i.is-on { width: 20px; border-radius: 100px; background: var(--brand); }

/* ---------- 13. Segmented control ---------- */
.seg {
  position: relative;
  display: flex;
  gap: 4px;
  margin: 0 calc(var(--gut) * -1) 16px;
  padding: 4px var(--gut);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  position: relative;
  z-index: 1;
  flex: none;
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 100px;
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color .22s, box-shadow .22s, transform .16s var(--ease);
}
.seg button:active { transform: scale(.95); }
.seg button.is-on { color: #fff; box-shadow: none; }
/* the pill that slides between segments; positioned by main.js */
.seg__pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: 38px;
  border-radius: 100px;
  background: var(--ink);
  transition: transform .34s var(--spring), width .34s var(--spring);
  pointer-events: none;
}

/* ---------- 14. Price rows ---------- */
.list {
  display: grid;
  gap: 8px;
  border-radius: var(--r);
}
.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.row.is-hid { display: none; }
/* Applied by main.js when the segments change, so the surviving
   rows deal themselves back in rather than snapping into place.
   Kept off the base rule to stay clear of the reveal transition. */
@keyframes rowIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
.row__main { flex: 1; min-width: 0; }
.row__main h3 { font-size: 15.5px; font-weight: 700; }
.row__main > p { margin-top: 5px; color: var(--muted); font-size: 13.5px; }
.row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.tag {
  padding: 3px 9px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--brand);
  font-weight: 700;
}
.row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: none;
}
.row__side b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.row__go {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 15px;
  transition: transform .16s var(--ease), background .18s;
}
.row__go:active { transform: scale(.9); }

/* ---------- 15. Dentists ---------- */
.docs { display: grid; gap: 12px; }
.doc {
  overflow: hidden;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--lift);
}
.doc__pic { aspect-ratio: 4 / 3.2; background: var(--bg); overflow: hidden; }
.doc__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.doc:hover .doc__pic img { transform: scale(1.04); }
.doc__txt { padding: 16px 18px 20px; }
.doc__txt h3 { font-size: 16.5px; font-weight: 700; }
.doc__role { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.doc__bio { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* ---------- 16. Map, address, hours ---------- */
.mapcard {
  overflow: hidden;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--lift);
}
.mapcard__frame {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--bg);
}
.mapcard__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.mapcard__frame.is-loaded iframe { opacity: 1; }
.mapcard__frame.is-loaded .shimmer { opacity: 0; }
/* a loading placeholder that looks deliberate rather than broken */
.shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--bg) 20%,
    color-mix(in srgb, var(--brand) 7%, var(--bg)) 40%,
    var(--bg) 60%);
  background-size: 240% 100%;
  animation: shimmer 1.5s linear infinite;
  transition: opacity .4s;
}
@keyframes shimmer {
  from { background-position: 140% 0; }
  to   { background-position: -60% 0; }
}
.mapcard__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line-2);
}
.mapcard__foot p { flex: 1; min-width: 0; }
.mapcard__foot b { display: block; font-size: 14.5px; font-weight: 700; }
.mapcard__foot span { display: block; font-size: 12.5px; color: var(--muted); }

.lines {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding: 6px 16px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.lines li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px;
}
.lines li:first-child { border-top: 0; }
.lines__ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 16px;
}
.lines a { color: var(--brand); font-weight: 700; }

.hours {
  margin-top: 12px;
  padding: 6px 16px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px;
}
.hours div:first-child { border-top: 0; }
.hours dt { color: var(--muted); }
.hours dd { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 17. Questions ---------- */
.qa {
  border-radius: var(--r);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.qa__item { border-top: 1px solid var(--line-2); }
.qa__item:first-child { border-top: 0; }
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 17px 16px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.012em;
  cursor: pointer;
}
.qa__q svg { flex: none; font-size: 19px; color: var(--brand); transition: transform .3s var(--ease); }
.qa__item.is-on .qa__q svg { transform: rotate(180deg); }
.qa__a { overflow: hidden; }
.qa__a p {
  padding: 0 16px 17px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 14.5px;
}

/* ---------- 18. Credit ---------- */
.credit {
  max-width: var(--max);
  margin: 34px auto 0;
  padding: 22px var(--gut) 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}
/* main.js reparents this into the Visit screen on a phone, where the
   surrounding .pad already supplies the side padding. */
.app .credit { padding-inline: 0; padding-bottom: 0; }
.credit p + p { margin-top: 3px; }

/* ---------- 19. Tab bar ---------- */
.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  height: calc(var(--tab-h) + var(--safe));
  padding: 0 6px var(--safe);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: saturate(1.7) blur(18px);
  -webkit-backdrop-filter: saturate(1.7) blur(18px);
  border-top: 1px solid var(--line);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  height: 56px;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  transition: color .22s;
}
.tab svg {
  font-size: 21px;
  transition: transform .34s var(--spring);
}
.tab.is-on { color: var(--brand); }
.tab.is-on svg { transform: translateY(-2px) scale(1.12); }
.tab:active svg { transform: scale(.88); }

.fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: 58px; height: 58px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--brand);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--brand) 85%, transparent);
  transition: transform .2s var(--spring), box-shadow .2s;
}
.fab svg { font-size: 20px; }
.fab:active { transform: scale(.9); }

/* ---------- 20. Booking sheet ---------- */
/* Base layout: an ordinary panel at the end of the page. The app
   shell below turns it into a bottom sheet. */
.sheet { padding: 34px var(--gut); max-width: var(--max); margin-inline: auto; }
.sheet__scrim, .sheet__grab, .sheet__x { display: none; }
.sheet__card {
  padding: 22px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--lift);
}
.sheet__body h2 { font-size: clamp(23px, 6vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.sheet__p { margin-top: 10px; color: var(--muted); font-size: 14.5px; }

.promise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.promise li {
  padding: 13px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  text-align: center;
}
.promise b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand);
}
.promise span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.f { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.f--half { grid-column: span 1; }
.f label { font-size: 12.5px; font-weight: 700; }
.f input, .f select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px transparent;
  /* 16px stops iOS Safari zooming when a field takes focus */
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow .2s, background .2s;
}
.f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23626B85'%3E%3Cpath d='M12 15.4 6.6 10 8 8.6l4 4 4-4L17.4 10 12 15.4Z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.f input:focus, .f select:focus {
  outline: none;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.f em { display: none; font-style: normal; font-size: 12px; color: #DC2626; }
.f.is-bad input, .f.is-bad select { box-shadow: inset 0 0 0 1.5px #DC2626; }
.f.is-bad em { display: block; }
.form .btn { grid-column: 1 / -1; margin-top: 4px; }
.form__fine { grid-column: 1 / -1; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- 21. Story viewer ---------- */
.story {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: #05070F;
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--ease), visibility .26s;
}
.story.is-on { opacity: 1; visibility: visible; }

.story__bars {
  display: flex;
  gap: 4px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 0;
}
.story__bars i {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.28);
  overflow: hidden;
}
.story__bars i::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #fff;
}
.story__bars i.is-done::after { width: 100%; }
.story__bars i.is-live::after { animation: storyFill 4s linear forwards; }
@keyframes storyFill { from { width: 0; } to { width: 100%; } }

.story__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
}
.story__who { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
.story__x {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 19px;
  cursor: pointer;
}

.story__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.story__stage img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* contain, so a clinic's photo is never cropped into nonsense */
  object-fit: contain;
}
/* The same photo, blown up and blurred behind the contained one, so a
   portrait shot sits in its own colours instead of two black bands. */
.story__wash {
  object-fit: cover !important;
  transform: scale(1.25);
  filter: blur(30px) saturate(1.5) brightness(.62);
  z-index: 0;
}
.story__shot { z-index: 1; }
.story__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 18px 22px;
  background: linear-gradient(0deg, rgba(5,7,15,.9), transparent);
  color: rgba(255,255,255,.9);
  font-size: 13.5px;
}
/* invisible halves for tap-to-advance, the way stories work */
.story__half {
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  border: 0;
  background: none;
  cursor: pointer;
}
.story__half--prev { left: 0; }
.story__half--next { right: 0; width: 66%; }

/* ---------- 22. Toast ---------- */
.toast {
  position: fixed;
  /* Centred with auto margins rather than left:50% and a -50% nudge.
     With only `left` set, a fixed element's shrink-to-fit width is
     capped at half the viewport, which wrapped a one-line message. */
  left: 16px;
  right: 16px;
  margin-inline: auto;
  width: fit-content;
  bottom: calc(var(--tab-h) + var(--safe) + 16px);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--lift-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .3s var(--spring), visibility .3s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: none; }
.toast svg { color: #34D399; font-size: 17px; }

/* ---------- 23. Reveal ---------- */
/* Gated on `.js`, not on `.app`, so the desktop page animates too
   while a browser with no JavaScript still shows everything. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }


/* =========================================================
   24. THE APP SHELL — phones, and only once JS is running
   ========================================================= */
@media (max-width: 899px) {

  html.app, html.app body {
    height: 100%;
    overflow: hidden;
  }
  /* Fixing the body stops iOS rubber-banding the whole app while a
     screen scrolls inside it. */
  html.app body {
    position: fixed;
    inset: 0;
    padding-bottom: 0;
  }

  .app .nav { position: fixed; top: 0; left: 0; right: 0; }

  /* The compact title crossfades with the big one. */
  .app .nav__title {
    display: block;
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.025em;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .26s var(--ease), transform .26s var(--ease);
    pointer-events: none;
  }
  .app .nav.is-titled .nav__title { opacity: 1; transform: none; }
  .app .nav.is-titled .nav__logotype { opacity: 0; transition: opacity .22s; }

  .app .deck {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    bottom: calc(var(--tab-h) + var(--safe));
  }

  /* Each screen keeps its own scroll position, which is exactly
     what a native tab bar does. */
  .app .screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* A phone overlays its scrollbar; a desktop browser pretending
       to be one draws a permanent grey stripe down the app. */
    scrollbar-width: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 10px, 0);
    transition: opacity .3s var(--ease), transform .34s var(--ease), visibility .34s;
  }
  .app .screen.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* The cover belongs to the Home screen only, so the other three
     need their own breathing room at the top. */
  .app .lead { padding-top: 22px; }

  /* Bottom sheet */
  .app .sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    padding: 0;
    max-width: none;
    visibility: hidden;
    transition: visibility .36s;
  }
  .app .sheet.is-open { visibility: visible; }

  .app .sheet__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(6, 9, 20, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .36s var(--ease);
  }
  .app .sheet.is-open .sheet__scrim { opacity: 1; }

  .app .sheet__card {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 94%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 var(--gut) calc(26px + var(--safe));
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 44px -18px rgba(6,9,20,.5);
    transform: translate3d(0, 100%, 0);
    transition: transform .42s var(--ease);
  }
  .app .sheet.is-open .sheet__card { transform: none; }
  /* while a finger is on the grab handle, follow it instead */
  .app .sheet.is-dragging .sheet__card { transition: none; }

  .app .sheet__grab {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 12px 0 10px;
    border: 0;
    background: var(--card);
    cursor: grab;
    touch-action: none;
  }
  .app .sheet__grab i {
    display: block;
    width: 42px; height: 4px;
    margin-inline: auto;
    border-radius: 4px;
    background: var(--line);
  }

  .app .sheet__x {
    display: grid;
    place-items: center;
    position: absolute;
    top: 12px; right: var(--gut);
    z-index: 3;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-size: 17px;
    cursor: pointer;
  }

  .app .sheet__body { padding-bottom: 6px; }

  .app .screen::-webkit-scrollbar,
  .app .sheet__card::-webkit-scrollbar { display: none; }
  .app .sheet__card { scrollbar-width: none; }
}


/* =========================================================
   25. DESKTOP
   ========================================================= */
@media (min-width: 900px) {
  :root { --gut: 40px; }

  body { padding-bottom: 0; }

  .nav { height: 68px; }
  .nav__links {
    display: flex;
    gap: 28px;
    margin-inline: auto;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--muted);
  }
  .nav__links a { transition: color .18s; }
  .nav__links a:hover { color: var(--ink); }
  .nav__logo { margin-right: 0; }
  .nav__call {
    width: auto; height: 44px;
    padding: 0 18px;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 700;
  }
  .nav__call span { display: inline; }

  /* every screen becomes a section of one continuous page */
  .screen { scroll-margin-top: 88px; }
  .screen + .screen { padding-top: 26px; }

  .cover__in { padding: 74px var(--gut) 92px; }
  .cover .big { max-width: 17ch; }
  .cover__img { opacity: .3; }

  .quick { max-width: 560px; gap: 10px; margin-top: -34px; }
  .quick a { padding: 18px 8px 16px; font-size: 12.5px; }

  .figs { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
  .fig { padding: 22px; }
  .fig dd { font-size: 34px; }

  .block { padding-top: 56px; }
  .lead { padding-block: 44px 26px; }

  .reel { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
  .reel__ring { width: 92px; height: 92px; }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .card { flex-direction: column; padding: 22px; }

  .rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    overflow: visible;
    margin-inline: 0;
    padding: 12px 0 0;
  }
  .rail > :not(template) { flex: none; }
  .pips { display: none; }

  .seg { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }

  .list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .row { padding: 20px; }
  .row:hover { box-shadow: var(--lift); }

  .docs { grid-template-columns: repeat(4, 1fr); }

  .mapcard__frame { aspect-ratio: 16 / 8; }

  .qa__q { padding: 20px 22px; font-size: 16.5px; }
  .qa__a p { padding: 0 22px 20px; }

  /* the sheet is just a panel here — the pitch sits beside the form */
  .sheet { padding-block: 56px 20px; }
  .sheet__card { padding: 38px; }
  .sheet__body {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 44px;
    align-items: start;
  }
  .promise { margin-bottom: 0; }
  .promise li { padding: 16px 12px; }

  .score { max-width: 540px; }

  .tabs { display: none; }
  .toast { bottom: 24px; }
}

@media (min-width: 1180px) {
  .cover .big { font-size: 60px; }
}

/* ---------- 26. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .boot { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .shimmer { animation: none; }
}