/* ==========================================================================
   Hallett Cove Smiles — design system
   Palette extracted from logo-full.png (off-register ink brand)
   ========================================================================== */

:root {
  --ink: #1F2639;
  --green: #13813A;
  --violet: #602BC4;
  --cobalt: #0B64F4;
  --bone: #FAF7F2;
  --bone-2: #F1EAE0;
  /* darker text-safe variants (WCAG AA for small text on bone) */
  --green-text: #0E6330;
  --violet-text: #52249F;
  --cobalt-text: #0A53C8;
  /* soft fills for offset blobs behind headlines */
  --green-soft: #CDE7D6;
  --violet-soft: #DFD3F6;
  --cobalt-soft: #CFE0FD;

  --font-display: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --radius: 1.125rem;
  --offset-x: .625rem;
  --offset-y: -.625rem;
  --snap-ease: cubic-bezier(.34, 1.56, .64, 1);
  --container: 74rem;
  --header-h: 4.75rem;
}

* { box-sizing: border-box; }

/* NOTE: no CSS smooth scrolling — it fights Lenis and causes multi-second lag.
   Anchor smoothness is handled in JS (lenis.scrollTo / scrollIntoView). */
/* Fluid poster scaling: the root font size tracks the viewport, and the whole
   layout is expressed in rem, so on large screens the design zooms as one
   composition instead of floating in whitespace. 1.11vw = 16px at 1440w. */
html {
  scroll-behavior: auto;
  font-size: clamp(15px, 1.11vw, 21px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.18rem; }

p { margin: 0 0 1em; }

a { color: var(--cobalt-text); }

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

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: var(--bone);
  padding: .6rem 1rem; border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- buttons: navy with cobalt off-register block ---------- */

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  display: inline-block;
  padding: .78rem 1.6rem;
  border-radius: 14px;
  text-decoration: none;
  position: relative;
  z-index: 0;
  white-space: nowrap;
  transition: transform .2s;
}

.btn-primary, .btn-book {
  background: var(--ink);
  color: var(--bone);
  box-shadow: .38rem -.38rem 0 0 var(--cobalt);
  transition: box-shadow .35s var(--snap-ease);
}
.btn-primary:hover, .btn-primary:focus-visible,
.btn-book:hover, .btn-book:focus-visible {
  box-shadow: 0 0 0 0 var(--cobalt);
}

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border: 2px solid rgba(250, 247, 242, .75);
}
.btn-ghost:hover { background: rgba(250, 247, 242, .14); }

/* ---------- the signature: off-register offsets ---------- */

.offset {
  position: relative;
  border-radius: var(--radius);
  transition: box-shadow .4s var(--snap-ease);
}
.offset-green { box-shadow: var(--offset-x) var(--offset-y) 0 0 var(--green); }
.offset-violet { box-shadow: var(--offset-x) var(--offset-y) 0 0 var(--violet); }
.offset-cobalt { box-shadow: var(--offset-x) var(--offset-y) 0 0 var(--cobalt); }
.offset-green:hover, .offset-green:focus-within { box-shadow: 0 0 0 0 var(--green); }
.offset-violet:hover, .offset-violet:focus-within { box-shadow: 0 0 0 0 var(--violet); }
.offset-cobalt:hover, .offset-cobalt:focus-within { box-shadow: 0 0 0 0 var(--cobalt); }

/* headline key words: soft offset blob that snaps on hover */
/* registered by default; drifts out of register on hover, like the print slipping */
.mark { position: relative; z-index: 0; white-space: nowrap; display: inline-block; padding: 0 .14em; }
.mark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: .08em; bottom: .02em;
  z-index: -1;
  border-radius: .4em .5em .45em .55em;
  transform: translate(0, 0) rotate(0);
  transition: transform .4s var(--snap-ease);
}
h1:hover .mark::before, h2:hover .mark::before,
.mark:hover::before { transform: translate(.12em, -.12em) rotate(-1.2deg); }
.mark-green::before { background: var(--green-soft); }
.mark-violet::before { background: var(--violet-soft); }
.mark-cobalt::before { background: var(--cobalt-soft); }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 242, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bone-2);
}
.header-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 1.4rem;
  padding: .5rem 1.2rem;
}
.brand { display: flex; align-items: center; }
.brand img { width: 11.9rem; height: auto; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list {
  display: flex; align-items: center; gap: .1rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-display);
  font-weight: 600; font-size: .95rem;
}
.nav-list > li > a, .nav-panel-btn {
  display: flex; align-items: center; gap: .3rem;
  padding: .45rem .65rem;
  color: var(--ink); text-decoration: none;
  border-radius: 10px;
  background: none; border: 0;
  font: inherit; cursor: pointer;
  white-space: nowrap;
}
.nav-list > li > a:hover, .nav-panel-btn:hover,
.has-panel.open > .nav-panel-btn { background: var(--bone-2); }
.nav-panel-btn svg { width: .8rem; height: .8rem; transition: transform .25s ease; }
.has-panel.open > .nav-panel-btn svg { transform: rotate(180deg); }

/* ---------- mega menus: one full-width card under the bar, three of them ---------- */

/* The card hangs from the header's container, not from the button, so each
   panel can hold three or four columns plus a photo card. The colour offset
   follows the panel: About green, Services cobalt, Advice violet. */
.has-panel { position: static; }
.nav-panel {
  --panel-accent: var(--green-soft);
  position: absolute; left: 1.2rem; right: 1.2rem; top: calc(100% - .35rem);
  z-index: 5;
  display: none;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 1.25rem;
  box-shadow: .5rem -.5rem 0 0 var(--panel-accent), 0 1.4rem 2.6rem -1.2rem rgba(31, 38, 57, .3);
  padding: 1.5rem 1.6rem 1.4rem;
}
.nav-panel-services { --panel-accent: var(--cobalt-soft); }
.nav-panel-advice { --panel-accent: var(--violet-soft); }
.has-panel.open > .nav-panel,
.has-panel:focus-within > .nav-panel { display: block; animation: panel-in .22s cubic-bezier(.22, 1, .36, 1); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-.4rem); }
  to { opacity: 1; transform: none; }
}
.panel-grid { display: grid; gap: 1.4rem 2rem; align-items: start; }
.panel-grid-about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.2fr); }
/* the About panel has less to say, so it hugs its content instead of spanning the bar */
.nav-panel-about { right: auto; width: min(58rem, calc(100% - 2.4rem)); }
.panel-grid-services { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); }
.panel-grid-advice { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.15fr); }
.panel-note { margin: 0 0 .5rem; font-family: var(--font-body); font-weight: 400; font-size: .9rem; line-height: 1.5; color: #565e73; max-width: 26ch; }
.panel-green { --col-text: var(--green-text); --col-accent: var(--green); --col-soft: var(--green-soft); }
.panel-cobalt { --col-text: var(--cobalt-text); --col-accent: var(--cobalt); --col-soft: var(--cobalt-soft); }
.panel-violet { --col-text: var(--violet-text); --col-accent: var(--violet); --col-soft: var(--violet-soft); }
.panel-col { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.panel-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  margin: 0 0 .6rem;
  color: var(--ink);
}
.panel-title .mark { padding: 0 .3em; margin-left: -.3em; }
.panel-col a {
  display: flex; align-items: center; gap: .55rem;
  margin-left: -.55rem;
  padding: .3rem .55rem;
  border-radius: .6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-body); font-weight: 500; font-size: .94rem; line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
.panel-col a::before {
  content: "";
  flex: 0 0 auto;
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--col-soft);
  transition: background .15s ease, transform .2s ease;
}
.panel-col a:hover, .panel-col a:focus-visible {
  background: color-mix(in srgb, var(--col-soft) 45%, white);
  color: var(--col-text);
}
.panel-col a:hover::before, .panel-col a:focus-visible::before { background: var(--col-accent); transform: scale(1.25); }
.panel-col a:focus-visible { outline-offset: -2px; }
.panel-index { font-weight: 700; }
/* long lists run in two columns */
.panel-two { display: block; column-count: 2; column-gap: 1rem; }
.panel-two .panel-title { column-span: all; }
.panel-two a { break-inside: avoid; }

/* the photo card: the care tiles' tinted frame and offset, one per panel */
.panel-card {
  display: flex; flex-direction: column;
  min-width: 0;
  color: var(--ink); text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--col-soft);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: .28rem -.28rem 0 0 var(--col-soft);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.panel-card img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 35%;
}
.panel-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1.05rem 1rem; }
.panel-card-body strong { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.15; color: var(--col-text); }
.panel-card-body > span:not(.panel-card-link) { font-family: var(--font-body); font-weight: 400; font-size: .88rem; line-height: 1.45; color: #565e73; }
.panel-card-link { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--col-text); }
.panel-card-link svg { width: 1rem; height: 1rem; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.panel-card:hover, .panel-card:focus-visible {
  transform: translateY(-.2rem);
  box-shadow: .28rem -.28rem 0 0 var(--col-soft), 0 .8rem 1.4rem -.9rem rgba(31, 38, 57, .2);
}
.panel-card:hover .panel-card-link svg { transform: translateX(.2rem); }

/* emergency strip across the foot of the Services panel */
.panel-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem .6rem .75rem 1.1rem;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--cobalt-soft) 45%, white);
  font-family: var(--font-body); font-weight: 400; font-size: .93rem; color: #3c4459;
}
.panel-foot p { margin: 0; }
.panel-foot p strong { font-family: var(--font-display); font-weight: 600; color: var(--cobalt-text); }
.panel-foot p a { color: var(--ink); font-weight: 700; text-underline-offset: .18em; white-space: nowrap; }
.panel-foot .btn { padding: .5rem 1.05rem; font-size: .92rem; flex: 0 0 auto; }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-phone {
  display: flex; align-items: center; gap: .45rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  white-space: nowrap;
}
.header-phone svg { width: 20px; height: 20px; }
.header-place { font-size: .85rem; color: #565e73; max-width: 130px; line-height: 1.25; }

.nav-toggle { display: none; }

/* ---------- wave spine ---------- */

.wave-spine {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  overflow: visible;
}
#spine-path {
  stroke: var(--spine-color, var(--green));
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke .6s;
  opacity: .85;
}

main { position: relative; z-index: 2; }

/* ---------- hero (light, measured) ---------- */

.hero {
  position: relative;
  padding: 3.2rem 1.2rem 0;
}
.hero-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3.4rem;
  align-items: center;
}
/* the copy column sits above the wave and heart line drawn beneath it, so the
   buttons stay uncovered */
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin: 0 0 1.2rem; }
.hero-headline {
  width: 100%;
  max-width: 27rem;
  height: auto;
  display: block;
}
.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: #444b60;
  max-width: 34ch;
  margin-bottom: 1.6rem;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn-ico {
  width: 19px; height: 19px;
  vertical-align: -3px;
  margin-left: .45rem;
  display: inline-block;
}
.btn-outline {
  background: #fff;
  color: var(--cobalt-text);
  border: 2px solid var(--cobalt);
}
.btn-outline:hover, .btn-outline:focus-visible { background: var(--cobalt-soft); }

.hero-photo {
  margin: 0;
  border-radius: 1.4rem;
  box-shadow: 1rem -1rem 0 0 var(--cobalt-soft);
  transform: rotate(-2deg);
  transition: box-shadow .4s var(--snap-ease);
  /* swings in from the right and settles into its resting tilt */
  animation: hero-settle 1.15s cubic-bezier(.22, .78, .28, 1) .15s both;
}
@keyframes hero-settle {
  from { opacity: 0; transform: translateX(2.6rem) rotate(3.2deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-2deg); }
}
.hero-photo:hover { box-shadow: 0 0 0 0 var(--cobalt-soft); }
.hero-photo img {
  width: 100%; height: auto;
  border-radius: inherit;
  display: block;
}

.hero-meet {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  height: 9.4rem;
}
.hero-wave-img {
  position: absolute; left: 50%; bottom: 6.4rem;
  transform: translateX(-50%);
  width: 104%; max-width: none; height: auto;
  /* decoration only: it overlaps the hero buttons, so clicks must pass through */
  pointer-events: none;
}

/* ---------- shared section chrome ---------- */

section { padding: 2.5rem 0.2rem; }
section > * { max-width: var(--container); margin-left: auto; margin-right: auto; }

.section-head { text-align: center; margin-bottom: 3rem; }
.section-head p { color: #565e73; font-size: 1.12rem; }

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- trust bar ---------- */

/* Same frame as the reviews bar: ink border, soft offset. Each benefit gets
   the site's off-register mark (ink ring, brand-colour offset), a display
   title and a quiet caption, so all four read as one system. The pull-up
   preserves the hero's wave and mascots. */
.trust { padding: 0 1.6rem .8rem; margin-top: -3rem; }
.trust-bar {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: .5rem -.5rem 0 0 var(--green-soft);
}
.trust-item {
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: .85rem;
  padding: 1rem 1.1rem;
}
.trust-item + .trust-item { border-left: 1px solid var(--bone-2); }
.trust-review-link {
  display: flex; align-items: center; gap: .85rem;
  color: var(--ink); text-decoration: none;
  border-radius: .6rem;
}
.trust-mark {
  --mark: var(--green);
  flex: 0 0 auto;
  width: 2.85rem; height: 2.85rem;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: .22rem -.22rem 0 0 var(--mark);
  transition: box-shadow .35s var(--snap-ease);
}
.trust-mark-violet { --mark: var(--violet); }
.trust-mark-cobalt { --mark: var(--cobalt); }
.trust-mark svg {
  width: 1.3rem; height: 1.3rem;
  fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.trust-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; text-align: left; }
.trust-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.trust-stars { color: var(--green); font-size: .78rem; letter-spacing: .1em; margin-left: .4rem; vertical-align: .14em; }
.trust-caption { color: #565e73; font-size: .86rem; line-height: 1.35; }
.trust-review-link:hover .trust-mark, .trust-review-link:focus-visible .trust-mark { box-shadow: 0 0 0 0 var(--mark); }
.trust-review-link:hover .trust-caption { color: var(--cobalt-text); text-decoration: underline; text-underline-offset: .2em; }
.trust-review-link:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 5px; }

/* ---------- grown-up care ---------- */

/* Curved photo edges echo the coastal wave; pastel frames group the services.
   The offer keeps the saturated cobalt offset as the row's main accent. */
.care { padding: 3rem 1.6rem; }
.care-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.care-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.care .reveal {
  transform: translateY(20px) scale(.985);
  transition: opacity .65s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.care .reveal.in { transform: none; }
.care-general {
  --care-colour: var(--green-text);
  --care-tint: var(--green-soft);
  --care-accent: var(--green);
}
.care-restorative {
  --care-colour: var(--cobalt-text);
  --care-tint: var(--cobalt-soft);
  --care-accent: var(--cobalt);
}
.care-cosmetic {
  --care-colour: var(--violet-text);
  --care-tint: var(--violet-soft);
  --care-accent: var(--violet);
}
.care-tile {
  --care-wash: color-mix(in srgb, var(--care-tint) 40%, white);
  --care-card-shadow: .28rem -.28rem 0 0 var(--care-tint);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1.5px solid var(--care-tint);
  border-radius: 1.25rem;
  overflow: hidden;
}
.care-tile.offset {
  box-shadow: var(--care-card-shadow);
}
.care-photo {
  position: relative;
  isolation: isolate;
  margin: .5rem .5rem 0;
  aspect-ratio: 1.08;
  border-radius: .9rem .9rem 0 0;
  overflow: hidden;
}
.care-photo img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 36%;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.care-cosmetic .care-photo img { object-position: center; }
.care-wave {
  position: absolute;
  z-index: 1;
  left: 0; bottom: -1px;
  width: 100%; height: 3.3rem;
  pointer-events: none;
}
.care-wave-tint { fill: var(--care-wash, #EDF4FE); }
.care-tile .care-wave-tint { fill: var(--care-accent); }
.care-wave-front { fill: #fff; }
.care-body {
  /* Cover the photo's fractional bottom edge from outside its clip layer. */
  position: relative;
  z-index: 2;
  background: #fff;
  margin-top: -2px;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: calc(.65rem + 2px) 1.25rem 1.35rem;
}
.care-title {
  font-size: 1.65rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--care-colour);
}
.care-line {
  min-height: 2.9em;
  margin: 0 0 1rem;
  font-size: .85rem;
  line-height: 1.45;
  color: #565e73;
}
.care-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: .4rem .55rem;
  margin: 0;
  padding: .85rem 0 0;
  border-top: 1px solid var(--bone-2);
  font-size: .79rem;
  line-height: 1.3;
  color: #444b60;
}
.care-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.care-service-icon {
  flex: 0 0 2rem;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--care-wash);
  color: var(--care-colour);
}
.care-service-icon svg { width: 1.15rem; height: 1.15rem; }
.care-general .care-list li:first-child,
.care-restorative .care-list li:nth-child(-n+2) { grid-column: 1 / -1; }
.care-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 3.45rem;
  padding: .8rem 1.25rem;
  border-top: 1px solid var(--bone-2);
  color: var(--care-colour);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  transition: background .2s ease;
}
.care-link svg {
  flex: 0 0 1.2rem;
  width: 1.2rem; height: 1.2rem;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.care-link:hover { background: var(--care-wash); }
.care-link:focus-visible { outline-offset: -5px; }
.care, .services { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Scoped to the upper row so the standalone offer keeps its approved design. */
.care .offer-card {
  --care-card-shadow: .625rem -.625rem 0 0 var(--cobalt);
  min-width: 0;
  padding: 0;
  border: 1.5px solid var(--cobalt-text);
  border-radius: 1.25rem;
  overflow: hidden;
}
.care-offer-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1.08;
  padding: 2rem 1.7rem 2.7rem;
  background: var(--cobalt-soft);
}
.care-offer-label {
  margin: 0 0 1.1rem;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cobalt-text);
}
.care-offer-label::after {
  content: "";
  display: block;
  width: 1.4rem; height: 1px;
  margin-top: .85rem;
  background: currentColor;
}
.care .offer-amount {
  font-size: 5.25rem;
  margin: 0 0 .35rem;
}
.care .offer-dollar { font-size: 2rem; vertical-align: .65em; }
.care .offer-title { font-size: 1.5rem; margin: 0; white-space: normal; }
.care-offer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .9rem 1.7rem 1.2rem;
}
.care .offer-list {
  margin: 0 0 1.05rem;
  gap: .35rem;
  font-size: .88rem;
}
.care .offer-list li {
  display: flex;
  align-items: center;
  min-height: 1.8rem;
  padding-left: 2.4rem;
  line-height: 1.4;
}
.care .offer-list li::before {
  display: grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: #E9F5EE;
  font-size: 1rem;
}
.care .offer-note {
  margin: auto 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--bone-2);
  font-size: .85rem;
  line-height: 1.5;
}
.care-offer-footer {
  padding: .35rem 1rem .65rem;
}
.care .offer-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  font-size: 1rem;
  padding: .65rem .75rem;
}
.care .offer-card .btn svg {
  width: 1.2rem; height: 1.2rem;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* A small lift, photo zoom and arrow nudge answer hover or keyboard focus.
   Touch screens keep their stable resting state; nothing loops or auto-plays. */
.care-grid > .reveal.in:focus-within {
  transform: translateY(-.3rem);
  box-shadow: var(--care-card-shadow), 0 .8rem 1.4rem -.9rem rgba(31, 38, 57, .2);
}
.care-tile:focus-within .care-photo img { transform: scale(1.035); }
.care-link:focus-visible svg,
.care .btn:focus-visible svg { transform: translateX(.2rem); }
@media (hover: hover) and (pointer: fine) {
  .care-grid > .reveal.in:hover {
    transform: translateY(-.3rem);
    box-shadow: var(--care-card-shadow), 0 .8rem 1.4rem -.9rem rgba(31, 38, 57, .2);
  }
  .care-tile:hover .care-photo img { transform: scale(1.035); }
  .care-tile:hover .care-link svg,
  .care .btn:hover svg { transform: translateX(.2rem); }
}

/* Two columns keep the service labels legible on smaller laptops and tablets. */
@media (max-width: 1100px) {
  .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.6rem; }
  .care-photo, .care-offer-intro { aspect-ratio: 4 / 3; }
  .care-offer-intro { min-height: 16rem; }
}

@media (max-width: 600px) {
  .care { padding: 2.4rem 1.4rem 2.6rem; }
  .care-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .care-photo { aspect-ratio: 8 / 5; }
  .care-offer-intro { aspect-ratio: auto; min-height: 16rem; padding: 1.8rem 1.7rem 3rem; }
  .care-line { min-height: 0; }
}

/* ---------- offer ---------- */

.offer { padding-top: 0; }
/* Column ratios taken from the approved banner spec (1596px wide):
   offer 370 · gutter 80 · journey 1038 */
.offer-row {
  display: grid;
  grid-template-columns: 370fr 19fr 1038fr;
  align-items: center;
}
.offer-divider {
  width: 1px;
  height: 88%;
  justify-self: center;
  background: var(--bone-2);
}
.offer-card {
  background: #fff;
  border: 2px solid var(--ink);
  color: var(--ink);
  border-radius: 1.4rem;
  padding: 1.9rem 1.9rem 1.8rem;
  display: flex;
  flex-direction: column;
}
.offer-amount {
  font-family: var(--font-display);
  font-size: 3.9rem;
  font-weight: 700;
  color: var(--cobalt-text);
  line-height: 1;
  margin: 0 0 .1rem;
}
.offer-dollar { font-size: 1.9rem; vertical-align: .55em; margin-right: .04em; }
.offer-title { font-size: 1.45rem; margin-bottom: 1.1rem; white-space: nowrap; }
.offer-list {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.offer-list li { position: relative; padding-left: 1.6rem; font-weight: 500; }
.offer-list li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--green-text); font-weight: 700;
}
.offer-note { color: #565e73; font-size: .92rem; margin-bottom: 1.3rem; }
/* the $249 offer's terms (AHPRA: an offer must state its conditions), fine print under each offer note */
.offer-terms { display: block; margin-top: .35rem; font-size: max(.75rem, .9em); line-height: 1.4; opacity: .9; }

.journey-preview { min-width: 0; }

/* the three-step journey ships as one supplied banner image; the heading stays
   in the DOM (visually hidden) so the outline and screen readers keep it */
.jp-banner {
  width: 100%;
  height: auto;
  display: block;
}
.jp-hint {
  text-align: center;
  color: #565e73;
  font-size: .9rem;
  font-style: italic;
  margin-top: 1.4rem;
}

/* ---------- kids' corner banner ---------- */

.kids-banner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.kids-banner-card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: .5rem -.5rem 0 0 var(--violet-soft);
  padding: 1.1rem 1.5rem;
  transition: box-shadow .4s var(--snap-ease);
}
.kids-banner-card:hover { box-shadow: 0 0 0 0 var(--violet-soft); }
.kids-banner img { width: 100%; height: auto; }

/* ---------- services: an image-led carousel in the care row's language ---------- */

/* Each card borrows the grown-up care tiles: pastel frame and offset in its
   category colour, a wave-cut photo, a display title and an icon badge. */
.services { padding: 3rem 1.4rem 3.2rem; }
.services-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
  margin-bottom: 1.6rem;
}
.services-head h2 { margin: 0; font-size: 2.65rem; font-weight: 600; }
.services-head p { max-width: 34ch; margin: 0 0 .35rem; font-size: .95rem; line-height: 1.5; }

.service-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.service-filters { display: flex; flex-wrap: wrap; gap: .55rem; padding: .3rem .3rem 0 0; }
.service-filters[hidden], .service-controls[hidden] { display: none; }
.service-filter {
  --filter-fill: var(--green-soft);
  --filter-colour: var(--green-text);
  --filter-accent: var(--green);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: .48rem 1.15rem;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 0 0 0 var(--filter-accent);
  transition: box-shadow .35s var(--snap-ease), background .2s ease, color .2s ease;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.service-filter[data-service-filter="restorative"],
.service-filter[data-service-filter="emergency"] {
  --filter-fill: var(--cobalt-soft);
  --filter-colour: var(--cobalt-text);
  --filter-accent: var(--cobalt);
}
.service-filter[data-service-filter="cosmetic"] {
  --filter-fill: var(--violet-soft);
  --filter-colour: var(--violet-text);
  --filter-accent: var(--violet);
}
.service-filter:hover { background: var(--filter-fill); color: var(--filter-colour); }
.service-filter[aria-pressed="true"] {
  background: var(--filter-fill);
  color: var(--filter-colour);
  box-shadow: .3rem -.3rem 0 0 var(--filter-accent);
}
.service-filter[aria-pressed="true"]:hover { box-shadow: 0 0 0 0 var(--filter-accent); }
.service-filter:focus-visible { outline-offset: 4px; }

.service-controls { display: flex; gap: .7rem; flex-shrink: 0; padding: .3rem .3rem 0 0; }
.service-controls button {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: .22rem -.22rem 0 0 var(--cobalt);
  transition: box-shadow .35s var(--snap-ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.service-controls button:hover:not(:disabled) { background: var(--cobalt-soft); box-shadow: 0 0 0 0 var(--cobalt); }
.service-controls button:disabled {
  border-color: var(--bone-2);
  color: #A6ABB8;
  box-shadow: none;
  cursor: default;
}
.service-controls svg { width: 1.15rem; height: 1.15rem; }

/* Top and right padding leave room for the offsets and the hover lift inside
   the scroll clip; the negative margin keeps the toolbar rhythm unchanged. */
.service-track {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: .9rem .4rem 1.1rem 0;
  margin: -.3rem 0 0;
  -webkit-overflow-scrolling: touch;
}
.service-carousel[data-enhanced] .service-track { scrollbar-width: none; }
.service-carousel[data-enhanced] .service-track::-webkit-scrollbar { display: none; }
.service-track:focus-visible { outline-offset: 3px; }

.s-card {
  --s-colour: var(--green-text);
  --s-tint: var(--green-soft);
  --s-accent: var(--green);
  --s-wash: color-mix(in srgb, var(--s-tint) 40%, white);
  --s-shadow: .28rem -.28rem 0 0 var(--s-tint);
  flex: 0 0 calc((100% - 2.5rem) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: #fff;
  border: 1.5px solid var(--s-tint);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--s-shadow);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.s-card[data-service-group="restorative"],
.s-card[data-service-group="emergency"] {
  --s-colour: var(--cobalt-text);
  --s-tint: var(--cobalt-soft);
  --s-accent: var(--cobalt);
}
.s-card[data-service-group="cosmetic"] {
  --s-colour: var(--violet-text);
  --s-tint: var(--violet-soft);
  --s-accent: var(--violet);
}
.s-card[hidden] { display: none; }
.s-photo {
  position: relative;
  isolation: isolate;
  margin: .5rem .5rem 0;
  aspect-ratio: 3 / 2;
  border-radius: .9rem .9rem 0 0;
  overflow: hidden;
  flex-shrink: 0;
}
.s-photo img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.s-photo .care-wave { height: 2.6rem; }
.s-card .care-wave-tint { fill: var(--s-accent); }
.s-body {
  position: relative;
  z-index: 2;
  background: #fff;
  margin-top: -2px;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: calc(.45rem + 2px) 1.2rem 1.1rem;
}
.s-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .5rem;
}
.s-icon {
  flex: 0 0 2.3rem;
  width: 2.3rem; height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--s-wash);
  color: var(--s-colour);
}
.s-icon svg { width: 1.3rem; height: 1.3rem; }
.s-body h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  color: var(--s-colour);
}
.s-body p { margin: 0 0 1rem; font-size: .88rem; line-height: 1.5; color: #565e73; }
.s-more {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .8rem;
  border-top: 1px solid var(--bone-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--s-colour);
}
.s-more svg {
  flex: 0 0 1.2rem;
  width: 1.2rem; height: 1.2rem;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.service-status { margin: 0; color: #565e73; font-size: .84rem; }

/* The emergency card runs wide: photo beside the copy, with the phone number
   as the practice's standard navy button. */
.s-card[data-service-group="emergency"] {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
}
.s-card[data-service-group="emergency"][hidden] { display: none; }
.s-card[data-service-group="emergency"] .s-photo { margin: .5rem; aspect-ratio: 3 / 2; border-radius: .9rem; }
.s-card[data-service-group="emergency"] .care-wave { display: none; }
.s-card[data-service-group="emergency"] .s-body { margin: 0; padding: 1.8rem 2rem; }
.s-card[data-service-group="emergency"] h3 { font-size: 1.65rem; }
.s-card[data-service-group="emergency"] p { font-size: .98rem; max-width: 34ch; }
.service-call {
  align-self: flex-start;
  margin-top: .3rem;
}

/* A small lift, photo zoom and arrow nudge answer hover or keyboard focus,
   exactly as the care tiles do. */
.s-card:focus-within {
  transform: translateY(-.3rem);
  box-shadow: var(--s-shadow), 0 .8rem 1.4rem -.9rem rgba(31, 38, 57, .2);
}
.s-card:focus-within .s-photo img { transform: scale(1.035); }
.s-card:focus-within .s-more svg { transform: translateX(.2rem); }
@media (hover: hover) and (pointer: fine) {
  .s-card:hover {
    transform: translateY(-.3rem);
    box-shadow: var(--s-shadow), 0 .8rem 1.4rem -.9rem rgba(31, 38, 57, .2);
  }
  .s-card:hover .s-photo img { transform: scale(1.035); }
  .s-card:hover .s-more svg { transform: translateX(.2rem); }
}

@media (max-width: 900px) {
  .services-head { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .services-head h2 { font-size: 2.25rem; }
  .services-head p { max-width: 42ch; }
  .s-card { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 600px) {
  .services { padding: 2.5rem 1.2rem 2.8rem; }
  .services-head h2 { font-size: 2rem; }
  .service-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .65rem;
  }
  .service-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .service-filter { font-size: .9rem; padding: .55rem .45rem; }
  .service-controls { gap: .5rem; }
  .service-controls button { width: 3rem; height: 3rem; }
  .s-card { flex-basis: 88%; }
  .s-photo { aspect-ratio: 8 / 5; }
  .s-card[data-service-group="emergency"] { display: flex; align-items: stretch; }
  .s-card[data-service-group="emergency"] .s-photo { margin: .5rem .5rem 0; aspect-ratio: 8 / 5; border-radius: .9rem .9rem 0 0; }
  .s-card[data-service-group="emergency"] .care-wave { display: block; }
  .s-card[data-service-group="emergency"] .s-body { margin-top: -2px; padding: calc(.45rem + 2px) 1.2rem 1.1rem; }
  .s-card[data-service-group="emergency"] h3 { font-size: 1.5rem; }
  .s-card[data-service-group="emergency"] p { font-size: .88rem; max-width: none; }
}

/* ---------- kids ---------- */

.kids { background: var(--bone-2); }
.kids-steps {
  list-style: none;
  counter-reset: step;
  /* auto margins matter: the `0 0` shorthand here used to cancel the
     centring that `section > *` provides */
  margin: 0 auto 2.5rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.1rem, 1fr));
  gap: 1.8rem;
}
.k-step {
  counter-increment: step;
  background: var(--bone);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  text-align: center;
  padding: 2rem 1.3rem 1.4rem;
  position: relative;
}
.k-step::before {
  content: counter(step);
  position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700;
  background: var(--ink); color: var(--bone);
  width: 34px; height: 34px; line-height: 34px;
  border-radius: 50%;
}
.k-step img { width: 84px; height: auto; margin: 0 auto 1rem; }
.k-step h3 { font-size: 1.2rem; }
.k-step p { margin: 0; font-size: .95rem; color: #444b60; }
.k-sticker {
  display: grid; place-items: center;
  width: 84px; height: 84px; margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px dashed var(--violet);
  color: var(--violet);
  font-size: 2.2rem;
}

.kids-parents {
  max-width: 640px;
  text-align: center;
  color: #444b60;
  margin-bottom: 3rem;
}

.kids-tips h3 { text-align: center; margin-bottom: 1.4rem; }
.kids-tips ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.6rem, 1fr));
  gap: 1.4rem;
}
.tip {
  background: var(--bone);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  border: 2px solid var(--ink);
  font-size: .98rem;
}
.tip-green { box-shadow: .5rem -.5rem 0 0 var(--green-soft); }
.tip-violet { box-shadow: .5rem -.5rem 0 0 var(--violet-soft); }
.tip-cobalt { box-shadow: .5rem -.5rem 0 0 var(--cobalt-soft); }
.tip-green strong { color: var(--green-text); }
.tip-violet strong { color: var(--violet-text); }
.tip-cobalt strong { color: var(--cobalt-text); }

/* ---------- team ---------- */

/* flex rather than grid so the final short row centres instead of
   sitting left-aligned under the four above it */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem 1.8rem;
}
.t-card {
  flex: 0 0 calc((100% - 3 * 1.8rem) / 4);
  background: var(--bone);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: visible;
  padding: 0 0 1.2rem;
}
.t-card img {
  width: 100%; height: auto;
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-bottom: 1rem;
}
.t-card h3 { font-size: 1.25rem; margin: 0 1.2rem .1rem; }
.t-role {
  font-family: var(--font-display); font-weight: 600;
  color: #565e73; font-size: .92rem;
  margin: 0 1.2rem .5rem;
}
.t-line { margin: 0 1.2rem; font-size: .95rem; color: #444b60; }

/* ---------- reviews ---------- */

.reviews { background: var(--bone-2); text-align: center; }
/* one flat horizontal bar, matching the trust strip */
.reviews-hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: .5rem -.5rem 0 0 var(--green-soft);
  max-width: var(--container);
  padding: .95rem 1.4rem;
  margin: 0 auto 2.2rem;
  text-align: left;
}
.reviews-score {
  font-family: var(--font-display);
  font-size: 2.3rem; font-weight: 700;
  line-height: 1; margin: 0;
}
.reviews-stars {
  color: var(--green); font-size: 1.25rem;
  letter-spacing: .14em; margin: 0;
}
.reviews-count { color: #444b60; margin: 0; }
.reviews-hero .btn { margin-left: auto; }

/* reviews carousel: native scroll-snap so swipe and keyboard both work */
.review-carousel {
  position: relative;
  max-width: var(--container);
  margin: 0 auto 2.4rem;
  text-align: left;
}
.review-track {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* the off-register shadow sits outside the box, so pad then pull back */
  padding: .7rem .7rem 1.2rem;
  margin: -.7rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.review-track::-webkit-scrollbar { display: none; }
.review-track:focus-visible { outline-offset: -2px; }

.r-card {
  flex: 0 0 calc((100% - 3.2rem) / 3);
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.2rem;
  transition: box-shadow .4s var(--snap-ease);
}
.r-green { box-shadow: .5rem -.5rem 0 0 var(--green-soft); }
.r-violet { box-shadow: .5rem -.5rem 0 0 var(--violet-soft); }
.r-cobalt { box-shadow: .5rem -.5rem 0 0 var(--cobalt-soft); }
.r-card:hover { box-shadow: 0 0 0 0 var(--bone-2); }
.r-stars {
  color: var(--green);
  letter-spacing: .14em;
  font-size: .95rem;
  margin: 0 0 .6rem;
}
.r-card p { font-size: .97rem; color: #333b52; margin: 0 0 .9rem; }
/* names line up along the bottom even though quotes differ in length */
.r-card footer { margin: auto 0 0; }
.r-card cite {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: .98rem;
}

.rc-controls {
  display: flex; justify-content: center; gap: .8rem;
  margin-top: 1.4rem;
}
.rc-btn {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  transition: box-shadow .3s var(--snap-ease), opacity .2s;
}
.rc-btn svg { width: 1.15rem; height: 1.15rem; }
.rc-btn:hover:not(:disabled) { box-shadow: .3rem -.3rem 0 0 var(--cobalt); }
.rc-btn:disabled { opacity: .32; cursor: default; }

.smile-strip {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.smile-strip img {
  border-radius: 14px;
  border: 2px solid var(--ink);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.smile-strip li:nth-child(odd) { transform: translateY(10px) rotate(-1deg); }
.smile-strip li:nth-child(even) { transform: translateY(-6px) rotate(1.2deg); }

/* ---------- book ---------- */

.book-frame {
  background: var(--bone);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 980px;
}
.book-frame iframe {
  width: 100%; height: 860px; border: 0; display: block;
  background: #fff;
}
.book-fallback { text-align: center; margin-top: 1.6rem; color: #565e73; }

/* ---------- new patients ---------- */

.np-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
  gap: 1.8rem;
}
.np-card {
  background: var(--bone);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
}
.np-card h3 { font-size: 1.25rem; }
.np-card p { margin: 0; color: #444b60; font-size: .98rem; }
.np-card:nth-child(1) { box-shadow: .5rem -.5rem 0 0 var(--green-soft); }
.np-card:nth-child(2) { box-shadow: .5rem -.5rem 0 0 var(--violet-soft); }
.np-card:nth-child(3) { box-shadow: .5rem -.5rem 0 0 var(--cobalt-soft); }

/* ---------- visit ---------- */

.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2.6rem;
  align-items: start;
  margin-bottom: 3rem;
}
.visit-info address {
  font-style: normal; font-size: 1.08rem; line-height: 1.7;
  margin-bottom: 1.6rem;
}
.hours { border-collapse: collapse; width: 100%; max-width: 320px; }
.hours th, .hours td {
  text-align: left; padding: .45rem 0;
  border-bottom: 1px solid var(--bone-2);
  font-weight: 500;
}
.hours th { font-family: var(--font-display); font-weight: 600; }
.visit-map { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--ink); }
.visit-map iframe { width: 100%; height: 380px; border: 0; display: block; }

.suburbs h3 { text-align: center; margin-bottom: 1.2rem; }
.suburb-cloud {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .55rem;
  max-width: 860px;
}
.suburb-cloud li {
  background: var(--bone);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: .28rem .9rem;
  font-size: .9rem;
}
.suburb-cloud li:nth-child(3n) { box-shadow: .2rem -.2rem 0 0 var(--green-soft); }
.suburb-cloud li:nth-child(3n+1) { box-shadow: .2rem -.2rem 0 0 var(--violet-soft); }
.suburb-cloud li:nth-child(3n+2) { box-shadow: .2rem -.2rem 0 0 var(--cobalt-soft); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding: 3rem 1.2rem 2rem;
}
.footer-wave { max-width: 900px; display: block; margin: 0 auto 2rem; }
.fw-line, .fw-tooth {
  stroke: var(--bone); stroke-width: 5;
  stroke-linecap: round; fill: none;
}
.fw-tooth { fill: var(--ink); }
.fw-fill { opacity: .95; }
.fw-fill-green { fill: var(--green); }
.fw-fill-violet { fill: var(--violet); }
.fw-fill-cobalt { fill: var(--cobalt); }

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.footer-col p { color: #b9c2d8; font-size: .95rem; }
.footer-col a {
  color: var(--bone); text-decoration: none;
  display: block; padding: .22rem 0;
}
.footer-col a:hover { color: #9fc0fb; }
/* Instagram sits with the contact details as one quiet, outlined button. */
.footer-col .footer-social {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: max-content;
  max-width: 100%;
  margin: .35rem 0 1.1rem;
  padding: .5rem 1rem .5rem .5rem;
  border: 1px solid rgba(250, 247, 242, .16);
  border-radius: .9rem;
  background: rgba(250, 247, 242, .04);
  color: var(--bone);
  transition: background-color .25s ease, border-color .25s ease;
}
.footer-col .footer-social:hover {
  border-color: rgba(250, 247, 242, .34);
  background: rgba(250, 247, 242, .09);
  color: var(--bone);
}
.footer-social-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.4rem;
  width: 2.4rem; height: 2.4rem;
  border-radius: .7rem;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color: #fff;
}
.footer-social-icon svg { width: 1.25rem; height: 1.25rem; }
.footer-social-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.footer-social-label { color: #b9c2d8; font-size: .78rem; }
.footer-social-handle { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.footer-social-arrow {
  flex: 0 0 1rem;
  width: 1rem; height: 1rem;
  margin-left: .4rem;
  color: #b9c2d8;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}
.footer-social:is(:hover, :focus-visible) .footer-social-arrow {
  color: var(--bone);
  transform: translate(.15rem, -.15rem);
}
.footer-credentials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem;
  width: max-content;
  max-width: 100%;
  margin-top: 1.1rem;
  padding: .7rem .85rem;
  border-radius: .55rem;
  background: #fff;
}
.footer-credentials img {
  display: block;
  max-width: 100%;
  height: 3.2rem;
  object-fit: contain;
}
.footer-qip { width: 7.25rem; }
.footer-smile { width: 8.25rem; }
.footer-fine {
  text-align: center; color: #7a849c;
  font-size: .85rem; margin-top: 2.5rem;
}

/* ---------- mobile bar ---------- */

.mobile-bar { display: none; }

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

@media (max-width: 1020px) {
  .header-place { display: none; }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: .6rem; cursor: pointer;
  }
  .nav-toggle-bar { width: 24px; height: 3px; background: var(--ink); border-radius: 2px; }
  .main-nav { flex: 0 0 auto; order: 3; position: static; }
  .header-inner { flex-wrap: nowrap; gap: .6rem; position: relative; }
  .header-actions { margin-left: auto; gap: .6rem; }
  .brand img { width: 118px; }
  .nav-list {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bone);
    border-bottom: 2px solid var(--ink);
    flex-direction: column;
    gap: 0;
    padding: .4rem 1.2rem 1.4rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
  }
  .nav-list.open { display: flex; }
  .nav-list > li { border-top: 1px solid var(--bone-2); }
  .nav-list > li:first-child { border-top: 0; }
  .nav-list > li > a, .nav-panel-btn {
    width: 100%;
    justify-content: space-between;
    padding: .85rem .2rem;
    font-size: 1.05rem;
    border-radius: 0;
  }
  .nav-list > li > a:hover, .nav-panel-btn:hover, .has-panel.open > .nav-panel-btn { background: none; }
  .nav-panel-btn svg { width: 1rem; height: 1rem; }
  /* panels become accordions: no card, no photo, one column of links */
  .nav-panel, .has-panel:focus-within > .nav-panel {
    position: static;
    display: none;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 .9rem;
    animation: none;
  }
  .has-panel.open > .nav-panel { display: block; }
  .panel-grid, .panel-grid-about, .panel-grid-services, .panel-grid-advice { display: flex; flex-direction: column; gap: 1rem; }
  .panel-title { margin-bottom: .35rem; }
  .panel-col a { padding: .42rem .55rem; font-size: 1rem; }
  .panel-two { column-count: 1; }
  .panel-card { display: none; }
  .panel-foot { flex-direction: column; align-items: flex-start; padding: .9rem 1rem; }
  .header-phone span { display: none; }
  .btn-book { padding: .6rem 1rem; font-size: .95rem; }

  .visit-grid { grid-template-columns: 1fr; }
  /* let each card take its natural height rather than matching the longest,
     which left a lot of dead space at one-up */
  .t-card { flex-basis: 100%; }
  .reviews-hero { justify-content: center; text-align: center; }
  .reviews-hero .btn { margin: .4rem auto 0; }
  .review-track { align-items: flex-start; }
  .r-card { flex-basis: 88%; }
  .smile-strip { grid-template-columns: repeat(3, 1fr); }
  .smile-strip li:nth-child(n+4) { display: none; }

  .hero { padding-top: 1.6rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-copy { order: 2; text-align: center; }
  .hero-headline { margin-left: auto; margin-right: auto; max-width: 21rem; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-photo { order: 1; box-shadow: .625rem -.625rem 0 0 var(--cobalt-soft); }
  .hero-meet { height: 96px; }
  .hero-wave-img { bottom: 1rem; }

  /* 0.2rem side padding is fine once the container caps the width, but at
     phone widths it would push cards to the screen edge */
  section { padding-left: 1.2rem; padding-right: 1.2rem; }

  /* the desktop pull-up would ride over the wave at this width */
  .trust { margin-top: 0; padding: 1.2rem 1.2rem .8rem; }
  .trust-bar { grid-template-columns: 1fr 1fr; }
  .trust-item { justify-content: flex-start; padding: .9rem .85rem; gap: .65rem; }
  .trust-item + .trust-item { border-left: 0; }
  .trust-item:nth-child(even) { border-left: 1px solid var(--bone-2); }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--bone-2); }
  .trust-mark { width: 2.4rem; height: 2.4rem; }
  .trust-mark svg { width: 1.1rem; height: 1.1rem; }
  .trust-title { font-size: 1.02rem; white-space: normal; }
  .trust-caption { font-size: .8rem; }

  .offer-row { grid-template-columns: 1fr; gap: 2.4rem; }
  .offer-divider { display: none; }

  .mobile-bar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--ink);
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    gap: .8rem;
  }
  .mobile-bar a {
    flex: 1; text-align: center;
    font-family: var(--font-display); font-weight: 700;
    text-decoration: none;
    padding: .7rem 0; border-radius: 12px;
  }
  .mb-call { background: var(--cobalt); color: #fff; }
  .mb-book { background: var(--bone); color: var(--ink); }
  body { padding-bottom: 64px; }

  .wave-spine { display: none; }
}

/* ==========================================================================
   Reduced motion: static frames, gentle fades, no pinned scrub
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media img { transform: none !important; }
  .hero-hint { display: none; }
  .wave-spine { display: none; }

  .care .reveal,
  .care .care-photo img,
  .care .care-link svg,
  .care .btn svg {
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- homepage cards that open their pages ---------- */
/* the heading link covers the whole card; the emergency call button stays clickable above it */
.s-card { position: relative; }
.s-link, .t-link { color: inherit; text-decoration: none; }
.s-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.s-link:focus-visible { outline: none; }
.s-card:has(.s-link:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.t-link:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.service-call { position: relative; z-index: 1; }
.t-link:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
.t-photo-link { display: block; border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0; }
.t-photo-link:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

/* ---------- video cards (homepage and every page) ---------- */
/* portrait clips in the site's offset frame; the play badge is the same
   off-register mark as the trust bar */
/* own layer: list items beside a floated card are positioned (custom bullets) and would sit over it */
.vid { --vid-col: var(--green); position: relative; z-index: 1; margin: 0; width: 100%; max-width: 16.5rem; }
.vid-violet { --vid-col: var(--violet); }
.vid-cobalt { --vid-col: var(--cobalt); }
.vid-frame { position: relative; aspect-ratio: 9 / 16; background: var(--ink); }
.vid-player {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--ink);
}
.vid-start {
  position: absolute; inset: 0;
  display: grid; place-items: end start;
  padding: 0 0 1rem 1rem;
  border: 0; cursor: pointer;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(31, 38, 57, .38), rgba(31, 38, 57, 0) 46%);
}
.vid-start[hidden] { display: none; }
.vid-badge {
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: .3rem -.3rem 0 0 var(--vid-col);
  transition: box-shadow .35s var(--snap-ease);
}
.vid-badge svg { width: 1.25rem; height: 1.25rem; margin-left: .18rem; fill: var(--ink); }
.vid-start:hover .vid-badge, .vid-start:focus-visible .vid-badge { box-shadow: 0 0 0 0 var(--vid-col); }
.vid-start:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

/* homepage + children's page: Jess's clip beside the parents' note */
.kids-parents-vid {
  max-width: 54rem;
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.6rem; align-items: center;
  text-align: left;
}
/* the parents' note lives between two big off-register quote marks */
.kids-parents-vid p {
  position: relative;
  margin: 0;
  padding: 3.4rem 2.6rem 3.6rem 3.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
.kids-parents-vid p::before, .kids-parents-vid p::after {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1;
  pointer-events: none;
}
.kids-parents-vid p::before {
  content: "\201C"; content: "\201C" / "";
  top: -1.6rem; left: -.4rem;
  color: var(--violet);
  text-shadow: .3rem -.3rem 0 var(--green);
  transform: rotate(-8deg);
}
.kids-parents-vid p::after {
  content: "\201D"; content: "\201D" / "";
  right: 0; bottom: -4.4rem;
  color: var(--cobalt);
  text-shadow: .3rem -.3rem 0 var(--violet);
  transform: rotate(7deg);
}

/* homepage New here?: the cost clip beside the three cards */
.np-layout {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2.8rem; align-items: center;
}
.np-layout .np-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.np-layout .np-card { padding: 1.35rem 1.6rem; }

@media (max-width: 900px) {
  .kids-parents-vid, .np-layout { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .kids-parents-vid .vid, .np-layout .vid { margin: 0 auto; }
  .kids-parents-vid { text-align: center; }
  .kids-parents-vid p { padding: 2.4rem .4rem 2.6rem; }
  .kids-parents-vid p::before, .kids-parents-vid p::after { font-size: 5.6rem; }
  .kids-parents-vid p::before { top: -1.1rem; left: -.2rem; }
  .kids-parents-vid p::after { bottom: -3.1rem; right: -.2rem; }
}
/* small laptops/tablets: room for the cost clip's offset at the screen edge */
@media (max-width: 1240px) and (min-width: 901px) {
  .new-patients { padding-left: 1.6rem; padding-right: 1.6rem; }
}

/* ---------- exit offer (desktop): the $249 voucher with a quick callback ---------- */
/* the stub is the homepage offer card turned into a ticket; the mascots peek
   over its top edge; the card prints out of register as it opens */
.xo {
  margin: auto; padding: 0; border: 0;
  width: min(50rem, calc(100vw - 4rem));
  max-width: none; max-height: none;
  background: transparent; color: var(--ink);
  overflow: visible;
}
.xo::backdrop { background: rgba(31, 38, 57, .62); backdrop-filter: blur(4px); }
html:has(.xo[open]) { overflow: hidden; }

.xo-card {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: .8rem -.8rem 0 0 var(--green);
}

.xo-stub {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3.2rem 2.3rem 2.3rem 2.2rem;
  background: var(--cobalt);
  color: #fff;
  border-right: 2px solid var(--ink);
}
/* the voucher's perforation */
.xo-stub::after {
  content: "";
  position: absolute; top: 1rem; bottom: 1rem; right: .75rem; width: 4px;
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 1.5px, transparent 2px) center top / 4px 12px repeat-y;
}
.xo-amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 5.6rem; line-height: .9; letter-spacing: -.02em;
  margin: 0 0 .55rem;
  text-shadow: .22rem -.22rem 0 var(--ink);
}
.xo-dollar { font-size: .42em; vertical-align: .95em; margin-right: .05em; }
.xo-stub-title { font-family: var(--font-display); font-weight: 600; font-size: 1.38rem; line-height: 1.15; margin: 0 0 .95rem; }
.xo-list { list-style: none; margin: 0 0 1.15rem; padding: 0; display: grid; gap: .5rem; font-weight: 500; }
.xo-list li { position: relative; padding-left: 1.75rem; line-height: 1.35; }
.xo-list li::before {
  content: "";
  position: absolute; left: 0; top: .08em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230A53C8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .78rem no-repeat;
}
.xo-note { font-size: .9rem; line-height: 1.45; margin: 0; }

.xo-form {
  position: relative;
  display: grid; gap: 1rem; align-content: center;
  padding: 2.7rem 2.8rem 2.3rem;
}
.xo-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: .2rem -.2rem 0 0 var(--violet);
  cursor: pointer;
  transition: box-shadow .35s var(--snap-ease);
}
.xo-close svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.xo-close:hover, .xo-close:focus-visible { box-shadow: 0 0 0 0 var(--violet); }
.xo-title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.05; margin: 0; padding-right: 3rem; text-wrap: balance; }
.xo-sub { margin: -.35rem 0 .2rem; font-size: 1.02rem; line-height: 1.5; color: #3c4459; text-wrap: pretty; }
.xo-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
.xo-field { display: grid; gap: .35rem; font-size: .88rem; font-weight: 700; color: var(--ink); }
.xo-field input {
  width: 100%;
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink);
  background: var(--bone);
  border: 2px solid var(--ink); border-radius: .8rem;
  padding: .78rem .95rem;
  caret-color: var(--cobalt);
  transition: box-shadow .35s var(--snap-ease);
}
/* focus prints the field out of register, like the buttons */
.xo-field input:focus { outline: none; box-shadow: .28rem -.28rem 0 0 var(--cobalt); }
.xo-submit { width: 100%; margin-top: .35rem; padding: .95rem 1.6rem; border: 0; font-size: 1.1rem; text-align: center; cursor: pointer; }
.xo-submit[disabled] { opacity: .6; cursor: progress; }
.xo-status { margin: 0; font-size: .95rem; line-height: 1.45; }
.xo-status:empty { display: none; }
.xo-status[data-kind="ok"] { color: var(--green-text); font-weight: 700; }
.xo-status[data-kind="error"] { color: #a12a2a; font-weight: 700; }
.xo-fine { margin: 0; font-size: .85rem; line-height: 1.45; color: #565e73; }
.xo-fine span { display: block; }
.xo-fine a { color: var(--ink); font-weight: 700; white-space: nowrap; text-underline-offset: .18em; }
.xo.is-sent .xo-sub, .xo.is-sent .xo-fields, .xo.is-sent .xo-submit { display: none; }
.xo.is-sent .xo-status { font-size: 1.2rem; }

.xo-mascots {
  position: absolute; z-index: 0; top: 0; left: 2.1rem;
  display: flex; align-items: flex-end; gap: .55rem;
  margin: 0; padding: 0; list-style: none;
  transform: translateY(-76%);
  pointer-events: none;
}
.xo-mascots img { display: block; width: 5.4rem; height: auto; }
.xo-mascots li:nth-child(1) { transform: rotate(-9deg); }
.xo-mascots li:nth-child(2) { transform: translateY(-.7rem) rotate(2deg); }
.xo-mascots li:nth-child(3) { transform: rotate(8deg); }

@media (prefers-reduced-motion: no-preference) {
  .xo[open]::backdrop { animation: xo-fade .3s ease-out both; }
  .xo[open] .xo-card { animation: xo-print .7s var(--snap-ease) both; }
  .xo[open] .xo-mascots li { animation: xo-peek .6s var(--snap-ease) both; }
  .xo[open] .xo-mascots li:nth-child(1) { animation-delay: .32s; }
  .xo[open] .xo-mascots li:nth-child(2) { animation-delay: .42s; }
  .xo[open] .xo-mascots li:nth-child(3) { animation-delay: .52s; }
}
@keyframes xo-fade { from { opacity: 0; } }
@keyframes xo-print {
  from { opacity: 0; transform: translateY(1.4rem) scale(.96); box-shadow: 0 0 0 0 var(--green); }
  45% { opacity: 1; }
}
@keyframes xo-peek { from { transform: translateY(95%) rotate(0); } }

/* a narrow desktop window: the stub sits on top */
@media (max-width: 760px) {
  .xo { width: calc(100vw - 2.5rem); }
  .xo-card { grid-template-columns: minmax(0, 1fr); }
  .xo-stub { padding: 2.8rem 1.6rem 1.6rem; border-right: 0; border-bottom: 2px solid var(--ink); }
  .xo-stub::after {
    top: auto; bottom: .7rem; left: 1rem; right: 1rem; width: auto; height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, .8) 1.5px, transparent 2px) left center / 12px 4px repeat-x;
  }
  .xo-stub {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2rem; align-items: start;
    grid-template-areas: "amount list" "title list" "note note";
    padding: 2.6rem 1.6rem 1.8rem;
  }
  .xo-amount { grid-area: amount; font-size: 4.2rem; }
  .xo-stub-title { grid-area: title; margin: 0; }
  .xo-list { grid-area: list; margin: .3rem 0 0; }
  .xo-note { grid-area: note; margin-top: 1rem; }
  .xo-form { padding: 1.9rem 1.6rem 1.7rem; }
  .xo-mascots img { width: 4.4rem; }
}
@media (max-width: 560px) {
  .xo-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 680px) {
  .xo-mascots { display: none; }
}