/* =============================================================================
   Halden Orthodontics, devices.css: the detail devices D01 to D20 (dna/DETAILS.md), the class names
   every package writes to. A device is never restyled per page. Tokens only (tokens.css).
   ========================================================================== */

/* D01 pill button + D02 text roll + D03 icons ------------------------------- */
.pill { display: inline-flex; align-items: center; gap: var(--gap-24); height: var(--btn-h); padding: var(--gap-16) var(--gap-24);
  border: 0; border-radius: var(--r-pill); background: var(--ground-light); color: var(--ink); cursor: pointer; white-space: nowrap;
  font-family: var(--t-c1-family); font-size: var(--t-c1-size); line-height: var(--t-c1-lh); font-weight: var(--t-c1-weight); letter-spacing: var(--t-c1-track);
  transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io); }
.pill--dark { background: var(--ground-dark); color: var(--ink-invert); }
.pill--spruce { background: var(--cta); color: var(--cta-ink); }
.pill--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.pill svg { width: var(--icon); height: var(--icon); flex: none; transition: transform var(--dur-fast) var(--ease-io); }
.pill:hover svg, .pill:focus-visible svg { transform: rotate(90deg); }
.pill:hover .ico-chev, .pill:focus-visible .ico-chev { transform: none; }

.roll { position: relative; display: inline-grid; overflow: hidden; height: 1.13em; line-height: 1.13; }
.roll > span { display: block; transition: transform var(--dur-fast) var(--ease-io); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
.pill:hover .roll > span, .pill:focus-visible .roll > span { transform: translateY(-100%); }
.ulink .roll > span { transition-duration: var(--dur-link); transition-timing-function: var(--ease-out); }
.ulink:hover .roll > span, .ulink:focus-visible .roll > span { transform: translateY(-100%); }

.ico-plus, .ico-chev, .ico-corner, .ico-back { width: var(--icon); height: var(--icon); flex: none; }

/* D04 underline link ------------------------------------------------------- */
.ulink { display: inline-flex; align-items: center; gap: var(--gap-8); padding-bottom: 2px; border-bottom: 1px solid var(--line); min-height: 24px;
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.band--dark .ulink, .is-dark-ground .ulink, .foot .ulink { border-bottom-color: var(--ink-invert); }

/* D05 circle buttons ------------------------------------------------------- */
.circ { display: inline-grid; place-items: center; width: var(--circ); height: var(--circ); padding: 0; border: 0; border-radius: var(--r-circle);
  background: var(--tint); color: var(--anchor); cursor: pointer; flex: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.circ--ink { background: var(--anchor); color: var(--ink-invert); }
.circ--light { background: var(--ground-light); color: var(--anchor); }
.back { display: inline-flex; align-items: center; gap: var(--gap-16); font-family: var(--t-c1-family); font-size: var(--t-c1-size); font-weight: var(--t-c1-weight); letter-spacing: var(--t-c1-track); }
.circ svg { width: var(--icon); height: var(--icon); }
.form__submit { width: var(--circ-lg); height: var(--circ-lg); background: var(--cta); color: var(--cta-ink); }
.form__submit:hover { background: var(--ground-light); }
.form__submit[disabled] { opacity: .55; cursor: not-allowed; }/* D06 chip ----------------------------------------------------------------- */


/* D07 label with a colon --------------------------------------------------- */
.lbl { display: block; font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.lbl--sm { font-size: var(--t-c3-size); line-height: var(--t-c3-lh); font-weight: var(--t-c3-weight); letter-spacing: var(--t-c3-track); }
.lbl--faded { color: var(--ink-quiet); }
.band--dark .lbl--faded, .is-dark-ground .lbl--faded, .foot .lbl--faded, .nav .lbl--faded, .modal .lbl--faded { color: var(--ink-soft); }

/* D08 hairline rows + FAQ + concern ---------------------------------------- */
.rows { display: grid; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-40); padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); }
.rows > .row:last-child { border-bottom: 1px solid var(--hairline-light); }
.band--dark .row, .is-dark-ground .row, .foot .row, .nav .row { border-color: var(--hairline-dark); }
.faq__toggle { pointer-events: none; }
.faq__toggle svg { transition: transform var(--dur-fast) var(--ease-out); }

/* D09 counters ------------------------------------------------------------- */
.counter { display: inline-flex; align-items: baseline; gap: var(--gap-8); }
.counter__n { font-family: var(--t-h2-family); font-size: var(--t-h2-size); line-height: 1; letter-spacing: var(--t-h2-track); }
.counter__of { font-family: var(--t-c3-family); font-size: var(--t-c3-size); font-weight: var(--t-c3-weight); }

/* D10 cards ---------------------------------------------------------------- */
.card { position: relative; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }

/* D11 split headline ------------------------------------------------------- */
.split-h { display: grid; font-family: var(--display); font-weight: 400; }
.split-h > span { display: block; }
.split-h > .sl { text-align: left; }
.split-h > .sr { text-align: right; }
.split-h > .sc { text-align: center; }

/* D12 scroll-revealed words ------------------------------------------------ */
.reveal-words .w { color: var(--ink-reveal-light); transition: color var(--dur-fast) linear; }
.band--dark .reveal-words .w { color: var(--ink-reveal-dark); }
.reveal-words .w.on { color: var(--ink); }
.band--dark .reveal-words .w.on { color: var(--ink-invert); }
html:not(.js) .reveal-words .w, .reduced .reveal-words .w { color: inherit; }

/* D13 key-indicator ring --------------------------------------------------- */
.ring { display: grid; place-items: center; width: var(--ring); height: var(--ring); flex: none; padding: var(--gap-40); border: 1px solid var(--hairline-light); border-radius: var(--r-circle); text-align: center;
  font-family: var(--t-p1-family); font-size: var(--t-p1-size); line-height: var(--t-p1-lh); font-weight: var(--t-p1-weight); letter-spacing: var(--t-p1-track); }
.band--dark .ring { border-color: var(--hairline-dark); }

/* D14 pill form ------------------------------------------------------------ */
.form { display: grid; gap: var(--gap-12); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-12); }
.form__end { display: flex; align-items: center; gap: var(--gap-12); }
.form__end .field { flex: 1; }
.field { position: relative; display: block; }
.field input, .field textarea, .field select { width: 100%; height: var(--field-h); padding: var(--gap-24) var(--gap-32) var(--gap-8); border: 1px solid var(--hairline-dark); border-radius: var(--r-field);
  background: transparent; color: var(--ink-invert); font-family: var(--t-p3-family); font-size: 16px; line-height: 1.2; transition: border-color var(--dur-fast) var(--ease-io); }
.field textarea { height: var(--circ-lg); padding-top: var(--gap-32); resize: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink-invert); outline: none; }
/* A3: every form sits on a dark ground (modal, x03, footer); the ring is light there, never the dark-on-dark shadow (focus-ring-contrast) */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { box-shadow: 0 0 0 2px var(--ink-invert); }
.field label { position: absolute; left: var(--gap-32); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3-dark);
  font-family: var(--t-p3-family); font-size: var(--t-p3-size); transition: top var(--dur-fast) var(--ease-io), font-size var(--dur-fast) var(--ease-io); }
.field--area label { top: var(--gap-24); transform: none; }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label, .field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label {
  top: var(--gap-16); transform: none; font-size: var(--t-c3-size); }
.field--area textarea:focus ~ label, .field--area textarea:not(:placeholder-shown) ~ label { top: var(--gap-12); }
.field__err { margin-top: var(--gap-8); padding-left: var(--gap-32); font-size: var(--t-c2-size); font-weight: 600; color: var(--ink-invert); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--cta); }
.radios { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-24); border: 0; margin: 0 0 var(--gap-12); padding: 0; }
.radios legend { padding: 0; margin-bottom: var(--gap-12); }
.radio { display: inline-flex; align-items: center; gap: var(--gap-8); min-height: 24px; cursor: pointer; font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); }
/* the measured 10px dot (D14), drawn inside a 24px target (WCAG 2.5.8): a 1px ring, filled when checked */
.radio input { appearance: none; flex: none; width: var(--gap-24); height: var(--gap-24); margin: 0; border: 0; border-radius: var(--r-circle); color: var(--ink-invert);
  background: radial-gradient(circle, transparent 0 4px, currentColor 4.5px 5.25px, transparent 5.75px); }
.radio input:checked { background: radial-gradient(circle, currentColor 0 5.25px, transparent 5.75px); }
.radio input:focus-visible { outline: 2px solid var(--ink-invert); outline-offset: 3px; }
.form-noscript, .form__demo { color: var(--ink-soft); font-size: var(--t-c2-size); line-height: 1.4; }
/* F: the one post-submit message (SUBMIT_NOTE_HTML), full ink so it reads at 14.9:1; the number is a tel link */
.form-note { color: var(--ink-invert); font-family: var(--t-p1-family); font-size: var(--t-p1-size); font-weight: var(--t-p1-weight); line-height: 1.3; letter-spacing: var(--t-p1-track); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.form-note[hidden] { display: none; }

/* D16 procedure row -------------------------------------------------------- */
.proc { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-16); min-height: 44px; padding: var(--gap-12) 0; border-top: 1px solid var(--hairline-dark);
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.hdr__panel .proc { border-top-color: var(--hairline-light); }
.proc:hover { opacity: .6; }/* D17 avatar stack: retired (builder H2, Cleven 2 Nov): the people show at native size in h02 .pcard (home.css) */

/* D19 testimonial block ---------------------------------------------------- */
/* D20 comparison slider ---------------------------------------------------- */



@media (max-width: 1023px) {
  .form__row { grid-template-columns: 1fr; }
  .radio { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .reveal-words .w { color: inherit !important; } }

/* ---- prefooter: the last band of every page (fix wave 2, C4; St. Mary's pre-footer and Your visit) ---------------------------
   A full-bleed bright photo about 900px tall at 1440. No filter on the picture: the only dark is a bottom gradient under the type.
   The footer's curve rises over its bottom edge (footer.css margin-top), so the type clears the curve. */
.s-prefoot { position: relative; display: flex; align-items: flex-end; overflow: hidden; height: clamp(520px, 62.5vw, 1280px); background: var(--anchor); color: var(--ink-invert); }
.s-prefoot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-prefoot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84%; pointer-events: none;
  background: linear-gradient(to top, rgba(35, 31, 32, .86), rgba(35, 31, 32, .68) 46%, rgba(35, 31, 32, .5) 70%, rgba(35, 31, 32, .22) 88%, transparent); }
.s-prefoot__in { position: relative; z-index: 1; display: grid; gap: var(--gap-32); width: 100%; padding-bottom: calc(var(--foot-curve) + var(--gap-48)); }
.s-prefoot__h { color: var(--ink-invert); margin: 0; }
.s-prefoot__go { display: flex; justify-content: flex-end; }
@media (max-width: 1023px) { .s-prefoot { height: auto; min-height: max(100svh, 760px); } .s-prefoot__go { justify-content: flex-start; } }   /* tall enough that the low sun of the closing photo sits above the headline */

/* ---- rings: N overlapping hairline circles, one light disc on the ring line (fix wave 2, C3; D13, St. Mary's step device) ---- */
.band--white { background: var(--white); color: var(--ink); }
.rings { --ov: 40px; --disc: 56px; overflow: hidden; }
.rings__in { display: grid; gap: var(--gap-48); }
.rings__lbl { justify-self: center; }
.rings__stage { position: relative; }
.rings__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), calc((100% - var(--ov)) / var(--n))); align-items: stretch; }
.rings__i { position: relative; display: flex; flex-direction: column; gap: var(--gap-24); min-width: 0; }
.rings__ring { position: relative; border: 0; width: calc(100% + var(--ov)); aspect-ratio: 1; height: auto; padding: var(--gap-24); gap: var(--gap-8); align-content: center; justify-items: center; }
.rings__ring .counter__n { font-size: var(--t-h4-size); }
.rings__t { margin: 0; font-weight: 400; }
.rings__p { flex: 1 1 auto; margin: 0; width: calc(100% - var(--gap-24)); margin-left: calc((var(--ov) + var(--gap-24)) / 2); text-align: center;
  font-size: 16px; line-height: 1.45; color: var(--ink-quiet); }
.rings__disc { position: absolute; z-index: 2; width: var(--disc); height: var(--disc); left: calc((100% - var(--ov)) / var(--n) * 1.5 + var(--ov) / 2); top: 0;
  margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2); fill: var(--tint); pointer-events: none; }
@media (max-width: 1023px) {
  .rings { --ov: 20px; --disc: 40px; }
  .rings__view { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--hairline-light) transparent; padding-bottom: var(--gap-16); }
  .rings__stage { width: max-content; }
  .rings__list { display: flex; }
  .rings__i { flex: none; width: 280px; scroll-snap-align: start; }
  .rings__i + .rings__i { margin-left: calc(var(--ov) * -1); }
  .rings__ring { width: 100%; }
  .rings__p { width: calc(100% - 2 * var(--ov)); margin-left: var(--ov); }
  .rings__disc { left: calc(280px * 1.5 - var(--ov)); }
}
.rings__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--hairline-light); stroke-width: 1px; pointer-events: none; }