/* ==========================================================================
   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(64px, 8vw, 112px);
  --space-band:     clamp(36px, 5vw, 56px);
  --space-head:     clamp(36px, 5vw, 56px);  /* 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,.float__val,.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% }

.float{
  position:absolute; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7); border-radius:18px;
  box-shadow:var(--shadow-md); padding:14px 18px;
}
.float--rating{ top:24px; left:-18px; text-align:left; animation:floaty 6s var(--ease) infinite }
.float__stars{ color:#D9A336; font-size:.75rem; letter-spacing:2px }
.float__val{ font-size:1.5rem; letter-spacing:normal; line-height:1.15 }
.float__label{ font-size:.75rem; color:var(--muted) }

.float--implant{
  bottom:26px; right:-14px; display:flex; align-items:center; gap:13px;
  animation:floaty 7s var(--ease) 1s infinite;
}
.float--implant img{ width:56px; height:44px; object-fit:contain; border-radius:10px; background:var(--tint-soft) }
.float--implant strong{ display:block; font-size:.9375rem; letter-spacing:-.02em }
.float--implant small{ font-size:.75rem; color:var(--muted) }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* ---------- 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) }
.grid--3{ grid-template-columns:repeat(3,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 }

/* 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) }
  .float--rating{ left:14px }
  .float--implant{ right:14px }
  .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) }
  .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 }
  .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 }
  .float--rating{ top:14px; left:10px; padding:11px 14px }
  .float--implant{ bottom:14px; right:10px; padding:10px 14px }
  .float--implant img{ width:44px; height:36px }
  .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 }
.alt-row__list li{
  display:flex; gap:12px; font-size:.9375rem; line-height:1.6; color:var(--muted);
}
.alt-row__list li::before{
  content:""; flex:none; width:7px; height:7px; margin-top:9px; 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(72px,9vw,128px); 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) }
}