/* Revision 9, page group: specialty. Scoped to this group's templates:
   page-templates/template-orthodontics.php and template-pediatric.php.
   This sheet loads BEFORE revision-5.css (the shared inner design system),
   so every rule that has to win over it is prefixed with both the template
   body class and .premium-inner. The hero, the facts strip, the treatment
   cards and the Google badge are the system's own; these rules only fit the
   care-lane pages around them. */


/* --------------------------------------------------------------------------
   Lane colour: the pediatric page's own parts take its teal (several shared
   parts default to the orthodontic purple).
   -------------------------------------------------------------------------- */
.page-template-page-templatestemplate-pediatric-php :is(.facts, .section--tintped, .spec-options, .spec-docs, .spec-roof, .spec-faq) {
  --lane: var(--ped); --lane-dark: var(--ped-dark); --lane-tint: var(--ped-tint); --lane-tint-2: var(--ped-tint-2);
}
.page-template-page-templatestemplate-pediatric-php .spec-options .sect-head .eyebrow { color: var(--ped); }
/* A go-link takes the colour of the page it opens: the pediatric page's own
   links teal, the orthodontic page's link to pediatric dentistry teal too,
   the pediatric page's link to orthodontics purple. */
.page-template-page-templatestemplate-pediatric-php .spec-options .go-link__ic,
.page-template-page-templatestemplate-orthodontics-php .sroof__go .go-link__ic { background: var(--ped-tint); color: var(--ped); }
.page-template-page-templatestemplate-pediatric-php .spec-options .go-link:hover .go-link__ic,
.page-template-page-templatestemplate-orthodontics-php .sroof__go:hover .go-link__ic { background: var(--ped); color: #fff; }
.page-template-page-templatestemplate-pediatric-php .sroof__go .go-link__ic { background: var(--ortho-tint, #eee9f7); color: var(--ortho); }
.page-template-page-templatestemplate-pediatric-php .sroof__go:hover .go-link__ic { background: var(--ortho); color: #fff; }

/* Section headings break on balanced lines, never after a lone word. */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sect-head h2, .sroof__copy > h2, .spec-faq__main > h2) { text-wrap: balance; }


/* --------------------------------------------------------------------------
   Hero: the system's hero. The H1 names the specialty on at most two
   balanced lines; the photographs are framed on the children's faces.
   -------------------------------------------------------------------------- */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__copy h1 { text-wrap: balance; }
@media (min-width: 48rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__copy h1 { max-width: 17ch; }
}
/* On a phone the eyebrow is its first part only, so it stays on one line. */
@media (max-width: 47.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-hero__where { display: none; }
}
/* The orthodontic photograph is 16:9 with the face in the middle; the
   pediatric one is square with the child's face right of centre, so it is
   held to the right wherever the frame is narrower than the photograph. */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__art img { object-position: center 38%; }
.page-template-page-templatestemplate-pediatric-php.premium-inner .spec-hero .ihero__art img { object-position: 100% 34%; }
/* Phones: the system's rounded rectangle as one landscape crop; tablets:
   the photograph in the right-hand column, as the treatment pages do, so
   the hero stays about one screen. */
@media (max-width: 47.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__visual .ihero__art { width: 100%; max-width: none; aspect-ratio: 16 / 10; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__visual .ihero__art img { width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; align-items: center; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__visual { width: 100%; margin: 0; justify-self: stretch; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__visual .ihero__art { width: 100%; max-width: none; aspect-ratio: 4 / 5; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-hero .ihero__visual .ihero__art img { width: 100%; height: 100%; object-fit: cover; }
  .page-template-page-templatestemplate-pediatric-php.premium-inner .spec-hero .ihero__visual .ihero__art img { object-position: 100% 50%; }
}
@media (min-width: 64rem) {
  .page-template-page-templatestemplate-orthodontics-php.premium-inner .spec-hero .ihero__visual .ihero__art img { object-position: 50% 40%; }
  .page-template-page-templatestemplate-pediatric-php.premium-inner .spec-hero .ihero__visual .ihero__art img { object-position: 100% 50%; }
}


/* --------------------------------------------------------------------------
   Facts strip: the section below starts on the hero's lower edge, so the
   strip sits half on the hero and half on that section, with no band of
   page background between them.
   -------------------------------------------------------------------------- */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .ihero + .spec-facts { position: relative; z-index: 3; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-facts + .section {
  margin-top: calc(var(--facts-h) / -2); padding-top: calc(var(--sect) + var(--facts-h) / 2); border-top: 0;
}


/* --------------------------------------------------------------------------
   How it works: on a tablet the vertical stepper's text uses the card's
   full width instead of stopping two thirds of the way across.
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-steps .stepper { max-width: none; padding: 1.75rem 2rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-steps .stepper .stepper__body p { max-width: none; }
}


/* --------------------------------------------------------------------------
   Your specialists: one profile card per doctor, each shown once on the
   page (the facts strip names no one). Two orthodontists sit side by side
   as a pair: the portrait in the logo's arch beside the tag and the name,
   then the biography, the first three credentials and the profile link.
   The single pediatric dentist has one wide card: the portrait, then the
   biography beside the credentials.
   -------------------------------------------------------------------------- */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc {
  position: relative; display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  min-width: 0; padding: 1.5rem clamp(1.5rem, 3vw, 3rem) 1.5rem 1.5rem; border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1.75rem; background: #fff;
  box-shadow: 0 30px 60px -48px rgba(26, 18, 54, 0.5); transition: border-color 0.25s ease;
}
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc:hover { border-color: color-mix(in srgb, var(--lane, var(--ortho)) 22%, #e5e1ea); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__photo {
  display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 1.25rem 1.25rem;
  background: linear-gradient(165deg, var(--lane-tint, #eee9f7), #fff 85%);
}
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc:hover .sdoc__photo img { transform: scale(1.035); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__body > .tag { margin: 0; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__name { max-width: none; margin: 0.8rem 0 0; font-size: clamp(1.55rem, 1.2rem + 0.9vw, 2rem); line-height: 1.1; letter-spacing: -0.03em; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__name a { color: var(--ink); text-decoration: none; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__nm { white-space: nowrap; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__name a:hover { color: var(--lane, var(--ortho)); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 2.75rem); width: 100%; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft, #e5e1ea); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__bio { margin: 0; color: var(--body); font-size: 1rem; line-height: 1.65; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__creds { display: grid; gap: 0.65rem; margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.5; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__creds li { margin: 0; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__link { margin-top: 1.75rem; }

/* One doctor, 64rem to 80rem: the biography above the credentials, so
   neither is squeezed into a narrow column. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc__cols { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Profile-card layout, from 48rem: the pair of orthodontists at every width,
   and the single doctor on a tablet. The body and its columns dissolve into
   the card's grid so each part can be placed. */
@media (min-width: 48rem) {
  /* The two cards share their rows (subgrid), so the divider above the
     credentials and the profile links line up across the pair. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; column-gap: 1.5rem; row-gap: 0; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc {
    grid-row: span 5; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; grid-template-rows: subgrid; column-gap: 1.25rem; row-gap: 0; align-items: start;
    padding: 1.5rem;
  }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) :is(.sdoc__body, .sdoc__cols) { display: contents; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__photo { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 100%; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__body > .tag { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__name { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0.6rem; font-size: clamp(1.3rem, 0.9rem + 0.8vw, 1.75rem); }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__bio { grid-column: 1 / -1; grid-row: 3; margin-top: 1.25rem; font-size: 0.97rem; line-height: 1.6; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__creds { grid-column: 1 / -1; grid-row: 4; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft, #e5e1ea); }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__link { grid-column: 1 / -1; grid-row: 5; align-self: end; justify-self: start; margin-top: 1.5rem; }
}
@media (min-width: 80rem) {
  /* Wide screens: the portrait grows and the biography sits beside it. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) { grid-template-rows: auto auto 1fr auto auto; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc { grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; grid-template-rows: subgrid; column-gap: 1.75rem; padding: 1.75rem 2rem 1.75rem 1.75rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__photo { grid-row: 1 / 4; align-self: start; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__body > .tag { align-self: start; margin-top: 0.35rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__bio { grid-column: 2; grid-row: 3; margin-top: 0.85rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) :is(.sdocs--2, .sdocs--3) .sdoc__creds { margin-top: 1.5rem; padding-top: 1.5rem; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  /* One doctor on a tablet: the portrait beside the tag, the name and the
     biography, then the credentials and the link across the card. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc {
    grid-template-columns: 9rem minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; column-gap: 1.75rem; row-gap: 0; align-items: start; padding: 1.5rem 1.75rem 1.75rem 1.5rem;
  }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 :is(.sdoc__body, .sdoc__cols) { display: contents; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc__photo { grid-column: 1; grid-row: 1 / 4; width: 100%; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc__body > .tag { grid-column: 2; grid-row: 1; justify-self: start; margin-top: 0.35rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc__name { grid-column: 2; grid-row: 2; font-size: 1.6rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc__bio { grid-column: 2; grid-row: 3; margin-top: 0.85rem; font-size: 0.97rem; line-height: 1.6; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc__creds { grid-column: 1 / -1; grid-row: 4; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft, #e5e1ea); }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs--1 .sdoc__link { grid-column: 1 / -1; grid-row: 5; justify-self: start; margin-top: 1.5rem; }
}
@media (max-width: 47.99rem) {
  /* A phone: the portrait beside the tag and the name, then the biography
     and the profile link across the card. The credentials are on the profile. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdocs { gap: 0.75rem; margin-top: 1.5rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc {
    grid-template-columns: 5.25rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0; align-items: center; padding: 1rem; border-radius: 1.25rem;
  }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__body, :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__cols { display: contents; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__photo { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 5.25rem; border-radius: 999px 999px 0.8rem 0.8rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__body > .tag { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__name { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0.4rem; font-size: 1.15rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__bio { grid-column: 1 / -1; margin-top: 0.9rem; font-size: 0.92rem; line-height: 1.6; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__creds { display: none; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sdoc__link { grid-column: 1 / -1; display: flex; width: 100%; margin-top: 0.9rem; }
}


/* --------------------------------------------------------------------------
   Under one roof (was "Why families stay"): one panel, the same on both
   pages. From 64rem a landscape photograph bleeds to the panel's left edge
   beside the heading and the link, and the two points run across the foot
   of the panel; below 64rem it all stacks. The photograph is sized by its
   own aspect ratio (not stretched to the box and cropped), so the browser's
   automatic "sizes" picks a file as wide as the photograph is drawn.
   -------------------------------------------------------------------------- */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "copy" "list" "foot"; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lane, var(--ortho)) 10%, #e5e1ea); border-radius: 1.5rem;
  background: linear-gradient(150deg, var(--lane-tint-2, #f7f4fb) 0%, #fff 70%);
  box-shadow: 0 40px 80px -60px rgba(26, 18, 54, 0.45);
}
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__media { grid-area: media; position: relative; aspect-ratio: 16 / 9; min-height: 0; margin: 0; overflow: hidden; background: var(--lane-tint, #eee9f7); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__media img {
  position: absolute; top: 0; left: 50%; width: auto; min-width: 100%; max-width: none; height: 100%;
  transform: translateX(-50%); object-fit: cover; object-position: 50% 50%;
}
/* The orthodontic page's photograph: the boy's face is right of centre. */
.page-template-page-templatestemplate-orthodontics-php .sroof__media img { left: auto; right: 0; transform: none; object-position: 100% 30%; }
/* The pediatric page's photograph: the office, sky trimmed before the sign. */
.page-template-page-templatestemplate-pediatric-php .sroof__media img { object-position: 50% 70%; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap {
  position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.7rem; max-width: calc(100% - 2.5rem);
  padding: 0.5rem 1.1rem 0.5rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 36px -24px rgba(26, 18, 54, 0.55);
  color: var(--ink); line-height: 1.3;
}
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap-ic { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--lane-tint, #eee9f7); color: var(--lane, var(--ortho)); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap-txt { display: grid; gap: 0.05rem; min-width: 0; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap-txt strong { font-size: 0.84rem; font-weight: 700; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap-txt span { color: var(--body); font-size: 0.78rem; font-weight: 500; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__copy {
  grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 2.5rem 2.5rem 0;
}
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__copy > .eyebrow { margin: 0; color: var(--lane, var(--ortho)); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__copy > h2 { max-width: 20ch; margin: 1rem 0 0; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__lede { max-width: 36rem; margin: 1.1rem 0 0; color: var(--body); font-size: 1.05rem; line-height: 1.65; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list { grid-area: list; display: grid; gap: 0; margin: 1.75rem 0 0; padding: 0 2.5rem; list-style: none; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list > li {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0; padding: 1.25rem 0; border-top: 1px solid color-mix(in srgb, var(--lane, var(--ortho)) 12%, #e5e1ea);
}
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list > li::before { content: none; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__ic {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid color-mix(in srgb, var(--lane, var(--ortho)) 14%, #e5e1ea); border-radius: 0.85rem;
  background: #fff; color: var(--lane, var(--ortho)); box-shadow: 0 12px 24px -18px rgba(26, 18, 54, 0.5);
}
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list h3 { max-width: none; margin: 0.15rem 0 0; font-family: var(--text); font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--ink); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list p { margin: 0.3rem 0 0; color: var(--body); font-size: 0.95rem; line-height: 1.6; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__nw { white-space: nowrap; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__foot { grid-area: foot; padding: 0.75rem 2.5rem 2.5rem; }

@media (min-width: 64rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "media copy" "media foot" "list list"; border-radius: 2rem;
  }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__media { aspect-ratio: auto; min-height: 24rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__copy { align-self: end; padding: clamp(2.75rem, 4.5vw, 4rem) clamp(2.5rem, 4.5vw, 4rem) 0; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__foot { align-self: start; padding: 2rem clamp(2.5rem, 4.5vw, 4rem) clamp(2.75rem, 4.5vw, 4rem); }
  /* The two points: a band across the foot of the panel, side by side. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin: 0; padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--lane, var(--ortho)) 12%, #e5e1ea); background: rgba(255, 255, 255, 0.72);
  }
  /* Same columns as the photograph and the copy above, so the divider meets
     the photograph's edge and the second point lines up with the heading. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list > li { gap: 1.1rem; padding: 2rem clamp(2.5rem, 4.5vw, 4rem); border-top: 0; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list > li + li { border-left: 1px solid color-mix(in srgb, var(--lane, var(--ortho)) 12%, #e5e1ea); }
}
@media (max-width: 47.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof { border-radius: 1.25rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__media { aspect-ratio: 4 / 3; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap { bottom: 0.75rem; left: 0.75rem; gap: 0.55rem; max-width: calc(100% - 1.5rem); padding: 0.4rem 0.85rem 0.4rem 0.4rem; border-radius: 1rem; }
  /* A phone: the chip keeps to the address so it covers less of the photograph. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap { padding-right: 0.95rem; border-radius: 999px; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap-ic { width: 1.75rem; height: 1.75rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap-txt strong { display: none; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__cap-txt span { color: var(--ink); font-size: 0.76rem; font-weight: 600; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__copy { padding: 1.75rem 1.25rem 0; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__lede { font-size: 1rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list { margin-top: 1.5rem; padding: 0 1.25rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__list > li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.85rem; padding: 1rem 0; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__ic { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__foot { padding: 0.5rem 1.25rem 1.5rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .sroof__go { display: flex; width: 100%; }
}


/* --------------------------------------------------------------------------
   Reviews: the Google trust card, then three quotes, four across from
   64rem and two by two on a tablet; on a phone the card stays and the
   quotes fold behind "Read all reviews", as on the home page.
   -------------------------------------------------------------------------- */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev { display: grid; gap: 1rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev > .gbadge--card { max-width: none; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev .quote { height: 100%; margin: 0; }
@media (min-width: 48rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-reviews .sect-head { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-reviews .sect-head > .go-link { flex: none; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev :is(.srev__fold, .fold-panel, .srev__quotes) { display: contents; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev :is(.fold-row, .reviews-more) { display: none; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev > .gbadge--card { justify-content: center; }
}
@media (min-width: 80rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev .quote blockquote { font-size: 1.1rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev .quote figcaption { gap: 0.7rem; font-size: 0.8rem; line-height: 1.4; }
}
@media (max-width: 47.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-reviews .reviews-link { display: none; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev { margin-top: 1.5rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev > .gbadge--card { padding: 1.25rem 1.3rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev .reviews-fold { margin-top: 0; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .srev__quotes { display: grid; gap: 0.75rem; margin-top: 1rem; }
}


/* --------------------------------------------------------------------------
   Questions: the eyebrow and heading lead the list, 40px above it; the
   aside with the page's one closing booking button follows the questions
   wherever the two stack. Beside the questions, the aside's top edge lines
   up with the eyebrow's text.
   -------------------------------------------------------------------------- */
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq__main > h2 { margin: 1rem 0 2.5rem; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq .faqpage__nav > .eyebrow { margin-bottom: 0.9rem; }
:is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq__note { margin: 0; font-size: var(--fs-sm); color: var(--body); }

@media (max-width: 63.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq .faqpage__nav { order: 2; display: block; }
}
@media (max-width: 47.99rem) {
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq__main > h2 { margin-bottom: 1.75rem; }
  /* The closing booking button spans the card, like the page's other phone CTAs. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-faq .faqpage__nav .inline-cta { display: flex; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php).premium-inner .spec-faq .faqpage__nav .inline-cta .btn { width: 100%; justify-content: center; }
}
@media (min-width: 64rem) {
  /* Beside the questions, the aside is wide enough for its eyebrow and its
     booking button to sit on one line each. */
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq .faqpage { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq .faqpage__nav { margin-top: 0.55rem; padding: 1.5rem; }
  :is(.page-template-page-templatestemplate-orthodontics-php, .page-template-page-templatestemplate-pediatric-php) .spec-faq .faqpage__nav .inline-cta .btn { width: 100%; padding-inline: 1rem; white-space: nowrap; }
}