/* Vision Dental Laboratory: specimen plates under daylight.
   Light pages on a cool daylight ground; the one dark room is the gallery, where the lights go
   down to photograph the work. One accent: their indigo. Type: Literata, Red Hat Text, Red Hat Mono. */

:root {
  --daylight: #EEF0F3;
  --white: #FFFFFF;
  --ink: #17142B;
  --indigo: #2C2566;
  --indigo-deep: #1F1950;
  --lens: #433A71;
  --muted: #55526A;
  --darkroom: #0E0C1B;
  --darkroom-2: #17142B;
  --porcelain: #E9DFC9;
  --mist: #B8B5CB;
  --rule: #C6C6C8;
  --rule-soft: #D9DBE1;

  --f-display: 'Literata', Georgia, 'Times New Roman', serif;
  --f-body: 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gut: clamp(20px, 4.4vw, 72px);
  --max: 1360px;
  --head-h: 104px;

  --sa-accent: #2C2566;
  --sa-accent-ink: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--daylight);
  color: var(--ink);
  font: 400 18px/1.62 var(--f-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--lens); outline-offset: 3px; border-radius: 2px; }
.is-dark :focus-visible, .foot :focus-visible, .awards :focus-visible { outline-color: var(--porcelain); }
p { margin: 0 0 1em; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-optical-sizing: auto;
  text-wrap: balance;
  margin: 0;
  color: inherit;
}
h1 { font-size: clamp(44px, 6.4vw, 104px); line-height: 0.99; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 3.5vw, 56px); line-height: 1.04; letter-spacing: -0.022em; }
h3 { font-size: clamp(21px, 1.6vw, 25px); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.lede { font-size: clamp(19px, 1.35vw, 21px); line-height: 1.55; }
.mono { font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.01em; }

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--indigo); color: #fff; padding: 12px 16px; border-radius: 3px;
}
.skip:focus { top: 16px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 3px;
  font: 500 17px/1.1 var(--f-body); letter-spacing: 0.004em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--indigo); color: #fff; }
.btn--ink:hover { background: var(--indigo-deep); }
.btn--plain { background: var(--white); color: var(--ink); border-color: var(--rule); }
.btn--plain:hover { border-color: var(--ink); }
.btn--porcelain { background: var(--porcelain); color: var(--ink); }
.btn--porcelain:hover { background: #F6F0E2; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.tel-link { font: 500 18px/1 var(--f-body); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 6px; }
.tel-link:hover { text-decoration-color: var(--ink); }
.more { font-weight: 500; }

/* ------------------------------------------------------------------ masthead */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gut);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.page-inner .masthead.is-scrolled, .page-home .masthead.is-solid {
  background: rgba(238, 240, 243, 0.94);
  box-shadow: 0 1px 0 var(--rule-soft);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
.brand { display: block; position: relative; width: clamp(176px, 18vw, 262px); line-height: 0; }
.brand__logo { width: 100%; height: auto; transition: opacity .45s ease; }
.brand__logo--light { position: absolute; inset: 0; opacity: 0; }
.masthead__actions { display: flex; align-items: center; gap: 12px; }
.masthead__tel {
  font: 500 17px/1 var(--f-body); color: var(--ink); text-decoration: none;
  padding: 16px 12px; margin-right: 4px; transition: color .35s ease;
}
.masthead__tel:hover { text-decoration: underline; }
.masthead .btn { min-height: 48px; padding: 0 20px; }
body.is-dark .brand__logo--light { opacity: 1; }
body.is-dark .brand__logo--ink { opacity: 0; }
body.is-dark .masthead__tel { color: var(--porcelain); }
body.is-dark .masthead .btn--ink { background: var(--porcelain); color: var(--ink); }
body.is-dark .masthead .btn--plain { background: transparent; color: var(--porcelain); border-color: rgba(233, 223, 201, .5); }

/* ------------------------------------------------------------------ menu */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--daylight);
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--head-h) + 24px) var(--gut) 48px;
}
.menu__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; }
.menu__title { font: 500 15px/1 var(--f-mono); margin: 0 0 18px; }
.menu__title a { color: var(--muted); text-decoration: none; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list a {
  display: inline-block; padding: 6px 0;
  font: 400 clamp(32px, 4.2vw, 56px)/1.12 var(--f-display); letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.menu__list--small a { font-size: clamp(24px, 2.4vw, 32px); }
.menu__list a:hover, .menu__list a[aria-current="page"] { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu__contact { margin-top: 40px; color: var(--muted); line-height: 1.8; }
body.menu-open { overflow: hidden; }
body.menu-open.is-dark .brand__logo--light { opacity: 0; }
body.menu-open.is-dark .brand__logo--ink { opacity: 1; }
body.menu-open.is-dark .masthead__tel { color: var(--ink); }

/* ------------------------------------------------------------------ the story (home) */
.story { position: relative; }
.stage {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; overflow: hidden;
  background: var(--daylight);
  --vl: 0; --vb: 1; --dk: 0;
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.stage.is-live canvas { opacity: 1; }
.stage__still { position: absolute; inset: 0; margin: 0; }
.stage__still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage.is-live .stage__still { opacity: 0; transition: opacity .9s ease .2s; }
.stage__veil { position: absolute; inset: 0; pointer-events: none; }
.stage__veil::before, .stage__veil::after { content: ""; position: absolute; inset: 0; }
.stage__veil::before {
  opacity: calc(var(--vl) * (1 - var(--dk)));
  background: linear-gradient(90deg, rgba(238,240,243,.94) 0%, rgba(238,240,243,.82) 30%, rgba(238,240,243,0) 56%);
}
.stage__veil::after {
  opacity: var(--vb);
  background: linear-gradient(0deg, rgba(238,240,243,.9) 0%, rgba(238,240,243,.55) 24%, rgba(238,240,243,0) 46%);
}
.work-caption {
  position: absolute; left: var(--gut); bottom: 44px; margin: 0; max-width: 560px;
  color: var(--porcelain); opacity: 0; transition: opacity .5s ease;
}
.work-caption__count { display: block; font: 500 14px/1 var(--f-mono); color: var(--mist); margin-bottom: 12px; }
.work-caption__title { display: block; font: 400 clamp(22px, 2vw, 30px)/1.25 var(--f-display); letter-spacing: -0.01em; }
.work-caption__note { display: block; margin-top: 8px; font: 400 15px/1.5 var(--f-mono); color: var(--mist); }
.stage.show-caption .work-caption { opacity: 1; }
.work-caption.is-swap { opacity: 0 !important; transition-duration: .15s; }

.beats { position: relative; z-index: 1; margin-top: -100vh; }
.beat { position: relative; padding: 0 var(--gut); }
.beat__text { max-width: 470px; padding: 18vh 0 14vh; }
.beat__text h2 { margin-bottom: 22px; }
.beat__text p { color: var(--ink); }
.beat--hero .beat__inner {
  min-height: 100vh; max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end;
  gap: 32px 64px; padding: calc(var(--head-h) + 24px) 0 64px;
}
.beat--hero h1 { max-width: 11.5ch; }
.hero__side { max-width: 400px; justify-self: end; padding-bottom: 8px; }
.hero__side p { font-size: 19px; }
.hero__side .actions { margin-top: 20px; }

/* 3D on: beats become long, words hold while the scene plays */
.has-3d .beat { height: 150vh; }
.has-3d .beat--hero { height: 118vh; }
.has-3d .beat--hero .beat__inner { position: sticky; top: 0; height: 100vh; min-height: 0; }
.has-3d .beat__text { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--head-h) 0 40px; }
.has-3d .beat__text, .has-3d .beat--hero .beat__inner > * { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.has-3d .beat:not(.is-live) .beat__text,
.has-3d .beat--hero:not(.is-live) .beat__inner > * { opacity: 0; transform: translateY(14px); pointer-events: none; }
.has-3d .beat--work { height: calc(var(--plates, 10) * 62vh + 60vh); }
.has-3d .beat--work .beat__text { justify-content: flex-start; padding-top: calc(var(--head-h) + 12vh); }
.has-3d .beat--work .beat__text h2, .has-3d .beat--work .beat__text p { color: var(--porcelain); }
.has-3d .beat--work .beat__text a { color: var(--porcelain); }
.has-3d .work__plates {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* no 3D (no JS, no WebGL, reduced motion): a calm printed page over one still of the scene */
html:not(.has-3d) .stage { position: relative; }
html:not(.has-3d) .beat--hero .beat__inner { min-height: 100vh; }
html:not(.has-3d) .story .stage__veil::after { opacity: 1; }
html:not(.has-3d) .beat__text { padding: 72px 0 24px; max-width: 640px; }
html:not(.has-3d) .work-caption { display: none; }
html:not(.has-3d) .beat--work { background: var(--darkroom); color: var(--porcelain); margin: 64px 0 0; padding: 24px var(--gut) 96px; }
html:not(.has-3d) .beat--work a { color: var(--porcelain); }
.work__plates { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 36px 28px; }
.work__plates figure { margin: 0; }
.work__plates img { display: block; width: 100%; height: auto; }
.work__plates figcaption { margin-top: 12px; font: 400 15px/1.5 var(--f-mono); color: var(--mist); }

/* ------------------------------------------------------------------ sections after the story */
.section { padding: clamp(88px, 11vw, 160px) var(--gut); }
.section__inner { max-width: var(--max); margin: 0 auto; }
.section__head { max-width: 760px; margin-bottom: 56px; }
.section__head h2 { margin-bottom: 20px; }

.awards { background: var(--darkroom); color: var(--porcelain); }
.awards__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.awards h2 { margin-bottom: 48px; }
.awards__list { list-style: none; margin: 0; padding: 0; }
.awards__list li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 24px; padding: 30px 0; border-top: 1px solid rgba(233, 223, 201, .18); }
.awards__list li:last-child { border-bottom: 1px solid rgba(233, 223, 201, .18); }
.awards__year { font: 400 44px/1 var(--f-display); letter-spacing: -0.02em; color: var(--porcelain); font-variant-numeric: lining-nums; }
.awards__list h3 { margin-bottom: 8px; }
.awards__list p { color: var(--mist); margin: 0; font-size: 17px; }
.awards a:not(.btn) { color: var(--porcelain); }
.awards__photo { margin: 8px 0 0; }
.awards__photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.awards__photo figcaption, .plate--dark figcaption { margin-top: 14px; font: 400 15px/1.5 var(--f-mono); color: var(--mist); }
.awards .actions { margin-top: 40px; }

.patients__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.patients h3 { margin-bottom: 14px; }
.steps { list-style: none; counter-reset: s; margin: 24px 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 18px 0 18px 64px; border-top: 1px solid var(--rule-soft); }
.steps li:last-child { border-bottom: 1px solid var(--rule-soft); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 12px;
  font: 400 34px/1 var(--f-display); color: var(--indigo);
}

.proof { background: var(--white); }
.proof__top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: end; margin-bottom: 56px; }
.score { margin: 0; display: flex; align-items: baseline; gap: 18px; }
.score__num { font: 400 clamp(96px, 11vw, 168px)/0.85 var(--f-display); letter-spacing: -0.04em; color: var(--ink); }
.score__of { font: 500 16px/1.4 var(--f-mono); color: var(--muted); }
.stars { color: var(--indigo); letter-spacing: 2px; font-size: 16px; white-space: nowrap; }
.wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); }
.wall li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; align-content: start; padding: 18px 20px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.wall__mono { grid-row: span 3; align-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--daylight); color: var(--indigo); font: 500 16px/1 var(--f-display); }
.wall__name { font-weight: 500; font-size: 17px; line-height: 1.3; }
.wall__date { font: 400 14px/1.3 var(--f-mono); color: var(--muted); }
.wall .stars { font-size: 14px; }
.wall__reply { grid-column: 1 / -1; margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); padding: 10px 12px; background: var(--daylight); border-radius: 2px; }
.wall__reply span { display: block; font: 500 14px/1.3 var(--f-mono); color: var(--indigo); margin-bottom: 2px; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 64px; }
.quote { margin: 0; padding: 28px 28px 24px; background: var(--daylight); border-radius: 2px; display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 18px; }
.quote blockquote p { font-size: 17px; line-height: 1.6; }
.quote .quote__title { font: 400 22px/1.3 var(--f-display); letter-spacing: -0.01em; margin-bottom: 12px; }
.quote figcaption { margin-top: auto; font-size: 15px; }
.quote__name { font-weight: 500; margin-right: 8px; }
.quote__meta { display: block; margin-top: 6px; font: 400 14px/1.4 var(--f-mono); color: var(--muted); }
.quote--clamp blockquote { position: relative; }
.quote--clamp.is-clamped blockquote { max-height: 16.5em; overflow: hidden; }
.quote--clamp.is-clamped blockquote::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(238,240,243,0), var(--daylight)); }
.read-more { margin: 0 0 16px; padding: 10px 0; background: none; border: 0; font: 500 16px/1 var(--f-body); color: var(--indigo); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; align-self: flex-start; min-height: 44px; }
.proof__links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 40px; }

.visit__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.map { position: relative; min-height: 420px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.02); }
.visit address { font-size: 20px; line-height: 1.6; margin: 20px 0 24px; }
.visit dl { margin: 0 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.visit dt { font: 500 14px/1.9 var(--f-mono); color: var(--muted); }
.visit dd { margin: 0; }

/* ------------------------------------------------------------------ footer + talkbar */
.foot { background: var(--darkroom); color: var(--porcelain); padding: 96px var(--gut) 40px; }
.foot__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.foot__brand img { width: 240px; height: auto; margin-bottom: 20px; }
.foot__brand p { color: var(--mist); font-size: 16px; max-width: 34ch; }
.foot h2 { font: 500 15px/1.3 var(--f-mono); color: var(--mist); margin: 0 0 16px; letter-spacing: 0.01em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 8px; }
.foot a { color: var(--porcelain); text-decoration: none; font-size: 16px; }
.foot a:hover { text-decoration: underline; }
.foot address, .foot p { font-size: 16px; color: var(--mist); }
.foot address { margin-bottom: 12px; line-height: 1.6; }
.foot__rating a { font: 500 15px/1 var(--f-mono); }
.foot__legal { max-width: var(--max); margin: 64px auto 0; padding-top: 24px; border-top: 1px solid rgba(233,223,201,.16); font-size: 13px; color: var(--mist); display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot__legal a { font-size: 13px; color: var(--mist); text-decoration: underline; }
.talkbar { display: none; }

/* ------------------------------------------------------------------ inner pages */
.crumb { max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: calc(var(--head-h) + 24px) var(--gut) 0; font: 400 14px/1.4 var(--f-mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; }
.crumb a { color: var(--muted); }
.crumb [aria-current] { color: var(--ink); }
.page-head { max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 48px var(--gut) 72px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px 72px; align-items: end; }
.page-head h1 { font-size: clamp(42px, 5.6vw, 88px); margin-bottom: 26px; }
.page-head .lede { max-width: 60ch; margin: 0; }
.page-head__art { margin: 0; justify-self: end; }
.page-head__art img { display: block; width: auto; max-height: 360px; }
.page-head--plate .page-head__art img { max-height: none; width: 100%; max-width: 480px; }
.band { padding: clamp(64px, 8vw, 112px) var(--gut); }
.band--white { background: var(--white); }
.band--dark { background: var(--darkroom); color: var(--porcelain); }
.band--dark a:not(.btn) { color: var(--porcelain); }
.band--dark p { color: var(--mist); }
.band__inner { max-width: var(--max); margin: 0 auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split > div > h2, .split > h2 { margin-bottom: 20px; }
.prose { max-width: 66ch; }
.prose h2 { margin: 0 0 24px; }
.prose h3 { margin: 40px 0 12px; }
.prose ul { padding-left: 1.1em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--indigo); }
.aside-note { font: 400 15px/1.55 var(--f-mono); color: var(--muted); }

.plate { margin: 0; background: var(--white); padding: 12px 12px 16px; border: 1px solid var(--rule-soft); border-radius: 2px; }
.plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--darkroom); }
.plate figcaption { margin-top: 12px; font: 400 14px/1.5 var(--f-mono); color: var(--muted); }
.plate__case { color: var(--indigo); font-weight: 500; margin-right: 6px; }
.plate__note { display: block; color: var(--muted); }
.plate--dark { background: transparent; border: 0; padding: 0; }
.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; align-items: start; }
.plates--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plates--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cases { display: grid; gap: 88px; }
.case { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 32px; border-top: 1px solid var(--rule); }
.case h2 { font-size: clamp(26px, 2.4vw, 36px); margin-bottom: 12px; }
.case__meta { font: 400 14px/1.5 var(--f-mono); color: var(--muted); }
.case .plates { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.case .plate { padding: 8px 8px 10px; }
.case .plate figcaption { font-size: 14px; margin-top: 8px; }
.plate button { all: unset; display: block; cursor: zoom-in; width: 100%; }
.plate button:focus-visible { outline: 3px solid var(--lens); outline-offset: 3px; }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font: 400 22px/1.35 var(--f-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 18px; font: 400 28px/1 var(--f-body); color: var(--indigo); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 24px; max-width: 66ch; }

.checklist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule-soft); }
.checklist li { padding: 16px 0 16px 36px; border-bottom: 1px solid var(--rule-soft); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 27px; width: 12px; height: 1px; background: var(--indigo); }

.tabs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.service-card { display: grid; grid-template-rows: auto 1fr auto; background: var(--white); border: 1px solid var(--rule-soft); border-radius: 2px; padding: 28px; text-decoration: none; color: var(--ink); transition: border-color .2s ease, transform .3s ease; }
.service-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.service-card img { width: auto; height: 190px; margin: 0 auto 20px; display: block; }
.service-card h2 { font-size: 28px; margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: 16px; }
.service-card .more { color: var(--indigo); }

.form { display: grid; gap: 18px; max-width: 560px; }
.form label { display: grid; gap: 8px; font: 500 16px/1.3 var(--f-body); }
.form input, .form textarea {
  font: 400 18px/1.4 var(--f-body); color: var(--ink);
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
  padding: 14px 16px; min-height: 52px; width: 100%;
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--lens); outline-offset: 1px; border-color: var(--lens); }
.form__status { min-height: 1.5em; margin: 0; font-weight: 500; }
.form__status.is-err { color: #9B1C31; }
.form__status.is-ok { color: var(--indigo); }

.credentials { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; margin-top: 32px; }
.credentials img { height: 64px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .8; mix-blend-mode: multiply; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 980px); width: 100%; }
.lightbox::backdrop { background: rgba(14, 12, 27, .92); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: var(--darkroom); }
.lightbox figcaption { color: var(--porcelain); font: 400 16px/1.5 var(--f-mono); margin-top: 14px; }
.lightbox__bar { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 960px) {
  :root { --head-h: 76px; }
  body { font-size: 17px; }
  .masthead__tel, .masthead__ask { display: none; }
  .masthead .btn { min-height: 44px; padding: 0 18px; }
  .menu__inner { grid-template-columns: 1fr; gap: 32px; }
  .beat--hero .beat__inner { grid-template-columns: 1fr; align-content: end; gap: 20px; padding-bottom: 104px; }
  .hero__side { justify-self: start; }
  .beat--hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .beat__text { max-width: none; }
  .has-3d .beat__text { justify-content: flex-end; padding-bottom: 104px; }
  .has-3d .beat--work .beat__text { padding-top: calc(var(--head-h) + 20px); }
  .work-caption { bottom: 96px; right: var(--gut); }
  .awards__inner, .patients__grid, .proof__top, .visit__grid, .split, .split--wide, .page-head, .case { grid-template-columns: 1fr; gap: 40px; }
  .page-head__art { justify-self: start; }
  .page-head__art img { max-height: 220px; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: 1fr; }
  .tabs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .talkbar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    padding: 10px 88px calc(10px + env(safe-area-inset-bottom)) 12px;
    background: rgba(238, 240, 243, .96); box-shadow: 0 -1px 0 var(--rule-soft);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .talkbar .btn { flex: 1 1 0; min-height: 48px; padding: 0 12px; font-size: 16px; }
  body { padding-bottom: 72px; }
  .stage__veil::before { display: none; }
  .stage__veil::after { background: linear-gradient(0deg, rgba(238,240,243,.96) 0%, rgba(238,240,243,.9) 40%, rgba(238,240,243,.55) 52%, rgba(238,240,243,0) 64%); }
}
@media (max-width: 560px) {
  .wall { grid-template-columns: 1fr; }
  .tabs-row { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr; }
  .plates--3, .plates--2 { grid-template-columns: 1fr; }
  .awards__list li { grid-template-columns: 1fr; gap: 8px; }
  .score__num { font-size: 96px; }
  .map { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
.proof__sub { margin: 72px 0 0; font-size: clamp(21px, 1.6vw, 25px); }
.quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
.quotes--single { grid-template-columns: 1fr; margin-top: 32px; }
@media (max-width: 960px) { .quotes--2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ inner page components */
.page-head .score { justify-self: end; }
.page-head__jump { justify-self: end; max-width: 360px; }
.page-head__jump p { margin-bottom: 6px; }
.page-head > .actions { justify-self: end; margin-top: 0; }
.h-gap { margin-top: 48px !important; }
.quote--owner { background: transparent; padding: 0 0 0 28px; border-left: 2px solid var(--indigo); margin: 0 0 32px; border-radius: 0; }
.quote--owner blockquote p { font: 400 clamp(20px, 1.6vw, 24px)/1.45 var(--f-display); letter-spacing: -0.01em; }
.quote--owner blockquote { margin: 0; }
.quote--owner blockquote p:last-child { margin-bottom: 0; }
.quote--owner figcaption { margin-top: 14px; }
.band--dark .quote--owner { border-left-color: var(--porcelain); }
.faq--dark, .faq--dark details { border-color: rgba(233, 223, 201, .25); }
.faq--dark summary::after { color: var(--porcelain); }
.contact-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 24px 0 8px; }
.contact-list dt { font: 500 14px/1.9 var(--f-mono); color: var(--muted); }
.contact-list dd { margin: 0; }
.big-address { font-size: 22px; line-height: 1.55; margin: 16px 0 8px; }
.map--wide { min-height: 460px; }
.timeline { list-style: none; margin: 32px 0 20px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline span { font: 400 30px/1.1 var(--f-display); color: var(--indigo); }
.timeline p { margin: 0; }
.news { display: grid; gap: 72px; }
.news__item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 48px; padding-top: 32px; border-top: 1px solid var(--rule); }
.news__year { font: 400 clamp(44px, 4vw, 64px)/1 var(--f-display); letter-spacing: -0.02em; color: var(--indigo); margin: 0; }
.news__item h2 { margin-bottom: 20px; }
.news .plates--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin: 24px 0; }
.news .plates--3 img { aspect-ratio: auto; object-fit: contain; }
@media (max-width: 960px) {
  .page-head .score, .page-head__jump, .page-head > .actions { justify-self: start; }
  .news__item { grid-template-columns: 1fr; gap: 12px; }
  .timeline li { grid-template-columns: 64px minmax(0, 1fr); }
}
main > .band--dark:last-child { border-bottom: 1px solid rgba(233, 223, 201, .14); }
@media (max-width: 560px) {
  .case .plates, .plates--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .case .plate { padding: 6px 6px 8px; }
  .case .plate figcaption { font-size: 14px; }
}