/* ==========================================================================
   Dr. Jay Ceramic Implant Dental
   Brand colour + typography: drjaydental.com (gold #D9A336, Prata / PT Sans)
   Container width:           youngdentalhealth.com (1240px)
   Visual language & motion:  Oravo Webflow template
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Colour — Dr. Jay Family Dental brand (drjaydental.com) */
  --ink:        #2A2422;   /* warm near-black, headings            */
  --brown:      #4A2C2A;   /* deep brown, dark sections            */
  --brown-deep: #33201F;   /* footer                               */
  --muted:      #515254;   /* brand body grey                      */
  --accent:     #D9A336;   /* brand gold — logo, buttons, accents  */
  --accent-dk:  #8F661B;   /* deep gold — legible as text on white  */
  --accent-lt:  #E8BE6A;   /* gold, on dark                        */
  --tint:       #FBF3E3;   /* soft gold wash                       */
  --tint-soft:  #FDF9F1;
  --surface:    #F7F4EE;
  --border:     #E8DFD0;
  --white:      #FFFFFF;

  /* Layout — container width follows youngdentalhealth.com */
  --container:  1240px;
  --gutter:     clamp(20px, 4vw, 46px);
  /* One gutter for every two-column content band, so the second column starts
     in a predictable place page to page. Card grids keep their own tight gap. */
  --gap-col:    clamp(36px, 5vw, 72px);
  --radius:     20px;
  --radius-lg:  28px;
  --radius-pill:200px;

  /* One spacing scale. Every full-width section uses --space-section so the
     vertical rhythm is identical top to bottom; narrow bands use --space-band. */
  --space-section:  clamp(52px, 6.5vw, 88px);
  --space-band:     clamp(32px, 4vw, 46px);
  --space-head:     clamp(30px, 4vw, 44px);  /* section head → its content   */
  --gap-head-body:  16px;                    /* heading → its paragraph      */
  --gap-eyebrow:    20px;                    /* eyebrow → heading            */
  --pad-card:       clamp(24px, 2.2vw, 32px); /* inner inset, every big card  */
  --pad-chip-y:     16px;                     /* inner inset, small chips     */
  --pad-chip-x:     20px;
  --radius-sm:      14px;

  /* Type — Prata headings + PT Sans body, as on drjaydental.com.
     Prata ships a single 400 weight, so headings never go bold. */
  --font-head: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1:   clamp(2.25rem, 1.35rem + 3vw, 3.7rem);      /* 36 → 59px */
  --fs-h2:   clamp(1.75rem, 1.35rem + 1.5vw, 2.4rem);    /* 28 → 38px */
  --fs-h3:   clamp(1.15rem, 1.06rem + 0.32vw, 1.35rem);  /* 18 → 22px */
  --fs-body: 1rem;
  --fs-lede: clamp(1.02rem, 0.98rem + 0.2vw, 1.125rem);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 2px 10px rgba(74,44,42,.06);
  --shadow-md: 0 14px 40px rgba(74,44,42,.10);
  --shadow-lg: 0 30px 80px rgba(74,44,42,.16);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* The off-canvas mobile drawer sits translated off the right edge; `clip` keeps it
   from widening the document without creating a scroll container (which would
   break the sticky header the way `overflow:hidden` does). */
html,body{ overflow-x:clip }
/* A component `display` beats the UA's [hidden]{display:none}, which would leave
   an element like the lightbox laid out and swallowing clicks while invisible. */
[hidden]{ display:none !important }
img,svg,iframe{ max-width:100%; display:block }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0 }
address{ font-style:normal }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

/* ---------- 3. Layout primitives ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:var(--space-section) }
.section--tint{ background:var(--tint-soft) }

.section__head{ max-width:760px; margin-bottom:var(--space-head) }
.section__head--row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  max-width:none; flex-wrap:wrap;
}
.section__head--row > div{ max-width:620px }
.section__head--row .section__lede{ max-width:400px }
.section__lede{ color:var(--muted); font-size:var(--fs-lede); margin-top:var(--gap-head-body) }

/* ---------- 4. Typography ----------
   Prata (serif, 400 only) for display and headings; PT Sans for everything
   else. Serif headings carry their own weight, so nothing here goes bold. */
.h2,h1,h2,h3,h4,
.hero__title,.badge-card strong,
.doc-facts strong,.numbers__item strong,.hero__stats strong,
.acc__q,.quote cite{
  font-family:var(--font-head); font-weight:400;
}
.h2{
  font-size:var(--fs-h2); line-height:1.24;
  letter-spacing:normal; color:var(--ink); text-wrap:balance;
}
.h2--light{ color:var(--white) }
h3{ font-size:var(--fs-h3); letter-spacing:normal; line-height:1.34 }
p{ color:var(--muted) }
.split__copy p, .faq__head p, .cta p{ font-size:var(--fs-lede) }
strong{ color:var(--ink); font-weight:700 }
.h2--light + p, .cta p{ color:rgba(255,255,255,.78) }

/* Vertical rhythm for prose blocks */
.h2 + p, h3 + p{ margin-top:var(--gap-head-body) }
.split__copy p + p, .contact__info p + p, .faq__head p + p{ margin-top:1em }

/* Every eyebrow is the same pill with the same symmetric padding, so the label
   sits identically above its heading in all sections. */
.eyebrow{
  display:inline-block;
  padding:7px 14px; border-radius:var(--radius-pill);
  background:var(--tint); color:var(--accent-dk);
  font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid rgba(217,163,54,.22); margin-bottom:var(--gap-eyebrow);
}
.eyebrow--light{
  background:rgba(255,255,255,.12); color:#fff;
  border-color:rgba(255,255,255,.24);
}

/* ---------- 5. Buttons (Oravo pill with leading dot) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 22px 8px 8px; border-radius:var(--radius-pill);
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s var(--ease),
             color .3s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease);
}
.btn--lg{ font-size:1rem; padding:10px 26px 10px 10px }
.btn__dot{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--white); color:var(--accent-dk);
  transition:transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn--lg .btn__dot{ width:38px; height:38px }
.btn__dot svg{ width:17px; height:17px }
.btn:hover{ transform:translateY(-2px) }
.btn:hover .btn__dot{ transform:rotate(45deg) }

/* Brand gold is light: white on it is only 2.3:1, so gold buttons take the
   deep brown for text (5.5:1) and the hover state darkens the gold. */
.btn--primary{ background:var(--accent); color:var(--brown-deep); box-shadow:0 10px 26px rgba(217,163,54,.30) }
.btn--primary:hover{ background:var(--accent-dk); color:#fff; box-shadow:0 16px 36px rgba(143,102,27,.32) }
.btn--primary .btn__dot{ background:var(--brown-deep); color:var(--accent) }
.btn--primary:hover .btn__dot{ background:#fff; color:var(--accent-dk) }

.btn--dark{ background:var(--brown); color:#fff }
.btn--dark .btn__dot{ background:var(--accent); color:#fff }
.btn--dark:hover{ background:var(--brown-deep) }

.btn--outline{ background:transparent; border-color:var(--border); color:var(--ink); padding-left:8px }
.btn--outline .btn__dot{ background:var(--tint); color:var(--accent-dk) }
.btn--outline:hover{ border-color:var(--accent); background:var(--tint-soft) }
.btn--outline:hover .btn__dot{ transform:translateY(2px) rotate(0) }

.btn--ghost{
  background:transparent; color:var(--ink); padding:9px 16px;
  border-color:var(--border); font-weight:600;
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-dk) }

.btn--glass{
  background:rgba(255,255,255,.14); color:#fff; padding:12px 26px;
  border-color:rgba(255,255,255,.3); backdrop-filter:blur(8px);
}
.btn--glass:hover{ background:rgba(255,255,255,.24) }
.btn--block{ width:100%; justify-content:center }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9375rem; font-weight:600; color:var(--accent-dk);
}
.link-arrow i{
  width:24px; height:24px; border-radius:50%; background:var(--tint);
  display:grid; place-items:center; transition:transform .35s var(--ease), background .3s;
  position:relative;
}
.link-arrow i::after{
  content:""; width:7px; height:7px; border-top:2px solid currentColor;
  border-right:2px solid currentColor; transform:rotate(45deg) translate(-1px,1px);
}
.link-arrow:hover i{ transform:translateX(4px); background:var(--accent); color:#fff }

/* ---------- 6. Top bar ---------- */
.topbar{ background:var(--brown); color:rgba(255,255,255,.72); font-size:.8125rem }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; flex-wrap:wrap }
.topbar__left,.topbar__right{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.topbar__item{ display:inline-flex; align-items:center; gap:8px; transition:color .25s }
.topbar__item svg{ width:15px; height:15px; color:var(--accent-lt); flex:none }
a.topbar__item:hover{ color:#fff }
.topbar__pill{
  padding:3px 12px; border-radius:var(--radius-pill);
  background:rgba(217,163,54,.18); color:var(--accent-lt); font-weight:600;
}

/* ---------- 7. Header ---------- */
.header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:box-shadow .35s var(--ease), border-color .35s, background .35s;
}
.header.is-stuck{ box-shadow:0 6px 30px rgba(74,44,42,.08); border-bottom-color:var(--border); background:rgba(255,255,255,.96) }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:78px }
.header.is-stuck .header__in{ min-height:68px; transition:min-height .35s var(--ease) }

/* Official Dr. JAY Dental lockup, with the sub-brand set beneath it. */
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex:none }
.brand__logo{ height:32px; width:auto }
.brand__tag{
  font-size:.625rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-dk); padding-left:2px; line-height:1;
}
.brand--light .brand__logo{ height:34px }
.brand--light .brand__tag{ color:var(--accent-lt) }

.nav{ display:flex; align-items:center; gap:30px; margin-left:auto }
.nav__list{ display:flex; align-items:center; gap:4px }
.nav__item{ position:relative }
.nav__link{
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 14px; border-radius:var(--radius-pill);
  font-size:.9375rem; font-weight:500; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover,.nav__link.is-active{ background:var(--tint); color:var(--accent-dk) }
.caret{ width:14px; height:14px; transition:transform .3s var(--ease) }
.has-drop:hover .caret,.nav__toggle[aria-expanded="true"] .caret{ transform:rotate(180deg) }

.drop{
  position:absolute; top:calc(100% + 12px); left:50%; translate:-50% 0;
  min-width:212px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md); padding:10px;
  display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drop--wide{ min-width:232px }
.has-drop:hover .drop,.has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translateY(0) }
.drop::before{ content:""; position:absolute; inset:-14px 0 100% 0 }
.drop a{ display:block; padding:10px 14px; border-radius:12px; transition:background .22s }
.drop a span{ display:block; font-size:.9375rem; font-weight:600; white-space:nowrap }
.drop a:hover{ background:var(--tint-soft) }
.drop a:hover span{ color:var(--accent-dk) }

.nav__cta{ display:flex; align-items:center; gap:10px; flex:none }

.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--border); padding:0 }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); margin:4px auto; border-radius:2px; transition:transform .3s var(--ease), opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
.nav-scrim{ position:fixed; inset:0; background:rgba(74,44,42,.45); z-index:55; opacity:0; transition:opacity .3s }
.nav-scrim.is-on{ opacity:1 }

/* ---------- 8. Hero ---------- */
.hero{ position:relative; padding-block:clamp(40px,5vw,72px) var(--space-section); overflow:hidden }
.hero__glow{
  position:absolute; top:-320px; right:-180px; width:820px; height:820px; pointer-events:none;
  background:radial-gradient(circle, rgba(217,163,54,.16), rgba(217,163,54,0) 62%);
}
.hero__in{
  position:relative; display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--gap-col); align-items:center;
}
.hero__title{
  font-size:var(--fs-h1); line-height:1.2;
  letter-spacing:normal; margin:0 0 calc(var(--gap-head-body) * 1.5);
}
.hero__title .line{ display:block }
.hero__title em{
  font-style:normal; color:var(--accent-dk);
  background:linear-gradient(180deg, transparent 62%, rgba(217,163,54,.2) 62%);
}
.hero__sub{ max-width:520px; font-size:var(--fs-lede) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,44px);
  margin-top:44px; padding-top:30px; border-top:1px solid var(--border);
}
.hero__stats strong{ display:block; font-size:1.875rem; letter-spacing:normal; line-height:1.1 }
.hero__stats span{ font-size:.8125rem; color:var(--muted) }

/* Hero media */
.hero__media{ position:relative; align-self:stretch; min-height:420px }
.hero__shot{
  position:relative; height:100%; min-height:clamp(380px,48vw,540px);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}
.hero__shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(217,163,54,.14), transparent 46%);
}
.hero__shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 28% }

/* ---------- 9. Trust marquee ---------- */
.trust{ padding-block:var(--space-band); border-block:1px solid var(--border); background:var(--surface) }
.trust__label{ text-align:center; font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:26px }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) }
.marquee__track{ display:flex; width:max-content; animation:scroll 34s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__group{ display:flex; align-items:center; gap:clamp(40px,6vw,76px); padding-right:clamp(40px,6vw,76px) }
.marquee__group img{
  height:56px; width:auto; object-fit:contain;
  filter:grayscale(.25) contrast(1.08); opacity:.9;
  transition:filter .3s, opacity .3s, transform .35s var(--ease);
}
.marquee__group img:hover{ filter:none; opacity:1; transform:scale(1.05) }
.marquee__word{ font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--muted); white-space:nowrap }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ---------- 10. Split sections ---------- */
.split{
  display:grid; grid-template-columns:1fr 1.06fr;
  gap:var(--gap-col); align-items:center;
}
/* Grid tracks default to min-width:auto, so an image's intrinsic width would
   push a column wider than the container. Let the tracks shrink instead. */
.split > *, .grid > *, .numbers__grid > *, .contact > *, .faq > *, .gallery > *{ min-width:0 }
.split--reverse .split__copy{ order:1 }
.split--reverse .split__media{ order:2 }
.split__media{ position:relative; min-height:clamp(400px,46vw,520px) }
/* The doctor photo sets its own height, so the floating name card can hug it. */
.split__media--doctor{ min-height:0 }

.frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md) }
.frame img{ width:100%; height:100%; object-fit:cover }
.frame--tall{ height:clamp(400px,46vw,520px); background:var(--brown) }
.frame--tall img{ object-position:50% 30% }
.frame--overlap{
  position:absolute; right:-6%; bottom:-26px; width:56%; height:250px;
  border:7px solid #fff; box-shadow:var(--shadow-lg);
}
.frame--left{ right:auto; left:-6% }
.frame--doctor{ height:auto; aspect-ratio:849/538 }
.frame--doctor img{ object-position:50% 50% }

.badge-card{
  position:absolute; top:26px; right:-14px; background:#fff;
  border-radius:16px; padding:13px 18px; box-shadow:var(--shadow-md);
  border:1px solid var(--border);
}
.badge-card strong{ display:block; font-size:1.0625rem; letter-spacing:normal; line-height:1.2 }
.badge-card small{ font-size:.75rem; color:var(--muted) }
.badge-card--alt{ right:auto; left:-14px; top:auto; bottom:32px }
.badge-card--doctor{
  display:flex; align-items:center; gap:12px; top:auto; bottom:-22px; right:auto; left:24px; padding:12px 20px 12px 12px;
}
.badge-card--doctor img{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none }

/* Doctor credential chips */
.doc-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 34px }
.doc-facts > div{
  padding:var(--pad-chip-y) var(--pad-chip-x); border-radius:var(--radius); background:#fff;
  border:1px solid var(--border); display:grid; gap:4px;
  transition:border-color .3s, transform .35s var(--ease);
}
.doc-facts > div:hover{ border-color:rgba(217,163,54,.36); transform:translateY(-3px) }
.doc-facts strong{ font-size:1rem; letter-spacing:normal; color:var(--accent-dk) }
.doc-facts span{ font-size:.8125rem; color:var(--muted); line-height:1.45 }

.ticks{ display:grid; gap:12px; margin:26px 0 32px }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted) }
.ticks li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%;
  background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8862A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- 11. Cards ---------- */
.grid{ display:grid; gap:clamp(18px,2.2vw,26px) }
/* Visible to screen readers and crawlers, not on screen. Lets a repeated
   "View Details" link carry the name of what it links to without changing
   the look of the card. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.grid--3{ grid-template-columns:repeat(3,1fr) }
/* Four service cards: SDS, Ceraroot, Ceramic, Zirconia. Collapses the
   same way grid--3 does, so it never leaves a single orphan card. */
.grid--4{ grid-template-columns:repeat(4,1fr) }

.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--pad-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(217,163,54,.3) }
.card__icon{
  width:56px; height:56px; border-radius:16px; background:var(--tint);
  display:grid; place-items:center; color:var(--accent-dk); margin-bottom:22px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.card__icon svg{ width:26px; height:26px }
.card:hover .card__icon{ background:var(--accent); color:#fff }
.card h3{ margin-bottom:10px }

/* ---------------------------------------------------------------- Video hero
   Full-bleed background video with the copy laid over it. The scrim is
   weighted to the left so the text side stays dark enough to read while the
   video still shows through on the right.
   The video never loads on phones or for reduced-motion users — they get the
   poster image instead, which saves them 1.7 MB on mobile data.
   -------------------------------------------------------------------------- */
.hero--video{ padding-block:clamp(48px,5.5vw,80px) }
.hero--video .hero__glow{ display:none }

.hero__bg{
  position:absolute; inset:0; overflow:hidden;
  background:#141414 url("../images/hero-poster.jpg") center/cover no-repeat;
}
.hero__video{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  display:block;
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  /* Neutral black rather than the brand brown: the brown washed a warm cast
     over the footage. Black darkens enough for the cream type to stay legible
     without tinting the video's own colours. Removing it altogether is not an
     option — the text is unreadable over the bright parts of the clip. */
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.78) 0%, rgba(0,0,0,.64) 36%,
      rgba(0,0,0,.30) 66%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.04) 45%, rgba(0,0,0,.28));
}

.hero--video .hero__in{
  grid-template-columns:1fr;
  align-items:center;
  min-height:clamp(500px,62vh,660px);
}
.hero--video .hero__copy{ max-width:640px }

/* Light type over the video */
.hero--video .eyebrow{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); color:#F4E7CC;
}
.hero--video .hero__title{ color:#FFF9EF }
.hero--video .hero__title em{ color:var(--accent-lt); background:none }
.hero--video .hero__sub{ color:rgba(255,255,255,.88) }
.hero--video .hero__stats{ border-top-color:rgba(255,255,255,.22) }
.hero--video .hero__stats strong{ color:#FFF9EF }
.hero--video .hero__stats span{ color:rgba(255,255,255,.72) }

/* The outline button takes --ink, which disappears on a dark background */
.hero--video .btn--outline{ color:#FFF9EF; border-color:rgba(255,255,255,.42) }
.hero--video .btn--outline .btn__dot{ background:rgba(255,255,255,.16); color:#FFF9EF }
.hero--video .btn--outline:hover{
  border-color:var(--accent-lt); background:rgba(255,255,255,.10); color:#fff;
}

/* Badges sit on the clear side of the scrim */

@media (max-width:980px){
  /* Phones get the poster only — no 1.7 MB download, no autoplay battery cost */
  .hero__video{ display:none }
  .hero--video .hero__in{ min-height:0 }
  .hero--video .hero__copy{ max-width:none }
}

@media (prefers-reduced-motion:reduce){
  .hero__video{ display:none }
}

/* ------------------------------------------------------------- Blog posts
   Single-column article measure, kept narrow enough to stay readable, plus the
   tinted callout and the read-next cards at the foot of each post.
   -------------------------------------------------------------------------- */
.post-meta{
  margin-top:18px; font-size:.9375rem; color:var(--muted);
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

.post-body__in{ max-width:72ch }
.post-body__h2{ margin-top:clamp(36px,4vw,52px); margin-bottom:var(--gap-head-body) }
.post-body__in > p{ margin-bottom:18px }
.post-body__in > p:last-of-type{ margin-bottom:0 }
.post-body__in a{ color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px }
.post-body__in a:hover{ color:var(--brown) }

.post-body__list{ display:grid; gap:11px; margin:0 0 22px }
/* Not display:flex — these items start with a bold lead-in, and flex turns
   the <strong> into its own column instead of letting it flow inline with the
   sentence. Absolute bullet keeps normal text flow. */
.post-body__list li{
  position:relative; padding-left:22px; color:var(--muted); line-height:1.6;
}
.post-body__list li::before{
  content:""; position:absolute; left:0; top:10px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}

/* Callout for the caveats — coverage varies, healing varies */
.post-note{
  margin:26px 0; padding:var(--pad-card);
  background:var(--tint-soft); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:var(--radius-sm);
}
.post-note p{ margin:0; font-size:.9375rem }

.post-body__back{ margin-top:clamp(36px,4vw,48px) }

.post-next{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px) }
.post-next > *{ min-width:0 }
.post-next__card{
  display:flex; flex-direction:column; gap:12px; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--pad-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.post-next__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md) }
.post-next__card strong{
  font-family:var(--font-head); font-weight:400; font-size:var(--fs-h3);
  line-height:1.3; letter-spacing:normal;
}
.post-next__cat{
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-dk);
}
.post-next__card .link-arrow{ margin-top:auto }

@media (max-width:720px){
  .post-next{ grid-template-columns:1fr }
}

/* Service cards */
.svc{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(217,163,54,.3) }
.svc__img{ aspect-ratio:16/10; overflow:hidden; background:var(--tint-soft) }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.svc:hover .svc__img img{ transform:scale(1.06) }
.svc__body{ padding:var(--pad-card); display:grid; gap:10px; align-content:start; flex:1 }
.svc__body p{ margin-bottom:6px; font-size:.9375rem }

/* Steps */
.steps{ display:grid; gap:4px; margin-top:30px }
.steps li{ display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--border) }
.steps li:last-child{ border-bottom:1px solid var(--border) }
.steps__no{
  flex:none; font-size:.8125rem; font-weight:700; color:var(--accent-dk);
  letter-spacing:.06em; padding-top:3px;
}
.steps h3{ margin-bottom:5px }
.steps p{ font-size:.9375rem }

/* ---------- 12. Numbers ---------- */
.numbers{ background:var(--brown); color:#fff; padding-block:var(--space-section) }
.numbers .section__head{ margin-bottom:var(--space-head) }
.numbers__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,30px) }
.numbers__item{
  padding:var(--pad-card); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1);
  transition:background .35s var(--ease), transform .4s var(--ease);
}
.numbers__item:hover{ background:rgba(255,255,255,.1); transform:translateY(-5px) }
.numbers__item strong{
  display:block; font-size:clamp(2.3rem,3.8vw,2.9rem);
  letter-spacing:normal; line-height:1.15; color:var(--accent-lt); margin-bottom:12px;
}
.numbers__item h3{ color:#fff; margin-bottom:8px }
.numbers__item p{ color:rgba(255,255,255,.62); font-size:.875rem }

/* ---------- 13. Sliders ---------- */
.slider__nav{ display:flex; gap:10px }
.slider__btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border);
  display:grid; place-items:center; color:var(--ink); background:#fff;
  transition:background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease);
}
.slider__btn svg{ width:19px; height:19px }
.slider__btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px) }
.slider__btn[disabled]{ opacity:.35; pointer-events:none }

.slider__viewport{ overflow:hidden; padding-block:6px }
.slider__track{
  display:flex; gap:clamp(18px,2.2vw,26px);
  transition:transform .65s var(--ease); will-change:transform;
}
.slide{ flex:0 0 auto; width:calc((100% - var(--gap,26px) * (var(--per,3) - 1)) / var(--per,3)) }
.slider__dots{ display:flex; justify-content:center; gap:8px; margin-top:34px }
.slider__dots button{
  width:9px; height:9px; border-radius:50%; background:var(--border);
  transition:width .35s var(--ease), background .3s;
}
.slider__dots button.is-on{ width:30px; border-radius:var(--radius-pill); background:var(--accent) }

/* Result cards */
.result{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
}
.result__img{ aspect-ratio:16/9; overflow:hidden; background:var(--tint-soft) }
.result__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.result:hover .result__img img{ transform:scale(1.04) }
.result__body{ padding:var(--pad-card) }
.result__body h3{ margin-bottom:16px }
.result__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border) }
.result__meta dt{ font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:3px }
.result__meta dd{ font-size:.9375rem; font-weight:600; letter-spacing:-.01em }
.result__body p{ font-size:.9375rem }

/* Quotes */
.quote{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--pad-card); height:100%; display:flex; flex-direction:column; gap:16px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.quote:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(217,163,54,.3) }
.quote__stars{ color:#D9A336; letter-spacing:3px; font-size:.875rem }
.quote p{ flex:1; font-size:.9375rem; color:var(--ink); opacity:.82 }
.quote footer{ display:flex; align-items:center; gap:13px; padding-top:18px; border-top:1px solid var(--border) }
.quote__avatar{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--tint); color:var(--accent-dk); font-weight:700; font-size:1.0625rem;
}
.quote cite{ font-style:normal; display:grid; letter-spacing:normal }
.quote cite small{ font-weight:400; font-size:.8125rem; color:var(--muted) }

/* ---------- 14. Gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr;
  gap:clamp(14px,1.8vw,20px);
}
.gallery figure{ aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; background:var(--tint-soft) }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.gallery figure:hover img{ transform:scale(1.07) }
/* Feature tile: 2×2, with four square tiles filling the remaining columns */
.gallery__hero{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto }

/* ---------- 15. FAQ ---------- */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--gap-col); align-items:start }
.faq__head{ position:sticky; top:120px }
.faq__head p{ margin:16px 0 26px }
.accordion{ display:grid; gap:12px }
.acc{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:border-color .3s, box-shadow .35s var(--ease);
}
.acc.is-open{ border-color:rgba(217,163,54,.36); box-shadow:var(--shadow-sm) }
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:var(--pad-chip-y) var(--pad-chip-x); text-align:left;
  font-size:1.0625rem; letter-spacing:normal; line-height:1.45;
}
.acc__q i{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--tint);
  position:relative; transition:background .3s var(--ease), transform .35s var(--ease);
}
.acc__q i::before,.acc__q i::after{
  content:""; position:absolute; inset:50% auto auto 50%; translate:-50% -50%;
  background:var(--accent-dk); border-radius:2px; transition:opacity .3s, background .3s;
}
.acc__q i::before{ width:12px; height:2px }
.acc__q i::after{ width:2px; height:12px }
.acc.is-open .acc__q i{ background:var(--accent); transform:rotate(180deg) }
.acc.is-open .acc__q i::before,.acc.is-open .acc__q i::after{ background:#fff }
.acc.is-open .acc__q i::after{ opacity:0 }
.acc__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease) }
.acc.is-open .acc__a{ grid-template-rows:1fr }
.acc__a > p{ overflow:hidden; padding:0 var(--pad-chip-x); font-size:.9375rem }
.acc.is-open .acc__a > p{ padding-bottom:var(--pad-chip-y) }

/* ---------- 16. CTA band ---------- */
.cta{ position:relative; padding-block:var(--space-section); overflow:hidden; text-align:center; color:#fff }
.cta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2 }
.cta::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(51,32,31,.86), rgba(74,44,42,.92));
}
.cta__in{ max-width:780px; position:relative }
.cta .h2{ margin-bottom:var(--gap-head-body) }
.cta__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px }

/* ---------- 17. Contact ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-col); align-items:start }
.contact__list{ display:grid; gap:18px; margin:30px 0 34px }
.contact__list li{ display:flex; gap:14px; align-items:flex-start }
.contact__ico{
  width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:var(--tint); color:var(--accent-dk);
}
.contact__ico svg{ width:20px; height:20px }
.contact__list strong{ display:block; font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-bottom:3px }
.contact__list a,.contact__list span{ font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--ink) }
.contact__list a:hover{ color:var(--accent-dk) }
.contact__map{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); height:230px }
.contact__map iframe{ width:100%; height:100%; border:0; filter:grayscale(.25) }

.form{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--pad-card); box-shadow:var(--shadow-sm); display:grid; gap:16px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field{ display:grid; gap:7px }
.field > span{ font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--ink) }
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px; border-radius:13px; background:var(--surface);
  border:1px solid var(--border); transition:border-color .25s, background .25s, box-shadow .25s;
  font-size:.9375rem; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:#9AA5AB }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px rgba(217,163,54,.12);
}
.field.is-bad input,.field.is-bad textarea{ border-color:#E0574E; box-shadow:0 0 0 4px rgba(224,87,78,.1) }
.form__note{ font-size:.75rem; color:var(--muted); text-align:center }
.form__ok{
  background:var(--tint); color:var(--accent-dk); font-weight:600; font-size:.9375rem;
  padding:14px 18px; border-radius:13px; text-align:center;
}

/* ---------- 18. Footer ---------- */
.footer{ background:var(--brown-deep); color:rgba(255,255,255,.62); padding-block:clamp(56px,7vw,84px) 28px }
.footer__top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,52px); padding-bottom:clamp(36px,5vw,54px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__brand p{ color:rgba(255,255,255,.6); font-size:.9375rem; margin:18px 0 22px; max-width:340px }
.footer__badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.footer__badges span{
  display:grid; place-items:center; width:66px; height:48px; padding:6px 8px;
  background:#fff; border-radius:12px; opacity:.82; transition:opacity .3s, transform .3s var(--ease);
}
.footer__badges span:hover{ opacity:1; transform:translateY(-2px) }
.footer__badges img{ max-height:100%; width:auto; object-fit:contain }
.footer__col{ display:grid; gap:11px; align-content:start }
.footer__col h4{ color:#fff; font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px }
.footer__col a{ font-size:.9375rem; transition:color .25s, translate .25s var(--ease) }
.footer__col a:hover{ color:#fff; translate:3px 0 }
.footer__small{ font-size:.9375rem; color:rgba(255,255,255,.6); margin-bottom:4px }

.sub{ display:flex; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-pill); padding:6px 6px 6px 18px }
.sub input{ flex:1; min-width:0; background:none; border:0; outline:0; color:#fff; font-size:.875rem }
.sub input::placeholder{ color:rgba(255,255,255,.45) }
.sub button{ width:40px; height:40px; border-radius:50%; flex:none; background:var(--accent); color:#fff; display:grid; place-items:center; transition:background .3s, transform .3s var(--ease) }
.sub button svg{ width:18px; height:18px }
.sub button:hover{ background:var(--accent-lt); transform:rotate(45deg) }
.footer address{ font-size:.875rem; margin-top:6px; line-height:1.8 }
.footer address a:hover{ color:#fff }

.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; padding-top:24px; font-size:.8125rem }
.footer__bottom p{ color:inherit }
.footer__legal{ display:flex; gap:22px }
.footer__legal a:hover{ color:#fff }

/* ---------- 19. Back to top ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; box-shadow:0 10px 30px rgba(217,163,54,.36);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s;
}
.to-top svg{ width:20px; height:20px }
.to-top.is-on{ opacity:1; visibility:visible; transform:translateY(0) }
.to-top:hover{ background:var(--accent-dk) }

/* ---------- 20. Reveal animations ---------- */
/* Scroll-entrance reveal is switched off: content is fully visible as soon as
   the page loads. The markup still carries data-reveal, so restoring it means
   putting the opacity/transform rules back here — nothing else to change.
   Counters, sliders, hover effects and the marquee are unaffected. */
[data-reveal],[data-reveal].is-in{ opacity:1; transform:none; transition:none }

/* ---------- 21. Responsive ---------- */
@media (max-width:1100px){
  .hero__in{ grid-template-columns:1fr; gap:48px }
  .hero__media{ min-height:0 }
  .hero__shot{ min-height:clamp(340px,60vw,440px) }
  .split{ grid-template-columns:1fr; gap:56px }
  .split__copy{ order:1 }
  .split__media{ order:2 }
  .split__media{ min-height:0 }
  .frame--tall{ height:clamp(320px,52vw,420px) }
  /* Keep the doctor photo width-driven; a fixed height would make aspect-ratio
     compute a width wider than the column. */
  .frame--doctor{ height:auto }
  .frame--overlap{ position:static; width:100%; height:200px; border:0; margin-top:16px; box-shadow:var(--shadow-md) }
  .badge-card{ right:14px }
  .badge-card--alt{ left:14px; right:auto; bottom:auto; top:26px }
  .badge-card--doctor{ left:14px; right:auto; bottom:14px }
  .numbers__grid{ grid-template-columns:repeat(2,1fr) }
  .faq{ grid-template-columns:1fr; gap:40px }
  .faq__head{ position:static }
  .footer__top{ grid-template-columns:1fr 1fr }
}

@media (max-width:980px){
  html{ scroll-padding-top:86px }
  .burger{ display:block }
  /* backdrop-filter makes the header a containing block for fixed descendants,
     which would trap the off-canvas drawer inside the header box. Drop the
     frosted effect at drawer widths and use a solid bar instead. */
  .header,.header.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(370px,86vw); z-index:58;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; background:#fff; padding:86px 26px 32px; overflow-y:auto;
    transform:translateX(100%); transition:transform .42s var(--ease);
    box-shadow:-20px 0 60px rgba(74,44,42,.14);
  }
  .nav.is-open{ transform:translateX(0) }
  /* The drawer is a child of the header, so lift the logo and the close button
     above it — otherwise the drawer paints over the X and there is no way out. */
  .brand,.burger{ position:relative; z-index:62 }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px }
  .nav__link{ width:100%; justify-content:space-between; padding:13px 16px; border-radius:13px; font-size:1rem }
  .drop{
    position:static; translate:none; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:0; border-left:2px solid var(--border);
    border-radius:0; margin:2px 0 6px 16px; padding:2px 0 2px 10px; min-width:0;
    display:none;
  }
  .nav__item.is-open .drop{ display:grid }
  .nav__item.is-open .caret{ transform:rotate(180deg) }
  .drop::before{ display:none }
  .nav__cta{ flex-direction:column; align-items:stretch; margin-top:22px; gap:10px }
  .nav__cta .btn{ justify-content:center }
  .grid--3{ grid-template-columns:repeat(2,1fr) }
  .grid--4{ grid-template-columns:repeat(2,1fr) }
  .contact{ grid-template-columns:1fr }
  .section__head--row{ align-items:flex-start }
  .gallery{ grid-template-columns:repeat(2,1fr) }
  .gallery__hero{ grid-column:span 2; grid-row:auto; aspect-ratio:2/1 }
}

@media (max-width:720px){
  .topbar__item--hide{ display:none }
  .topbar__in{ min-height:40px; font-size:.75rem }
  .topbar__pill{ display:none }
  .hero__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
  .hero__stats li{ min-width:0 }
  .hero__stats strong{ font-size:1.5rem }
  .hero__stats span{ font-size:.75rem; line-height:1.35 }
  .grid--3{ grid-template-columns:1fr }
  .grid--4{ grid-template-columns:1fr }
  .numbers__grid{ grid-template-columns:1fr }
  .form__row{ grid-template-columns:1fr }
  .footer__top{ grid-template-columns:1fr }
  .footer__bottom{ justify-content:center; text-align:center }
  .section__head--row{ flex-direction:column; gap:22px }
  .slider__nav{ order:2 }
  .gallery{ grid-template-columns:1fr 1fr }
  .gallery__hero{ grid-column:span 2; aspect-ratio:3/2 }
  .doc-facts{ grid-template-columns:1fr }
  .btn{ font-size:.875rem }
}

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

/* ==========================================================================
   23. Results / case gallery page
   Reuses the shared tokens so this page sits on the same grid, spacing scale
   and radii as the homepage.
   ========================================================================== */

/* ---------- Page head ---------- */
.pagehead{ position:relative; overflow:hidden; padding-block:clamp(48px,6vw,84px) var(--space-band) }
.pagehead__glow{
  position:absolute; top:-340px; right:-200px; width:820px; height:820px; pointer-events:none;
  background:radial-gradient(circle, rgba(217,163,54,.16), rgba(217,163,54,0) 62%);
}
/* Copy left, case thumbnails right — mirrors the homepage hero so the head
   fills the full width instead of leaving the right half empty.
   No max-width on this element: it is also .container, and capping it would
   re-centre the whole block off the page grid. */
.pagehead__in{
  position:relative; display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--gap-col); align-items:center;
}
.pagehead__in > *{ min-width:0 }
.pagehead__media{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.pagehead__thumb{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius);
  overflow:hidden; background:var(--surface); box-shadow:var(--shadow-md);
}
.pagehead__thumb img{ width:100%; height:100%; object-fit:cover }
.pagehead__thumb:nth-child(1),.pagehead__thumb:nth-child(4){ transform:translateY(-10px) }
.pagehead__thumb:nth-child(2),.pagehead__thumb:nth-child(3){ transform:translateY(10px) }
.pagehead__title{
  font-family:var(--font-head); font-weight:400; font-size:var(--fs-h1);
  line-height:1.2; letter-spacing:normal; color:var(--ink);
  margin:0 0 calc(var(--gap-head-body) * 1.5); text-wrap:balance; max-width:820px;
}
.pagehead__lede{ font-size:var(--fs-lede); max-width:680px }
.pagehead__stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,44px);
  margin-top:44px; padding-top:30px; border-top:1px solid var(--border);
}
.pagehead__stats strong{
  font-family:var(--font-head); font-weight:400; display:block;
  font-size:1.875rem; line-height:1.15; letter-spacing:normal;
}
.pagehead__stats span{ font-size:.8125rem; color:var(--muted) }

/* ---------- Protocol ---------- */
.protocol{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-col); align-items:start }
.protocol > *{ min-width:0 }
.protocol__copy p + p{ margin-top:1em }
.protocol__list{ display:grid; gap:12px }
.protocol__list li{
  display:grid; gap:4px; padding:var(--pad-chip-y) var(--pad-chip-x);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .3s, transform .35s var(--ease);
}
.protocol__list li:hover{ border-color:rgba(217,163,54,.36); transform:translateY(-3px) }
.protocol__list strong{ font-family:var(--font-head); font-weight:400; font-size:1.0625rem; color:var(--accent-dk) }
.protocol__list span{ font-size:.875rem; color:var(--muted); line-height:1.5 }

/* ---------- Case grid ---------- */
/* Cases vary in height — 12 are before/after pairs, 3 are single images and one
   has four. `align-items:start` lets each card end at its own content instead of
   stretching to its row and leaving a void inside the shorter card. */
/* No align-items:start — cards stretch to the tallest in their row so the
   bottoms line up. .case__notes{margin-top:auto} pins the notes to the base. */
.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px) }
.cases > *{ min-width:0 }
.case{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--pad-card); display:flex; flex-direction:column; gap:18px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.case:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(217,163,54,.3) }
.case__head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.case__no{
  font-family:var(--font-head); font-weight:400; font-size:1.0625rem;
  color:var(--accent-dk); letter-spacing:.02em;
}

.case__shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.case__shots--solo{ grid-template-columns:1fr }
.shot{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.shot__btn{
  display:block; width:100%; aspect-ratio:4/3; padding:0; border:0;
  background:none; cursor:zoom-in;
}
.shot__btn img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.shot:hover .shot__btn img{ transform:scale(1.05) }
.shot__tag{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:4px 11px; border-radius:var(--radius-pill);
  background:rgba(51,32,31,.82); color:#fff; backdrop-filter:blur(6px);
  font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}

.case__notes{ display:grid; gap:9px; margin-top:auto }
.case__notes li{
  display:flex; gap:10px; font-size:.9375rem; line-height:1.55; color:var(--muted);
}
.case__notes li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:9px; border-radius:50%;
  background:var(--accent);
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:clamp(16px,4vw,56px); background:rgba(28,17,16,.92);
  opacity:0; transition:opacity .28s var(--ease);
}
.lightbox.is-on{ opacity:1 }
.lightbox__img{
  max-width:100%; max-height:100%; border-radius:var(--radius);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  transform:scale(.97); transition:transform .28s var(--ease);
}
.lightbox.is-on .lightbox__img{ transform:scale(1) }
.lightbox__close{
  position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.26);
  transition:background .25s;
}
.lightbox__close:hover{ background:rgba(255,255,255,.26) }
.lightbox__close svg{ width:20px; height:20px }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .protocol{ grid-template-columns:1fr }
  .pagehead__in{ grid-template-columns:1fr; gap:44px }
  .pagehead__thumb{ transform:none !important }
}
@media (max-width:860px){
  .cases{ grid-template-columns:1fr }
}
@media (max-width:720px){
  .pagehead__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
  .pagehead__stats li{ min-width:0 }
  .pagehead__stats strong{ font-size:1.5rem }
  .pagehead__stats span{ font-size:.75rem; line-height:1.35 }
}

/* ==========================================================================
   24. Meet Dr. Jay page
   ========================================================================== */

/* current page inside a dropdown */
.drop a.is-current{ background:var(--tint) }
.drop a.is-current span{ color:var(--accent-dk) }

/* ---------- Portrait page head ---------- */
.pagehead__media--portrait{ display:block; position:relative }
.portrait{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:530/602; background:var(--surface); max-width:420px; margin-inline:auto;
}
.portrait img{ width:100%; height:100%; object-fit:cover }
/* .badge-card sets top/right; reset both or all four insets stretch the box. */
.badge-card--float{
  position:absolute; inset:auto auto -20px 50%; translate:-50% 0;
  white-space:nowrap; text-align:center;
}

/* ---------- Framed media ---------- */
.frame--award{ aspect-ratio:629/792; height:auto; background:#000 }
.frame--award img{ object-fit:contain }
.frame--fagd{ aspect-ratio:1/1; height:auto; border-radius:var(--radius-lg); overflow:hidden }
.frame--fagd img{ width:100%; height:100%; object-fit:cover }

/* ---------- Associations ---------- */
.assoc{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-col); align-items:start }
.assoc > *{ min-width:0 }
.assoc__list{ display:grid; gap:10px }
.assoc__list li{
  display:flex; align-items:center; gap:16px;
  padding:var(--pad-chip-y) var(--pad-chip-x);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .3s, transform .35s var(--ease);
}
.assoc__list li:hover{ border-color:rgba(217,163,54,.4); transform:translateX(4px) }
.assoc__abbr{
  flex:none; min-width:66px; padding:5px 10px; border-radius:var(--radius-sm);
  background:var(--tint); color:var(--accent-dk); text-align:center;
  font-size:.75rem; font-weight:700; letter-spacing:.06em;
}
.assoc__name{ font-size:.9375rem; line-height:1.45; color:var(--ink) }

/* Shown as its own centred block under the two columns, so neither column is
   left with a void and the award gets the space it deserves. */
.award{ margin-top:clamp(40px,5vw,64px); max-width:760px; margin-inline:auto; text-align:center }
.award img{
  width:100%; border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.award figcaption{
  margin-top:14px; font-size:.8125rem; color:var(--muted); line-height:1.5;
}

/* ---------- FAGD explainer ---------- */
/* Even columns, matching .assoc/.protocol/.info/.contact, so the pullquote
   starts on the same line as every other 50/50 band. Both sides are text. */
.fagd{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-col); align-items:start }
.fagd > *{ min-width:0 }
.fagd__steps{ margin-top:0 }
.pullquote{
  background:var(--brown); color:#fff; border-radius:var(--radius-lg);
  padding:clamp(30px,3.4vw,40px); position:relative; overflow:hidden;
}
.pullquote::before{
  content:"”"; position:absolute; top:-26px; right:14px;
  font-family:var(--font-head); font-size:11rem; line-height:1;
  color:rgba(232,190,106,.16); pointer-events:none;
}
.pullquote h3{ color:var(--accent-lt); margin-bottom:16px; position:relative }
.pullquote p{ color:rgba(255,255,255,.84); font-size:var(--fs-lede); position:relative }

/* ---------- Pledge ---------- */
.pledge{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px);
  margin-top:clamp(36px,4vw,52px);
}
.pledge > *{ min-width:0 }
.pledge__item{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--pad-card); border-left:3px solid var(--accent);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pledge__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md) }
.pledge__item h3{ color:var(--accent-dk); margin-bottom:10px }
.pledge__item p{ font-size:.9375rem }

/* ---------- Credential logos ---------- */
.creds{
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.6vw,18px);
  align-items:stretch;
}
.creds li{
  display:grid; place-items:center; padding:20px 16px; min-height:120px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .3s, transform .35s var(--ease);
}
.creds li:hover{ border-color:rgba(217,163,54,.4); transform:translateY(-4px) }
.creds img{ max-width:100%; max-height:62px; width:auto; object-fit:contain }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .assoc,.fagd{ grid-template-columns:1fr }
  .creds{ grid-template-columns:repeat(3,1fr) }
  .portrait{ max-width:360px }
}
@media (max-width:720px){
  .pledge{ grid-template-columns:1fr }
  .creds{ grid-template-columns:repeat(2,1fr) }
  .assoc__list li{ gap:12px }
  .assoc__abbr{ min-width:58px; font-size:.6875rem }
}

/* ==========================================================================
   25. Alternating media rows (Our Staff, Our Technology)
   Mirrors drjaydental.com: media left on a light row, then a dark band with the
   copy left and the media right on a gold block. --alt-media sets the column
   width so portrait (staff) and landscape (tech) rows can differ.
   ========================================================================== */

.pagehead--slim{ padding-block:clamp(48px,6vw,84px) var(--space-band) }
.pagehead__in--centred{ display:block; max-width:none; text-align:center }
.pagehead__in--centred .pagehead__title{ max-width:none; margin-inline:auto }

.alt-row{ padding-block:clamp(48px,6vw,80px); overflow:hidden }
.alt-row__in{
  display:grid; grid-template-columns:var(--alt-media,450px) 1fr;
  gap:var(--gap-col); align-items:center;
}
.alt-row__in > *{ min-width:0 }

.alt-row__photo{
  position:relative; width:100%; max-width:var(--alt-media,450px); aspect-ratio:var(--alt-ratio,450/511);
  border-radius:var(--radius-lg);
  /* the source PNGs carry their own rounded corners with transparent pixels, so
     no plate colour here — whatever is behind shows through cleanly */
  background:transparent;
}
.alt-row__photo img{ width:100%; height:100%; object-fit:cover }

.alt-row__name{
  font-family:var(--font-head); font-weight:400; font-size:var(--fs-h2);
  line-height:1.2; letter-spacing:normal; color:var(--ink);
}
.alt-row__role{
  display:block; margin-top:10px;
  font-size:.8125rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-dk);
}
.alt-row__copy p{ margin-top:18px; font-size:var(--fs-lede); max-width:62ch }

/* ---------- dark band: copy left, photo right on a gold block ---------- */
.alt-row--dark{ background:var(--brown) }
.alt-row--dark .alt-row__in{ grid-template-columns:1fr var(--alt-media,450px) }
.alt-row--dark .alt-row__copy{ order:1 }
.alt-row--dark .alt-row__photo{ order:2; justify-self:end }
.alt-row--dark .alt-row__name{ color:#fff }
.alt-row--dark .alt-row__role{ color:var(--accent-lt) }
.alt-row--dark .alt-row__copy p{ color:rgba(255,255,255,.82) }
/* the gold plate sitting behind the portrait */
.alt-row--dark .alt-row__photo::before{
  content:""; position:absolute; inset:-26px -26px 26px 26px; z-index:-1;
  background:var(--accent); border-radius:var(--radius-lg);
}
.alt-row--dark .alt-row__photo{ overflow:visible; isolation:isolate }
.alt-row--dark .alt-row__photo img{ border-radius:var(--radius-lg) }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .alt-row__in,
  .alt-row--dark .alt-row__in{ grid-template-columns:1fr; gap:32px }
  .alt-row__photo{ max-width:min(100%,520px); margin-inline:auto }
  .alt-row--dark .alt-row__photo{ justify-self:center }
  /* photo first on every row so the reading order stays consistent */
  .alt-row--dark .alt-row__copy{ order:2 }
  .alt-row--dark .alt-row__photo{ order:1 }
  .alt-row--dark .alt-row__photo::before{ inset:-18px -18px 18px 18px }
}
@media (max-width:720px){
  .alt-row__photo{ max-width:100% }
  .alt-row--dark .alt-row__photo::before{ inset:-12px -12px 12px 12px }
}

/* ==========================================================================
   26. Testimonial slider (shared) — one review at a time, photo left,
   quote right, arrows at the outer edges. Mirrors drjaydental.com.
   ========================================================================== */
.testimonials__title{ text-align:center; margin-bottom:clamp(36px,5vw,56px) }

.tslider{ position:relative }
.treview{
  display:grid; grid-template-columns:minmax(0,520px) 1fr;
  gap:var(--gap-col); align-items:center;
}
.treview__photo{
  border-radius:var(--radius-lg); overflow:hidden; background:transparent;
  aspect-ratio:568/438;
}
.treview__photo img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg) }

.treview__body{ min-width:0 }
.treview__body p{
  font-size:var(--fs-lede); line-height:1.75; color:var(--ink); opacity:.86;
}
.treview__stars{ color:var(--accent); letter-spacing:5px; font-size:1.25rem; margin-top:22px }
.treview__body cite{
  display:block; margin-top:14px; font-style:normal;
  font-family:var(--font-head); font-weight:400; font-size:var(--fs-h3); color:var(--ink);
}
.treview__body cite small{
  display:block; margin-top:4px; font-family:var(--font-body);
  font-size:.8125rem; color:var(--muted);
}

/* arrows sit in the gutter on either side of the container */
.tslider__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border); background:#fff; color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease);
}
.tslider__arrow svg{ width:21px; height:21px }
.tslider__arrow--prev{ left:clamp(8px,2vw,40px) }
.tslider__arrow--next{ right:clamp(8px,2vw,40px); background:var(--accent); border-color:var(--accent); color:var(--brown-deep) }
.tslider__arrow:hover{ transform:translateY(-2px) scale(1.04) }
.tslider__arrow--prev:hover{ background:var(--brown); border-color:var(--brown); color:#fff }
.tslider__arrow--next:hover{ background:var(--accent-dk); border-color:var(--accent-dk); color:#fff }
.tslider__arrow[disabled]{ opacity:.35; pointer-events:none }

@media (max-width:980px){
  .treview{ grid-template-columns:1fr; gap:28px }
  .treview__photo{ max-width:520px; margin-inline:auto }
  .treview__body{ text-align:center }
  .tslider__arrow{ width:46px; height:46px }
  .tslider__arrow--prev{ left:4px }
  .tslider__arrow--next{ right:4px }
}
@media (max-width:720px){
  /* Both arrows sit together beneath the review. They bracket the container in
     the DOM, so without reordering `position:static` would strand prev above
     the quote and next below it. */
  .tslider{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
  .tslider > .container{ order:1; flex:1 0 100% }
  .tslider__arrow{ position:static; translate:none; order:2; margin-top:26px }
}

/* ==========================================================================
   27. Our Technology — wider landscape media in the shared alt-row
   ========================================================================== */
.page-tech{ --alt-media:590px; --alt-ratio:639/540 }
.alt-row__list{ display:grid; gap:10px; margin-top:18px }
/* Items here begin with a bold label followed by a sentence. display:flex
   would make the <strong> its own column, so the bullet is absolute instead
   and the text flows normally. */
.alt-row__list li{
  position:relative; padding-left:23px;
  font-size:.9375rem; line-height:1.6; color:var(--muted);
}
.alt-row__list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}
.alt-row__list li strong{ color:var(--ink) }
.alt-row--dark .alt-row__list li{ color:rgba(255,255,255,.82) }
.alt-row--dark .alt-row__list li strong{ color:#fff }
.alt-row--dark .alt-row__list li::before{ background:var(--accent-lt) }
.alt-row__copy p + p{ margin-top:1em }

/* ==========================================================================
   28. Blog
   ========================================================================== */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,26px); align-items:start }
.posts > *{ min-width:0 }
.post{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(217,163,54,.3) }
.post__img{ aspect-ratio:16/10; overflow:hidden; background:var(--surface) }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.post:hover .post__img img{ transform:scale(1.05) }
.post__body{ padding:var(--pad-card); display:grid; gap:10px }
.post__meta{ display:flex; align-items:center; gap:12px; font-size:.75rem; color:var(--muted) }
.post__cat{
  padding:4px 11px; border-radius:var(--radius-pill); background:var(--tint);
  border:1px solid rgba(217,163,54,.22); color:var(--accent-dk);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.post__body p{ font-size:.9375rem }

/* empty state — shown until the first post is added */
.blog-empty{
  max-width:620px; margin-inline:auto; text-align:center;
  padding:clamp(40px,5vw,64px) var(--pad-card);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
}
.blog-empty__mark{
  width:72px; height:72px; margin:0 auto 24px; border-radius:22px;
  display:grid; place-items:center; background:var(--tint); color:var(--accent-dk);
}
.blog-empty__mark svg{ width:34px; height:34px }
.blog-empty p{ margin-top:var(--gap-head-body); font-size:var(--fs-lede) }
.blog-empty__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px }

@media (max-width:1100px){ .posts{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:720px){ .posts{ grid-template-columns:1fr } }

/* ==========================================================================
   29. Contact page — photo banner, address/hours block
   ========================================================================== */
.banner{ position:relative; overflow:hidden; padding-block:clamp(60px,7vw,104px); color:#fff }
.banner__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2 }
.banner::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(51,32,31,.88) 0%, rgba(51,32,31,.66) 45%, rgba(51,32,31,.28) 100%);
}
/* no max-width override — this element is also .container, and removing its
   cap makes the banner text sit at the page edge instead of on the grid */
.banner__in{ position:relative }
.banner__title{
  font-family:var(--font-head); font-weight:400; font-size:var(--fs-h1);
  line-height:1.2; letter-spacing:normal; color:#fff;
  margin:0 0 var(--gap-head-body); text-wrap:balance;
}
.banner__lede{ font-size:var(--fs-lede); color:rgba(255,255,255,.86); max-width:620px }

/* address + hours, side by side */
.info{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-col); align-items:start }
.info > *{ min-width:0 }
.info__title{
  font-family:var(--font-head); font-weight:400; font-size:var(--fs-h3);
  color:var(--ink); margin-bottom:18px;
}
.info__address a,.info__phone a{ color:var(--accent-dk); font-weight:700 }
.info__address a:hover,.info__phone a:hover{ color:var(--accent); text-decoration:underline }
.info__address{ font-size:var(--fs-lede); line-height:1.7 }
.info__phone{ margin-top:16px; font-size:var(--fs-lede) }

.hours{ display:grid; gap:0; max-width:420px }
.hours > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:13px 0; border-bottom:1px solid var(--border);
}
.hours > div:first-child{ border-top:1px solid var(--border) }
.hours dt{ font-weight:700; color:var(--ink); font-size:.9375rem }
.hours dd{ color:var(--muted); font-size:.9375rem; text-align:right }
.hours .is-closed dd{ color:var(--accent-dk); font-weight:700 }

@media (max-width:860px){
  .info{ grid-template-columns:1fr; gap:40px }
  .hours{ max-width:none }
}

/* directions link on the contact page */
.info__dirs{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent-dk); font-weight:700; font-size:.9375rem;
}
.info__dirs svg{ width:16px; height:16px; transition:transform .3s var(--ease) }
.info__dirs:hover{ color:var(--accent) }
.info__dirs:hover svg{ transform:translateX(4px) }

/* ==========================================================================
   30. FAQs page
   ========================================================================== */
.pagehead__lede--centred{ margin-inline:auto }

.faqs{ display:grid; grid-template-columns:300px 1fr; gap:var(--gap-col); align-items:start }
.faqs > *{ min-width:0 }

/* sticky jump list */
.faq-jump{ position:sticky; top:120px }
.faq-jump__title{
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.faq-jump__nav{ display:grid; gap:2px }
.faq-jump__nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:var(--radius-sm);
  font-size:.9375rem; line-height:1.4; color:var(--ink);
  transition:background .25s var(--ease), color .25s;
}
.faq-jump__nav a span{
  flex:none; min-width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--tint); color:var(--accent-dk);
  font-size:.75rem; font-weight:700;
}
.faq-jump__nav a:hover{ background:#fff; color:var(--accent-dk) }

.faq-jump__ask{
  margin-top:26px; padding:var(--pad-chip-y) var(--pad-chip-x);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
}
.faq-jump__ask p{ font-size:.9375rem; margin-bottom:14px }

/* question groups */
.faq-body{ display:grid; gap:clamp(40px,5vw,64px) }
.faq-group__head{ display:flex; gap:18px; align-items:flex-start; margin-bottom:26px }
.faq-group__no{
  /* Prata's figures are proportional, so "01" measures narrower than "02" and
     the group headings drift apart. A floor on the width keeps them in line. */
  flex:none; min-width:26px; font-variant-numeric:tabular-nums;
  font-family:var(--font-head); font-weight:400; font-size:1.25rem;
  color:var(--accent-dk); line-height:1.2; padding-top:2px;
}
.faq-group__head p{ margin-top:10px; font-size:.9375rem }

@media (max-width:1100px){
  .faqs{ grid-template-columns:1fr }
  .faq-jump{ position:static }
  .faq-jump__nav{ grid-template-columns:repeat(2,1fr); display:grid }
}
@media (max-width:720px){
  .faq-jump__nav{ grid-template-columns:1fr }
  .faq-group__head{ gap:12px }
}

/* ==========================================================================
   31. Implant service pages
   ========================================================================== */
.page-service{ --alt-media:520px }
/* Cap the children, never the .container itself — capping the container makes
   `margin-inline:auto` re-centre the whole block off the page grid. */
.service-intro > *{ max-width:860px }
.service-intro .h2{ margin-bottom:var(--gap-head-body) }
.service-intro p + p{ margin-top:1em }
.service-intro p{ font-size:var(--fs-lede) }

/* images here keep their own proportions rather than a fixed crop */
.alt-row__photo--natural{ aspect-ratio:auto; height:auto }
.alt-row__photo--natural img{ height:auto; object-fit:contain }

/* a row with no image spans the full content width */
.alt-row__in--solo{ display:block }
.alt-row__in--solo .alt-row__copy{ max-width:860px }

.alt-row__lead{ margin-top:var(--gap-head-body); font-size:var(--fs-lede) }
.alt-row__points{ display:grid; gap:20px; margin-top:26px }
.alt-row__points h3{ color:var(--accent-dk); margin-bottom:8px }
.alt-row__points p{ font-size:.9375rem }
.alt-row--dark .alt-row__points h3{ color:var(--accent-lt) }
.alt-row--dark .alt-row__points p{ color:rgba(255,255,255,.82) }
/* multi-column points when a row has no image beside them */
.alt-row__in--solo .alt-row__points{ grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px) }

@media (max-width:900px){
  .alt-row__in--solo .alt-row__points{ grid-template-columns:1fr }
}

/* ==========================================================================
   32. Homepage services — highlighted panel
   The section sits between a cream band and the dark Numbers band, so it is
   lifted with a contained panel rather than another background colour.
   ========================================================================== */
.services-panel{
  position:relative;
  padding:clamp(32px,4vw,60px) clamp(24px,3vw,48px);
  background:var(--tint);
  border:1px solid rgba(217,163,54,.28);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(74,44,42,.09);
  overflow:hidden;
}
/* soft gold wash in the top-right corner */
.services-panel::before{
  content:""; position:absolute; top:-180px; right:-140px;
  width:520px; height:520px; pointer-events:none;
  background:radial-gradient(circle, rgba(217,163,54,.22), rgba(217,163,54,0) 65%);
}
.services-panel > *{ position:relative }
.services-panel .section__head{ margin-bottom:clamp(28px,3.4vw,42px) }

/* cards sit on white inside the tinted panel, so they lift off it */
.services-panel .svc{ background:#fff; border-color:rgba(217,163,54,.22) }
.services-panel .svc:hover{ border-color:var(--accent); box-shadow:0 18px 44px rgba(74,44,42,.14) }
/* gold bar across the top of each card, drawn in on hover */
.services-panel .svc::before{
  content:""; position:absolute; inset:0 auto auto 0; height:3px; width:0;
  background:var(--accent); z-index:2; transition:width .45s var(--ease);
}
.services-panel .svc{ position:relative }
.services-panel .svc:hover::before{ width:100% }

@media (max-width:720px){
  .services-panel{ padding:26px 18px; border-radius:var(--radius) }
}