/* ==========================================================================
   Dental and Medical Clinics page only (industry-dental.html, _build/dental_page.py).
   Behaviour in dental.js. Built 2026-10-29 around a clean top-down clinic floor plan.
   Inks: Coordinate Sky + Keycap Cobalt, like surgery signage on white tile. Ember only
   marks what a clinic loses; green is never a ground here. Clean and modern on purpose.
   ========================================================================== */

.dn { --dn-ink: #141414; --dn-line: #5E6C75; --dn-soft: #EEF3F6; --dn-tile: #F4F7F9; --dn-cob: var(--cobalt); --dn-sky: var(--sky); }

/* dental / medical: every swap is a pair of spans, the mode hides one */
.dn[data-mode="dental"] .dm-m, .dn[data-mode="medical"] .dm-d { display: none; }

/* ---- hero ---------------------------------------------------------------------- */
.dn-hero {
  position: relative; padding-block: clamp(28px, 4vw, 56px) clamp(36px, 4vw, 60px);
  background:
    linear-gradient(rgba(47, 91, 211, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(47, 91, 211, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, #F1F6F9, var(--ink) 92%);
}
.dn-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.dn-hero .display { font-size: clamp(42px, 5.2vw, 74px); }
.dn-hero .display em { color: var(--dn-cob); }
.dn-hero .lede { max-width: 44ch; }
.dn-hero .eyebrow::before { background: var(--dn-cob); }
.dn-count { margin: 18px 0 0; color: var(--text-2); font-size: 12.5px; letter-spacing: .06em; }
.dn-count b { color: var(--dn-cob); font-weight: 600; }

.dn-mode { display: inline-flex; align-items: center; gap: 4px; margin-top: 26px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; }
.dn-mode > span { padding: 0 10px 0 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dn-mode button { font: 500 14px var(--font-sans); padding: 8px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; transition: background var(--fast, .2s), color var(--fast, .2s); }
.dn-mode button[aria-pressed="true"] { background: var(--dn-ink); color: #fff; }
.dn-mode button:focus-visible { outline: 2px solid var(--dn-cob); outline-offset: 2px; }

/* ---- the floor plan -------------------------------------------------------------- */
.dn-plan { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: 0 1px 0 rgba(20, 20, 20, .04), 0 24px 60px -30px rgba(47, 91, 211, .35); padding: clamp(8px, 1.2vw, 14px); }
.dn-plan__map { position: relative; }
.dn-svg { display: block; width: 100%; height: auto; }
.dn-plan figcaption { position: absolute; right: 16px; bottom: -26px; font-size: 11px; color: var(--text-3); letter-spacing: .04em; }

.dn-floor { fill: #FFFFFF; }
.dn-tiles { fill: url(#dnTile); pointer-events: none; }
.dn-corr { fill: var(--dn-tile); }
.dn-wall { stroke: var(--dn-ink); stroke-width: 6; stroke-linecap: square; }
.dn-wall--in { stroke-width: 3.5; }
.dn-door { stroke: var(--dn-line); stroke-width: 1.4; }
.dn-swing { fill: none; stroke: #A9B4BB; stroke-width: 1; stroke-dasharray: 3 3; }
.dn-glass { stroke: #8FB2C6; stroke-width: 1.4; }
.dn-f, .dn-f2, .dn-fn2 { stroke: var(--dn-line); stroke-width: 1.1; }
.dn-f { fill: var(--dn-soft); }
.dn-f2 { fill: #FFFFFF; }
.dn-fn2 { fill: var(--dn-soft); }
.dn-fn, .dn-screen { stroke: var(--dn-line); stroke-width: 1.1; }
.dn-screen { stroke: var(--dn-ink); stroke-width: 2.6; stroke-linecap: round; }
.dn-lamp { fill: #FFF4C9; stroke: #E0C46A; stroke-width: 1; }
.dn-sink { fill: var(--dn-sky); stroke: var(--dn-line); stroke-width: 1; }
.dn-dot { fill: var(--dn-line); }
.dn-plant { fill: #DDE8D9; stroke: #7E9478; stroke-width: 1; }
.dn-plant2 { fill: #B9CDB3; }
.dn-board { fill: var(--dn-ink); }
.dn-bar { fill: var(--dn-sky); }
.dn-led { fill: #4FB477; animation: dnBlink 2.4s steps(1) infinite; animation-delay: calc(var(--k) * -.6s); }
.dn-phone { fill: var(--dn-ink); }
.dn-ring { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; animation: dnRing 1.6s ease-out infinite; }
.dn-ring--2 { animation-delay: .25s; }
@keyframes dnRing { 0% { opacity: 0; } 25% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes dnBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

/* street */
.dn-walk { fill: #EDEFF0; }
.dn-tileln { stroke: #D7DBDE; stroke-width: 1; }
.dn-road { fill: #DCE2E6; }
.dn-lane { fill: #FFFFFF; }
.dn-car { fill: #FFFFFF; stroke: var(--dn-line); stroke-width: 1.1; }
.dn-car--2 { fill: var(--dn-sky); }
.dn-carw { fill: #C4D0D8; }
.dn-chip { fill: #FFFFFF; stroke: var(--line-2); stroke-width: 1; }
.dn-pin-ic { fill: var(--orange); }
.dn-star { fill: var(--sun); }
.dn-sign { fill: var(--dn-cob); }
.dn-sign-ic { fill: #FFFFFF; }

/* labels and the patient walking through */
.dn-lab { font: 600 8.5px var(--font-mono); letter-spacing: .14em; fill: #8A969E; pointer-events: none; }
.dn-lab--st { fill: #98A2A9; }
.dn-path { fill: none; stroke: var(--dn-cob); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .55; pointer-events: none; }
.dn-walker { fill: var(--dn-cob); stroke: #fff; stroke-width: 2.5; pointer-events: none; }

/* rooms: the hit areas under the furniture, lit when chosen */
.dn-room rect { fill: transparent; cursor: pointer; transition: fill .35s var(--ease); }
.dn-room:hover rect { fill: rgba(47, 91, 211, .05); }
.dn-room.is-on rect { fill: rgba(47, 91, 211, .13); }
.dn-room[data-room="street"].is-on rect { fill: rgba(47, 91, 211, .16); }

/* numbered pins over the plan */
.dn-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px;
  border: 0; border-radius: 999px; background: var(--dn-ink); color: #fff; font: 500 12px var(--font-mono); letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(20, 20, 20, .5); transition: background .25s, transform .25s var(--ease); white-space: nowrap; }
.dn-pin b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--dn-ink); font-size: 10.5px; }
.dn-pin:hover { transform: translate(-50%, -50%) scale(1.05); }
.dn-pin.is-on { background: var(--dn-cob); }
.dn-pin.is-on b { color: var(--dn-cob); }
.dn-pin:focus-visible { outline: 2px solid var(--dn-cob); outline-offset: 3px; }

/* ---- the room panel ------------------------------------------------------------- */
.dn-rooms { margin-top: clamp(48px, 6vw, 76px); scroll-margin-top: 90px; }
.dn-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dn-tab { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 9px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--text-2); font: 500 15px var(--font-sans); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.dn-tab b { font: 600 11px var(--font-mono); color: var(--text-3); }
.dn-tab:hover { border-color: var(--dn-ink); color: var(--text); }
.dn-tab.is-on { background: var(--dn-ink); border-color: var(--dn-ink); color: #fff; }
.dn-tab.is-on b { color: var(--dn-sky); }

.dn-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 44px); padding: clamp(22px, 3vw, 36px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); }
.dn-panel + .dn-panel { margin-top: 14px; }
.dn-js .dn-panel:not(.is-on) { display: none; }
.dn-js .dn-panel.is-on { animation: dnIn .45s var(--ease); }
@keyframes dnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dn-panel__n { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dn-cob); }
.dn-panel__head .h3 { margin-top: 12px; font-size: clamp(26px, 2.6vw, 34px); }
.dn-panel__head > p { margin: 14px 0 0; color: var(--text-2); }
.dn-lost { display: flex; gap: 10px; align-items: baseline; margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: #B4440C !important; }
.dn-lost i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); transform: translateY(-1px); }

.dn-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dn-build { display: flex; flex-direction: column; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FAFCFD, #fff); color: inherit; text-decoration: none; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.dn-build:hover { border-color: var(--dn-cob); transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(47, 91, 211, .55); }
.dn-build__k { font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dn-cob); }
.dn-build h4 { margin: 10px 0 0; font: 500 19px/1.25 var(--font-display); }
.dn-build p { margin: 8px 0 0; font-size: 15px; color: var(--text-2); flex: 1; }
.dn-build__go { margin-top: 14px; font: 500 12px var(--font-mono); color: var(--text); }
.dn-build:hover .arrow { transform: translateX(3px); }

/* ---- calculator ------------------------------------------------------------------ */
.dn-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); }
.dn-calc__in { padding: clamp(22px, 3vw, 40px); background: #fff; display: grid; gap: 22px; }
.dn-field label { display: flex; justify-content: space-between; gap: 10px; font: 500 16px var(--font-sans); }
.dn-field output { color: var(--dn-cob); }
.dn-field input[type="number"] { width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); font: 500 20px var(--font-mono); background: var(--surface); color: var(--text); }
.dn-field input[type="number"]:focus { outline: 2px solid var(--dn-cob); outline-offset: 1px; }
.dn-field input[type="range"] { width: 100%; margin-top: 14px; accent-color: var(--dn-cob); }
.dn-field__note { display: block; margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
.dn-money { display: flex; align-items: stretch; margin-top: 10px; }
.dn-money i { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-2); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); font-style: normal; font-size: 12px; background: var(--dn-soft); color: var(--text-2); }
.dn-money input[type="number"] { margin-top: 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
.dn-result { padding: clamp(22px, 3vw, 40px); background: var(--dn-sky); display: flex; flex-direction: column; justify-content: center; }
.dn-result > .mono { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 20, 20, .66); }
.dn-result strong { display: block; margin-top: 10px; font: 400 clamp(46px, 6vw, 80px)/1 var(--font-display); color: var(--dn-ink); letter-spacing: -.02em; }
.dn-result > p { margin: 12px 0 0; }
.dn-result__back { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(20, 20, 20, .18); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dn-result__back span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(20, 20, 20, .66); }
.dn-result__back b { font: 500 clamp(26px, 3vw, 36px)/1 var(--font-display); color: var(--dn-cob); }
.dn-result__fine { margin-top: 18px !important; font-size: 11px; color: rgba(20, 20, 20, .55); }

/* ---- card grids --------------------------------------------------------------------- */
.dn-grid { display: grid; gap: 14px; }
.dn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dn-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.dn-card__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dn-soft); color: var(--dn-cob); font-size: 11px; font-weight: 600; }
.dn-card .h3 { margin-top: 16px; font-size: 21px; }
.dn-card p { margin: 10px 0 0; color: var(--text-2); font-size: 15.5px; }
#safe .dn-card { border-top: 3px solid var(--dn-cob); }
.dn-steps { counter-reset: s; position: relative; }
.dn-steps .dn-card__n { background: var(--dn-ink); color: #fff; }

/* ---- the appointment card ------------------------------------------------------------ */
.dn-book { background: linear-gradient(180deg, var(--ink), #EAF1F5 40%, var(--ink)); }
.dn-appt { position: relative; max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 74px; grid-template-rows: auto 1fr;
  background: #fff; border-radius: 10px; box-shadow: 0 1px 0 rgba(20, 20, 20, .05), 0 30px 70px -36px rgba(20, 40, 90, .45); overflow: hidden; }
.dn-appt__band { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--dn-cob); color: #fff; }
.dn-appt__band .mono { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.dn-appt__band .mono:last-child { margin-left: auto; opacity: .7; }
.dn-appt__body { padding: clamp(24px, 3.4vw, 40px); }
.dn-appt__body .lede { margin-top: 12px; max-width: 46ch; }
.dn-appt__rows { margin: 26px 0 0; display: grid; gap: 0; }
.dn-appt__rows div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.dn-appt__rows dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.dn-appt__rows dd { margin: 0; font: 500 17px var(--font-display); }
.dn-appt__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dn-appt__stub { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; writing-mode: vertical-rl; padding: 24px 0; align-items: center;
  border-left: 2px dashed var(--line-2); background: var(--dn-tile); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* ---- small screens --------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .dn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-panel { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dn-hero__grid { grid-template-columns: 1fr; }
  .dn-calc { grid-template-columns: 1fr; }
  .dn-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dn-pin { padding: 3px; gap: 0; }
  .dn-pin span { display: none; }
  .dn-pin b { width: 22px; height: 22px; }
  .dn-builds, .dn-grid--4 { grid-template-columns: 1fr; }
  .dn-mode { flex-wrap: wrap; border-radius: 18px; }
  .dn-mode > span { width: 100%; padding: 6px 12px 2px; }
  .dn-tab { padding: 7px 12px 7px 8px; font-size: 14px; }
  .dn-appt { grid-template-columns: 1fr; }
  .dn-appt__stub { grid-row: auto; grid-column: 1; writing-mode: horizontal-tb; padding: 12px 22px; border-left: 0; border-top: 2px dashed var(--line-2); }
  .dn-appt__rows div { grid-template-columns: 1fr; gap: 4px; }
  .dn-plan figcaption { position: static; margin-top: 8px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dn-ring, .dn-led { animation: none; }
  .dn-js .dn-panel.is-on { animation: none; }
}