/* Dental Check-Ups & Cleanings — /check-ups/ (also the home of the retired /preventative-checks/)
   Scoped to body.page-check-ups. Page hero, sec-head, ledger, stick, related and accordion are shared (site.css).
   Two drawings: the year as a ring of twelve months, with a visit at the top and bottom, beside the steps
   of the visit; and the signature hairline dental chart, all 32 teeth around the arch, which draws itself on
   and then examines each tooth in turn. */

/* ---------- Who it's for: the lead beside the reasons to book ---------- */
.page-check-ups .cu-intro__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: var(--space-block); }
.page-check-ups .cu-intro__title { max-width: 17ch; }
.page-check-ups .cu-intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: var(--space-block); align-items: start; }
.page-check-ups .cu-intro__copy { grid-column: 1 / span 6; }
.page-check-ups .cu-intro__copy .lead { margin-bottom: 1.1em; color: var(--ink); text-wrap: pretty; }
.page-check-ups .cu-intro__copy p:not(.lead) { max-width: 54ch; }
.page-check-ups .cu-signs { grid-column: 8 / -1; padding-top: 8px; }
.page-check-ups .cu-signs__label { margin: 0 0 18px; font-family: var(--f-display); font-style: italic; font-size: var(--fs-h4); font-weight: 300; line-height: 1.3; color: var(--muted); }
.page-check-ups .cu-signs__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.page-check-ups .cu-signs__list > li {
  position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-size: clamp(1.15rem, 1.4vw, 1.35rem); font-weight: 300; line-height: 1.3; letter-spacing: -.005em; color: var(--ink); text-wrap: pretty;
}
.page-check-ups .cu-signs__list > li::before { content: ""; position: absolute; left: 0; top: calc(16px + .68em); width: 14px; height: 1px; background: var(--sun-deep); }
.page-check-ups .cu-signs__note { margin: 22px 0 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.page-check-ups .cu-signs__note a,
.page-check-ups .cu-step__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: .24em; transition: color .3s, text-decoration-color .3s; }
.page-check-ups .cu-signs__note a:hover,
.page-check-ups .cu-step__text a:hover { color: var(--ink-3); text-decoration-color: var(--ink-3); }

/* ---------- Your visit: the year ring beside the steps, on the alternate ground ---------- */
.page-check-ups .cu-visit__title { max-width: 15ch; }
.page-check-ups .cu-visit__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.page-check-ups .cu-visit__media { position: sticky; top: calc(var(--header-h) + 40px); }

/* The year ring */
.page-check-ups .cu-dial { width: min(100%, 560px); margin: 0; }
.page-check-ups .cu-dial__stage { position: relative; }
.page-check-ups .cu-dial__svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-check-ups .cu-dial__seg { fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-linecap: round; }
.page-check-ups .cu-dial__elapsed { fill: none; stroke: var(--sun); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.page-check-ups .cu-dial__elapsed.is-current { opacity: 1; transition-duration: .4s; }
.page-check-ups .cu-dial__dot { fill: var(--porcelain-2); stroke: var(--ink); stroke-width: 1.25; transition: fill .6s var(--ease-out), stroke .6s var(--ease-out); }
.page-check-ups .cu-dial__node.is-active .cu-dial__dot { fill: var(--sun); stroke: var(--sun); }
.page-check-ups .cu-dial__marker-halo { fill: none; stroke: var(--sun); stroke-width: 1; opacity: .5; }
.page-check-ups .cu-dial__marker-dot { fill: var(--sun); }

/* Readout in the middle of the ring */
.page-check-ups .cu-dial__readout {
  position: absolute; left: 50%; top: 50%; width: 54%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: none;
}
.page-check-ups .cu-dial__readout > span { display: block; transition: opacity .28s var(--ease-out), transform .6s var(--ease-out); }
.page-check-ups .cu-dial__readout.is-swap > span { opacity: 0; transform: translateY(8px); transition-duration: .28s, .28s; }
.page-check-ups .cu-dial__key { font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-deep); }
.page-check-ups .cu-dial__val { font-family: var(--f-display); font-size: clamp(1.7rem, 2.8vw, 2.6rem); font-style: italic; font-weight: 300; line-height: 1.04; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

/* Draw-on: the twelve month segments trace in order, then the visits, marker and readout settle in */
.js .page-check-ups .cu-dial .cu-dial__node,
.js .page-check-ups .cu-dial .cu-dial__marker,
.js .page-check-ups .cu-dial .cu-dial__readout { transition: opacity 1.2s var(--ease-out) var(--d, 1s); }
.js .page-check-ups .cu-dial .cu-dial__node { --d: 1.2s; }
.js .page-check-ups .cu-dial .cu-dial__marker,
.js .page-check-ups .cu-dial .cu-dial__readout { --d: 1.6s; }
/* Hidden only once site.js is running, so the whole drawing still shows if the script never loads. */
.js.ready .page-check-ups .cu-dial:not(.is-visible) .cu-dial__node,
.js.ready .page-check-ups .cu-dial:not(.is-visible) .cu-dial__marker,
.js.ready .page-check-ups .cu-dial:not(.is-visible) .cu-dial__readout,
.js.ready .page-check-ups .cu-dial:not(.is-visible) .cu-dial__elapsed { opacity: 0; }
.js .page-check-ups .cu-dial .cu-dial__seg { transition-duration: 1.4s; transition-delay: calc(.2s + var(--i, 0) * 70ms); }
.js .page-check-ups .cu-dial:not(.is-running) .cu-dial__elapsed { transition: opacity 1.2s var(--ease-out) 1.6s; }
/* The readout's swap transition must not inherit the long reveal delay once the ring is running */
.js .page-check-ups .cu-dial.is-running .cu-dial__readout { transition: none; }

/* The steps of the visit, numbered */
.page-check-ups .cu-steps { margin: 0; padding: 0; list-style: none; counter-reset: cu-step; border-top: 1px solid var(--line-strong); }
.page-check-ups .cu-step { counter-increment: cu-step; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px 20px; padding: clamp(24px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); }
.page-check-ups .cu-step::before { content: counter(cu-step, decimal-leading-zero); grid-row: span 2; padding-top: .7em; font-size: .72rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--sun-deep); }
.page-check-ups .cu-step::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--sun-deep); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.page-check-ups .cu-step.is-on::after { transform: scaleX(1); }
.page-check-ups .cu-step__title { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 300; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); }
.page-check-ups .cu-step__text { margin: 0; max-width: 48ch; color: var(--muted); }

/* ---------- The exam, on ink, beside the chart ---------- */
/* The copy reads down the page's left axis; the chart sticks on the right. */
.page-check-ups .cu-exam__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.page-check-ups .cu-exam__visual { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 32px); }
.page-check-ups .cu-exam__body { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; padding-top: clamp(0px, 2vw, 32px); }
.page-check-ups .cu-exam__item { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: clamp(48px, 6vw, 96px); }
.page-check-ups .cu-exam__item + .cu-exam__item { padding: clamp(48px, 6vw, 96px) 0 0; border-top: 1px solid var(--line-ink); }
.page-check-ups .cu-exam__title { max-width: 13ch; font-family: var(--f-display); font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 300; line-height: 1.04; letter-spacing: -.025em; }
.page-check-ups .cu-exam__item .rich ul { margin: 0; border-top: 1px solid var(--line-ink); }
.page-check-ups .cu-exam__item .rich ul > li { margin: 0; padding: 14px 0 14px 1.6em; border-bottom: 1px solid var(--line-ink); }
.page-check-ups .cu-exam__item .rich ul > li::before { top: calc(14px + .82em); }

/* ---------- The dental chart ---------- */
.page-check-ups .cu-chart { margin: 0 0 0 auto; max-width: calc((100svh - var(--header-h) - 96px) * .872); }
.page-check-ups .cu-chart__svg { --sw: .85; display: block; width: 100%; height: auto; overflow: visible; }
.page-check-ups .cu-chart__gum path { fill: none; stroke: var(--line-ink-strong); stroke-width: var(--sw); }

/* Teeth */
.page-check-ups .cu-tooth { cursor: default; }
.page-check-ups .cu-tooth__crown { fill: var(--sun); fill-opacity: 0; stroke: var(--on-ink-muted); stroke-width: var(--sw); stroke-linejoin: round; }
.page-check-ups .cu-tooth__groove { fill: none; stroke: var(--line-ink-strong); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; }

/* Draw-on: outlines trace themselves in turn around the arch.
   The dash is a touch longer than the path so closed outlines meet without a seam. */
.js .page-check-ups [data-reveal] .cu-chart__svg [pathLength] { stroke-dasharray: 1.1 1.1; stroke-dashoffset: 1.1; }
.js .page-check-ups [data-reveal].is-visible .cu-chart__svg [pathLength] { stroke-dashoffset: 0; }
.js .page-check-ups [data-reveal] .cu-chart__svg [pathLength] {
  transition: stroke-dashoffset 1.7s var(--ease-in-out) calc(var(--i, 0) * 36ms + var(--d, 0s)), stroke .7s var(--ease-out), fill-opacity .7s var(--ease-out);
}

/* Examination states. With motion, teeth start faint and brighten as they are examined;
   with reduced motion (or no JS) the chart stays static and fully drawn. */
@media (prefers-reduced-motion: no-preference) {
  .js .page-check-ups .cu-chart .cu-tooth__crown { stroke: var(--line-ink-strong); }
  .js .page-check-ups .cu-chart .cu-tooth__groove { stroke: var(--line-ink); }
}
.page-check-ups .cu-chart .cu-tooth.is-done .cu-tooth__crown { stroke: var(--sea); }
.page-check-ups .cu-chart .cu-tooth.is-done .cu-tooth__groove { stroke: var(--tide); }
.page-check-ups .cu-chart .cu-tooth.is-active .cu-tooth__crown,
.page-check-ups .cu-chart .cu-tooth.is-hover .cu-tooth__crown { stroke: var(--sun); fill-opacity: .16; }
.page-check-ups .cu-chart .cu-tooth.is-active .cu-tooth__groove,
.page-check-ups .cu-chart .cu-tooth.is-hover .cu-tooth__groove { stroke: var(--sun); }
/* A tooth lights up quickly and fades back slowly */
.js .page-check-ups .cu-chart .cu-tooth.is-active [pathLength],
.js .page-check-ups .cu-chart .cu-tooth.is-hover [pathLength] { transition: stroke .22s var(--ease-out), fill .22s var(--ease-out), fill-opacity .22s var(--ease-out), stroke-dashoffset 0s; }
.page-check-ups .cu-chart.is-complete .cu-chart__gum path { stroke: var(--sea); transition: stroke 1s var(--ease-out); }

/* ---------- Children, and between visits: two staggered columns ---------- */
.page-check-ups .cu-care__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: var(--space-block); align-items: start; }
.page-check-ups .cu-care__item { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-check-ups .cu-care__item:nth-child(2) { grid-column: 7 / -1; margin-top: clamp(0px, 10vw, 160px); }
.page-check-ups .cu-care__rule { align-self: stretch; height: 1px; margin-bottom: 8px; background: var(--line-strong); }
.page-check-ups .cu-care__title { max-width: 12ch; font-family: var(--f-display); font-size: clamp(2.25rem, 4vw, 3.9rem); font-weight: 300; line-height: 1.02; letter-spacing: -.028em; }

/* ---------- Who you'll see, and cost: two columns ---------- */
.page-check-ups .cu-team__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: var(--space-block); align-items: start; }
.page-check-ups .cu-team__who { grid-column: 1 / span 5; }
.page-check-ups .cu-team__cost { grid-column: 7 / -1; }
.page-check-ups .cu-team__who, .page-check-ups .cu-team__cost { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-check-ups .cu-team__title { max-width: 12ch; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.04; }
.page-check-ups .cu-team__ledger { align-self: stretch; margin-top: 4px; border-top-color: var(--line-strong); }
.page-check-ups .cu-team__ledger .ledger__row { grid-template-columns: minmax(110px, 2fr) minmax(0, 5fr); }
.page-check-ups .cu-team__ledger dd { color: var(--muted); }
.page-check-ups .cu-team__ledger dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: .24em; background: none; white-space: nowrap; }
.page-check-ups .cu-team__ledger dd a:hover { color: var(--ink-3); }

/* ---------- FAQs: sticky title beside the questions ---------- */
.page-check-ups .cu-faq__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.page-check-ups .cu-faq__title { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 300; line-height: 1.02; letter-spacing: -.035em; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .page-check-ups .cu-intro__copy { grid-column: 1 / span 7; }
  .page-check-ups .cu-signs { grid-column: 8 / -1; }
  .page-check-ups .cu-exam__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-check-ups .cu-chart__svg { --sw: 1.15; }
  .page-check-ups .cu-team__who { grid-column: 1 / span 6; }
  .page-check-ups .cu-team__cost { grid-column: 7 / -1; }
}
@media (max-width: 900px) {
  .page-check-ups .cu-intro__copy, .page-check-ups .cu-signs { grid-column: 1 / -1; }
  .page-check-ups .cu-signs { padding-top: 0; }
  .page-check-ups .cu-visit__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-block); }
  .page-check-ups .cu-visit__media { position: static; }
  .page-check-ups .cu-dial { width: min(100%, 440px); margin-inline: auto; }
  .page-check-ups .cu-exam__grid { grid-template-columns: minmax(0, 1fr); }
  .page-check-ups .cu-exam__visual { grid-column: 1; grid-row: auto; position: static; width: min(100%, 560px); margin-inline: auto; }
  .page-check-ups .cu-chart { max-width: none; }
  .page-check-ups .cu-chart__svg { --sw: 1; }
  .page-check-ups .cu-exam__body { grid-column: 1; grid-row: auto; padding-top: 0; }
  .page-check-ups .cu-care__item, .page-check-ups .cu-care__item:nth-child(2) { grid-column: 1 / -1; margin-top: 0; }
  .page-check-ups .cu-team__who, .page-check-ups .cu-team__cost { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .page-check-ups .cu-chart__svg { --sw: 1.35; }
  .page-check-ups .cu-dial__readout { gap: 10px; width: 58%; }
  .page-check-ups .cu-dial__val { font-size: 1.5rem; }
  .page-check-ups .cu-step { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; }
  .page-check-ups .cu-team__ledger .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}