/* s-dental.css - chat 19: the dental sample, its own composition (approved mock: _dev/mocks/dental.html).
   Everything for this chapter lives here; scale by --u (see the builder brief).
   A solid cream page with ONE arch window on the right: the page is a box-shadow round the arch hole, so the
   live film (stage.js, placed by SCENES.dental.film in main.js) shows through the arch only.
   Desktop: a 1920 x 1020 design canvas under the 60 px KN bar, scaled by --u and centred (--x0), so the pill
   bar always crosses the arch edge. Mock y values are written as (Y - 60). Phone (700 px and under): stacked. */

.scene--dental {
  --ld-white: #F9F6EF; --ld-card: #FFFDF8; --ld-mint: #DBE3DA; --ld-sage: #B5B29A; --ld-teal: #1E4A47; --ld-teal-2: #2C6560;
  --ld-mute: rgba(30, 74, 71, .66); --ld-rule: rgba(30, 74, 71, .16);
  --blk: var(--ld-teal);
  --u: min(calc(100vw / 1920), calc((100vh - 60px) / 1020));
  --x0: calc((100vw - var(--u) * 1920) / 2);
  --y0: var(--slim-h, 60px);
  --t: max(15px, calc(var(--u) * 18));          /* body text: 18 at 1920, never under 15 */
  color: var(--ld-teal); font-family: var(--f-body);
}
.scene--dental :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.scene--dental :where(p, h2, h3) { margin: 0; font-weight: inherit; }
.scene--dental :where(a) { color: inherit; text-decoration: none; }
.scene--dental svg { display: block; flex: none; }

/* ---------- the cream page and its arch window ---------- */
.ld-page { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ld-hole {
  position: absolute; left: calc(var(--x0) + var(--u) * 1120); width: calc(var(--u) * 696);
  top: calc(var(--y0) + var(--u) * 44); bottom: 0; border-radius: calc(var(--u) * 348) calc(var(--u) * 348) 0 0;
  box-shadow: 0 0 0 200vmax var(--ld-white), inset 0 0 0 1px rgba(30, 74, 71, .10);
}
.ld-line {
  position: absolute; left: calc(var(--x0) + var(--u) * 1100); width: calc(var(--u) * 736);
  top: calc(var(--y0) + var(--u) * 24); bottom: -2px; border-radius: calc(var(--u) * 368) calc(var(--u) * 368) 0 0;
  border: 1px solid rgba(181, 178, 154, .75); border-bottom: 0;
}

/* ---------- clinic nav ---------- */
.ld-nav {
  position: absolute; z-index: 2; left: calc(var(--x0) + var(--u) * 104); width: calc(var(--u) * 968);
  top: calc(var(--y0) + var(--u) * 20); height: calc(var(--u) * 56);
  display: flex; align-items: center; justify-content: space-between;
}
.ld-brand { display: flex; align-items: center; gap: calc(var(--u) * 14); font: 400 calc(var(--u) * 32)/1 var(--f-serif); letter-spacing: -.005em; white-space: nowrap; }
.ld-brand svg { width: calc(var(--u) * 26); height: calc(var(--u) * 32); }
.ld-links { display: flex; align-items: center; gap: calc(var(--u) * 36); font: 500 var(--t)/1 var(--f-body); }
.ld-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.ld-links .is-book { height: max(36px, calc(var(--u) * 44)); padding: 0 calc(var(--u) * 22); border-radius: 999px; display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px rgba(30, 74, 71, .45); }
.ld-links .is-book:hover { background: var(--ld-mint); text-decoration: none; }

/* ---------- hero ---------- */
.ld-hero { position: absolute; z-index: 2; left: calc(var(--x0) + var(--u) * 104); top: calc(var(--y0) + var(--u) * 108); }
.ld-h1 { font: 400 calc(var(--u) * 168)/.9 var(--f-serif); letter-spacing: -.024em; color: var(--ld-teal); white-space: nowrap; }
.ld-h1 span { display: block; }
.ld-sub { margin-top: calc(var(--u) * 22); font: 400 max(15px, calc(var(--u) * 24))/1.4 var(--f-body); color: var(--ld-mute); }

/* ---------- booking pill bar (crosses the arch edge) ---------- */
/* the build block's clip is its own box: padding keeps the pill's soft shadow inside it */
.ld-book { position: absolute; z-index: 4; left: calc(var(--x0) + var(--u) * 24); top: calc(var(--y0) + var(--u) * 506); padding: 0 calc(var(--u) * 80) calc(var(--u) * 70) calc(var(--u) * 80); }
.ld-book__head { display: flex; align-items: center; gap: calc(var(--u) * 18); margin: 0 0 calc(var(--u) * 14) calc(var(--u) * 6); }
.ld-book__t { font: 400 calc(var(--u) * 34)/1 var(--f-serif); white-space: nowrap; }
.ld-pill {
  display: flex; align-items: center; height: calc(var(--u) * 104); padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 40);
  background: var(--ld-card); border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 34) calc(var(--u) * 70) calc(var(--u) * -30) rgba(30, 74, 71, .38), 0 3px 10px rgba(30, 74, 71, .06), inset 0 0 0 1px rgba(30, 74, 71, .08);
}
.ld-seg { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 9); padding-right: calc(var(--u) * 34); }
.ld-seg + .ld-seg { padding-left: calc(var(--u) * 34); border-left: 1px solid var(--ld-rule); }
.ld-seg__l { font: 500 var(--t)/1 var(--f-body); color: var(--ld-mute); white-space: nowrap; }
.ld-dd { display: flex; align-items: center; min-height: calc(var(--u) * 40); gap: calc(var(--u) * 10); font: 400 max(17px, calc(var(--u) * 27))/1 var(--f-serif); white-space: nowrap; border-radius: 10px; }
.ld-dd:hover .ld-dd__v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ld-dd[aria-expanded="true"] .ld-chev { transform: rotate(180deg); }
.ld-chev { width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin-left: calc(var(--u) * 4); }
.ld-mini { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; background: var(--ld-mint); display: grid; place-items: center; flex: none;
  font: 400 max(14px, calc(var(--u) * 19))/1 var(--f-serif); letter-spacing: .02em; }
.ld-slots { display: flex; gap: calc(var(--u) * 6); }
.ld-slot { height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 14); border-radius: 999px; font: 500 var(--t)/1 var(--f-body); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(30, 74, 71, .22); }
.ld-slot:hover { background: var(--ld-mint); }
.ld-slot.is-on { background: var(--ld-teal); color: var(--ld-white); box-shadow: none; }
.ld-go { width: calc(var(--u) * 82); height: calc(var(--u) * 82); border-radius: 50%; background: var(--ld-teal); color: var(--ld-white); text-align: center;
  font: 600 max(15px, calc(var(--u) * 19))/1 var(--f-body); margin-left: calc(var(--u) * 6); flex: none; }
.ld-go:hover { background: var(--ld-teal-2); }
.ld-conf { display: flex; align-items: center; gap: calc(var(--u) * 12); margin: calc(var(--u) * 18) 0 0 calc(var(--u) * 40); font: 500 max(15px, calc(var(--u) * 20))/1.25 var(--f-body); white-space: nowrap; }
.ld-tick { width: calc(var(--u) * 26); height: calc(var(--u) * 26); min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--ld-mint); display: grid; place-items: center; flex: none; }
.ld-tick svg { width: 50%; height: auto; }

/* the two dropdown menus (outside the build block, placed under their field by s-dental.js) */
.ld-menu { position: absolute; z-index: 9; display: flex; flex-direction: column; gap: 2px; padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 22);
  background: var(--ld-card); box-shadow: 0 24px 50px -20px rgba(30, 74, 71, .45), inset 0 0 0 1px rgba(30, 74, 71, .10); }
.ld-menu[hidden] { display: none; }
.ld-opt { display: flex; align-items: center; gap: calc(var(--u) * 10); min-height: max(40px, calc(var(--u) * 52)); padding: 0 calc(var(--u) * 18); border-radius: 999px;
  font: 400 max(17px, calc(var(--u) * 26))/1 var(--f-serif); white-space: nowrap; }
.ld-opt:hover { background: var(--ld-mint); }
.ld-opt.is-on { background: var(--ld-teal); color: var(--ld-white); }
.ld-opt.is-on .ld-mini { background: var(--ld-white); color: var(--ld-teal); }

/* ---------- lower row: team + guides ---------- */
.ld-team { position: absolute; z-index: 2; left: calc(var(--x0) + var(--u) * 96); top: calc(var(--y0) + var(--u) * 746); padding-left: calc(var(--u) * 8); }
.ld-blk__h { display: flex; align-items: center; gap: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 18); }
.ld-blk__t { font: 400 calc(var(--u) * 30)/1 var(--f-serif); white-space: nowrap; }
.ld-docs { display: flex; gap: calc(var(--u) * 26); }
.ld-doc { display: flex; flex-direction: column; align-items: flex-start; min-width: calc(var(--u) * 152); }
.ld-av { width: calc(var(--u) * 56); height: calc(var(--u) * 56); border-radius: 50%; background: var(--ld-mint); display: grid; place-items: center; flex: none;
  margin-bottom: calc(var(--u) * 10); font: 400 calc(var(--u) * 24)/1 var(--f-serif); letter-spacing: .01em; }
.ld-doc:hover .ld-av { box-shadow: 0 0 0 calc(var(--u) * 4) var(--ld-white), 0 0 0 calc(var(--u) * 5) rgba(30, 74, 71, .4); }
.ld-doc.is-on .ld-av { background: var(--ld-teal); color: var(--ld-white); box-shadow: 0 0 0 calc(var(--u) * 4) var(--ld-white), 0 0 0 calc(var(--u) * 5) var(--ld-teal); }
.ld-doc__n { font: 600 var(--t)/1.3 var(--f-body); white-space: nowrap; }
.ld-doc__r { font: 400 var(--t)/1.3 var(--f-body); color: var(--ld-mute); white-space: nowrap; }
.ld-guides { position: absolute; z-index: 2; left: calc(var(--x0) + var(--u) * 652); width: calc(var(--u) * 420); top: calc(var(--y0) + var(--u) * 746); }
.ld-guides a { display: flex; align-items: center; justify-content: space-between; height: max(32px, calc(var(--u) * 38)); border-top: 1px solid var(--ld-rule);
  font: 500 var(--t)/1 var(--f-body); white-space: nowrap; }
.ld-guides a:last-child { border-bottom: 1px solid var(--ld-rule); }
.ld-guides a:hover { background: linear-gradient(90deg, rgba(219, 227, 218, .6), rgba(219, 227, 218, 0)); }
.ld-guides svg { width: calc(var(--u) * 18); height: calc(var(--u) * 12); min-width: 14px; }

/* ---------- Open now plate, hangs off the arch ---------- */
.ld-hours { position: absolute; z-index: 3; left: calc(var(--x0) + var(--u) * 1542); top: calc(var(--y0) + var(--u) * 532); width: calc(var(--u) * 352);
  padding: calc(var(--u) * 42) calc(var(--u) * 54) calc(var(--u) * 50) calc(var(--u) * 38); }
/* the frosted plate is a layer of the block, inset so the tag (and the shadow) stay inside the build clip */
.ld-hours::before { content: ''; position: absolute; z-index: -1; left: calc(var(--u) * 14); top: calc(var(--u) * 20); right: calc(var(--u) * 30); bottom: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 22); background: rgba(249, 246, 239, .86); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 20px 50px -24px rgba(30, 74, 71, .45), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ld-hours .kn-tag { position: absolute; left: 0; top: 0; }
.ld-hours__now { display: flex; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 8); font: 400 calc(var(--u) * 34)/1 var(--f-serif); white-space: nowrap; }
.ld-dot { width: calc(var(--u) * 12); height: calc(var(--u) * 12); min-width: 9px; min-height: 9px; border-radius: 50%; flex: none; background: #3F7F6A; box-shadow: 0 0 0 calc(var(--u) * 6) rgba(63, 127, 106, .16); }
.ld-hours[data-open="0"] .ld-dot { background: rgba(30, 74, 71, .35); box-shadow: 0 0 0 calc(var(--u) * 6) rgba(30, 74, 71, .08); }
.ld-hours__l { margin-top: calc(var(--u) * 12); font: 400 var(--t)/1.5 var(--f-body); color: var(--ld-mute); white-space: nowrap; }
.ld-hours__l b { font-weight: 500; color: var(--ld-teal); }

/* ---------- Find us footer line ---------- */
.ld-foot { position: absolute; z-index: 2; left: calc(var(--x0) + var(--u) * 104); width: calc(var(--u) * 968); top: calc(var(--y0) + var(--u) * 948); height: calc(var(--u) * 48);
  display: flex; align-items: center; gap: calc(var(--u) * 18); font: 400 var(--t)/1 var(--f-body); white-space: nowrap; }
.ld-foot::before { content: ''; position: absolute; left: 0; width: calc(var(--u) * 952); top: calc(var(--u) * -24); height: 1px; background: var(--ld-rule); }
.ld-foot__t { font: 400 calc(var(--u) * 26)/1 var(--f-serif); margin-left: calc(var(--u) * 4); }
.ld-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ld-sage); flex: none; }
.ld-fb { height: max(34px, calc(var(--u) * 42)); padding: 0 calc(var(--u) * 20); border-radius: 999px; font: 600 var(--t)/1 var(--f-body); display: inline-flex; align-items: center; }
.ld-fb--fill { background: var(--ld-teal); color: var(--ld-white); }
.ld-fb--fill:hover { background: var(--ld-teal-2); }
.ld-fb--line { box-shadow: inset 0 0 0 1px rgba(30, 74, 71, .45); }
.ld-fb--line:hover { background: var(--ld-mint); }

/* ---------- KN caption: at the foot of the arch (KN styling kept) ---------- */
@media (min-width: 701px) {
  .scene--dental .kn-cap { left: auto; right: calc(var(--x0) + var(--u) * 128); bottom: calc(var(--u) * 28); width: calc(var(--u) * 648); max-width: none; z-index: 5;
    font-size: max(15px, calc(var(--u) * 20)); }
}
/* under u 0.833 the 15 px text floor widens the lower row: the guides and footer drop their KN tag (the team tag
   beside it and the Open now plate already name the same plans) so nothing reaches the arch */
@media (min-width: 701px) and (max-width: 1599px), (min-width: 701px) and (max-height: 909px) {
  .ld-guides .kn-tag, .ld-foot .kn-tag { display: none; }
  .ld-foot { width: auto; }
}
.marquee--d .marquee__row span { color: #F9F6EF; }
.marquee--d .marquee__row span i { color: #BEC8BE; }

/* ================= phone: stacked, arch on top with the film inside it ================= */
@media (max-width: 700px) {
  .scene--dental {
    --m: 16px; --nav-h: 32px; --gap: 10px;
    --ah: clamp(84px, calc(100vh - 632px), 172px);
    --hb: calc(var(--slim-h) + 6px + var(--nav-h) + var(--gap) + var(--ah));   /* the arch window's bottom edge */
    display: flex; flex-direction: column; padding: calc(var(--slim-h) + 6px) var(--m) 0; gap: var(--gap);
  }
  @supports (height: 100dvh) { .scene--dental { --ah: clamp(84px, calc(100dvh - 632px), 172px); } }
  .scene--dental > :where(.ld-nav, .ld-hero, .ld-book, .ld-team, .ld-foot) { position: relative; left: auto; top: auto; width: auto; }
  .ld-hole { left: var(--m); right: var(--m); width: auto; top: calc(var(--slim-h) + 6px + var(--nav-h) + var(--gap)); bottom: auto; height: var(--ah);
    border-radius: 120px 120px 0 0; }
  .ld-line { left: calc(var(--m) - 7px); right: calc(var(--m) - 7px); width: auto; top: calc(var(--slim-h) + 6px + var(--nav-h) + var(--gap) - 7px); bottom: auto;
    height: calc(var(--ah) + 7px); border-radius: 127px 127px 0 0; border-bottom: 0; }
  .ld-nav { height: var(--nav-h); flex: none; }
  .ld-brand { font-size: 22px; gap: 9px; }
  .ld-brand svg { width: 18px; height: 22px; }
  .ld-links { display: none; }
  .ld-hero { margin-top: calc(var(--ah) + var(--gap)); flex: none; }
  .ld-h1 { font-size: clamp(28px, calc(var(--ah) * .18 + 14px), 40px); white-space: normal; }
  .ld-sub { display: none; }
  .ld-book { flex: none; padding: 0; margin-top: 2px; }
  .ld-book__head { gap: 10px; margin: 0 0 6px; }
  .ld-book__t { font-size: 22px; }
  .ld-pill { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'why who go' 'time time time'; align-items: end; column-gap: 12px; row-gap: 8px;
    height: auto; padding: 8px 8px 10px 14px; border-radius: 26px; box-shadow: 0 18px 40px -24px rgba(30, 74, 71, .45), inset 0 0 0 1px rgba(30, 74, 71, .10); }
  .ld-seg { padding: 0; gap: 2px; }
  .ld-seg + .ld-seg { padding-left: 0; border-left: 0; }
  .ld-seg--why { grid-area: why; }
  .ld-seg--who { grid-area: who; padding-left: 12px; border-left: 1px solid var(--ld-rule); }
  .ld-seg--time { grid-area: time; padding-top: 8px; border-top: 1px solid var(--ld-rule); }
  .ld-seg--time .ld-seg__l { display: none; }
  .ld-seg__l { font-size: 14px; }
  .ld-dd { min-height: 40px; font-size: 18px; gap: 6px; }
  .ld-dd .ld-mini { display: none; }
  .ld-chev { width: 12px; height: 12px; margin-left: 0; }
  .ld-go { grid-area: go; width: 52px; height: 52px; margin: 0; font-size: 15px; align-self: center; }
  .ld-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .ld-slot { height: 40px; padding: 0 4px; font-size: 14px; text-align: center; }
  .ld-conf { margin: 8px 0 0 4px; gap: 8px; font-size: 14px; line-height: 18px; min-height: 36px; white-space: normal; align-items: flex-start; }
  .ld-tick { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
  .ld-menu { padding: 6px; border-radius: 18px; }
  .ld-opt { min-height: 44px; padding: 0 14px; font-size: 18px; }
  .ld-opt .ld-mini { width: 28px; height: 28px; font-size: 13px; }
  .ld-team { flex: none; padding-left: 0; }
  .ld-blk__h { gap: 10px; margin-bottom: 6px; }
  .ld-blk__t { font-size: 20px; }
  .ld-docs { gap: 8px; justify-content: space-between; }
  .ld-doc { min-width: 0; flex: 1 1 0; align-items: center; text-align: center; padding: 2px 0; }
  .ld-av { width: 40px; height: 40px; font-size: 17px; margin-bottom: 4px; }
  .ld-doc:hover .ld-av, .ld-doc.is-on .ld-av { box-shadow: 0 0 0 3px var(--ld-white), 0 0 0 4px var(--ld-teal); }
  .ld-doc:hover:not(.is-on) .ld-av { box-shadow: 0 0 0 3px var(--ld-white), 0 0 0 4px rgba(30, 74, 71, .4); }
  .ld-doc__n { font-size: 14px; }
  .ld-doc__r { font-size: 14px; }
  .ld-guides { display: none; }
  .ld-hours { left: auto; right: calc(var(--m) + 8px); top: calc(var(--hb) - 72px); width: auto;
    padding: 8px 12px 8px; }
  .ld-hours::before { left: 0; top: 0; right: 0; bottom: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
  .ld-hours .kn-tag { display: none; }
  .ld-hours__now { margin-top: 0; gap: 8px; font-size: 20px; }
  .ld-dot { width: 9px; height: 9px; box-shadow: 0 0 0 4px rgba(63, 127, 106, .16); }
  .ld-hours__l { margin-top: 2px; font-size: 14px; line-height: 1.25; }
  .ld-foot { flex: none; height: 40px; gap: 10px; font-size: 14px; }
  .ld-foot::before { display: none; }
  .ld-foot .kn-tag, .ld-foot .ld-sep, .ld-foot__p { display: none; }
  .ld-foot__t { font-size: 20px; margin: 0; }
  .ld-fb { height: 40px; padding: 0 14px; font-size: 14px; }
  .ld-fb--fill { margin-left: auto; }
}
/* phone heights: the role line and the footer only where there is room; the smallest screens tighten */
@media (max-width: 700px) and (max-height: 799px) {
  .ld-doc__r { display: none; }
  .ld-foot { display: none; }
}
@media (max-width: 700px) and (min-height: 800px) {
  .scene--dental { --ah: clamp(84px, calc(100vh - 702px), 172px); }
  @supports (height: 100dvh) { .scene--dental { --ah: clamp(84px, calc(100dvh - 702px), 172px); } }
}
@media (max-width: 700px) and (max-height: 700px) {
  .scene--dental { --gap: 8px; }
  .ld-book__t { font-size: 20px; }
  .ld-book__head .kn-tag, .ld-team .kn-tag { font-size: 15px; padding: 4px 10px 4px 8px; }
  .ld-blk__h { margin-bottom: 4px; }
  .ld-book { margin-top: 4px; }
  /* the smallest phones: the team shows as its three monograms (the chosen name is in the booking pill) */
  .ld-docs { justify-content: flex-start; gap: 14px; }
  .ld-doc { flex: none; }
  .ld-doc__n { display: none; }
  .ld-av { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-conf__t { clip-path: none !important; }
}