/* Incisor - dental studio theme
   One idea: BEFORE / AFTER. A thin vertical line with a round handle is the comparison slider on every case,
   the same line wipes every block in, and the page itself whitens from shade A3 to BL1 as you scroll.
   All colours, fonts and the radius live in :root below. */

:root {
  /* colours */
  --shade-start: #dfe4d8;   /* top of the page, shade A3 warmth */
  --shade-end: #f4f7f2;     /* bottom of the page, shade BL1 */
  --ink: #14261f;
  --muted: #5d6b64;
  --line: #ccd5c9;
  --accent: #2f6b55;
  --on-photo: #ffffff;
  /* fonts */
  --f-head: "Bricolage Grotesque", system-ui, sans-serif;
  --f-text: "Figtree", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --head-weight: 500;
  /* shape and motion */
  --radius: 0;
  --wipe: 1s;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* starts at once, for hover */
  --gutter: clamp(20px, 4vw, 56px);
  --p: 0; /* scroll progress 0..1, set by main.js */
  --bg: color-mix(in oklab, var(--shade-end) calc(var(--p) * 100%), var(--shade-start));
  /* the "before" look: what every block looks like until the line has crossed it */
  --before-ink: #b9a578;          /* warm, a bit dull text */
  --before-ink-photo: #ead39a;    /* the hero title left of the line */
  --before-photo: sepia(.5) saturate(.8) brightness(.9);
  --pass: 1.15s;
  /* soft porcelain buttons: made of the page colour, shaped by two shadows (light top left, dark bottom right) */
  --soft-d: 6px;
  --soft-light: rgba(255, 255, 255, .92);
  --soft-dark: color-mix(in oklab, var(--bg), #2c4236 30%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: #fff; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1680px; margin-left: auto; margin-right: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.label { font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* buttons: soft porcelain. Every button stands out of the page on two shadows and is pushed in when pressed.
   The main one (.btn) is filled with the accent so it still leads; .btn-ghost is made of the page colour itself.
   On a photo the shadows have nothing to sit on, so there the main one is a white porcelain pill and the ghost is frosted glass. */
.btn, .btn-ghost, .menu-btn {
  --raise: calc(var(--soft-d) * -1) calc(var(--soft-d) * -1) calc(var(--soft-d) * 2.2) var(--soft-light),
           var(--soft-d) var(--soft-d) calc(var(--soft-d) * 2.2) var(--soft-dark);
  --raise-hi: calc(var(--soft-d) * -1.5) calc(var(--soft-d) * -1.5) calc(var(--soft-d) * 3) var(--soft-light),
              calc(var(--soft-d) * 1.5) calc(var(--soft-d) * 1.5) calc(var(--soft-d) * 3) var(--soft-dark);
  --press: inset calc(var(--soft-d) * .6) calc(var(--soft-d) * .6) calc(var(--soft-d) * 1.2) var(--soft-dark),
           inset calc(var(--soft-d) * -.6) calc(var(--soft-d) * -.6) calc(var(--soft-d) * 1.2) var(--soft-light);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px;
  border: 0; border-radius: 999px; text-decoration: none; cursor: pointer; font: 500 15px/1 var(--f-text); letter-spacing: .01em;
  color: #fff; background: linear-gradient(145deg, color-mix(in oklab, var(--accent), #fff 8%), color-mix(in oklab, var(--accent), #000 4%));
  box-shadow: var(--raise);
  transition: box-shadow .4s var(--ease-out), color .3s, background .3s;
}
.btn:hover { box-shadow: var(--raise-hi); }
.btn:active { box-shadow: inset 3px 3px 7px rgba(0, 0, 0, .28), inset -3px -3px 7px rgba(255, 255, 255, .12); transition-duration: .12s; }
.btn-small { --soft-d: 4px; min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn-ghost, .menu-btn {
  color: var(--ink);
  background: linear-gradient(145deg, color-mix(in oklab, var(--bg), #fff 45%), color-mix(in oklab, var(--bg), #000 3%));
  box-shadow: var(--raise);
}
.btn-ghost:hover, .menu-btn:hover { color: var(--accent); box-shadow: var(--raise-hi); }
.btn-ghost:active, .menu-btn:active { box-shadow: var(--press); }
.link { font: 500 15px/1 var(--f-text); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.link:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* header */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 32px;
  padding: 16px var(--gutter); color: var(--on-photo); transition: background .4s, color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.header.is-solid, .no-hero .header { background: var(--bg); color: var(--ink); border-bottom-color: var(--line); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: var(--head-weight) 26px/1 var(--f-head); text-decoration: none; letter-spacing: -.01em; }
.logo-mark { width: 12px; height: 22px; border: 1.5px solid currentColor; border-radius: 0 0 6px 6px; }
.nav-main { display: flex; gap: 28px; margin-left: auto; }
.nav-main a { text-decoration: none; font-size: 15px; }
.nav-main a:hover, .nav-main a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.menu-btn { --soft-d: 4px; display: none; margin-left: auto; border: 0; font: 500 14px/1 var(--f-text); min-height: 42px; padding: 0 18px; cursor: pointer; border-radius: 999px; transition: box-shadow .4s var(--ease-out), color .3s, background .3s; }
/* on the hero photo the header buttons are frosted glass */
:root:not(.no-hero):not(.menu-open) .header:not(.is-solid) :is(.btn, .menu-btn) {
  color: var(--on-photo); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), inset -1px -1px 0 rgba(0, 0, 0, .12), 0 6px 20px rgba(0, 0, 0, .12);
}
:root:not(.no-hero):not(.menu-open) .header:not(.is-solid) :is(.btn, .menu-btn):hover { background: rgba(255, 255, 255, .26); }
.menu { position: fixed; inset: 0; z-index: 49; background: var(--bg); padding: 110px var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font: var(--head-weight) clamp(36px, 9vw, 64px)/1.15 var(--f-head); text-decoration: none; }
.menu-foot { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 15px; }
.menu-open .header { background: var(--bg); color: var(--ink); }

/* BEFORE / AFTER slider: the after photo below, the before photo on top clipped at --pos */
.ba { position: relative; overflow: hidden; --pos: 50%; background: var(--line); border-radius: var(--radius); touch-action: pan-y; }
.ba .ba-img { width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--on-photo); pointer-events: none; }
.ba-handle {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--on-photo); box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.ba-handle::before, .ba-handle::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid var(--ink); border-width: 0 0 1.5px 1.5px; }
.ba-handle::before { left: 12px; transform: rotate(45deg); }
.ba-handle::after { right: 12px; transform: rotate(-135deg); }
.ba-tag { position: absolute; top: 16px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-photo); padding: 7px 9px; background: rgba(21, 24, 28, .45); pointer-events: none; transition: opacity .3s; }
.ba-tag-before { left: 16px; }
.ba-tag-after { right: 16px; }
.ba { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ba img { -webkit-user-drag: none; pointer-events: none; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ba:has(.ba-range:focus-visible) .ba-handle { outline: 2px solid var(--accent); outline-offset: 3px; }

/* mail links copy the address too */
a.copied::after { content: "Copied"; margin-left: 8px; font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }

/* hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; color: var(--on-photo); }
.ba-hero { position: absolute; inset: 0; }
.ba-hero .ba-img { object-position: var(--focus, 50% 50%); }
/* the smile stays in the middle: the title sits at the top, the intro and buttons at the bottom, each on its own soft shade */
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: 46%; background: linear-gradient(rgba(12, 14, 17, .55), transparent); }
.hero::after { bottom: 0; height: 32%; background: linear-gradient(transparent, rgba(12, 14, 17, .6)); }
.ba-hero .ba-tag { top: auto; bottom: 30%; }
.hero-top, .hero-foot { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.hero-top { top: 0; padding-top: clamp(96px, 15vh, 150px); }
.hero-foot a { pointer-events: auto; }
.hero-kicker { color: rgba(255, 255, 255, .8); margin-bottom: 14px; }
.hero-title { font: var(--head-weight) clamp(46px, 7.4vw, 136px)/.95 var(--f-head); letter-spacing: -.03em; max-width: 14ch; }
.hero-foot { bottom: 0; padding-bottom: clamp(24px, 5vh, 52px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hero-intro { max-width: 46ch; font-size: 17px; color: rgba(255, 255, 255, .88); }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn {
  color: var(--ink); background: linear-gradient(160deg, #ffffff 30%, #e6ebe3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.hero .btn:hover { color: var(--accent); box-shadow: 0 14px 38px rgba(0, 0, 0, .32); }
.hero .btn:active { box-shadow: 0 4px 12px rgba(0, 0, 0, .25), inset 2px 3px 8px rgba(20, 38, 31, .22); }
.hero .btn-ghost {
  color: var(--on-photo); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), inset -1px -1px 0 rgba(0, 0, 0, .12), 0 10px 30px rgba(0, 0, 0, .18);
}
.hero .btn-ghost:hover { color: var(--on-photo); background: rgba(255, 255, 255, .26); }
.hero .btn-ghost:active { box-shadow: inset 2px 3px 8px rgba(0, 0, 0, .25); }

/* sections */
section { padding-top: clamp(80px, 12vw, 180px); }
.sec-head { margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head .label { margin-bottom: 16px; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sec-title { font: var(--head-weight) clamp(34px, 4.4vw, 72px)/1.04 var(--f-head); letter-spacing: -.02em; max-width: 18ch; }

.intro { display: grid; grid-template-columns: 1fr 3fr; gap: 24px 48px; }
.statement { font: var(--head-weight) clamp(28px, 3.4vw, 56px)/1.15 var(--f-head); letter-spacing: -.015em; max-width: 26ch; }
.numbers { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(32px, 5vw, 72px); border-top: 1px solid var(--line); }
.numbers li { padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.num { font: var(--head-weight) clamp(40px, 5vw, 80px)/1 var(--f-head); letter-spacing: -.02em; }
.num-label { color: var(--muted); font-size: 15px; max-width: 22ch; }

/* treatments: rows on the left, one photo frame on the right that shows the row you point at */
.treat-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.treat-list { border-bottom: 1px solid var(--line); }
.treat-row {
  display: grid; grid-template-columns: 48px 1fr 1.3fr auto; gap: 8px 24px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--line); text-decoration: none; transition: color .45s var(--ease-out);
}
.treat-no, .treat-from { font: 400 13px/1 var(--f-mono); color: var(--muted); }
.treat-name { font: var(--head-weight) clamp(24px, 2.3vw, 36px)/1.1 var(--f-head); transition: transform .45s var(--ease-out); }
.treat-line { color: var(--muted); font-size: 15px; }
.treat-row.is-on { color: var(--accent); }
.treat-row.is-on .treat-name { transform: translateX(12px); }
.treat-frame { position: sticky; top: 96px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.treat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); }
/* only the incoming photo wipes in, the previous one waits underneath, the rest hide at once */
.treat-photo.was-on { clip-path: inset(0 0 0 0); z-index: 1; }
.treat-photo.is-on { clip-path: inset(0 0 0 0); z-index: 2; transition: clip-path .45s var(--ease-out); }

/* cases */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); }
.case .ba { aspect-ratio: 4 / 5; }
.case-name { font: var(--head-weight) clamp(22px, 1.8vw, 28px)/1.2 var(--f-head); margin-top: 18px; }
.case-meta { display: flex; gap: 18px; margin-top: 6px; font: 400 13px/1.4 var(--f-mono); color: var(--muted); }

/* shade guide */
.shade { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.shade-copy .label { margin-bottom: 16px; }
.shade-text { margin-top: 24px; max-width: 44ch; color: var(--muted); }
.shade-tabs { display: flex; gap: clamp(8px, 1.4vw, 20px); justify-content: flex-end; }
.shade-tab { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.shade-swatch {
  display: block; width: clamp(44px, 5.5vw, 84px); height: clamp(120px, 15vw, 220px); background: var(--c);
  border: 1px solid var(--line); border-radius: 4px 4px 40px 40px; transition: transform .5s var(--ease), box-shadow .5s;
}
.shade-tab-code { font: 500 13px/1 var(--f-mono); color: var(--muted); transition: color .3s; }
.shade-tab.is-on .shade-swatch { transform: translateY(-14px); box-shadow: 0 14px 30px rgba(21, 24, 28, .12); }
.shade-tab.is-on .shade-tab-code { color: var(--accent); }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); }
.pic { position: relative; overflow: hidden; background: var(--line); }
.person .pic { aspect-ratio: 3 / 4; }
.pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.person-name { font: var(--head-weight) clamp(20px, 1.6vw, 26px)/1.2 var(--f-head); margin-top: 16px; }
.person-role { color: var(--muted); font-size: 15px; }

/* first visit */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.visit-pic { aspect-ratio: 4 / 5; }
.visit-copy .label { margin-bottom: 16px; }
.steps { margin: 36px 0 40px; border-bottom: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.step-no { font: 400 13px/1.6 var(--f-mono); color: var(--muted); grid-row: span 2; }
.step-name { font-weight: 600; }
.step-line { color: var(--muted); font-size: 15px; }

/* quote */
.quote-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
.quote-pic { aspect-ratio: 4 / 5; grid-row: span 2; }
.quote-text { font: var(--head-weight) clamp(28px, 3.2vw, 52px)/1.15 var(--f-head); letter-spacing: -.015em; }
.quote-who { display: flex; gap: 18px; font: 400 13px/1.4 var(--f-mono); color: var(--muted); }

/* ---------- inner pages ---------- */
.page-head { padding-top: clamp(140px, 16vw, 230px); }
.page-title { font: var(--head-weight) clamp(44px, 6.4vw, 112px)/1 var(--f-head); letter-spacing: -.03em; max-width: 15ch; }
.page-intro { max-width: 54ch; margin-top: 28px; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }
.page-head .label, .tr-head .label, .book-side .label { margin-bottom: 18px; }
.label a { text-decoration: none; }
.label a:hover { text-decoration: underline; }

/* facts: small mono key, value in the heading font */
.facts { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 28px 0 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.facts dt { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font: var(--head-weight) clamp(19px, 1.5vw, 24px)/1.2 var(--f-head); }

/* treatments list: big alternating blocks */
.tblock { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 96px); align-items: center; }
.tblock + .tblock { margin-top: clamp(72px, 10vw, 160px); }
.tblock:nth-child(even) .tblock-pic { order: 2; }
.tblock-pic { aspect-ratio: 5 / 4; }
.tblock-copy .label { margin-bottom: 14px; }
.tblock-text { margin-top: 20px; max-width: 48ch; color: var(--muted); }
.price-list { border-bottom: 1px solid var(--line); }
.price-list a { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 8px 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; transition: color .3s; }
.price-list a:hover { color: var(--accent); }
.price-name { font: var(--head-weight) clamp(22px, 2vw, 30px)/1.15 var(--f-head); }
.price-line { color: var(--muted); font-size: 15px; }
.price-from { font: 500 14px/1 var(--f-mono); }
.price-note { margin-top: 24px; max-width: 60ch; color: var(--muted); font-size: 15px; }

/* one treatment */
.tr-head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 96px); align-items: end; padding-top: clamp(130px, 14vw, 200px); }
.tr-head-pic { aspect-ratio: 4 / 5; }
.tr-steps { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.tr-steps .steps { margin: 0; }
.tr-fit { display: grid; grid-template-columns: 4fr 3fr 3fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.tr-fit-pic { aspect-ratio: 4 / 5; }
.tr-fit-col .label { margin-bottom: 18px; }
.ticks li { padding: 16px 0 16px 28px; border-top: 1px solid var(--line); position: relative; }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 12px; height: 6px; border: solid var(--accent); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.ticks-note li::before { width: 10px; height: 0; border-width: 0 0 1.5px; transform: none; top: 28px; border-color: var(--muted); }
.tr-case-grid { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.tr-case-grid .ba { aspect-ratio: 3 / 2; }
.tr-case-story { font: var(--head-weight) clamp(22px, 2vw, 30px)/1.25 var(--f-head); }

.faq { border-bottom: 1px solid var(--line); max-width: 980px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font: var(--head-weight) clamp(19px, 1.6vw, 24px)/1.3 var(--f-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 6px; background: linear-gradient(currentColor, currentColor) 50% 50% / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 14px no-repeat; transition: transform .4s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { padding: 0 0 26px; max-width: 64ch; color: var(--muted); }

.next-link { display: grid; gap: 10px; padding-top: 28px; border-top: 1px solid var(--line); text-decoration: none; }
.next-name { font: var(--head-weight) clamp(44px, 7vw, 120px)/1 var(--f-head); letter-spacing: -.03em; transition: color .3s, transform .5s var(--ease-out); }
.next-line { color: var(--muted); }
.next-link:hover .next-name { color: var(--accent); transform: translateX(14px); }

/* smile gallery */
.gcase { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.gcase + .gcase { margin-top: clamp(64px, 9vw, 140px); }
.gcase:nth-child(even) .ba { order: 2; }
.gcase .ba { aspect-ratio: 3 / 2; }
.gcase-copy .label { margin-bottom: 14px; }
.gcase-name { font: var(--head-weight) clamp(30px, 3.4vw, 54px)/1.05 var(--f-head); letter-spacing: -.02em; }
.gcase-story { margin-top: 18px; max-width: 46ch; color: var(--muted); }
.method { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.method-pic { aspect-ratio: 4 / 5; }
.method-copy .label { margin-bottom: 16px; }
.method-text { margin: 24px 0 36px; max-width: 52ch; color: var(--muted); }

/* team */
.lead { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.lead-pic { aspect-ratio: 4 / 5; }
.lead-copy .label { margin-bottom: 16px; }
.lead-quote { margin: 32px 0 28px; font: var(--head-weight) clamp(24px, 2.4vw, 38px)/1.25 var(--f-head); letter-spacing: -.01em; max-width: 30ch; }
.lead-bio { max-width: 52ch; color: var(--muted); }
.person-bio { margin-top: 10px; font-size: 15px; color: var(--muted); max-width: 34ch; }
.tech-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 48px); }
.tech-list li { display: grid; gap: 8px; padding: 24px 0 36px; border-top: 1px solid var(--line); }
.tech-no { font: 400 13px/1 var(--f-mono); color: var(--accent); }
.tech-name { font: var(--head-weight) clamp(22px, 2vw, 30px)/1.15 var(--f-head); }
.tech-line { color: var(--muted); font-size: 15px; max-width: 34ch; }
.rooms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.rooms-grid .pic { aspect-ratio: 3 / 4; }

/* patients */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.plan { padding-top: 22px; border-top: 1px solid var(--line); }
.plan-price { margin-top: 18px; font: var(--head-weight) clamp(48px, 5vw, 84px)/1 var(--f-head); letter-spacing: -.03em; }
.plan-per { font: 400 13px/1.4 var(--f-mono); color: var(--muted); margin-top: 8px; }
.plan-line { margin-top: 18px; color: var(--muted); max-width: 32ch; }
.calm { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.calm-copy .label { margin-bottom: 16px; }
.calm-text { margin-top: 24px; max-width: 54ch; color: var(--muted); }
.calm-pic { aspect-ratio: 5 / 4; }
.place-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 48px); }
.place { padding-top: 22px; border-top: 1px solid var(--line); }
.place-name { font: var(--head-weight) clamp(26px, 2.6vw, 40px)/1.1 var(--f-head); margin-bottom: 12px; }
.place-hours { color: var(--muted); font-size: 15px; }

/* book: chips stand out of the page and press in when chosen, fields are wells pressed into it */
.book { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 120px); align-items: start; padding-top: clamp(130px, 14vw, 200px); }
.book-side .steps { margin: 40px 0 32px; }
.book-call { color: var(--muted); }
.book-call a { color: var(--ink); font-weight: 600; }
.form { display: grid; gap: 30px; padding-top: 8px; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field legend { padding: 0; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 14px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 15px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--bg), #fff 45%), color-mix(in oklab, var(--bg), #000 3%));
  box-shadow: -4px -4px 9px var(--soft-light), 4px 4px 9px var(--soft-dark); transition: box-shadow .3s var(--ease-out), color .3s;
}
.chip:hover span { color: var(--accent); }
.chip input:checked + span { color: var(--accent); font-weight: 600; box-shadow: inset 3px 3px 6px var(--soft-dark), inset -3px -3px 6px var(--soft-light); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.input { display: grid; gap: 10px; }
.input input, .input textarea {
  width: 100%; border: 0; border-radius: 14px; padding: 14px 18px; font: 400 16px/1.4 var(--f-text); color: var(--ink); resize: vertical;
  background: var(--bg); box-shadow: inset 3px 3px 7px var(--soft-dark), inset -3px -3px 7px var(--soft-light);
}
.input input { min-height: 52px; }
.input :is(input, textarea):focus { outline: none; box-shadow: inset 3px 3px 7px var(--soft-dark), inset -3px -3px 7px var(--soft-light), 0 0 0 2px var(--accent); }
.input-error { display: none; font-size: 14px; color: #a2412e; }
.is-bad .input-error, .consent-error.is-on { display: block; }
.is-bad :is(input, textarea) { box-shadow: inset 3px 3px 7px var(--soft-dark), inset -3px -3px 7px var(--soft-light), 0 0 0 2px #a2412e; }
.consent { position: relative; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-size: 15px; color: var(--muted); }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-box { flex: none; position: relative; width: 24px; height: 24px; border-radius: 7px; background: var(--bg); box-shadow: inset 2px 2px 5px var(--soft-dark), inset -2px -2px 5px var(--soft-light); }
.consent input:checked + .consent-box::after { content: ""; position: absolute; left: 7px; top: 5px; width: 9px; height: 5px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent-error { margin-top: -18px; }
.form-send { justify-self: start; }
.form [hidden] { display: none !important; }
.form-done { font: var(--head-weight) clamp(22px, 2vw, 30px)/1.3 var(--f-head); color: var(--accent); }

/* 404: the smile with the gap on the right, the words on the left */
.lost { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; padding-top: 0; }
.lost-pic { order: 2; position: relative; overflow: hidden; background: var(--line); }
.lost-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.lost-copy { align-self: end; padding: 140px var(--gutter) clamp(40px, 8vh, 96px); }
.lost .label { margin-bottom: 16px; }
.lost .page-intro { margin-bottom: 32px; }

/* footer */
.footer { margin-top: clamp(80px, 12vw, 180px); border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 96px); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.footer-line { font: var(--head-weight) clamp(28px, 3vw, 48px)/1.15 var(--f-head); margin: 16px 0 32px; max-width: 20ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: 15px; }
.footer-cols .label { margin-bottom: 10px; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { color: var(--accent); }
.footer-mark { font: var(--head-weight) clamp(90px, 23vw, 400px)/.8 var(--f-head); letter-spacing: -.05em; margin-top: clamp(48px, 6vw, 96px); white-space: nowrap; }
.footer-small { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 28px; font-size: 13px; color: var(--muted); }

/* shade badge (bottom left) and back to top (bottom right) */
.shade-badge { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 30px; font: 500 12px/1 var(--f-mono); opacity: 0; transition: opacity .4s; }
.shade-badge.is-on { opacity: 1; }
.shade-chip { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); }
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); background: linear-gradient(145deg, color-mix(in oklab, var(--bg), #fff 45%), color-mix(in oklab, var(--bg), #000 3%));
  box-shadow: -4px -4px 9px var(--soft-light), 4px 4px 9px var(--soft-dark);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s, color .3s, box-shadow .3s;
}
.to-top.is-on { opacity: 1; visibility: visible; }
.to-top:hover { color: var(--accent); }
.to-top:active { box-shadow: inset 3px 3px 6px var(--soft-dark), inset -3px -3px 6px var(--soft-light); }

/* THE PASS: every block arrives in its "before" state and the comparison line crosses it left to right, leaving it clean.
   Hidden with visibility (not clip) until it runs, so the observer can see it. --d = stagger, set by main.js. */
.motion [data-wipe], .motion [data-run] { position: relative; visibility: hidden; }
.motion :is([data-wipe], [data-run]).run { visibility: visible; }
@keyframes wipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes pass-line { 0% { left: 0; opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* plain blocks: the line wipes them in */
.motion [data-wipe].run { animation: wipe var(--wipe) var(--ease) var(--d, 0s) backwards; } /* backwards: no clip left behind, so soft shadows show */
.motion [data-wipe].run::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; margin-left: -1px; background: var(--ink); z-index: 2;
  animation: pass-line var(--wipe) var(--ease) var(--d, 0s) both; pointer-events: none;
}

/* photos: they come in warm and dull, the line with its handle cleans them */
.motion .pic[data-wipe].run { animation: fade-in .4s ease-out var(--d, 0s) both; }
.motion .pic[data-wipe]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: var(--before-photo); backdrop-filter: var(--before-photo);
}
.motion .pic[data-wipe].run::before { animation: pass-clean var(--pass) var(--ease) calc(var(--d, 0s) + .3s) both; }
.motion .pic[data-wipe].run::after {
  width: 36px; margin-left: -18px; z-index: 3;
  background: radial-gradient(circle at 50% 50%, var(--on-photo) 16px, transparent 17px), linear-gradient(var(--on-photo), var(--on-photo)) 50% 0 / 2px 100% no-repeat;
  animation: pass-line var(--pass) var(--ease) calc(var(--d, 0s) + .3s) both;
}
@keyframes pass-clean { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* headings and big text: they come in warm grey, the line leaves them in full ink */
.motion :is(.sec-title, .page-title, .statement, .quote-text, .lead-quote)[data-wipe] {
  background: linear-gradient(90deg, var(--ink) 50%, var(--before-ink) 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motion :is(.sec-title, .page-title, .statement, .quote-text, .lead-quote)[data-wipe].run {
  animation: fade-in .4s ease-out var(--d, 0s) both, text-clean var(--pass) var(--ease) calc(var(--d, 0s) + .25s) both;
}
.motion :is(.sec-title, .page-title, .statement, .quote-text, .lead-quote)[data-wipe].run::after { animation: pass-line var(--pass) var(--ease) calc(var(--d, 0s) + .25s) both; }
@keyframes text-clean { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* treatments: each row's rule draws itself, then the row rises (translate, so the hover shift keeps working) */
.motion .treat-list > li[data-wipe].run { animation: none; }
.motion .treat-list > li[data-wipe].run::after { content: none; }
.motion .treat-list .treat-row { border-top-color: transparent; }
.motion .treat-list > li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; }
.motion .treat-list > li.run::before { transform: none; transition: transform .9s var(--ease) var(--d, 0s); }
.motion .treat-list .treat-row > span { opacity: 0; translate: 0 16px; }
.motion .treat-list > li.run .treat-row > span { opacity: 1; translate: 0 0; transition: opacity .6s ease-out calc(var(--d, 0s) + .3s), translate .9s var(--ease-out) calc(var(--d, 0s) + .3s); }

/* first visit: a line runs down through the steps and lights each one as it passes */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1.5px; background: var(--accent); transform-origin: top; }
.step { position: relative; padding-left: 24px; }
.step::before { content: ""; position: absolute; left: 1px; top: 27px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.motion .steps::before { transform: scaleY(0); }
.motion .steps.run::before { transform: none; transition: transform calc(var(--n, 4) * .45s) linear; }
.motion .steps .step { opacity: .3; }
.motion .steps .step::before { transform: scale(0); }
.motion .steps.run .step { opacity: 1; transition: opacity .5s ease-out calc(var(--i, 0) * .45s + .15s); }
.motion .steps.run .step::before { transform: none; transition: transform .5s var(--ease-out) calc(var(--i, 0) * .45s + .15s); }

/* shade guide: the tabs fan out from one pivot like the real porcelain guide, then lie flat */
.motion .shade-tabs .shade-tab { transform-origin: 50% 170%; transform: translateX(calc(var(--k, 0) * (100% + clamp(8px, 1.4vw, 20px)))) rotate(calc(var(--k, 0) * -9deg)); opacity: 0; }
.motion .shade-tabs.run .shade-tab { transform: none; opacity: 1; transition: transform 1.3s var(--ease-out) calc(var(--k, 0) * .08s + .1s), opacity .3s; }

/* numbers count up (main.js); tabular figures so they do not wobble */
.num { font-variant-numeric: tabular-nums; }

/* HERO: the photo opens all "before", the title rises word by word, then the line crosses the whole screen,
   whitens the teeth and the title with them, and rests in the middle. Left of the line the title stays warm. */
.motion .ba-hero { --pos: 100%; }
.hero-title-wrap { position: relative; }
.hero-title-before { position: absolute; inset: 0; color: var(--before-ink-photo); clip-path: inset(-30% calc(100% - var(--cut, 100%)) -30% -10%); pointer-events: none; }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .w > span { display: inline-block; }
.motion .hero-title .w > span { translate: 0 110%; }
.motion.hero-go .hero-title .w > span { translate: 0 0; transition: translate 1.1s var(--ease-out) calc(var(--i, 0) * .09s); }
.motion .hero-kicker, .motion .hero-foot > * { opacity: 0; translate: 0 20px; }
.motion.hero-go .hero-kicker { opacity: 1; translate: 0 0; transition: opacity .8s ease-out .2s, translate 1s var(--ease-out) .2s; }
.motion.hero-done .hero-foot > * { opacity: 1; translate: 0 0; transition: opacity .8s ease-out, translate 1s var(--ease-out); }
.motion.hero-done .hero-foot > :nth-child(2) { transition-delay: .12s; }
/* on scroll the photo slowly leans in and the title leaves faster than it */
.motion .ba-hero .ba-img { transform: scale(calc(1.02 + var(--hy, 0) * .1)); }
.motion .hero-top { translate: 0 calc(var(--hy, 0) * -24vh); }
.motion .ba[data-sweep] .ba-tag { opacity: 0; }
.motion .ba.is-ready .ba-tag { opacity: 1; }
.motion:not(.hero-go) .ba-hero .ba-line { opacity: 0; }
.ba-hero .ba-line { transition: opacity .6s; }

/* header: the items rise one by one out of the header's bottom edge (an unseen line) */
.motion:not(.head-done) .header { overflow: clip; }
.motion :is(.header > :not(.nav-main), .nav-main > a) { translate: 0 70px; }
.motion.head-go :is(.header > :not(.nav-main), .nav-main > a) { translate: 0 0; transition: translate 1.1s var(--ease-out) calc(var(--i, 0) * .07s + .1s); }

@media (max-width: 1100px) {
  .nav-main { display: none; }
  .tech-list { grid-template-columns: repeat(2, 1fr); }
  .tr-fit { grid-template-columns: 1fr 1fr; }
  .tr-fit-pic { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .menu-btn { display: inline-flex; align-items: center; margin-left: 0; }
  .header-book { margin-left: auto; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .intro, .shade, .visit-grid, .quote-grid, .footer-top { grid-template-columns: 1fr; }
  .numbers { grid-column: 1; }
  .treat-grid { grid-template-columns: 1fr; }
  .treat-frame { display: none; }
  .cases-grid { grid-template-columns: 1fr; gap: 48px; }
  .shade-tabs { justify-content: flex-start; }
  .quote-pic { grid-row: auto; max-width: 420px; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .tblock, .tr-head, .tr-steps, .tr-case-grid, .gcase, .method, .lead, .calm, .book { grid-template-columns: 1fr; }
  .tblock:nth-child(even) .tblock-pic, .gcase:nth-child(even) .ba { order: 0; }
  .tr-head-pic, .lead-pic, .method-pic { aspect-ratio: 4 / 3; }
  .plan-grid { grid-template-columns: 1fr; }
  .lost { grid-template-columns: 1fr; min-height: 0; }
  .lost-pic { order: 0; height: 56svh; }
  .lost-copy { padding-top: 40px; }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-book { display: none; }
  .menu-btn { margin-left: auto; }
  .numbers { grid-template-columns: 1fr; gap: 0; }
  .numbers li { padding: 18px 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: baseline; gap: 16px; }
  .treat-row { grid-template-columns: 36px 1fr; }
  .treat-line, .treat-from { grid-column: 2; }
  .sec-head-row { flex-direction: column; align-items: flex-start; }
  .footer-cols { grid-template-columns: 1fr; }
  .ba-hero .ba-tag { bottom: 36%; }
  .hero-intro { font-size: 15px; }
  .tr-fit, .tech-list, .place-grid, .form-row { grid-template-columns: 1fr; }
  .price-list a { grid-template-columns: 1fr auto; }
  .price-line { grid-column: 1; grid-row: 2; }
  .facts { gap: 14px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}