/* Periodontics — /periodontics/
   Scoped to body.page-periodontics. Page hero, labels, rich copy, stick, split, arch, points, accordion and related are shared (site.css).
   Signature: a row of teeth seen from the side, the gums, pockets and bone beneath them, read from gingivitis on the
   left to periodontitis on the right. A periodontal probe walks the gum line and lights the tooth it is on. */

.page-periodontics :is(.pd-cost, .pd-intro__more) a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: color .3s, text-decoration-color .3s;
}
.page-periodontics :is(.pd-cost, .pd-intro__more) a:hover { color: var(--ink-3); text-decoration-color: var(--ink-3); }

/* ---------- 01 Intro: the heading, then "when to see a periodontist" beside the opening copy ---------- */
.page-periodontics .pd-intro__label { margin-bottom: 28px; }
.page-periodontics .pd-intro__title { max-width: 16ch; }
.page-periodontics .pd-intro__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 56px;
  margin-top: var(--space-block);
}
.page-periodontics .pd-when { grid-column: 1 / span 4; align-self: start; padding-top: 10px; }
.page-periodontics .pd-when__label { margin: 0 0 18px; font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; color: var(--muted); }
.page-periodontics .pd-when__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.page-periodontics .pd-when__list li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.3; color: var(--ink);
}
.page-periodontics .pd-when__list li::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--sun-deep); border-radius: 50%; transform: translateY(-1px); }
.page-periodontics .pd-intro__body { grid-column: 6 / -1; max-width: none; }
.page-periodontics .pd-intro__lead { margin-bottom: 1.3em; color: var(--ink); text-indent: 3.2em; }
.page-periodontics .pd-intro__more { max-width: 52ch; margin-left: auto; }
@media (max-width: 900px) {
  .page-periodontics .pd-when, .page-periodontics .pd-intro__body { grid-column: 1 / -1; }
  .page-periodontics .pd-when { order: 2; }
  .page-periodontics .pd-intro__more { margin-left: 0; }
}
@media (max-width: 640px) { .page-periodontics .pd-intro__lead { text-indent: 0; } }

/* ---------- 02 Charting (ink): heading and copy, the chart, then what we record ---------- */
.page-periodontics .pd-disease { overflow: hidden; }
.page-periodontics .pd-disease__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px;
  margin-bottom: var(--space-block);
}
.page-periodontics .pd-disease__head .label { grid-column: 1 / -1; }
.page-periodontics .pd-disease__title { grid-column: 1 / span 5; align-self: start; }
.page-periodontics .pd-disease__copy { grid-column: 7 / -1; align-self: end; max-width: 60ch; }
.page-periodontics .pd-disease__copy p { font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.7; }
@media (max-width: 900px) { .page-periodontics .pd-disease__title, .page-periodontics .pd-disease__copy { grid-column: 1 / -1; } }

/* The chart. Its head reads the progression across the row of teeth. */
.page-periodontics .pd-chart { position: relative; margin: 0; }
.page-periodontics .pd-chart__head { padding-bottom: 18px; }
.page-periodontics .pd-chart__arrow {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.2; color: var(--on-ink);
}
.page-periodontics .pd-chart__arrow span:last-child { color: var(--sun); }
.page-periodontics .pd-chart__arrow i { position: relative; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-ink-strong), var(--sun)); opacity: .8; }
.page-periodontics .pd-chart__arrow i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--sun); border-right: 1px solid var(--sun); transform: rotate(45deg); transform-origin: 100% 0; }
.page-periodontics .pd-chart__key { font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; }

/* The stage. On phones the drawing is shown at twice the stage width and pans. */
.page-periodontics .pd-chart__stage { position: relative; padding-bottom: clamp(8px, 1.2vw, 16px); }
.page-periodontics .pd-chart__svg {
  --k: 1; display: block; width: 100%; height: auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
}
@media (max-width: 1080px) { .page-periodontics .pd-chart__svg { --k: 1.25; } }
@media (max-width: 900px) { .page-periodontics .pd-chart__svg { --k: 1.6; } }
@media (max-width: 640px) {
  .page-periodontics .pd-chart__stage {
    overflow: hidden; margin-inline: calc(var(--gutter) * -1);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .page-periodontics .pd-chart__svg {
    --k: 1.75; width: 200%; max-width: none; -webkit-mask-image: none; mask-image: none;
    transform: translateX(var(--pan, -25%)); transition: transform 1.15s var(--ease-in-out);
  }
}

/* Linework, all hairlines (--k thickens the scaled strokes when the drawing is shown small) */
.page-periodontics .pd-chart__svg path { fill: none; }
.page-periodontics :is(.pd-chart__roots path, .pd-chart__bone, .pd-chart__att) { vector-effect: non-scaling-stroke; }
/* Pockets: the gap opening between gum and tooth, in a sea tint */
.page-periodontics .pd-chart__svg .pd-chart__pocket { fill: var(--sea); fill-opacity: .17; }
.page-periodontics .pd-chart__bone { stroke: var(--on-ink); stroke-opacity: .55; stroke-width: 1.25; stroke-dasharray: .5 4.5; stroke-linecap: round; }
.page-periodontics .pd-chart__att { stroke: var(--sea); stroke-opacity: .55; stroke-width: 1; }
.page-periodontics .pd-chart__roots path { stroke: var(--on-ink); stroke-opacity: .34; stroke-width: 1; stroke-dasharray: 3 4; }
.page-periodontics .pd-chart__svg .pd-chart__crowns path { fill: var(--ink-2); stroke: var(--on-ink); stroke-opacity: .88; stroke-width: calc(1.25px * var(--k)); stroke-linecap: round; stroke-linejoin: round; transition: fill .8s var(--ease-out), stroke-opacity .8s var(--ease-out); }
/* The tooth under the probe */
.page-periodontics .pd-chart__svg .pd-chart__crowns path.is-on { fill: color-mix(in srgb, var(--ink-2), var(--sea) 22%); stroke-opacity: 1; }
.page-periodontics .pd-chart__svg .pd-chart__crowns .pd-chart__cej { fill: none; stroke-opacity: .4; stroke-width: calc(1px * var(--k)); }
.page-periodontics .pd-chart__svg .pd-chart__crowns .pd-chart__lobe { fill: none; stroke-opacity: .12; stroke-width: calc(1px * var(--k)); }
.page-periodontics .pd-chart__gum { stroke: var(--sea); stroke-width: calc(1.5px * var(--k)); }

/* The probe: --px/--py place its tip; the part under the gum line shows faintly */
.page-periodontics .pd-probe__x { transform: translateX(var(--px)); transition: transform 1.15s var(--ease-in-out); }
.page-periodontics .pd-probe__y { transform: translateY(var(--py)); transition: transform .95s var(--ease-out); }
.page-periodontics .pd-probe__ghost { opacity: .3; }
.page-periodontics .pd-chart__svg .pd-probe__shaft { stroke-width: calc(1.5px * var(--k)); }
.page-periodontics .pd-stop { stop-color: var(--sun); }
.page-periodontics .pd-chart__svg .pd-probe__band { stroke: var(--sun); stroke-width: 3.5; }
.page-periodontics .pd-probe__tip { fill: var(--sun); }

/* Reveal: linework draws on, the rest settles in after it */
.js .page-periodontics .pd-chart :is(.pd-chart__roots, .pd-chart__pocket, .pd-chart__bone, .pd-chart__att, .pd-probe) { transition: opacity 1.4s var(--ease-out); }
.js .page-periodontics .pd-chart:not(.is-visible) :is(.pd-chart__roots, .pd-chart__pocket, .pd-chart__bone, .pd-chart__att, .pd-probe) { opacity: 0; }
.js .page-periodontics .pd-chart.is-visible .pd-chart__pocket { transition-delay: 1.1s; }
.js .page-periodontics .pd-chart.is-visible :is(.pd-chart__roots, .pd-chart__bone, .pd-chart__att) { transition-delay: .9s; }
.js .page-periodontics .pd-chart.is-visible .pd-probe { transition-delay: 1.9s; }
.js .page-periodontics .pd-chart [pathLength] { transition-duration: 2.6s; }
.js .page-periodontics .pd-chart .pd-chart__gum { transition-duration: 3.2s; transition-delay: .3s; }

/* Legend */
.page-periodontics .pd-chart__legend { display: flex; flex-wrap: wrap; gap: 14px 36px; padding-top: 18px; border-top: 1px solid var(--line-ink); }
.page-periodontics .pd-chart__key { display: inline-flex; align-items: center; gap: 12px; color: var(--on-ink-muted); }
.page-periodontics .pd-key { flex: none; width: 26px; height: 10px; }
.page-periodontics .pd-key--gum { height: 1.5px; background: var(--sea); }
.page-periodontics .pd-key--pocket { background: var(--sea); opacity: .32; }
.page-periodontics .pd-key--bone { height: 2px; background: radial-gradient(circle, var(--on-ink-muted) .9px, transparent 1.2px) 0 50% / 5px 2px repeat-x; }
.page-periodontics .pd-key--root { height: 1px; background: repeating-linear-gradient(90deg, var(--on-ink-muted) 0 3px, transparent 3px 7px); }

/* What we record: a two-column ruled list under the figure */
.page-periodontics .pd-symptoms {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px;
  margin-top: var(--space-block);
}
.page-periodontics .pd-symptoms__lead {
  grid-column: 1 / span 4; margin: 0; max-width: 12em; text-wrap: balance;
  font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; color: var(--on-ink);
}
.page-periodontics .pd-symptoms__list {
  grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px);
  margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-ink);
}
.page-periodontics .pd-symptoms__list li { padding: 20px 0 22px; border-bottom: 1px solid var(--line-ink); color: var(--on-ink); line-height: 1.45; }
@media (max-width: 1080px) { .page-periodontics .pd-symptoms__lead { grid-column: 1 / span 4; } .page-periodontics .pd-symptoms__list { grid-column: 5 / -1; } }
@media (max-width: 900px) {
  .page-periodontics .pd-symptoms__lead, .page-periodontics .pd-symptoms__list { grid-column: 1 / -1; }
  .page-periodontics .pd-symptoms__lead { max-width: none; }
}
@media (max-width: 640px) {
  .page-periodontics .pd-chart__arrow { gap: 14px; }
  .page-periodontics .pd-chart__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .page-periodontics .pd-symptoms__list { grid-template-columns: minmax(0, 1fr); }
  .page-periodontics .pd-symptoms__list li { padding: 16px 0 18px; }
}

/* ---------- 03 Treatments: sticky title beside a ruled table of treatments ---------- */
.page-periodontics .pd-treat__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.page-periodontics .pd-treat__aside { position: sticky; top: calc(var(--header-h) + 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-periodontics .pd-treat__title { max-width: 12ch; }
.page-periodontics .pd-treat__lead { max-width: 38ch; margin: 0; color: var(--muted); }
.page-periodontics .pd-tx { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.page-periodontics .pd-tx__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); column-gap: clamp(20px, 2.6vw, 40px); row-gap: 10px;
  align-items: baseline; padding: clamp(26px, 2.8vw, 38px) 0; border-bottom: 1px solid var(--line);
}
.page-periodontics .pd-tx__row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sun-deep); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.page-periodontics .pd-tx__row:hover::before { transform: scaleX(1); }
.page-periodontics .pd-tx__name { font-family: var(--f-display); font-size: clamp(1.4rem, 1.9vw, 1.8rem); font-weight: 300; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.page-periodontics .pd-tx__name a { display: inline; color: inherit; text-decoration: none; background: linear-gradient(var(--sun), var(--sun)) 0 100% / 100% 1px no-repeat; transition: color .3s; }
.page-periodontics .pd-tx__name a:hover { color: var(--ink-3); }
.page-periodontics .pd-tx__name .icon { display: inline-block; width: 18px; height: 18px; margin-left: 10px; vertical-align: -.05em; color: var(--sun-deep); transition: transform .6s var(--ease-out); }
.page-periodontics .pd-tx__name a:hover .icon { transform: translateX(4px); }
.page-periodontics .pd-tx__what { margin: 0; color: var(--muted); }
.page-periodontics .pd-tx__for { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.page-periodontics .pd-tx__for span { font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-deep); }
@media (max-width: 1080px) {
  .page-periodontics .pd-tx__row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .page-periodontics .pd-tx__name { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .page-periodontics .pd-treat__grid { grid-template-columns: minmax(0, 1fr); }
  .page-periodontics .pd-treat__aside { position: static; }
  .page-periodontics .pd-treat__title { max-width: 16ch; }
}
@media (max-width: 640px) {
  .page-periodontics .pd-tx__row { grid-template-columns: minmax(0, 1fr); padding: 24px 0 26px; }
  .page-periodontics .pd-tx__for { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
}

/* ---------- 04 Step by step ---------- */
.page-periodontics .pd-steps__title { margin-top: 26px; max-width: 12ch; }

/* ---------- 05 Who treats you: the periodontist in the arch, with cost beneath his introduction ---------- */
.page-periodontics .pd-team__fig { margin: 14px; max-width: 440px; }
.page-periodontics .pd-team__img { --ar: .8; background: var(--ink-2); }
/* The photo has a caption baked into its lower edge; crop it out, as on About. */
.page-periodontics .pd-team__img img { height: 117%; object-position: 50% 0; }
.page-periodontics .pd-team__title { margin-bottom: 18px; }
.page-periodontics .pd-team__role { margin: 0 0 32px; font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-deep); }
.page-periodontics .pd-team__role span { margin-inline: .5em; color: var(--muted); }
.page-periodontics .pd-cost { max-width: 68ch; margin-top: clamp(36px, 4vw, 56px); padding-top: 26px; border-top: 1px solid var(--line-strong); }
.page-periodontics .pd-cost__title { margin-bottom: 14px; font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 400; line-height: 1.25; }
.page-periodontics .pd-cost p { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .page-periodontics .pd-team__fig { margin-inline: 14px auto; width: min(100% - 28px, 400px); } }

/* ---------- 06 FAQ ---------- */
.page-periodontics .pd-faq__title { margin-top: 26px; }