:root { --accent: #8A8F98; --ink: #101013; --bone: #E9E9EB; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 1px; }
html { -webkit-text-size-adjust: 100%; }
img { -webkit-user-drag: none; }
body { font-family: 'Inter Tight', sans-serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* ── header ── */
#site-header { transition: background-color .5s ease, backdrop-filter .5s ease, border-color .5s ease, color .4s ease; border-bottom: 1px solid transparent; }
#site-header.is-scrolled {
  background-color: rgba(233,233,235,.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(16,16,19,.08);
  color: var(--ink);
}
#site-header.on-dark:not(.is-scrolled) { color: var(--bone); }
#site-header nav a { position: relative; }
#site-header nav a.nav-active { color: var(--accent); opacity: 1; }
#site-header nav a.nav-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--accent); }

/* ── hero ── */
.hero-img { will-change: transform; }
.hero-veil { background: linear-gradient(180deg, rgba(16,16,19,.5) 0%, rgba(16,16,19,.22) 42%, rgba(16,16,19,.68) 100%); }

/* ── reveals ────────────────────────────────────────────────────
   Deliberately none. Content used to fade in on scroll, and twice that
   machinery left whole sections stranded at opacity 0 — a stale
   ScrollTrigger measurement, then a pair of competing tweens. The
   animation was worth a fraction of a second; the failure mode was an
   invisible page. [data-reveal] attributes are left in the markup as
   hooks, but nothing hides content any more. */

/* ── treatment index rows — pure type, no image previews ── */
.cat-list { list-style: none; }
.cat-row {
  position: relative; display: grid;
  grid-template-columns: 3.5rem 1fr auto; align-items: baseline; gap: 2vw;
  padding: 1.4rem 0; border-bottom: 1px solid rgba(16,16,19,.14); cursor: pointer;
  text-decoration: none; color: inherit;
}
.cat-no { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; letter-spacing: .2em; }
.cat-name {
  font-family: 'Inter Tight', sans-serif; font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.45rem, 4.6vw, 3.3rem); line-height: 1.08; color: var(--ink);
  transition: letter-spacing .6s cubic-bezier(.33,1,.68,1), color .5s ease, transform .6s cubic-bezier(.33,1,.68,1);
}
.cat-meta { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(16,16,19,.5); }
@media (hover: hover) {
  .cat-row { transition: opacity .5s ease; }
  .cat-list:hover .cat-row:not(:hover) { opacity: .3; }
  .cat-row:hover .cat-name { letter-spacing: .05em; color: var(--accent); transform: translateX(1.1rem); }
}
@media (max-width: 767px) {
  .cat-row { grid-template-columns: 2rem 1fr auto; gap: .8rem; align-items: center; padding: 1.1rem 0; }
  .cat-meta { display: none; }
}

/* ── case studies · before & after ──────────────────────────────
   Case photos arrive as ONE composed image per case (the before and
   after already sit side by side, or stacked). So a card is a single
   frame shown at the photo's own aspect ratio — never cropped, since
   cropping a clinical result misrepresents it. Two columns keeps each
   case large enough to actually read. */
.case-grid { display: grid; gap: 2.75rem 1.75rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .case-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; } }

.case-card { border-top: 1px solid rgba(16,16,19,.15); padding-top: 1.15rem; }
.case-shot { position: relative; overflow: hidden; background: rgba(16,16,19,.055); }
.case-shot img { display: block; width: 100%; height: auto; }
/* shown only if a photo 404s, so an empty slot still reads as designed */
.case-ph {
  display: flex; align-items: center; justify-content: center; min-height: 9rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(16,16,19,.32); text-align: center; padding: .5rem;
  border: 1px dashed rgba(16,16,19,.16);
}
.case-shot img + .case-ph { display: none; }
.case-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: rgba(16,16,19,.78); color: var(--bone);
  font-family: 'IBM Plex Mono', monospace; font-size: .52rem;
  letter-spacing: .22em; text-transform: uppercase; padding: .32rem .6rem;
}
.case-meta { margin-top: .95rem; }
.case-title { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.case-note { margin-top: .3rem; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; line-height: 1.5; color: rgba(16,16,19,.55); }

/* dark-band variants */
.dark .case-card { border-top-color: rgba(233,233,235,.18); }
.dark .case-shot { background: rgba(233,233,235,.06); }
.dark .case-ph { color: rgba(233,233,235,.32); border-color: rgba(233,233,235,.18); }
.dark .case-note { color: rgba(233,233,235,.55); }
.dark .case-tag { background: rgba(233,233,235,.9); color: var(--ink); }

/* ── invisalign provider + kit imagery ── */
.invis-sign { display: block; width: 100%; height: auto; }
.invis-kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.invis-kits figure { overflow: hidden; background: rgba(233,233,235,.06); }
.invis-kits img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ── doctor portraits ──────────────────────────────────────────
   Frames drop out entirely when a doctor's photo isn't in place yet,
   so a missing portrait reads as a text-led entry rather than a hole. */
.doc-portrait { overflow: hidden; background: rgba(16,16,19,.055); max-width: 22rem; }
.doc-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }

/* ── plates (home) ── */
.plates { position: relative; height: 100svh; overflow: hidden; background: var(--ink); }
.plates-frames { position: absolute; inset: 0; }
.plate-frame { position: absolute; inset: 0; opacity: 0; }
.plate-frame:first-child { opacity: 1; }
.plate-img { width: 100%; height: 100%; background-size: cover; background-position: center; transform-origin: center; will-change: transform; }
.plates-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,16,19,.5) 0%, transparent 30%, rgba(16,16,19,.65) 100%); }
.plates-label, .plates-count {
  position: absolute; top: 5rem; z-index: 2; color: rgba(233,233,235,.55);
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .25em; text-transform: uppercase;
}
.plates-label { left: 1.25rem; } .plates-count { right: 1.25rem; }
.plates-count b { color: var(--bone); font-weight: 400; }
.plates-caps { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 2.6rem; z-index: 2; min-height: 6.5em; }
.plate-cap { position: absolute; left: 0; top: 0; right: 0; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.33,1,.68,1); }
.plate-cap.is-on { opacity: 1; transform: none; }
.cap-title { font-family: 'Inter Tight', sans-serif; font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem); line-height: 1.1; color: var(--bone); }
.cap-desc { margin-top: .6rem; max-width: 46ch; font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem; line-height: 1.55; letter-spacing: .02em; color: rgba(233,233,235,.6); }
@media (min-width: 768px) {
  .plates-label { top: 6.5rem; left: 3rem; } .plates-count { top: 6.5rem; right: 3rem; }
  .plates-caps { left: 3rem; right: 3rem; bottom: 4rem; }
}
/* The stacked gallery is now the only mode — the pinned/scrubbed
   version is retired, so this has to hold up at desktop widths too. */
.plates.is-reduced { height: auto; padding: 4.5rem 1.25rem 3rem; }
.plates.is-reduced .plates-frames { position: relative; display: flex; flex-direction: column; gap: 2.5rem; }
.plates.is-reduced .plate-frame { position: relative; opacity: 1; height: auto; }
.plates.is-reduced .plate-img { height: 48svh; }
.plates.is-reduced .plates-scrim { display: none; }
.plates.is-reduced .plates-label { position: static; display: block; margin-bottom: 1.4rem; }
.plates.is-reduced .plate-cap { position: static; opacity: 1; transform: none; margin-top: 1rem; }
@media (min-width: 768px) {
  .plates.is-reduced { padding: 7rem 3rem 5rem; }
  .plates.is-reduced .plates-frames { gap: 4.5rem; }
  .plates.is-reduced .plate-img { height: 78svh; }
  .plates.is-reduced .plates-label { margin-bottom: 2.5rem; }
  .plates.is-reduced .plate-cap { margin-top: 1.6rem; }
}

/* ── cards ── */
.review-card { border-top: 1px solid rgba(16,16,19,.15); padding-top: 1.4rem; }
.review-stars { color: var(--accent); letter-spacing: .18em; font-size: .78rem; }
.info-card { border-top: 1px solid rgba(16,16,19,.15); padding-top: 1.4rem; }
.dark .info-card, .dark.review-card { border-top-color: rgba(233,233,235,.15); }

/* ── footer ── */
.cta-underline { position: absolute; left: 0; right: 0; bottom: .04em; height: .05em;
  background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.cta-word { position: relative; white-space: nowrap; }
.wordmark-wrap { overflow: hidden; }

/* subpage hero band */
.page-hero { padding-top: 7.5rem; }
@media (min-width: 768px) { .page-hero { padding-top: 11rem; } }