/* ═══════════════════════════════════════════════════════════
   Bansal Dental 2.0
   Built against reference/REFERENCE.md
   1 nav · 2 hero · 3 why · 4 services · 5 choose · 6 who ·
   7 dentist · 8 book · 9 footer
   ═══════════════════════════════════════════════════════════ */

:root {
  /* colour — sampled off the reference */
  --blue:       #1F4BD8;
  --blue-deep:  #14349B;
  --tint:       #E7F0FC;
  --tint-deep:  #D8E6F8;
  --blob:       #EDF4FE;
  --ink:        #2E3440;
  --muted:      #5B6373;
  --paper:      #FFFFFF;
  --line:       #E3E8F0;
  --wa:         #25A366;

  /* type */
  --display: 'Marcellus', Georgia, serif;
  --body:    'Poppins', system-ui, -apple-system, sans-serif;

  /* shape */
  --r-card: 20px;
  --r-pill: 999px;
  --shadow: 0 18px 40px -22px rgba(31, 75, 216, .35);

  /* rhythm */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1500px;
  --nav-h: 78px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* the nav is sticky — keep anchor jumps from landing under it */
section[id], footer[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

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

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


/* ── image slots ─────────────────────────────────────────────
   Every photo sits in a .slot. If the file isn't there yet the
   <img> removes itself and the labelled placeholder shows through,
   so the layout is never blocked waiting on an asset.           */

.slot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--blob);
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0 12px, rgba(31, 75, 216, .05) 12px 24px);
  display: grid;
  place-items: center;
}

.slot::before {
  content: attr(data-label);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: .5;
  padding: 8px 14px;
  border: 1px dashed rgba(31, 75, 216, .35);
  border-radius: var(--r-pill);
  text-align: center;
}

.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* transparent PNG cutouts sit *on* the tint, never cropped */
.cutout { background: none; }
.cutout::before { display: none; }
.cutout img { object-fit: contain; }


/* ── buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
  white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.btn--ghost { padding: 12px 18px; color: var(--blue); background: none; }
.btn--ghost:hover { background: var(--tint); }

.btn--solid {
  padding: 13px 22px;
  color: #fff;
  background: var(--blue);
  box-shadow: var(--shadow);
}
.btn--solid:hover { background: var(--blue-deep); }

.btn--wa { padding: 13px 22px; color: #fff; background: var(--wa); }
.btn--wa:hover { background: #1E8A55; }

.btn--light { padding: 13px 22px; color: var(--blue); background: #fff; }
.btn--light:hover { background: var(--tint); }

.btn--block { width: 100%; padding: 16px; font-size: 15px; }

.btn--pill {
  padding: 18px 24px 18px 30px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  background: #EDEFF3;
  gap: 26px;
}
.btn--pill:hover { background: var(--tint); transform: translateY(-1px); }
.btn--pill svg { width: 20px; height: 20px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }


/* ── shared section furniture ───────────────────────────── */

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--blue);
  margin: 0 0 22px;
}
.h2--center { text-align: center; margin-inline: auto; }
.h2--light { color: #fff; }

.kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7FA6EC;
  text-align: center;
  margin: 0 0 14px;
}
.kicker--left { text-align: left; }


/* ═══════════════ 1 · NAV ═══════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* On the home page the hero photo panel already reaches the top of the document —
   it was just hidden behind the nav's white bar. Going transparent until the page
   scrolls lets the photo run full height behind the nav, the way the reference
   does, which is where the extra headroom above the subject comes from.
   Only the home page: the other pages open on a tinted or dark hero where blue
   links on a transparent bar would not hold up. */
body[data-page="home"] .nav:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
}
.nav.is-stuck { box-shadow: 0 10px 30px -24px rgba(31, 75, 216, .55); }

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 56px);
}

/* One typeface throughout the lockup — the previous version mixed a roman and
   an italic, which read as two different fonts. Hierarchy comes from size and
   letterspacing instead. */
.mark { display: flex; align-items: center; gap: 11px; flex: none; }
.mark__icon { width: 26px; height: 26px; fill: var(--blue); flex: none; }
.mark__text {
  display: grid;
  gap: 3px;
  font-family: var(--display);
  color: var(--blue);
  line-height: 1;
}
.mark__text strong { font-weight: 400; font-size: 19px; letter-spacing: .005em; }
.mark__text small {
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .62;
}

/* spread evenly across the bar rather than bunching against the logo */
.nav__links {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  gap: clamp(14px, 2vw, 30px);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.nav__links a { padding: 6px 0; position: relative; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--blue);
  transition: right .25s ease;
}
.nav__links a:hover::after { right: 0; }
/* stamped by tools/sync_chrome.py, so the current page is marked without JS */
.nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a[aria-current="page"] { font-weight: 600; }

.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Shown only once the label collapses on narrow screens — see the 620px block. */
.btn__short { display: none; }

/* hamburger — desktop hides it, the tablet/phone rules below show it */
.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 11px 9px;
  margin-left: 4px;
  border: 0;
  background: var(--tint);
  border-radius: 12px;
  cursor: pointer;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


/* ═══════════════ 2 · HERO ═══════════════ */

.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) var(--gutter) clamp(60px, 8vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.hero__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 82px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--blue);
  margin: 0 0 26px;
}

.hero__p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.72;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 36px;
}

.proof {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(36px, 5vw, 64px);
  padding: 14px 30px 14px 14px;
  background: var(--tint);
  border-radius: 14px;
  max-width: 560px;
  transition: background-color .2s ease, transform .2s ease;
}
.proof:hover { background: var(--tint-deep); transform: translateY(-2px); }

.proof__img { width: 168px; height: 88px; border-radius: 10px; flex: none; }
.proof__img::before { font-size: 9px; padding: 5px 8px; }

.proof__text { display: grid; gap: 6px; }
.proof__text strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--blue);
}
.proof__text span { font-size: 12.5px; color: var(--muted); }

/* the tinted photo panel — bleeds to the top and right edges */
/* Bleeds to the very top of the document — past the nav, not just under it —
   and off the right edge. --nav-h has to match the real nav height or a strip
   of page background shows above the photo. */
.hero__panel {
  position: relative;
  align-self: stretch;
  background: var(--tint-deep);
  border-radius: 0 0 0 28px;
  margin: calc(-1 * clamp(28px, 5vw, 64px) - var(--nav-h)) calc(-1 * var(--gutter))
          calc(-1 * clamp(60px, 8vw, 110px)) 0;
  min-height: clamp(460px, 66vw, 820px);
}

.hero__img { position: absolute; inset: 0; background: none; }
.hero__img::before { align-self: center; }
/* the source is 16:9 landscape with the subject right-of-centre —
   crop from the right so she stays framed in the tall panel */
.hero__img img { object-position: 72% center; }


/* ═══════════════ 3 · WHY VISIT · 5 · WHY CHOOSE US ═══════════════ */

.band {
  position: relative;
  background: var(--tint);
  padding: clamp(56px, 7vw, 104px) 0;
}
.band--pale { background: var(--blob); }

.band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.band .slot { min-height: clamp(280px, 34vw, 460px); }

/* The instrument cutout stands on a soft disc, same treatment as the family.
   This has to be ::before, not ::after with z-index:-1 — .band is only
   position:relative, so it creates no stacking context and a negative z-index
   would paint the disc behind the band's own background. ::before paints ahead
   of the absolutely-positioned <img> without needing a z-index at all. */
.why__img { position: relative; min-height: clamp(300px, 36vw, 500px); }
.why__img::before {
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: clamp(230px, 26vw, 380px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-deep);
}
.why__img img { object-position: center bottom; }

.band__copy p {
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.78;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 18px;
}
.band__copy .btn { margin-top: 12px; }


/* a white-background photo sitting as a card on the tint */
.card-img {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 24px 50px -30px rgba(31, 75, 216, .5);
}
.card-img::before { color: #9AA3B2; border-color: #D9E1EE; }
.card-img img { object-fit: contain; padding: 4%; }


/* ── 5 · the family cutout + review card + benefit rows ──
   The cutout is a transparent PNG standing on a soft blue disc, so it reads
   as placed rather than pasted. Review card overlaps its lower left. */

.choose__media {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(400px, 44vw, 600px);
}

.choose__media::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  width: clamp(250px, 27vw, 400px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tint-deep);
}

.choose__img {
  position: relative;
  height: clamp(400px, 44vw, 600px);
  background: none;
}
.choose__img::before { align-self: center; }
.choose__img img { object-fit: contain; object-position: center bottom; }

.review {
  position: absolute;
  left: 0;
  bottom: 4%;
  z-index: 2;
  width: min(250px, 74%);
  padding: 16px 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 44px -20px rgba(31, 75, 216, .4);
  transition: transform .25s ease;
}
.review:hover { transform: translateY(-4px); }

.review__top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wa);
  margin-bottom: 12px;
}
.review__top svg { width: 14px; height: 14px; fill: currentColor; }

.review__faces { display: flex; margin-bottom: 12px; }
.review__faces span {
  width: 34px;
  height: 34px;
  margin-right: -9px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: var(--blue);
}
.review__faces span[data-i="2"] { background: #4C79E8; }
.review__faces span[data-i="3"] { background: #7FA6EC; }
.review__faces span[data-i="4"] { background: #A8C4F3; }

.review strong {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--blue);
}

.benefits { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; }
.benefits li { display: flex; gap: 16px; align-items: flex-start; }

.benefits__ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.benefits__ico svg { width: 19px; height: 19px; fill: #fff; }

.benefits strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  color: var(--blue);
  margin-bottom: 4px;
}
.benefits p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 44ch; }


/* ═══════════════ 4 · WHAT WE OFFER ═══════════════ */

.services {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) var(--gutter);
}

.services .h2 { max-width: 20ch; margin-bottom: clamp(40px, 5vw, 68px); }

.svc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: clamp(44px, 5vw, 68px);
}

.svc__item {
  padding: 8px clamp(14px, 2vw, 32px);
  text-align: center;
  border-left: 1px solid var(--line);
}
.svc__item:nth-child(4n + 1) { border-left: 0; }

.svc__img {
  width: clamp(140px, 13vw, 186px);
  height: clamp(140px, 13vw, 186px);
  margin: 0 auto 22px;
  border-radius: 50%;
  transition: transform .3s ease;
}
.svc__img::before { font-size: 9px; padding: 5px 9px; }
.svc__item:hover .svc__img { transform: translateY(-6px); }

.svc__item h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--blue);
  margin: 0 0 10px;
}

.svc__item p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 0; }

.svc__item a { display: block; color: inherit; }

.svc__more { margin-top: clamp(44px, 5vw, 68px); text-align: center; }


/* ═══════════════ 6 · WHO WE ARE · 7 · OUR DENTIST ═══════════════ */

.split { padding: clamp(64px, 8vw, 120px) 0; }

.split__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.split--flip .split__inner > .slot { order: 2; }

.split__img { min-height: clamp(300px, 36vw, 480px); border-radius: var(--r-card); }
.split__img--tall { min-height: clamp(360px, 44vw, 580px); }

.split__copy p {
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.78;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 18px;
}

.pills {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 460px;
}
.pills li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: var(--tint);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--blue);
}
.pills svg { width: 17px; height: 17px; fill: var(--blue); flex: none; }
.pills + .btn { margin-top: 28px; }

/* The dentist portrait is a keyed cutout, so it stands on a tinted panel rather
   than filling a photo box. Declared after .cutout so its background wins. */
.doctor__img {
  background: var(--tint-deep);
  background-image: none;
  border-radius: var(--r-card);
  min-height: clamp(380px, 46vw, 600px);
  align-items: end;
}
.doctor__img img { object-fit: contain; object-position: center bottom; }

.credential {
  display: inline-grid;
  gap: 8px;
  margin-top: 28px;
  padding: 18px 26px;
  background: var(--tint);
  border-radius: 14px;
}
.credential__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.credential__badge svg { width: 13px; height: 13px; fill: var(--wa); }
.credential strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  color: var(--blue);
}
.credential__meta { font-size: 12.5px; color: var(--muted); }


/* ═══════════════ 8 · REVIEWS ═══════════════ */

.reviews {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--tint);
  overflow: hidden;
}

.reviews .h2 { margin-bottom: 14px; }

.reviews__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wa);
  margin: 0 0 clamp(34px, 4vw, 52px);
}
.reviews__badge svg { width: 15px; height: 15px; fill: currentColor; }

/* fade the cards out at both edges so they don't collide with the page sides */
.reviews__rail {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.reviews__track {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  display: flex;
  width: max-content;
  animation: rail var(--duration, 28s) linear infinite;
}
.reviews__rail:hover .reviews__track,
.reviews__rail:focus-within .reviews__track { animation-play-state: paused; }

/* margin-right, not gap: the track is exactly two identical halves, so
   translating -50% lands seamlessly. A flex gap would leave half a gap of drift. */
.quote {
  flex: 0 0 clamp(258px, 24vw, 330px);
  margin-right: 22px;
  padding: 26px 26px 22px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 18px 40px -28px rgba(31, 75, 216, .5);
  display: flex;
  flex-direction: column;
}

.quote > p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 20px;
  flex: 1;
}

.quote__by { display: flex; align-items: center; gap: 12px; }
.quote__ini {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: var(--blue);
}
.quote__ini[data-i="2"] { background: #4C79E8; }
.quote__ini[data-i="3"] { background: #7FA6EC; }
.quote__ini[data-i="4"] { background: #A8C4F3; }

.quote__by strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  color: var(--blue);
}
.quote__by span { font-size: 11.5px; color: var(--muted); }

.reviews__note { text-align: center; margin: clamp(34px, 4vw, 50px) 0 0; }
.reviews__note a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--blue);
  border-bottom: 1px solid rgba(31, 75, 216, .3);
  padding-bottom: 2px;
}
.reviews__note a:hover { border-bottom-color: var(--blue); }

@keyframes rail { to { transform: translateX(-50%); } }

/* no motion: turn the rail into an ordinary swipeable row */
@media (prefers-reduced-motion: reduce) {
  .reviews__rail { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .reviews__track { animation: none; }
}


/* ═══════════════ 9 · BOOK AN APPOINTMENT ═══════════════ */

.book {
  position: relative;
  background: var(--blue);
  overflow: hidden;
}

.book__bg { position: absolute; inset: 0; opacity: .16; background: none; }
.book__bg::before { display: none; }

.book__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.book__copy > p {
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  max-width: 46ch;
  margin: 0 0 30px;
}

.hours { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; max-width: 460px; }
.hours div { border-left: 2px solid rgba(255, 255, 255, .28); padding-left: 14px; }
.hours dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 5px; }
.hours dd { margin: 0; font-size: 14px; color: #fff; }

.book__form {
  background: #fff;
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}

.book__form label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  margin: 0 0 7px;
}
.book__form label span { color: var(--muted); font-weight: 300; }
.book__form label:not(:first-child) { margin-top: 16px; }

.book__form input,
.book__form select,
.book__form textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  background: #F6F9FE;
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}
.book__form input:focus,
.book__form select:focus,
.book__form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.book__form input::placeholder,
.book__form textarea::placeholder { color: #9AA3B2; }

.book__form .btn { margin-top: 22px; }

.book__fine { font-size: 11.5px; line-height: 1.6; color: var(--muted); text-align: center; margin: 12px 0 0; }


/* ═══════════════ 9 · FOOTER ═══════════════ */

.foot { background: #fff; padding: clamp(56px, 7vw, 96px) 0 28px; border-top: 1px solid var(--line); }

.foot__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(28px, 4vw, 56px);
}

.foot__brand p { font-size: 13.5px; line-height: 1.8; color: var(--muted); margin: 18px 0 0; }

.foot__col { display: flex; flex-direction: column; gap: 11px; }
.foot__col h3,
.quick h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  color: var(--blue);
  margin: 0 0 6px;
}
.foot__col a { font-size: 13.5px; color: var(--muted); transition: color .2s ease; }
.foot__col a:hover { color: var(--blue); }

.quick { background: var(--blue); border-radius: var(--r-card); padding: 26px 28px; }
.quick h3 { color: #fff; }
.quick p { font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .78); margin: 0 0 10px; }

.quick__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  color: #fff;
  margin-bottom: 16px;
}
.quick__phone svg { width: 17px; height: 17px; fill: #fff; }

.quick__links { display: flex; gap: 10px; margin-top: 16px; }
.quick__links a {
  padding: 8px 16px;
  font-size: 12.5px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--r-pill);
  transition: background-color .2s ease;
}
.quick__links a:hover { background: rgba(255, 255, 255, .3); }

.foot__fine {
  max-width: var(--maxw);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}


/* ═══════════════ INNER PAGES ═══════════════ */

.h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--blue);
  margin: 0 0 22px;
}
.h1--light { color: #fff; }

.tag {
  display: inline-block;
  padding: 5px 13px;
  margin-bottom: 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--tint);
  border-radius: var(--r-pill);
}

.btn-row--center { justify-content: center; }


/* ── text page hero ─────────────────────────────────────── */

.pagehero { background: var(--tint); padding: clamp(52px, 7vw, 96px) 0; }
.pagehero__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.pagehero__lead {
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.72;
  color: var(--muted);
  max-width: 58ch;
  margin: 0;
}
.pagehero .btn-row { margin-top: 30px; }


/* ── full-width photo hero (about) ──────────────────────── */

.widehero { position: relative; min-height: clamp(440px, 60vw, 760px); display: grid; }
.widehero__img { position: absolute; inset: 0; background: var(--tint-deep); }
.widehero__img::before { align-self: center; }
.widehero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(14, 38, 110, .88) 0%, rgba(14, 38, 110, .72) 42%, rgba(14, 38, 110, .18) 100%);
}
.widehero__copy {
  position: relative;
  align-self: center;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--gutter);
}
.widehero .h1 { font-size: clamp(42px, 6vw, 76px); }
.widehero__copy .kicker { color: #A8C4F3; }
.widehero__copy p {
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 46ch;
  margin: 0;
}


/* ═══════════════ SERVICES — "Blue Cards" ═══════════════
   Implemented from the approved Claude Design concept. Six category tints so
   the kind of care reads at a glance, per-treatment icons, and 1:1 photo tiles
   dropped into the grid so the page breathes. */

.svc-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
}
.svc-hero__panel {
  background: var(--tint);
  border-radius: 32px;
  padding: clamp(44px, 6vw, 88px) clamp(28px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 36px 64px;
  align-items: flex-end;
}
.svc-hero__lead { flex: 1 1 440px; min-width: 0; }
.svc-hero__lead .h1 { margin: 0; font-size: clamp(40px, 5.2vw, 64px); line-height: 1.08; }
.svc-hero__side { flex: 1 1 320px; max-width: 460px; display: flex; flex-direction: column; gap: 24px; }
.svc-hero__side p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink); }
.svc-hero__side .btn-row { margin-top: 0; }

/* the bracketed kicker — "( our services )" */
.bracket {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7FA6EC;
}

.svc-body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 18px;
}
.svc-body__col { min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px); }

/* rotated label running down the gutter */
.vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #7FA6EC;
  justify-self: start;
  padding-top: 6px;
}

/* heading left, supporting note right */
.svc-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: flex-end;
  justify-content: space-between;
}
.svc-intro .h2 { margin: 0; max-width: 520px; }
.svc-intro p { margin: 0; max-width: 380px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.svc-intro a { color: var(--blue); border-bottom: 1px solid rgba(31, 75, 216, .3); }

/* ── a category block ───────────────────────────────────── */

.cat { display: flex; flex-direction: column; gap: 26px; scroll-margin-top: 100px; }
.cat__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 48px;
  align-items: flex-end;
  justify-content: space-between;
}
.cat__head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--ink);
}
.cat__head p { margin: 0; max-width: 380px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

/* ── a treatment card ───────────────────────────────────── */

.tcard {
  background: var(--cat, var(--tint));
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 100px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tcard:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -30px rgba(31, 75, 216, .55); }
.tcard:target { outline: 2px solid var(--blue); outline-offset: 4px; }

.tcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tcard__ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  display: grid;
  place-items: center;
  flex: none;
}
.tcard__ico svg { width: 22px; height: 22px; }

.tcard__ask {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink);
  opacity: .55;
  white-space: nowrap;
}
.tcard__ask:hover { opacity: 1; color: var(--blue); }

.tcard h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.tcard p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink); }

/* category tints — the whole point of the concept */
.cat--preventive  .tcard { --cat: #DFF2F0; }
.cat--restorative .tcard { --cat: #E1EAF8; }
.cat--orthodontic .tcard { --cat: #E8E6F9; }
.cat--cosmetic    .tcard { --cat: #E3F0FB; }
.cat--surgical    .tcard { --cat: #E7ECF3; }
.cat--family      .tcard { --cat: #DFF2E6; }

/* ── a 1:1 photo tile sitting inside the card grid ──────── */

.phototile {
  border-radius: 24px;
  aspect-ratio: 1 / 1;
  min-height: 280px;
  background: var(--blob);
  overflow: hidden;
}
.phototile::before { font-size: 10px; line-height: 1.8; }
.phototile img { border-radius: 24px; }

/* ── closing panel ──────────────────────────────────────── */

.closing { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 7vw, 96px); }
.closing__panel {
  background: var(--tint);
  border-radius: 32px;
  padding: clamp(44px, 6vw, 80px) clamp(28px, 5vw, 72px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.closing__panel .h2 { margin: 0; max-width: 640px; }
.closing__panel > p { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.closing__panel .btn-row { margin-top: 0; justify-content: center; }


/* ── treatments list (services) ─────────────────────────── */

.treatments {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 60px);
}

.tx { scroll-margin-top: 100px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); align-items: start; }

.tx__img {
  width: clamp(120px, 12vw, 168px);
  height: clamp(120px, 12vw, 168px);
  border-radius: 50%;
  flex: none;
}
.tx__img::before { font-size: 9px; padding: 5px 9px; }

.tx__copy h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 25px);
  color: var(--blue);
  margin: 0 0 12px;
}
.tx__copy p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0; }


/* ── stats (about) ──────────────────────────────────────── */

.stats { padding: clamp(48px, 6vw, 80px) 0; }
.stats__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
}
.stats__inner div { text-align: center; border-left: 1px solid var(--line); padding: 6px 10px; }
.stats__inner div:first-child { border-left: 0; }
.stats dt {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  color: var(--blue);
  margin-bottom: 10px;
}
.stats dd { margin: 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }


/* ── posts (blog) ───────────────────────────────────────── */

.posts {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) var(--gutter);
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.post {
  scroll-margin-top: 100px;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}

.post__img { aspect-ratio: 3 / 2; border-radius: var(--r-card); }

.post__copy h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.24;
  color: var(--blue);
  margin: 0 0 16px;
}
.post__copy p { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 0 0 14px; }
.post__copy p:last-child { margin-bottom: 0; }


/* ── blog index cards ───────────────────────────────────── */

.postgrid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
}

.postcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.postcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(31, 75, 216, .55); }

.postcard__img { aspect-ratio: 3 / 2; border-radius: 0; }
.postcard__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.postcard__body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.26;
  color: var(--blue);
  margin: 0 0 12px;
}
.postcard__body p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; flex: 1; }
.postcard__more { font-size: 13px; font-weight: 500; color: var(--blue); }
.postcard:hover .postcard__more { text-decoration: underline; }


/* ── article pages ──────────────────────────────────────── */

.article { max-width: 760px; margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(56px, 7vw, 96px); }

.article__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 26px;
}
.article__back:hover { color: var(--blue); }

.article .h1 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.14; }

.article__meta {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 clamp(28px, 3vw, 40px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.article__hero { aspect-ratio: 3 / 2; border-radius: var(--r-card); margin-bottom: clamp(30px, 3.5vw, 46px); }

/* long-form body copy — wider line height and looser rhythm than section text */
.prose p { font-size: 15.5px; line-height: 1.85; color: var(--ink); margin: 0 0 20px; }
.prose h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.24;
  color: var(--blue);
  margin: clamp(34px, 4vw, 50px) 0 16px;
}
.prose h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--blue);
  margin: 28px 0 10px;
}
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { font-size: 15.5px; line-height: 1.8; color: var(--ink); margin-bottom: 10px; }
.prose li::marker { color: var(--blue); }
.prose strong { font-weight: 500; color: var(--blue); }

.callout {
  margin: clamp(30px, 3.5vw, 44px) 0;
  padding: 26px 30px;
  background: var(--tint);
  border-left: 3px solid var(--blue);
  border-radius: 0 14px 14px 0;
}
.callout h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  color: var(--blue);
  margin: 0 0 12px;
}
.callout p, .callout li { font-size: 14.5px; line-height: 1.8; color: var(--ink); margin: 0 0 8px; }
.callout ul { margin: 0; padding-left: 20px; }
.callout li:last-child, .callout p:last-child { margin-bottom: 0; }

.article__cta {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(30px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.article__cta p { font-size: 14.5px; line-height: 1.8; color: var(--muted); max-width: 48ch; margin: 0 auto 22px; }

.article__note { font-size: 12.5px; line-height: 1.75; color: var(--muted); margin: 30px 0 0; font-style: italic; }


/* ── related posts ──────────────────────────────────────── */

.related { background: var(--blob); padding: clamp(48px, 6vw, 84px) 0; }
.related__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: 30px; }
.related__grid a {
  display: block;
  padding: 22px 24px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
  transition: transform .2s ease;
}
.related__grid a:hover { transform: translateY(-3px); }
.related__grid .tag { margin-bottom: 10px; }
.related__grid h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  color: var(--blue);
  margin: 0;
}


/* ── info band (contact) ────────────────────────────────── */

.infoband { background: var(--blob); padding: clamp(52px, 6vw, 88px) 0; }
.infoband__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.info h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  color: var(--blue);
  margin: 0 0 14px;
}
.info p { font-size: 14px; line-height: 1.85; color: var(--ink); margin: 0 0 8px; }
.info p a { color: var(--blue); border-bottom: 1px solid rgba(31, 75, 216, .25); }
.info p a:hover { border-bottom-color: var(--blue); }
.info__meta { font-size: 12.5px !important; color: var(--muted) !important; }


/* ── closing line ───────────────────────────────────────── */

.manifesto {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--gutter);
  text-align: center;
}
.manifesto .h2 { margin-bottom: 18px; }
.manifesto__note {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 26px;
}
.manifesto__note strong { font-weight: 500; color: var(--blue); }


/* ── tablet ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav__inner { position: relative; }
  .nav__toggle { display: flex; }
  .btn--ghost span { display: none; }
  .btn--ghost { padding: 12px; }

  /* The links become an absolutely-positioned dropdown here, so they leave the
     flex row — and with them goes the flex:1 that was pushing the actions to the
     right. Without this the logo, button and hamburger bunch against the left
     edge with dead space beside them. */
  .nav__actions { margin-left: auto; }

  /* the links become a panel under the bar rather than disappearing */
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 16px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 24px 40px -28px rgba(31, 75, 216, .5);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { display: none; }

  .svc { grid-template-columns: repeat(2, 1fr); }
  .svc__item:nth-child(4n + 1) { border-left: 1px solid var(--line); }
  .svc__item:nth-child(2n + 1) { border-left: 0; }

  .treatments { grid-template-columns: 1fr; }
  .infoband__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the gutter label needs room the phone doesn't have */
  .svc-body { grid-template-columns: 1fr; }
  .vlabel { display: none; }

  .book__inner { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .quick { grid-column: 1 / -1; }
}

/* ── phone ──────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* padding-top must go, not just shrink: the panel is order:-1 here, so the
     hero's own top padding shows as a white band between the nav and the photo. */
  .hero { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 48px; }
  .hero__panel {
    order: -1;
    margin: 0 calc(-1 * var(--gutter));
    border-radius: 0;
    min-height: 62vh;
  }
  .hero__h { font-size: clamp(38px, 11vw, 54px); }
  .proof { padding: 12px 20px 12px 12px; gap: 14px; }
  .proof__img { width: 118px; height: 72px; }
  .proof__text strong { font-size: 16px; }

  .band__inner,
  .split__inner { grid-template-columns: 1fr; }
  .band .slot { min-height: 260px; }
  .split--flip .split__inner > .slot { order: 0; }

  .review { position: static; width: 100%; margin-top: 18px; }

  /* Two up on a phone, and only the first 4 until "show all" is tapped —
     eight full-width cards made the page far too long to scroll. */
  .svc { grid-template-columns: repeat(2, 1fr); row-gap: 34px; column-gap: 6px; }
  .svc__item { border-left: 0 !important; padding: 4px 6px; }
  /* four on a phone; "See all treatments" carries on to services.html */
  .svc__item:nth-child(n + 5) { display: none; }
  .svc__img { width: min(150px, 40vw); height: min(150px, 40vw); margin-bottom: 16px; }
  .svc__item h3 { font-size: 16px; margin-bottom: 7px; }
  .svc__item p { font-size: 12.5px; line-height: 1.6; }
  .svc__more { margin-top: 34px; }
  .services .h2 { margin-bottom: 40px; max-width: none; }
  /* let the heading wrap to the phone, not to the desktop line break */
  .services .h2 br { display: none; }

  .post { grid-template-columns: 1fr; }
  .postgrid { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .stats__inner div:nth-child(3) { border-left: 0; }
  .infoband__inner { grid-template-columns: 1fr; }
  .tx { grid-template-columns: 1fr; justify-items: start; }
  .widehero__scrim { background: linear-gradient(180deg, rgba(14,38,110,.62) 0%, rgba(14,38,110,.9) 100%); }

  .pills { grid-template-columns: 1fr; }
  .hours { grid-template-columns: 1fr; }

  .foot__inner { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* ── narrow phone: keep the nav on one line ─────────────── */
@media (max-width: 620px) {
  .nav__inner { padding-inline: 16px; gap: 8px; }
  .mark__icon { width: 22px; height: 22px; }
  .mark__text strong { font-size: 16px; }
  .mark__text small { font-size: 8px; letter-spacing: .2em; }
  .btn__long { display: none; }
  .btn__short { display: inline; }
  .btn--solid { padding: 12px 15px; }
}

@media (max-width: 430px) {
  /* the phone button goes; the lockup keeps both lines — "Bansal" alone
     reads like an unfinished logo */
  .nav__actions .btn--ghost { display: none; }
  .nav__toggle { width: 38px; height: 38px; padding: 10px 8px; margin-left: 2px; }
  .btn--solid { padding: 11px 13px; font-size: 13px; }
}