/* Dental Crowns & Bridges — /crowns-bridges/
   Scoped to body.page-crowns. Page hero, sec-head, figure, points, ledger, stick, related and accordion are shared (site.css).
   Signature: the bridge drawn in elevation. Two crowns on prepared natural teeth carry a pontic over the gap;
   the roots and prepared teeth show faintly beneath the gums. The drawing draws on, then the bridge seats.
   The same drawing returns, one tooth at a time, beside the steps of the process. */

/* ---------- 01 Who it's for: the lead beside the reasons ---------- */
.page-crowns .cb-intro__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: var(--space-block); }
.page-crowns .cb-intro__title { max-width: 17ch; }
.page-crowns .cb-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-crowns .cb-intro__copy { grid-column: 1 / span 6; }
.page-crowns .cb-intro__copy .lead { margin-bottom: 1.1em; color: var(--ink); text-wrap: pretty; }
.page-crowns .cb-intro__copy p:not(.lead) { max-width: 54ch; }
.page-crowns .cb-signs { grid-column: 8 / -1; padding-top: 8px; }
.page-crowns .cb-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-crowns .cb-signs__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.page-crowns .cb-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-crowns .cb-signs__list > li::before { content: ""; position: absolute; left: 0; top: calc(16px + .68em); width: 14px; height: 1px; background: var(--sun-deep); }
.page-crowns .cb-signs__note { margin: 22px 0 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
@media (max-width: 1080px) { .page-crowns .cb-intro__copy { grid-column: 1 / span 7; } }
@media (max-width: 900px) {
  .page-crowns .cb-intro__copy, .page-crowns .cb-signs { grid-column: 1 / -1; }
  .page-crowns .cb-signs { padding-top: 0; }
}

/* Links set inside page components (the key, the options, the steps, the ledger) */
.page-crowns :is(.cb-key__text, .cb-options__after, .cb-points .points__text, .cb-team__ledger dd) a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: .24em; background: none; transition: color .3s, text-decoration-color .3s;
}
.page-crowns :is(.cb-key__text, .cb-options__after, .cb-points .points__text, .cb-team__ledger dd) a:hover { color: var(--ink-3); text-decoration-color: var(--ink-3); }
.page-crowns .cb-key .cb-key__text a, .page-crowns .cb-key .cb-key__text a:hover { color: var(--on-ink); }
.page-crowns .cb-key .cb-key__text a:hover { text-decoration-color: var(--on-ink); }

/* ---------- 02 How they work (ink): heading + lead, the drawing, then its key ---------- */
.page-crowns .cb-what { overflow: hidden; }
.page-crowns .cb-what__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px; align-items: end; }
.page-crowns .cb-what__label { grid-column: 1 / -1; }
.page-crowns .cb-what__title { grid-column: 1 / span 7; }
.page-crowns .cb-what__lead { grid-column: 9 / -1; padding-bottom: .4em; }
.page-crowns .cb-what__lead p { font-family: var(--f-display); font-size: var(--fs-lead); font-weight: 300; line-height: 1.32; letter-spacing: -.01em; color: var(--on-ink); }
@media (max-width: 1080px) {
  .page-crowns .cb-what__title { grid-column: 1 / -1; }
  .page-crowns .cb-what__lead { grid-column: 5 / -1; }
}
@media (max-width: 900px) { .page-crowns .cb-what__lead { grid-column: 1 / -1; } }

/* The drawing */
.page-crowns .cb-fig { margin-top: clamp(56px, 7vw, 112px); }
.page-crowns .cb-fig__stage {
  position: relative; overflow: hidden; padding-block: clamp(8px, 1.5vw, 24px) clamp(20px, 3vw, 44px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.page-crowns .cb-fig__plate { position: relative; aspect-ratio: 1200 / 600; }
.page-crowns .cb-fig__svg, .page-crowns .cb-mini__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Strokes: hairlines at any scale */
.page-crowns .cb-fig__svg :is(path, circle), .page-crowns .cb-mini__svg :is(path, circle) { fill: none; vector-effect: non-scaling-stroke; }
.page-crowns .cb-solid { stroke: var(--on-ink); stroke-width: 1.3; stroke-linejoin: round; }
.page-crowns .cb-sun { stroke: var(--sun); stroke-width: 1.5; stroke-linejoin: round; }
.page-crowns .cb-fine { stroke: var(--on-ink-muted); stroke-width: 1; }
.page-crowns .cb-fine--sun { stroke: var(--sun); }
.page-crowns .cb-gum { stroke: var(--on-ink); stroke-width: 1.3; }
.page-crowns .cb-hid { stroke: var(--on-ink); stroke-width: 1; stroke-dasharray: 5 4; opacity: .42; }
.page-crowns .cb-ghost { stroke: var(--sun); stroke-width: 1.2; stroke-dasharray: .5 5; stroke-linecap: round; opacity: .7; }
.page-crowns .cb-cement { stroke: var(--on-ink); stroke-width: 1.2; stroke-dasharray: .5 3.5; stroke-linecap: round; opacity: .6; }
.page-crowns .cb-leaders path { stroke: var(--on-ink-muted); stroke-width: 1; }
.page-crowns .cb-arc { stroke: var(--on-ink-muted); stroke-width: 1; stroke-linecap: round; }
.page-crowns .cb-dot { fill: var(--on-ink) !important; stroke: none; }

/* Annotations: HTML on the drawing, so they stay legible at every size. Set as an illustrator would letter
   them: part names in the display italic, notes smaller and quieter. */
.page-crowns .cb-tag {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  white-space: nowrap; font-family: var(--f-display); font-style: italic; font-weight: 300;
  font-size: clamp(.98rem, 1.15vw, 1.12rem); line-height: 1.2; letter-spacing: 0; color: var(--on-ink-muted);
  transition: opacity .6s var(--ease-out), color .6s var(--ease-out);
}
.page-crowns .cb-tag--name { font-size: clamp(1.15rem, 1.55vw, 1.5rem); color: var(--on-ink); }
.page-crowns .cb-tag--dim { padding: 0 .55em; background: var(--ink); }
.page-crowns .cb-tag--side { transform: translate(0, -50%); }
.page-crowns .cb-tag--end { transform: translate(-100%, -50%); }
.page-crowns .cb-tag--sun { color: var(--sun); }

/* Draw-on: with non-scaling hairlines Chrome measures the pathLength dash before scaling, so a dash of 1 falls
   short of the end once the drawing is scaled up. A dash and gap of 1.25 covers every scale this plate reaches. */
.js .page-crowns [data-reveal] :is(.cb-fig__svg, .cb-mini__svg) [pathLength] { stroke-dasharray: 1.25; stroke-dashoffset: 1.25; }
.js .page-crowns [data-reveal].is-visible :is(.cb-fig__svg, .cb-mini__svg) [pathLength] { stroke-dashoffset: 0; }

/* Sequence: the gums draw, hidden lines fade up, the crowns draw, the bridge seats, then the notes. */
.page-crowns :is(.cb-hid, .cb-ghost, .cb-cement, .cb-dot) { transition: opacity 1.2s var(--ease-out); transition-delay: var(--fd, 0s); }
.page-crowns .cb-part--teeth .cb-hid { --fd: .7s; }
.page-crowns .cb-part--missing .cb-ghost { --fd: 1.6s; }
.page-crowns .cb-cement { --fd: 3.6s; }
.page-crowns .cb-dot { --fd: 2.4s; }
.page-crowns .cb-seat { transition: transform 1.7s var(--ease-in-out) 2.3s; }
.page-crowns .cb-fig__stage .cb-tag { transition: opacity .9s var(--ease-out) var(--td, 2.4s), color .6s var(--ease-out); }
.page-crowns .cb-tag--foot { --td: 1.9s; }
.ready .page-crowns [data-reveal]:not(.is-visible) :is(.cb-hid, .cb-ghost, .cb-cement, .cb-dot, .cb-tag) { opacity: 0; }
.ready .page-crowns [data-reveal]:not(.is-visible) .cb-seat { transform: translateY(-30px); }

/* The key: the three definitions, named as in the drawing. Hovering one isolates its parts. */
.page-crowns .cb-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 88px); margin: clamp(28px, 3vw, 48px) 0 0; }
.page-crowns .cb-key__item { display: flex; flex-direction: column; gap: 18px; padding-top: 26px; border-top: 1px solid var(--line-ink); transition: border-color .6s var(--ease-out); }
.page-crowns .cb-key__term { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; color: var(--on-ink); }
.page-crowns .cb-key__text { margin: 0; max-width: 42ch; color: var(--on-ink-muted); }
.page-crowns .cb-key__item:hover { border-color: var(--sun); }

.page-crowns .cb-part { transition: opacity .6s var(--ease-out); }
.page-crowns .cb-fig:has([data-key="a"]:hover) :is(.cb-part--pontic, .cb-part--teeth, .cb-part--missing, .cb-part--span),
.page-crowns .cb-fig:has([data-key="b"]:hover) :is(.cb-part--teeth, .cb-part--missing, .cb-part--cement),
.page-crowns .cb-fig:has([data-key="c"]:hover) :is(.cb-part--crown, .cb-part--pontic, .cb-part--cement, .cb-part--missing, .cb-part--span) { opacity: .14; }
.page-crowns .cb-fig:has([data-key="c"]:hover) .cb-part--teeth .cb-hid { opacity: .95; }
/* Notes dim by colour, not opacity, so they do not wait out their reveal delay. */
.page-crowns .cb-fig:has([data-key="a"]:hover) .cb-fig__stage .cb-tag:not([data-k="a"]),
.page-crowns .cb-fig:has([data-key="b"]:hover) .cb-fig__stage .cb-tag:not([data-k="a"], [data-k="b"]),
.page-crowns .cb-fig:has([data-key="c"]:hover) .cb-fig__stage .cb-tag:not([data-k="c"]) { color: var(--line-ink-strong); }
.page-crowns .cb-fig:has([data-key="c"]:hover) .cb-part--teeth .cb-hid { transition-delay: 0s; }

@media (max-width: 1080px) {
  .page-crowns .cb-fig__plate { width: 120%; margin-left: -10%; }
  .page-crowns .cb-fig .cb-tag--side, .page-crowns .cb-fig .cb-leaders { display: none; }
}
@media (max-width: 900px) {
  .page-crowns .cb-key { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .page-crowns .cb-key__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; }
}
@media (max-width: 640px) {
  .page-crowns .cb-fig__plate { width: 150%; margin-left: -25%; }
  .page-crowns .cb-fig__stage { padding-block: 12px 40px; -webkit-mask-image: none; mask-image: none; }
  .page-crowns .cb-tag { font-size: .9rem; }
  .page-crowns .cb-tag--name { font-size: 1.05rem; }
  /* Foot notes wrap and hang below their anchor, under the roots. */
  .page-crowns .cb-tag--foot { white-space: normal; text-align: center; line-height: 1.15; max-width: 5.5em; transform: translate(-50%, -30%); }
  .page-crowns .cb-key__item { display: flex; gap: 14px; }
}

/* ---------- 03 Options: four materials and designs in a hairline grid ---------- */
.page-crowns .cb-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.page-crowns .cb-opt { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(30px, 3vw, 44px) clamp(20px, 2.4vw, 40px) 12px; border-left: 1px solid var(--line); }
.page-crowns .cb-opt:first-child { padding-left: 0; border-left: 0; }
.page-crowns .cb-opt::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--sun-deep); transition: width .9s var(--ease-out); }
.page-crowns .cb-opt:not(:first-child)::before { left: -1px; }
.page-crowns .cb-opt:hover::before { width: 100%; }
.page-crowns .cb-opt__title { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 300; line-height: 1.12; letter-spacing: -.015em; }
.page-crowns .cb-opt__text { margin: 0; max-width: 34ch; color: var(--muted); }
.page-crowns .cb-options__after { max-width: 60ch; margin: clamp(40px, 4.4vw, 64px) 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 1080px) {
  .page-crowns .cb-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .page-crowns .cb-opt { border-top: 1px solid var(--line-strong); padding-bottom: 40px; }
  .page-crowns .cb-opt:nth-child(3) { padding-left: 0; border-left: 0; }
  .page-crowns .cb-opt:nth-child(3)::before { left: 0; }
  .page-crowns .cb-options__after { border-top: 0; padding-top: 0; margin-top: 8px; }
}
@media (max-width: 640px) {
  .page-crowns .cb-opts { grid-template-columns: minmax(0, 1fr); }
  .page-crowns .cb-opt:nth-child(n) { gap: 12px; padding: 24px 0 32px; border-left: 0; }
  .page-crowns .cb-opt:nth-child(n)::before { left: 0; }
}

/* ---------- 04 The process: the steps beside two drawings of one tooth, before and after ---------- */
.page-crowns .cb-process__head .sec-head__title { max-width: 12ch; }
.page-crowns .cb-process__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.page-crowns .cb-points { border-top-color: var(--line-strong); }
.page-crowns .cb-points .points__title { font-size: clamp(1.35rem, 1.8vw, 1.65rem); font-weight: 300; letter-spacing: -.01em; }
.page-crowns .cb-points .points__text { max-width: 52ch; }
.page-crowns .cb-process__figs { position: sticky; top: calc(var(--header-h) + 40px); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.page-crowns .cb-mini__stage { position: relative; aspect-ratio: 560 / 372; background: var(--porcelain); }
/* The roots fade out beneath the gums rather than stopping at a cut. */
.page-crowns .cb-mini__svg { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 91%); mask-image: linear-gradient(180deg, #000 70%, transparent 91%); }
.page-crowns .cb-mini .figure__cap { margin-top: 12px; }
.page-crowns .cb-mini .figure__cap span:first-child { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; font-weight: 300; font-stretch: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
/* The drawing in ink on porcelain */
.page-crowns .cb-mini__svg .cb-solid, .page-crowns .cb-mini__svg .cb-gum { stroke: var(--ink); }
.page-crowns .cb-mini__svg .cb-fine { stroke: var(--muted); }
.page-crowns .cb-mini__svg .cb-hid { stroke: var(--ink); opacity: .5; }
.page-crowns .cb-mini__svg .cb-leaders path { stroke: var(--muted); }
.page-crowns .cb-mini__svg .cb-dot { fill: var(--ink) !important; }
.page-crowns .cb-temp { stroke: var(--sun); stroke-width: 1.5; stroke-dasharray: 7 5; stroke-linejoin: round; }
.page-crowns .cb-cement--sun { stroke: var(--sun); stroke-width: 1.5; opacity: 1; }
.page-crowns .cb-mini .cb-tag { color: var(--muted); }
.page-crowns .cb-mini .cb-tag--sun { color: var(--sun-deep); }
.page-crowns .cb-temp { transition: opacity 1.2s var(--ease-out) 1.2s; }
.ready .page-crowns [data-reveal]:not(.is-visible) .cb-temp { opacity: 0; }
.page-crowns .cb-mini .cb-tag { transition: opacity .9s var(--ease-out) 2s; }
.page-crowns .cb-mini .cb-cement { --fd: 3.3s; }
.page-crowns .cb-mini .cb-dot { --fd: 1.8s; }
.page-crowns .cb-mini .cb-hid { --fd: .4s; }
@media (max-width: 900px) {
  .page-crowns .cb-process__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-block); }
  .page-crowns .cb-process__figs { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
  .page-crowns .cb-process__figs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-crowns .cb-mini .cb-tag { font-size: .85rem; }
}

/* ---------- 05 Who treats you, and cost: two columns ---------- */
.page-crowns .cb-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-crowns .cb-team__who { grid-column: 1 / span 5; }
.page-crowns .cb-team__cost { grid-column: 7 / -1; }
.page-crowns .cb-team__who, .page-crowns .cb-team__cost { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-crowns .cb-team__title { max-width: 12ch; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.04; }
.page-crowns .cb-team__ledger { align-self: stretch; margin-top: 4px; border-top-color: var(--line-strong); }
.page-crowns .cb-team__ledger .ledger__row { grid-template-columns: minmax(110px, 2fr) minmax(0, 5fr); }
.page-crowns .cb-team__ledger dd { color: var(--muted); }
.page-crowns .cb-team__ledger dd a { white-space: nowrap; }
@media (max-width: 1080px) { .page-crowns .cb-team__who { grid-column: 1 / span 6; } }
@media (max-width: 900px) { .page-crowns .cb-team__who, .page-crowns .cb-team__cost { grid-column: 1 / -1; } }
@media (max-width: 640px) { .page-crowns .cb-team__ledger .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

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