/*
 * Styles for the parts of the site this project adds, on top of the theme's
 * own stylesheet. Kept out of public/wp-content/ so the vendored theme stays a
 * byte-for-byte copy of the live one, and so tools/sync-from-live.py can never
 * overwrite it.
 *
 * Colours are the theme's: #2B93D1 blue, #F58220 orange, #8DC63F green,
 * #636466 body text, #F4F4F4 panel grey.
 */

/* ------------------------------------------------------------- mega menu -- */

/*
 * The Services panel, built from the theme's own vocabulary: the grey #F4F4F4
 * ground the nav already uses, one white rounded surface like .dentistry-card,
 * blue links, the orange hover the theme applies to every sub-menu link, and a
 * blue .btn pill. No new shapes or colours.
 *
 * Two groups, not nineteen links: the four pillars, and the handful of pages
 * families come for most. Listing every service under every pillar turned the
 * menu into a directory, which is not what a menu is read for. Everything else
 * that used to sit in a footer row here has moved: scheduling to the header,
 * and find-a-provider and the symptom checker back to the main nav entries that
 * already covered them.
 *
 * The theme shows a sub-menu by adding .active to the hovered <li> (desktop) or
 * by sliding it open on tap (mobile), and both work unchanged here: the panel
 * is still a .sub-menu, so script.js needed no edit. The lists inside it are
 * .mega-list rather than .sub-menu precisely so the theme's mobile handler does
 * not try to toggle them as a second level.
 */

.megamenu > li {
  margin: 0 !important;
}

.mega-grid {
  display: block;
}

.mega-head {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a8a8c;
  margin: 0 0 12px 0;
}

.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-list li {
  margin: 0;
}

.mega-list a {
  display: block;
  font-size: 17px !important;
  line-height: 22px !important;
  padding: 8px 0 !important;
  font-weight: 400;
  color: #636466;
}

.mega-list a:hover {
  color: #f58220 !important;
}

/* The theme's .mainnav .sub-menu > li a wins on specificity, hence !important. */
.mega-browse .mega-list a {
  color: #2b93d1 !important;
  font-weight: 700;
}

.mega-browse .mega-list a:hover {
  color: #f58220 !important;
}

/*
 * The way out of the shortcut list.
 *
 * It used to be a solid uppercase pill parked under the first column of
 * shortcuts, which read as a stray widget: heavier than anything else in a
 * panel that is otherwise quiet type, and anchored to nothing in particular.
 * It is now the panel's footer — a hairline across the full width, and the
 * link sitting on the right where the eye leaves the panel.
 *
 * The theme's `.mainnav .sub-menu > li a` rule (specificity 0,2,2) sets
 * display, padding and colour on every link in here, so each is restated.
 */
.mega-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e4e4e4;
}

.mega-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 4px 0 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
  color: #2b93d1 !important;
}

.mega-cta-arrow {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.mega-cta:hover {
  color: #f58220 !important;
}

/* The nudge is the whole affordance — it says the link goes somewhere. */
.mega-cta:hover .mega-cta-arrow {
  transform: translateX(3px);
}

/*
 * The desktop dropdowns. At 1200, with the burger, because everything in
 * here is about a menu bar: the mega panels, their hit areas, and the caret
 * suppression that told the mobile accordion to stay out of the way. Starting
 * at the theme's 768 meant the accordion was suppressed everywhere between 768
 * and 1199 while the burger was the only menu there — so Locations, Services
 * and Resources could not be opened at all in that whole band.
 */
@media (min-width: 1200px) {
  /* Static, so the panel positions against #graynav and can span the page. */
  .mainnav > li.mega {
    position: static;
  }

  .mainnav > li.mega > .sub-menu.megamenu {
    /*
     * Below the whole header row, not below the menu item. The menu shares a
     * row with the logo now, so a panel that opens from the item's own baseline
     * comes out across the middle of the logo.
     */
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    /* White, so the panel reads as its own surface below the grey nav bar. */
    background: #ffffff;
    padding: 32px 0 36px 0;
    border-radius: 0 0 25px 25px;
    /*
     * The panel is a child of #graynav, so it paints over the bar's own drop
     * shadow and ends up looking like a card floating on top of the nav. The
     * inset shadow along its top edge puts that shadow back, so the panel
     * reads as sliding out from behind the bar instead.
     */
    box-shadow:
      inset 0 9px 12px -9px rgba(33, 33, 33, 0.32),
      0 8px 16px rgba(33, 33, 33, 0.15);
  }

  /* Two classes, so it wins over .mega-grid's two-column rule regardless of
     source order — otherwise the single group lands in the 320px column. */
  .mega-grid.mega-grid-single {
    display: block;
  }

  .mega-list-2 {
    column-count: 2;
    column-gap: 48px;
  }

  .mega-list-3 {
    column-count: 3;
    column-gap: 48px;
  }

  .mega-list-2 li,
  .mega-list-3 li {
    break-inside: avoid;
  }

  /*
   * Hit areas for the top-level items.
   *
   * The bar is 60px tall but `#navwrap`'s 15px padding leaves the links only
   * 35px of that, and `justify-content: space-between` puts the space between
   * items outside every `li` — so the grey either side of a word, and the grey
   * above and below it, belonged to nothing and the panel closed as soon as
   * the pointer left the glyphs.
   *
   * The extender is a pseudo-element rather than real padding because padding
   * would be flex layout the bar has to redistribute, which moves the words.
   * This changes nothing about the layout: hit testing on a pseudo resolves to
   * its own element, so the `li` still gets the mouseenter the theme listens
   * for, and the link picks up the larger click target with it. Same trick as
   * `#mobileburger:after`.
   *
   * 16px each side clears the narrowest gap between two items — 38px at 768px,
   * where the type steps down — with room to spare, so two extenders never
   * meet. The vertical reach has to cover the widest inset the type sizes
   * produce (20px above, 23px below) and must not stop short at the bottom: a
   * dead strip between the bar and the panel is the same bug one pixel wide.
   * Overshooting lands in the panel's 32px of top padding, above its first row
   * of links, where keeping the panel open is what you want anyway.
   */
  .mainnav > li > a {
    position: relative;
  }

  .mainnav > li > a:before {
    content: "";
    position: absolute;
    top: -20px;
    right: -16px;
    bottom: -24px;
    left: -16px;
  }

  /* Desktop has its own dropdowns; the caret is a mobile affordance only. */
  .navtoggle {
    display: none;
  }

  /*
   * Tabbing to a menu item opens its panel and holds it open while focus is
   * anywhere inside, so the panel is reachable without a mouse.
   *
   * It has to be :focus-within on the item, not :focus-visible on the link.
   * With the latter, pressing Tab took focus off the link, which un-matched
   * the rule and hid the panel in the same style recalculation — so the link
   * about to receive focus was no longer rendered and focus fell through to
   * the body instead. Measured: tabbing past Locations landed on BODY, and
   * every link in the panel was unreachable.
   *
   * What :focus-within costs is that a mouse click focuses the link too, which
   * left the panel pinned open after the pointer had moved on. That is dealt
   * with in site.js by not letting a click take focus in the first place.
   */
  .mainnav > li.mega:focus-within > .sub-menu.megamenu {
    display: block;
  }

  /*
   * ...but not while the pointer is somewhere else in the bar. Focus opens a
   * panel and holds it; hover opens another. With both rules live and nothing
   * between them, a focused item and a hovered item were open at once, one
   * printed over the other — and the focused one stayed there over the page as
   * it scrolled, because nothing had told it to close.
   */
  .mainnav:hover > li.mega:focus-within:not(:hover) > .sub-menu.megamenu {
    display: none;
  }

  /*
   * The 28px of dead ground between the menu bar and the panel.
   *
   * The panel opens below the whole header row rather than below the item, so
   * the item's box ends at y89 and the panel starts at y116. Straight down,
   * that is survivable -- the pointer is over the item until it is over the
   * panel. Diagonally it is not, and diagonally is how anyone actually reaches
   * a link that is not directly beneath the word they hovered: the pointer
   * drifts off the item's width while still in the band, the item stops being
   * hovered, and the panel shuts in transit. Measured, five of six paths to a
   * real link died in that band, each between y97 and y108.
   *
   * So while an item is open, it also owns the band: a full-width strip along
   * the bottom of the bar, which is the pointer's whole journey from the word
   * to the panel. It is a pseudo-element of the item, so resting on it counts
   * as resting on the item and neither :hover nor the theme's own mouseleave
   * sees the pointer leave. It exists only while the panel is open, so it
   * never stands between the pointer and anything else.
   *
   * `bottom: 0` and not `top`, because the item is `position: static` here --
   * deliberately, so the panel can measure itself against #graynav and span
   * the page -- and this measures against the same box the panel does.
   */
  .mainnav > li.mega:hover::after,
  .mainnav > li.mega.active::after,
  .mainnav > li.mega:focus-within::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    /*
     * Above the other items' own links, which are `position: relative` at
     * z-index auto and come later in the markup, so without this they paint
     * over the strip and take the pointer back. That is what still killed the
     * three longest paths: crossing under "Services" on the way to a link on
     * the right of the Locations panel handed the hover to Services, and
     * crossing under "Providers", which has no panel at all, simply left
     * nothing open.
     */
    z-index: 1;
  }

  /*
   * ...and the two things the strip would otherwise cover.
   *
   * It spans the bar's full width, and the logo (y49..103) and the
   * "Schedule Appointment" button (y54..98) both hang into the band. Both are
   * `position: static`, so they paint below anything positioned and the strip
   * would have taken their clicks for as long as a menu was open -- including
   * the site's main call to action. Raised above it; the strip still covers
   * the menu items themselves, which is the point.
   */
  #logo a,
  .header-cta {
    position: relative;
    z-index: 2;
  }

  .megamenu > li {
    position: static;
  }

  /* No inner card — the groups sit directly on the panel, which is the whole
     dropdown surface. */
  .mega-grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 56px;
  }

  .mega-popular {
    border-left: 1px solid #e4e4e4;
    padding-left: 48px;
    margin-left: -48px;
  }

  /*
   * Three columns, so the six shortcuts fill the panel rather than leaving its
   * right third empty — which is what left the pill below them centred on the
   * gap between two columns, anchored to nothing.
   */
  .mega-list-split {
    column-count: 3;
    column-gap: 40px;
  }

  .mega-list-split li {
    break-inside: avoid;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .mega-grid {
    grid-template-columns: minmax(0, 250px) 1fr;
    gap: 36px;
  }

  .mega-popular {
    padding-left: 32px;
    margin-left: -32px;
  }

  .mega-list a {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  /*
   * Inside the burger menu a panel's links were the same size and weight as the
   * top-level items above them, so there was no telling a menu from what was
   * inside it. The panel now sits on its own tinted, indented block with a rule
   * down its left edge, and its links are a step smaller than the item that
   * opened them.
   */
  .megamenu .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .mainnav > li.mega > .sub-menu.megamenu {
    background: #ffffff;
    border-left: 3px solid #2b93d1;
    border-radius: 0 12px 12px 0;
    margin: 8px 0 6px 14px;
    padding: 14px 16px 10px 16px;
  }

  .mega-col {
    padding: 0;
    margin: 0;
  }

  .mega-col + .mega-col {
    border-top: 1px solid #e4e4e4;
    margin-top: 14px;
    padding-top: 14px;
  }

  .mega-list a {
    padding: 6px 0 !important;
    font-size: 16px !important;
  }

  /* The item that opens a panel reads as the parent of what is inside it. */
  .mainnav > li.menu-item-has-children > a {
    font-weight: 700;
  }
}

/* ------------------------------------------------------- mobile hero --- */

/*
 * On a phone each slide renders a second .heromessage.mobile block: the mobile
 * artwork as a plain <img>, then the heading, the line under it and the button
 * stacked beneath. Two things went wrong with that.
 *
 * The text sat on whatever the desktop banner's centre crop happened to be —
 * a flat pale area — so white type was close to invisible. And every slide came
 * out a different height because the headings differ in length, so the page
 * jumped each time the carousel advanced.
 *
 * The artwork is a designed graphic rather than a photograph, so it is shown
 * whole rather than used as a backdrop with type over it: the picture keeps the
 * top of the slide, and the words sit under it on brand blue. A fixed slide
 * height keeps every banner the same size, so nothing below the hero moves.
 */
@media (max-width: 767px) {
  .homeslide {
    /*
     * Matches the message exactly. Left to itself the slide ran 35px taller,
     * from the line box the whitespace after the container generates at the
     * theme's 22px hero font size.
     */
    height: 470px;
    overflow: hidden;
    /* The desktop artwork is the wrong crop here, and it is set inline. */
    background-image: none !important;
    background-color: #2b93d1 !important;
  }

  .heromessage.mobile {
    height: 470px;
    /* The theme's .mobile utility is display: block !important. */
    display: flex !important;
    flex-direction: column;
    padding-bottom: 26px;
    overflow: hidden;
  }

  .heromessage.mobile img {
    display: block;
    width: 100%;
    height: 196px;
    object-fit: cover;
    object-position: center;
    flex: 0 0 auto;
    margin-bottom: 22px;
  }

  .heromessage.mobile h1 {
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 10px;
  }

  .heromessage.mobile p {
    font-size: 17px;
    margin-bottom: 2px;
  }

  /* A flex item, and an odd one — it fought the button's margin-top: auto. */
  .heromessage.mobile br {
    display: none;
  }

  /*
   * The slide's button is .btn.blue, which disappears on the blue panel. White
   * with blue type keeps it a button. margin-top: auto lands it at the same
   * height on every slide, so it does not hop about as the carousel advances.
   */
  .heromessage.mobile .btn {
    align-self: flex-start;
    margin-top: auto;
    background: #ffffff !important;
    color: #2b93d1 !important;
    font-size: 18px;
    padding: 8px 26px;
  }

  .heromessage.mobile .btn:hover {
    background: #f58220 !important;
    color: #ffffff !important;
  }
}

/* ------------------------------------------------------------ header CTA -- */

/*
 * Scheduling is the practice's main call to action, so it is on every page
 * rather than only inside one menu — but where it goes depends on the width.
 *
 * On a desktop it sits in the header, left of the social icons. On a phone that
 * put it between the logo and the burger, where there is no room for it: it
 * crowded both and had to shrink to "Schedule" to fit at all. There it becomes
 * a docked bar at the bottom of the screen instead, which is both out of the
 * way and where a thumb already is.
 */

.header-cta {
  font-size: 16px !important;
  padding: 7px 22px !important;
  color: #ffffff !important;
  display: inline-block;
  vertical-align: middle;
  margin-right: 22px;
}

.header-cta:hover {
  color: #8dc63f !important;
}

.header-cta-short {
  display: none;
}

/*
 * Between 768 and 991 the theme shows its widest logo and the social icons, and
 * the full label crossed about 200px of the logo — measured. Shorten it there.
 */
@media (max-width: 991px) {
  .header-cta {
    font-size: 15px !important;
    padding: 6px 16px !important;
    margin-right: 14px;
  }

  .header-cta-full {
    display: none;
  }

  .header-cta-short {
    display: inline;
  }
}

/* On a phone the floating button below takes over entirely. */
@media (max-width: 767px) {
  .header-cta {
    display: none;
  }

  /* So the expanded bar never covers the end of the page. */
  body {
    padding-bottom: 88px;
  }
}

/*
 * The floating scheduling button.
 *
 * On a phone it starts as a full-width bar and folds into a circle in the
 * bottom-right corner once the page scrolls, so it stays reachable without
 * holding a strip of the screen the whole way down. Scroll back to the top and
 * it opens out again.
 *
 * On a wide screen the header carries the pill, so the button only appears once
 * that has scrolled out of view — and it appears already folded, since the point
 * there is a reminder rather than a banner.
 *
 * The button shrinks rather than moving: the row is anchored to the right, so
 * losing the label carries it into the corner on its own.
 */

.ctadock {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  justify-content: flex-end;
  /* So the strip either side of a folded button does not eat clicks. */
  pointer-events: none;
}

.ctadock-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border-radius: 28px;
  background: #8dc63f;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(33, 33, 33, 0.28);
  transition:
    width 0.28s ease,
    padding 0.28s ease,
    gap 0.28s ease,
    background 0.2s ease;
}

.ctadock-btn:hover {
  background: #f58220;
  color: #ffffff !important;
}

.ctadock-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ctadock-label {
  white-space: nowrap;
  overflow: hidden;
  max-width: 320px;
  transition:
    max-width 0.28s ease,
    opacity 0.18s ease;
}

.ctadock.is-mini .ctadock-btn {
  width: 56px;
  padding: 0;
  gap: 0;
}

.ctadock.is-mini .ctadock-label {
  max-width: 0;
  opacity: 0;
}

/* Live only at rest. See the `is-folding` comment in site.js. */
.ctadock.is-folding .ctadock-btn {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ctadock-btn,
  .ctadock-label {
    transition: none;
  }
}

@media (max-width: 1199px) {
  .ctadock {
    display: flex;
  }
}

/* --------------------------------------------------------- sticky chrome -- */

/*
 * Nothing pins on a wide screen.
 *
 * `#graynav` used to be a full-width grey bar under the logo, and pinning that
 * on scroll made sense. It is the menu sitting beside the logo now, so pinning
 * it left seven bare links floating over the page with no ground under them.
 * The rule and the script that drove it are both gone.
 *
 * Below 1200 the whole header sticks, which is a different thing: it is a
 * complete band, and it keeps the burger and the search within reach on a
 * screen where they are the only way to navigate.
 */
@media (max-width: 1199px) {
  #header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #ffffff;
  }

  /*
   * The bar is pinned to the top of every page now, so its height is a tax paid
   * on every screen. The theme gives the logo 30px of margin top and bottom,
   * which was two thirds of the 99px total; 14px brings the bar to 67px without
   * touching the logo itself.
   */
  #logo {
    margin: 14px 0 !important;
  }

  #topmenu {
    top: 17px;
  }

  /*
   * #graynav is absolutely positioned, so it adds nothing to the page height —
   * with the header pinned, an open menu taller than the screen could not be
   * scrolled to at all and its lower items were simply unreachable. Give it its
   * own scroll instead, bounded by the header above and the docked button
   * below.
   */
  #graynav {
    max-height: calc(100vh - 143px);
    /*
     * Both axes, deliberately. Setting only `overflow-y` leaves `overflow-x`
     * computing to `auto` rather than staying `visible`, so the moment the
     * menu grew tall enough for a vertical scrollbar, that bar took 14px out
     * of the client width and the fixed-width rows inside no longer fitted —
     * producing a horizontal scrollbar underneath the vertical one. Nothing in
     * this menu is ever meant to scroll sideways.
     */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* A hairline rather than a trough, on the browsers that draw one at all. */
    scrollbar-width: thin;
    scrollbar-color: #c3c7cb transparent;
    -webkit-overflow-scrolling: touch;
  }

  #graynav::-webkit-scrollbar {
    width: 6px;
  }

  #graynav::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #c3c7cb;
  }

  #graynav::-webkit-scrollbar-track {
    background: transparent;
  }

  /*
   * Touch targets. Every link in the menu was an inline anchor, so its tappable
   * box was only as tall as the line of text: 17px for the top-level items and
   * 29px inside a panel, against the 44px that is the usual minimum. The
   * anchors become blocks with real padding, and the list items give up their
   * own margins so the spacing does not double.
   */
  .mainnav > li {
    margin: 0;
  }

  .mainnav > li > a {
    display: block;
    padding: 13px 0;
  }

  .mega-list a {
    padding: 14px 0 !important;
  }

  /*
   * Stacked, so the footer is a row of its own at the end of the list rather
   * than a thing off to one side, and tall enough to be a comfortable target.
   */
  .mega-foot {
    justify-content: flex-start;
    margin-top: 10px;
    padding-top: 8px;
  }

  .mega-cta {
    padding: 14px 0 !important;
  }

  /*
   * A caret of its own on each parent, so the label can do what a link does.
   *
   * The theme's mobile handler makes the whole row a toggle and calls
   * preventDefault on the anchor, so tapping Services expanded it and went
   * nowhere — there was no way to reach /services/ from the menu at all. The
   * label navigates now and this opens the panel.
   */
  .navtoggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .navtoggle:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    border: solid #2b93d1;
    border-width: 0 3px 3px 0;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.18s ease;
  }

  .mainnav > li.open > .navtoggle:before {
    transform: translateY(2px) rotate(-135deg);
  }

  .navtoggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The label must not run under the caret. */
  .mainnav > li.menu-item-has-children > a {
    padding-right: 56px;
  }

  /* Extends the burger's hit area without moving the bars inside it. */
  #mobileburger:after {
    content: "";
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
  }
}

/* --------------------------------------------------------- filter chips -- */

.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.svc-chip {
  border: 2px solid #e4e4e4;
  background: #ffffff;
  color: #636466;
  border-radius: 25px;
  padding: 7px 22px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.svc-chip:hover {
  border-color: #f58220;
  color: #f58220;
}

.svc-chip.is-on {
  background: #2b93d1;
  border-color: #2b93d1;
  color: #ffffff;
}

.svc-card-pillar {
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.svc-card-pillar a {
  color: #8a8a8c;
  text-decoration: none;
  font-weight: 700;
}

.svc-card-pillar a:hover {
  color: #f58220;
}

.svc-empty {
  color: #8a8a8c;
}

.svc-pending {
  background: #f4f4f4;
  border-left: 4px solid #f58220;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  font-size: 16px !important;
  line-height: 24px !important;
  font-style: italic;
}

/*
 * The dentistry landing page's tab strip is `display: inline-flex` with fixed
 * width tabs, 1090px of them. Above 1200 the container is 1140 and it fits;
 * between 992 and 1199 the container is 960 and it ran 130px past the window.
 * The theme stacks it below 992 but leaves that band alone. It wraps instead.
 */
@media (max-width: 1199px) {
  #tabnav {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------ main nav -- */

/*
 * The menu bar, thinner — on every page.
 *
 * The theme sets it at 23px in a 60px bar, which is fine when it is the only
 * bar on the page. A service page has two: the menu and the section beneath
 * it, and at the theme's size those two plus the logo row came to 231px of
 * chrome before the page began. Thinner here rather than only in a section, so
 * the menu is the same on a home page and a service page — the whole point of
 * the exercise is that moving between them should not feel like a different
 * site.
 */
/* The anchor is inline, so its box was 20px tall around a 39px logo. */
#logo a {
  display: block;
}

.mainnav > li > a {
  font-size: 17px;
  /*
   * The theme tightens the menu by half a pixel, which is right for the 23px
   * it was set at and wrong at this size — it just makes the words look
   * squeezed, and costs seven items 24px of width.
   */
  letter-spacing: normal;
}

#navwrap {
  height: auto;
  padding: 11px 0;
}

@media (min-width: 992px) {
  .mainnav {
    justify-content: space-between;
    width: 100%;
  }
}

/* ---------------------------------------------------------- breadcrumbs -- */

.crumbs {
  clear: both;
  padding-top: 22px;
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crumbs li {
  display: inline;
  color: #ffffff;
  font-size: 16px;
}

.crumbs li + li:before {
  content: "›";
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.7);
}

.crumbs a {
  color: #ffffff;
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

/*
 * Inside a hero band the trail sits at the very top of the band, not in the
 * middle of it.
 *
 * It used to be the first line of the centred block, a few pixels above the
 * eyebrow — close enough to the title to read as the first line of the page
 * rather than as the way back out of it. Pinned to the top edge it is chrome
 * again, and the title keeps the middle of the band to itself.
 */
/*
 * Pinned to the hero's padding box, which is where an absolutely positioned
 * child measures `left: 0` from — outside the gutter, not inside it. Every
 * other line in the hero sits on the container's gutter, so the trail has to
 * carry the same one itself or it starts at the window's edge while the title
 * under it starts 12px in.
 */
.hero-crumbs {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  padding-top: 0;
  padding-inline: var(--bs-gutter-x, 0.75rem);
  margin: 0;
}

.hero-crumbs li {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.hero-crumbs li + li:before {
  color: rgba(255, 255, 255, 0.5);
}

.hero-crumbs a {
  color: rgba(255, 255, 255, 0.92);
}

/* -------------------------------------------------- pillar and service -- */

.svc-intro {
  padding-bottom: 0;
}

.svc-intro .pagebody {
  margin-top: 45px;
}

.svc-intro + .svc-index {
  padding-top: 45px;
}

.svc-lead {
  font-weight: 700 !important;
  margin-bottom: 24px;
}

/* The theme sets a { font-weight: 700 } globally; these read better regular. */
.svc-office-list a,
.svc-sibling-list a,
.mega-list a,
.crumbs a {
  font-weight: 400;
}

.svc-other-blurb {
  font-weight: 400;
}

.svc-index-title {
  margin-bottom: 30px;
}

/*
 * The line under "Where you can get this care". It answers the question the
 * grid below it raises — whether this is all of the offices or some of them —
 * so it sits with the heading rather than above the first card.
 */
.svc-where-note {
  margin: -18px 0 30px 0;
  color: #636466;
  font-size: 18px;
}

/*
 * `.svc-card` and `.graybg` are both #F4F4F4, so a card grid on a grey band was
 * invisible — the cards read as loose text. Rather than thread band colours
 * through every caller, a card on grey turns white. Either way it is a card.
 */
.graybg .svc-card,
.graybg .loc-card {
  background: #ffffff;
}

.svc-card {
  background: #f4f4f4;
  border-radius: 25px;
  padding: 32px 30px 30px 30px;
  margin-bottom: 30px;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.svc-card-title {
  font-size: 24px;
  margin: 0 0 10px 0;
}

.svc-card-title a {
  color: #2b93d1;
  text-decoration: none;
}

.svc-card-title a:hover {
  color: #f58220;
}

.svc-card-blurb {
  font-size: 18px !important;
  line-height: 26px !important;
  margin-bottom: 10px;
}

.svc-card-where {
  font-size: 15px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a8a8c;
  margin-bottom: 20px;
}

.svc-card .btn {
  font-size: 17px;
  padding: 6px 24px;
  align-self: flex-start;
  margin-top: auto;
}

.svc-aside {
  background: #f4f4f4;
  border-radius: 25px;
  padding: 30px;
}

.svc-aside-title {
  font-size: 22px;
  margin: 0 0 16px 0;
}

.svc-office-list {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
}

.svc-office-list li {
  border-bottom: 1px solid #e2e2e2;
}

.svc-office-list li:last-child {
  border-bottom: 0;
}

.svc-office-list a {
  display: block;
  padding: 8px 0;
  color: #636466;
  text-decoration: none;
  font-size: 17px;
}

.svc-office-list a:hover {
  color: #f58220;
}

.svc-aside-note {
  font-size: 15px !important;
  line-height: 21px !important;
  font-style: italic;
  margin-bottom: 16px;
}

.svc-aside-note a {
  font-weight: 400;
  color: #2b93d1;
  text-decoration: none;
}

.svc-aside-note a:hover {
  color: #f58220;
}

.svc-aside .btn {
  font-size: 17px;
  padding: 8px 22px;
}

.svc-team-more {
  margin-top: 20px;
}

.svc-sibling-list,
.svc-other-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-sibling-list li {
  display: inline-block;
  margin: 0 10px 10px 0;
}

.svc-sibling-list a {
  display: block;
  background: #f4f4f4;
  border-radius: 20px;
  padding: 7px 20px;
  color: #636466;
  text-decoration: none;
  font-size: 17px;
}

.svc-sibling-list a:hover {
  background: #2b93d1;
  color: #ffffff;
}

.svc-other-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.svc-other-list a {
  display: block;
  background: #ffffff;
  border-radius: 20px;
  padding: 22px 24px;
  text-decoration: none;
  height: 100%;
}

.svc-other-name {
  display: block;
  color: #2b93d1;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.svc-other-list a:hover .svc-other-name {
  color: #f58220;
}

.svc-other-blurb {
  display: block;
  color: #636466;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

@media (max-width: 991px) {
  .svc-other-list {
    grid-template-columns: 1fr;
  }

  .svc-aside {
    margin-top: 40px;
  }

  .svc-card {
    height: auto;
  }
}

@media (max-width: 767px) {
  .svc-card {
    padding: 26px 24px;
    border-radius: 20px;
  }

  .svc-card-title {
    font-size: 21px;
  }

  .crumbs {
    padding-top: 16px;
  }

  .crumbs li {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------ locations -- */

/*
 * The map is an enhancement and starts hidden, so a visitor without Leaflet
 * gets the office list rather than an empty grey box. The script reveals it.
 */
/*
 * The map reserves its space from the first paint rather than appearing into
 * the page later. It used to be display:none until the map was drawn, which
 * both dropped 460px of layout under the reader's feet when it arrived and —
 * once the map became lazy — made it invisible to the IntersectionObserver
 * that decides when to draw it, since a display:none element never intersects
 * anything. Grey and rounded is what a map looks like before it is a map.
 */
.loc-map {
  display: block;
  height: 520px;
  border-radius: 25px;
  overflow: hidden;
  background: #f4f4f4;
  /*
   * A map draws a deep stack of its own panes, and without a stacking context
   * here those z-indexes compete with the page's — Leaflet's markers used to
   * paint straight over the sticky nav bar. Positioning the container with a
   * z-index of its own keeps the map's internal order inside the map, whichever
   * provider is drawing it.
   */
  position: relative;
  z-index: 0;
}

/*
 * No key configured, or the maps host never answered. The container is hidden
 * until a map is actually drawn in it — an empty grey rectangle where a map was
 * promised is worse than no rectangle — so this is the one other state that
 * shows it, sized to its message rather than to a map.
 */
.loc-map.is-off {
  display: block;
  height: auto;
}

.loc-count {
  font-size: 17px;
  color: #636466;
  margin: 0 0 24px 0;
}

.loc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.loc-card {
  background: #f4f4f4;
  border-radius: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  outline: none;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

/*
 * The office card, led by a photograph of the building.
 *
 * The photographs are the ones the live site's own location pages already
 * carry, so the card shows the place you will actually walk into rather than a
 * stock interior. They were shot as 1000x400 headers, so a 5:2 crop is their
 * own proportion and nothing important is cut off.
 */
.loc-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  background: #e4e8ea;
}

.loc-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.loc-card:hover .loc-card-photo img {
  transform: scale(1.04);
}

/* The padding the card used to carry itself, now that the photo is flush. */
.loc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 26px 24px 26px;
}

/*
 * The full list, folded away. Eight cards each carrying a four-part directory
 * of services made this page a wall of links, and the chips above already say
 * which kinds of care are here. A <details>, so every link is still in the
 * markup for a crawler whether or not anyone opens it.
 */
.loc-offers {
  margin: 2px 0 16px 0;
}

.loc-offers > summary {
  cursor: pointer;
  color: #2b93d1;
  font-size: 15px;
  list-style: none;
}

.loc-offers > summary::-webkit-details-marker {
  display: none;
}

.loc-offers > summary:before {
  content: "+";
  display: inline-block;
  width: 16px;
  font-weight: 700;
}

.loc-offers[open] > summary:before {
  content: "\2013";
}

.loc-offer-list {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0 0 0 16px;
}

.loc-offer-list li {
  padding: 3px 0;
}

.loc-offer-list a {
  color: #636466;
  font-size: 15px;
  font-weight: 400;
}

.loc-offer-list a:hover {
  color: #f58220 !important;
}

/* Where the map sends you when a pin is clicked. */
.loc-hit.is-picked .loc-card {
  box-shadow: 0 0 0 3px #2b93d1;
}

/* The theme underlines links by default, which turns a card carrying fifteen
   service names into a thicket. Underline on hover instead. */
.loc-card a,
.loc-pop a {
  text-decoration: none;
}

.loc-card a:hover,
.loc-pop a:hover {
  text-decoration: underline;
}

.loc-card-title {
  font-size: 24px;
  margin: 0 0 10px 0;
}

.loc-card-addr,
.loc-card-tel {
  font-size: 16px;
  line-height: 24px;
  color: #636466;
  margin: 0 0 6px 0;
}

.loc-card-tel {
  margin-bottom: 20px;
}

.loc-offers {
  flex: 1 1 auto;
}

.loc-group + .loc-group {
  margin-top: 16px;
}

.loc-group-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a8a8c;
  margin: 0 0 6px 0;
}

.loc-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loc-group-list li {
  font-size: 16px;
  line-height: 24px;
}

.loc-group-list a {
  color: #636466;
  font-weight: 400;
}

.loc-group-list a:hover {
  color: #f58220;
}

/* The service you filtered by, called out in the office that offers it. */
.loc-group-list li.is-match a {
  color: #2b93d1;
  font-weight: 700;
}

.loc-card-links {
  margin: 22px 0 0 0;
  font-size: 16px;
}

.loc-card-links a {
  color: #2b93d1;
}

.loc-card-links a + a {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #d9d9db;
}

.loc-empty {
  font-size: 18px;
  color: #636466;
  margin: 30px 0 0 0;
}

/* ------------------------------------------------------------- map pins -- */

/*
 * One pin per office, never one per service: two services at one address would
 * be two markers at identical coordinates, and no amount of nudging makes that
 * readable. What an office offers lives inside its pin instead, and the filter
 * decides which pins are answers.
 */
.loc-pin {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2b93d1;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(33, 33, 33, 0.4);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.2s ease,
    opacity 0.2s ease;
}

/* Offices in the valley sit as close as 4km, which is tens of pixels at a zoom
   that fits Farmington and Park City in one frame. Raising the one you are
   pointing at is what keeps a near-overlap readable. */
.loc-marker.is-raised {
  z-index: 1000 !important;
}

.loc-marker.is-raised .loc-pin {
  transform: scale(1.25);
}

/* Still on the map, because "nowhere near you" is an answer, but plainly not
   one of the results. */
.loc-pin.is-off {
  background: #b6b7b9;
  opacity: 0.55;
  transform: scale(0.72);
}

.loc-marker.is-raised .loc-pin.is-off {
  transform: scale(0.9);
}

.loc-pop-name {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.loc-pop-name a {
  color: #2b93d1;
}

.loc-pop p {
  font-size: 15px;
  line-height: 22px;
  color: #636466;
  margin: 0 0 6px 0;
}

.loc-pop-links {
  margin-top: 10px !important;
}

.loc-pop-links a {
  color: #2b93d1;
  font-weight: 700;
}

.loc-pop-links a + a {
  margin-left: 14px;
}

/* Google's info window ships its own type scale; this puts it on the site's. */
.loc-map .gm-style,
.loc-map .gm-style .gm-style-iw-c {
  font-family: inherit;
}

.loc-map .gm-style-iw-c {
  border-radius: 15px;
  padding: 4px;
}

.loc-pop-cats {
  color: #8a8a8c;
  font-size: 13px;
}

/*
 * The page's own rhythm. The theme's `padme90` plus the pagebody's top margin
 * put 400px between the end of the hero and the top of the map — one
 * paragraph, one dropdown and one line of text, spread over most of a screen.
 * The map is what the page is for, so it starts near the top of it.
 */
.loc-intro {
  padding: 26px 0 0 0;
}

.loc-intro .pagebody {
  margin-top: 0;
}

.loc-intro .pagebody p {
  margin-bottom: 0;
  max-width: 46em;
}

.loc-index {
  padding-top: 34px;
}

/*
 * The key floats over the map's top-left corner, the way a printed map's key
 * sits inside its frame — it is about what is on the map, so it belongs on it
 * rather than beside it in a column of its own.
 *
 * Each row is a button. Pressing one asks for the offices giving that kind of
 * care; pressing it again puts everything back. Without script they stay real
 * links to the filtered URL, so the same question is answerable either way.
 */
.loc-mapwrap {
  position: relative;
  margin: 0 0 40px 0;
}

.loc-key {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(33, 33, 33, 0.24);
}

.loc-key-head {
  margin: 0 0 10px 0;
  color: #8a8a8c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.loc-key-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loc-key-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 7px 14px 7px 7px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: #636466 !important;
  font-size: 15px;
  font-weight: 400 !important;
  line-height: 1.25;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.14s ease;
}

.loc-key-btn:hover {
  background: #f0f0f1;
}

/* The one you asked for. */
.loc-key-btn[aria-pressed="true"] {
  background: #eef6fc;
  color: #1f6f9e !important;
  font-weight: 700 !important;
}

/* The others, while one is chosen — still legible, plainly not the answer. */
.loc-key.has-choice .loc-key-btn[aria-pressed="false"] {
  opacity: 0.5;
}

/*
 * With no map to float over — no key configured, or the host never answered —
 * the key comes down and sits under the message rather than on top of it. The
 * toggles still work: without script they are links to the filtered URL.
 */
.loc-map.is-off ~ .loc-key {
  position: static;
  margin-top: 14px;
  padding: 0;
  background: none;
  box-shadow: none;
}

.loc-map.is-off ~ .loc-key .loc-key-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.loc-map.is-off ~ .loc-key .loc-key-btn {
  width: auto;
  border: 1px solid #e4e4e6;
}

/*
 * Colour and symbol in one badge. White on the care type's own colour carries
 * both at once, and it is the same colour the pin's segment is drawn in.
 */
.loc-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #ffffff;
}

.loc-badge svg {
  width: 19px;
  height: 19px;
}

.loc-chips {
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
  border: 1px solid #e4e4e6;
  border-radius: 16px;
  color: #636466;
  font-size: 13px;
}

.loc-chip .loc-badge {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}

.loc-chip .loc-badge svg {
  width: 12px;
  height: 12px;
}

/* No key configured, or the maps host never answered. */
.loc-map-off {
  margin: 0;
  padding: 40px 32px;
  color: #636466;
  font-size: 17px;
  text-align: center;
}

@media (max-width: 767px) {
  .loc-map {
    height: 400px;
    border-radius: 20px;
  }

  /*
   * A floating key would cover most of a phone-sized map, so it comes off and
   * sits under it as a row of toggles instead.
   */
  .loc-key {
    position: static;
    margin-top: 14px;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .loc-key-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .loc-key-btn {
    width: auto;
    border: 1px solid #e4e4e6;
  }

  .loc-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .loc-card {
    padding: 26px 24px;
    border-radius: 20px;
  }

  .loc-card-title {
    font-size: 21px;
  }

  /*
   * A phone fits the same 52km of valley into a third of the width, so the
   * pins have to come down with it or Cottonwood and Salt Lake merge.
   */
  .loc-pin {
    width: 18px;
    height: 18px;
  }
}

/* -------------------------------------------------- migrated dentistry -- */

/*
 * The dentistry site's pages, in this site's clothes.
 *
 * The shape is the one the dentistry site uses, because it suits the material:
 * a photographic hero, then centred sections at a readable measure, each doing
 * one job. What makes it this site is everything filling that shape — the brand
 * palette, Montserrat, the theme's 20px card radius and pill buttons, the green
 * schedule button, and the theme's own accordion for the questions.
 *
 * The display face (`lys`) is deliberately absent. It is drawn for six-word
 * marketing lines, and asking it to carry "HOW TO SAVE A KNOCKED-OUT PERMANENT
 * TOOTH" is what made the last pass hard to read.
 */

/* ------------------------------------------------------------ dent hero -- */

/*
 * The photograph carries the title. These pages meet a parent deciding what to
 * do in the next ten minutes, and a picture of a child being looked after does
 * more for that than a coloured rectangle.
 *
 * The wash sits over the photograph rather than beside it, so the type has a
 * guaranteed ground whatever the picture underneath is doing — darkest at the
 * left where the words are, clearing to the right so the photograph is still
 * legible as a photograph.
 */
.dent-hero {
  position: relative;
  overflow: hidden;
  background: #2b93d1;
}

.dent-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * Centre, not a clever crop: these are sixty photographs with sixty
   * compositions, and anything else loses the subject on some of them.
   */
  object-position: center;
}

.dent-hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(24, 86, 125, 0.94) 0%,
    rgba(30, 106, 152, 0.88) 38%,
    rgba(43, 147, 209, 0.55) 72%,
    rgba(43, 147, 209, 0.28) 100%
  );
}

/* No photograph: the wash alone, so the page still looks deliberate. */
.dent-hero-plain .dent-hero-wash {
  background: linear-gradient(100deg, #2277ab 0%, #2b93d1 100%);
}

/*
 * The shorthand here used to end `... 0` on the sides, which quietly cancelled
 * the gutter `.container` gives every other band on the page. Above 576px the
 * container's max-width keeps the text off the edge anyway, so nothing showed;
 * on a phone the container is the full width of the window and the trail, the
 * eyebrow, the title and the lead all ran flush into both edges.
 *
 * The gutter is Bootstrap's own variable rather than a number, so the hero
 * lines up with the bands under it instead of tracking them by coincidence.
 */
.dent-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  /* Top padding clears the trail pinned above it. */
  padding: 62px var(--bs-gutter-x, 0.75rem) 44px;
  max-width: 1140px;
}

.dent-hero-eyebrow {
  margin: 0 0 6px 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dent-hero-title {
  margin: 0;
  max-width: 15em;
  color: #ffffff;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 700;
}

.dent-hero-lead {
  margin: 18px 0 0 0;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.94);
  font-size: 20px;
  line-height: 1.5;
}

.dent-hero-act {
  margin: 28px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dent-hero-act .btn {
  font-size: 17px;
  padding: 11px 26px;
}

/* The second action is the quiet one: an outline on the wash, not a second
   solid pill competing with the green. */
.dent-hero-ghost {
  background: transparent;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.dent-hero-ghost:hover {
  background: #ffffff;
  color: #2b93d1 !important;
  border-color: #ffffff;
}

/* -------------------------------------------------------- dent promises -- */

.dent-promises {
  padding: 56px 0 20px 0;
}

.dent-promise {
  height: 100%;
  margin-bottom: 28px;
  padding: 30px 28px;
  background: #ffffff;
  border: 1px solid #e8e8ea;
  border-radius: 20px;
}

.dent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #eaf4fb;
  color: #2b93d1;
}

.dent-icon svg {
  width: 26px;
  height: 26px;
}

.dent-promise-title {
  margin: 0 0 8px 0;
  color: #2b93d1;
  font-size: 19px;
  font-weight: 700;
}

.dent-promise p {
  margin: 0;
  color: #636466;
  font-size: 17px;
  line-height: 1.5;
}

/*
 * The symptom checker's frame.
 *
 * The tool is one long page — a body diagram, then every body part's symptom
 * list one after another. Measured against a local mirror it runs to 5515px at
 * every width from 768 up and 913px below that, where it switches to a compact
 * layout of its own.
 *
 * The embed gave it 1200px and `scrolling="no"`, so a visitor saw the diagram,
 * the "Skin Symptoms" heading and nothing else: the four hundred symptoms below
 * the cut were unreachable rather than merely out of view. Letting it scroll is
 * the fix, and it is the only one that cannot go stale — the tool posts no
 * height to its parent, so nothing here can know how tall it really is, and a
 * frame that is too short now shows a scrollbar instead of a guillotine.
 *
 * The height is therefore a window, not a fit. Tall enough for the diagram and
 * the first symptoms under it, and no taller: the tool's own layout grows to
 * fill whatever it is given, so a very tall frame makes a very long page rather
 * than a complete one.
 */
/*
 * A fixed height, because there is no other kind available.
 *
 * The tool is on healthychildren.org, so the frame is cross-origin: this page
 * cannot read its content height and the AAP does not post one out, which
 * leaves a number chosen in advance. 1500px fitted the tool's opening screen
 * and cut off the deeper ones — pick a symptom and the list of questions runs
 * past the bottom edge with no way to reach it.
 *
 * Sized for the tallest state rather than the first now, and `scrolling` is
 * left alone so the frame keeps its own scrollbar if the AAP ever exceeds even
 * this. The note underneath carries a link to the tool on their own site,
 * which is the only reliable escape when an embed misbehaves.
 */
.sc-frame {
  height: 2200px;
  max-height: none;
}

@media (max-width: 767px) {
  .sc-frame {
    height: 1900px;
  }
}

/*
 * The line under the symptom checker. It says why the tool is embedded rather
 * than written into the page, and carries the link that has to work when a
 * third-party frame does not — a blocked frame is otherwise a blank rectangle
 * with nothing to click.
 */
.sc-note {
  margin: 18px 0 0 0;
  padding: 14px 18px;
  border-left: 3px solid #2b93d1;
  background: #f4f5f6;
  color: #8a8a8c;
  font-size: 15px;
  line-height: 1.55;
}

.sc-note a {
  color: #2b93d1;
}

/* ----------------------------------------------------------- dent bands -- */

.dent-band {
  padding: 52px 0;
}

/*
 * Two white sections in a row read as one long stretch with a mysterious gap in
 * it. A hairline at the seam does what the alternating grey does elsewhere,
 * without turning every other paragraph into a different colour of page.
 *
 * Every white band counts, not just two prose ones. The rule used to be written
 * `.dent-band + .dent-band`, which held only while prose bands were adjacent —
 * moving the promise cards and the photograph into the middle of the sequence
 * left three seams on a page with no divider at all.
 */
.whitebg:is(
    .dent-band,
    .dent-promises,
    .dent-scene-band,
    .dent-quote-band,
    .svc-index
  )
  + .whitebg:is(
    .dent-band,
    .dent-promises,
    .dent-scene-band,
    .dent-quote-band,
    .svc-index
  ) {
  border-top: 1px solid rgba(43, 147, 209, 0.22);
}

/*
 * Brand blue and spaced out — the section headings do the work the display face
 * was doing badly. Uppercase with real letter-spacing reads as a heading at a
 * glance without shouting at body size.
 *
 * Left, not centred. Centred headings over a centred column made the article a
 * narrow ribbon down the middle of the page while everything around it — the
 * card grids, "Where to go next", "Other ways we help" — started at the
 * container's left edge. Two alignments on one page read as two pages.
 */
/*
 * A section opens with a short orange rule.
 *
 * A grey hairline at the seam is the same neutral divider the rest of the site
 * uses between anything and anything, so it separated the bands without saying
 * a new topic had started. This does: it is brand colour, it sits with the
 * heading rather than at the edge of the band, and it lands on the same left
 * edge as everything else. Orange rather than blue, so it reads as a mark
 * beside the heading instead of more heading.
 */
.dent-band-title:before {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin: 0 0 18px 0;
  border-radius: 2px;
  background: #f58220;
}

.dent-band-title {
  margin: 0 0 14px 0;
  color: #2b93d1;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
}

.dent-prose p {
  margin: 0 0 18px 0;
  color: #636466;
  font-size: 18px;
  line-height: 1.62;
}

.dent-prose p:last-child {
  margin-bottom: 0;
}

.dent-prose a {
  color: #2b93d1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dent-prose a:hover {
  color: #f58220;
}

/* --------------------------------------------------------- dent callout -- */

/*
 * Three tones, and the border is the whole signal: red to act now, blue worth
 * knowing, green makes it easier. Tinted grounds rather than solid colour, so a
 * callout inside a paragraph does not read as a different page.
 */
.dent-callout {
  margin: 26px 0 0 0;
  padding: 20px 24px;
  border-left: 4px solid #2b93d1;
  border-radius: 0 12px 12px 0;
  background: #f2f8fc;
}

.dent-callout p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.dent-callout-title {
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

.dent-callout-alert {
  border-left-color: #d0342c;
  background: #fdf3f2;
}

.dent-callout-alert .dent-callout-title {
  color: #b32a23;
}

.dent-callout-tip {
  border-left-color: #8dc63f;
  background: #f5faed;
}

.dent-callout-tip .dent-callout-title {
  color: #5d8a1f;
}

.dent-callout-info .dent-callout-title {
  color: #2b93d1;
}

/* ----------------------------------------------------------- dent steps -- */

/*
 * Cards, not a list. These are read standing up with a hurt child in the room,
 * so each step is a target the eye lands on rather than a line in a paragraph.
 */
.dent-step-row {
  margin-top: 8px;
}

.dent-step {
  height: 100%;
  margin-bottom: 24px;
  padding: 26px 24px;
  background: #ffffff;
  border-radius: 20px;
}

.dent-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #2b93d1;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.dent-step-title {
  margin: 0 0 6px 0;
  color: #636466;
  font-size: 18px;
  font-weight: 700;
}

.dent-step p {
  margin: 0;
  color: #636466;
  font-size: 16px;
  line-height: 1.5;
}

/* ----------------------------------------------------------- dent scene -- */

.dent-scene-band {
  padding: 10px 0 62px 0;
}

.dent-scene {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}

.dent-scene img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------- dent quote -- */

/*
 * The reassurance was a solid blue band shouting a sentence meant to calm
 * someone down. It is a pull quote now, which is what the words are doing.
 */
.dent-quote-band {
  padding: 20px 0 66px 0;
}

.dent-quote {
  position: relative;
  margin: 0;
  padding-top: 34px;
  color: #4a4b4d;
  font-size: 25px;
  line-height: 1.45;
  font-weight: 700;
  text-align: center;
}

.dent-quote:before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  color: #f58220;
  font-size: 58px;
  line-height: 1;
}

/* ------------------------------------------------------------- dent faq -- */

.dent-faq {
  margin: 0 0 14px 0;
  padding: 22px 26px;
  border: 1px solid #e8e8ea;
}

.dent-faq .d-location-title {
  font-size: 18px;
  padding-right: 40px;
}

.dent-faq .cardcontent p {
  margin: 12px 0 0 0;
  color: #636466;
  font-size: 17px;
  line-height: 1.55;
}

/* ------------------------------------------------------------ dent next -- */

/*
 * Where to go next, as cards — the answer to navigating four levels of these
 * pages. The trail on the hero says where you are; this says where you can go.
 * A permanent bar of every sibling and cousin was two rows of small links
 * before the title had been read.
 */
.dent-next {
  display: block;
  height: 100%;
  margin-bottom: 24px;
  padding: 22px 46px 22px 24px;
  position: relative;
  background: #ffffff;
  border: 1px solid #e8e8ea;
  border-radius: 20px;
  text-decoration: none !important;
  transition: border-color 0.18s ease;
}

.dent-next:hover {
  border-color: #2b93d1;
}

.dent-next:after {
  content: "";
  position: absolute;
  top: 30px;
  right: 24px;
  width: 8px;
  height: 8px;
  border: solid #2b93d1;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.dent-next:hover:after {
  transform: rotate(45deg) translate(3px, -3px);
}

.dent-next-name {
  display: block;
  color: #2b93d1;
  font-size: 18px;
  font-weight: 700;
}

.dent-next-blurb {
  display: block;
  margin-top: 4px;
  color: #636466;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

/* ------------------------------------------------------------- dent cta -- */

.dent-cta {
  padding: 58px 0;
  text-align: center;
}

.dent-cta-title {
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
}

.dent-cta-text {
  margin: 12px 0 0 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 18px;
}

.dent-cta-act {
  margin: 24px 0 0 0;
}

.dent-cta-links {
  margin: 16px 0 0 0;
  font-size: 16px;
}

.dent-cta-links a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dent-cta-links a:hover {
  color: #ffffff !important;
}

/* ------------------------------------------------------- dentistry small -- */

@media (max-width: 991px) {
  .dent-hero-title {
    font-size: 38px;
  }

  .dent-hero-lead {
    font-size: 18px;
  }

  .dent-band-title {
    font-size: 23px;
  }

  .dent-quote {
    font-size: 21px;
  }
}

@media (max-width: 767px) {
  .dent-hero-inner {
    /* Still clearing the pinned trail, on a band with less height to spare. */
    padding: 52px var(--bs-gutter-x, 0.75rem) 40px;
  }

  .hero-crumbs {
    top: 14px;
  }

  /*
   * Five levels wrapped to four rows on a phone and, being pinned, ran into
   * the eyebrow underneath. The last two are what orientation actually needs —
   * where you are and what it is part of — and the leading ellipsis stands in
   * for the rest. Every level is still a link in the markup.
   */
  .hero-crumbs li {
    display: none;
    font-size: 13px;
  }

  .hero-crumbs li:nth-last-child(-n + 2) {
    display: inline;
  }

  .hero-crumbs li + li:nth-last-child(2):before {
    content: "…\00a0›";
    padding-left: 0;
  }

  .dent-hero-title {
    font-size: 30px;
  }

  /* The wash goes flat below the fold width: there is no room for a photograph
     to read beside the type, so it becomes ground rather than picture. */
  /*
   * On a phone the band is barely wider than the text, so the desktop wash's
   * clear end never arrives and the photograph was invisible — which is the
   * flat blue rectangle these bands exist to stop being. Lighter, and angled
   * so the heaviest part is still under the title.
   */
  .dent-hero-wash {
    background: linear-gradient(
      165deg,
      rgba(24, 86, 125, 0.92) 0%,
      rgba(28, 99, 143, 0.84) 45%,
      rgba(38, 130, 185, 0.68) 100%
    );
  }

  .dent-hero-act .btn {
    width: 100%;
    text-align: center;
  }

  .dent-band,
  .dent-promises {
    padding: 40px 0;
  }

  .dent-cta {
    padding: 44px 0;
  }

  .dent-cta-title {
    font-size: 26px;
  }
}

/* ========================================================= section chrome == */

/*
 * On a page inside a pillar the global nav steps back and the section takes the
 * main bar. The chrome then says which part of the practice you are in, rather
 * than making you read the breadcrumb to find out.
 *
 * The markup is the header's own; only the arrangement changes, so a page
 * outside a section is untouched.
 */
/* -------------------------------------------------------- header shell -- */

/*
 * The strip's own type: quiet, small caps, and the same for both items in it.
 * `#topmenu a` in the theme sets 17px/600 for the slot these used to sit in,
 * which is a whole size and weight above the search label beside it — so the
 * two words in one strip did not look like they belonged together.
 */
#topmenu .utility-link,
.searchlabel {
  color: #636466;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

#topmenu .utility-link:hover {
  color: #2b93d1;
}

/*
 * One container for all three bands: the utility strip, the primary row and
 * the section bar. Bootstrap's stepped container used to govern them, so the
 * gutters got smaller as the window got bigger — 70px of air at 1100 and 30px
 * at 1200. This grows with the window and stops at 1440.
 */
#header > .container,
#secbar > .container {
  width: calc(100% - 80px);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0;
}

#header .row,
#secbar .row {
  margin-left: 0;
  margin-right: 0;
}

#header .col-12,
#secbar .col-12 {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 600px) {
  #header > .container,
  #secbar > .container {
    width: calc(100% - 32px);
  }
}

@media (min-width: 1200px) {
  /*
   * The primary row reads left to right: logo, menu, book an appointment. The
   * utility strip spans the same three columns above it, right-aligned.
   *
   * Fixed heights rather than padding, so the header's depth is a known
   * number — 32 + 80, and 44 more when a section bar is showing. It used to
   * scale with the viewport, which is why it looked enormous on a small
   * desktop and tiny on a large one.
   */
  #header {
    position: relative;
    z-index: 60;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    /*
     * The strip's height, and the stop the grid row below reads from it.
     *
     * 36px. It was 34, went to 42 when the dividers arrived, and 42 was too
     * much band for 13px words — the rules need room above and below them, but
     * 11px of air each side of a 20px rule turns a utility strip into a
     * section. 36 leaves 8px, which reads as punctuation rather than padding.
     * The hairline at the bottom separates the strip from the white row
     * instead of leaving the two greys to meet edge to edge.
     */
    --toolsband: 36px;
    background:
      linear-gradient(#dfe2e5 0 1px, transparent 1px) 0
        calc(var(--toolsband) - 1px) / 100% 1px no-repeat,
      linear-gradient(#f4f5f6 0 var(--toolsband), #ffffff var(--toolsband));
  }

  .secheadrow {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: var(--toolsband) 80px;
    grid-template-areas:
      "util util util"
      "logo nav  cta";
    align-items: center;
    column-gap: clamp(24px, 3vw, 56px);
  }

  #topmenuwrap {
    grid-area: util;
    justify-self: end;
    position: static;
    width: auto;
  }

  /*
   * `line-height: 1`, so the strip is as tall as what is in it.
   *
   * The theme's 18px type gives every child a 27px line box whether or not
   * there is 27px of anything in it, which left 2.5px of air top and bottom
   * inside a 32px band. Nothing was clipped, but 13px words and 16px marks
   * filling a band to its edges read as though they were.
   */
  #topmenu {
    position: static;
    display: flex;
    align-items: center;
    gap: 20px;
    width: auto;
    height: 100%;
    line-height: 1;
    top: auto;
    right: auto;
  }

  #topmenu .utility-link,
  #topmenu .searchlabel,
  #topmenu #navbuttons,
  #topmenu #navbuttons li,
  #topmenu #navbuttons li a,
  #topmenu .mainsearch,
  #topmenu .searchwrap {
    line-height: 1;
  }

  /*
   * The strip's rhythm: 20px between the things in it, 8px between the search
   * label and its glass because those two are one control, and 12px between
   * the social links because those two are a pair.
   *
   * It read 18, 8, 22, 24 — the pair the loosest of the lot — because the
   * theme pads the social items unevenly, `0 4px` on one and `0 0 0 8px` on
   * the other, for the slot they used to sit in.
   */
  #navbuttons {
    display: flex !important;
    align-items: center;
    /*
     * 18px, not the 12 the pair had when they were the tail of an unbroken
     * row. With a rule in front of them they are a group of their own, and two
     * marks 12px apart inside their own compartment read as one smudge.
     */
    gap: 18px;
    /*
     * The pair sits a little further from the search than the strip's own
     * rhythm would put it. Everything here is centred on the same line — the
     * words, the glass and both discs all measure to the same midpoint — so
     * the misalignment people see is not one. It comes from reading two filled
     * circles as though they belonged to the run of line art and words beside
     * them: a disc has no baseline and no flat edge to line up against, so the
     * eye looks for an alignment that discs cannot have. Spacing them as their
     * own group stops the comparison, which is what the illusion needs.
     */
    margin: 0 0 0 10px;
    padding-left: 0 !important;
  }

  #navbuttons li {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0;
  }

  #navbuttons li a {
    display: flex;
    align-items: center;
  }

  /*
   * 22px, not the 16px the magnifier takes.
   *
   * The two marks are not the same species as the glass. The glass is line
   * art: at 16px, 16px of it is ink. Facebook and Instagram are filled discs
   * with the logo knocked out in white, so at 16px the part anybody actually
   * recognises — the f, the camera — is about half that, and the pair read as
   * much smaller than the glass beside them even though every box in the strip
   * measures the same.
   *
   * Sizing the disc to the glass is therefore the wrong comparison. Sizing the
   * mark inside the disc to the glass is the right one, and 20px is where the
   * knocked-out marks carry about as much ink as the 16px glass does. 22 and 24
   * were both tried: by 22 the discs are the loudest thing in a strip whose
   * type is 13px, which trades one imbalance for another.
   */
  #navbuttons li img {
    width: 20px;
    height: 20px;
  }

  /*
   * The theme's search field is sized for the absolutely positioned slot it
   * normally sits in; in a flex row it took 1287px and pushed the page wider
   * than the window. Its 47px left margin is what set the magnifier apart from
   * the social links, so the row's gap spaces it like everything else.
   */
  /*
   * The strip reads as words rather than as three bare glyphs, so the search
   * carries its name. The field still opens on click over the top of it.
   */
  #searchformwrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
  }

  /*
   * No word beside the glass.
   *
   * It was there because three bare glyphs in a row read as decoration rather
   * than as controls. The rules do that job better: they group the strip into
   * pay / search / follow, which is what the word was standing in for, and a
   * magnifier needs no label the way an unlabelled disc does.
   */
  #searchformwrap .searchlabel {
    display: none;
  }

  /*
   * The rules between the three groups.
   *
   * Each is the first flex item of the group that follows it, so the space to
   * its left is `#topmenu`'s own 20px gap. The space to its right has to be
   * built from that group's internal gap plus this margin — 8px inside the
   * search, 12px between the social pair — which is why the two margins differ
   * and both come to 20.
   */
  #topmenu #searchformwrap::before,
  #topmenu #navbuttons::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 20px;
    background: #d3d7db;
  }

  #topmenu #searchformwrap::before {
    margin-right: 12px;
  }

  #topmenu #navbuttons::before {
    margin-right: 8px;
  }

  /* The rule already separates the pair; the extra nudge would double it. */
  #topmenu #navbuttons {
    margin-left: 0;
  }

  /* Open, the field replaces the whole group — the rule would crowd it. */
  #searchformwrap.is-open::before {
    display: none;
  }

  /*
   * The theme takes the form out of the flow (`position: absolute; right: 0`)
   * for the slot it normally sits in, which put the magnifier on top of the
   * label instead of beside it.
   *
   * Both wrappers centre what is inside them. `.searchwrap` is as tall as the
   * strip and its button was a static child at the top of it, so the glass sat
   * 5.5px above the line the words beside it are on.
   */
  #searchformwrap .mainsearch,
  #searchformwrap .searchwrap {
    position: static;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 16px;
    overflow: hidden;
  }

  #searchformwrap .navsearch {
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  #searchformwrap .searchbutton {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
  }

  /*
   * One step above the 13px words beside them and below the 15px menu under
   * them, which is the order the three are meant to be read in.
   *
   * `height: auto`, because the magnifier's artwork is 24x25 and a square box
   * squashed it by four per cent against the two social marks, which are
   * square.
   */
  #searchformwrap .searchbutton img {
    width: 16px;
    height: auto;
  }

  /*
   * The field, once the glass has been clicked.
   *
   * The theme does widen the input — `.searchwrap input.open` takes it to
   * 415px — but the wrapper around it is clipped to the width of the glass,
   * so the field grew inside a 16px window and nobody ever saw it. Opening has
   * to change the wrapper, and 415px is far more than this strip has to give.
   *
   * So: the wrapper gives the input room, the width comes from here rather
   * than from the theme, and the word "Search" steps aside because the field
   * says the same thing better.
   *
   * The strip is right-aligned, so the field grows leftward into the space
   * above the menu and nothing below it moves.
   */
  #searchformwrap.is-open .searchlabel {
    display: none;
  }

  #searchformwrap.is-open .mainsearch,
  #searchformwrap.is-open .searchwrap {
    width: 260px;
    overflow: visible;
    gap: 6px;
  }

  /*
   * `top: 1px; right: -7px` comes from the theme, which nudged the field into
   * the absolutely positioned slot it used to sit in. In a flex row that is
   * just a field sitting a pixel below everything beside it.
   */
  #searchformwrap.is-open .navsearch {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 24px;
    padding: 0 10px;
    top: 0;
    right: 0;
    border: 1px solid #c9ced3;
    border-radius: 12px;
    background: #ffffff;
    font-size: 13px;
    color: #4a4b4d;
  }

  #searchformwrap.is-open .navsearch:focus {
    outline: none;
    border-color: #2b93d1;
  }

  #searchformwrap.is-open .searchbutton {
    order: 3;
  }

  /* ---- the primary row ---- */

  #logo {
    grid-area: logo;
    position: static;
    margin: 0 !important;
  }

  /*
   * A fixed size, not a fraction of the viewport. The logo and the menu used
   * to shrink together as the window narrowed, which made a small desktop look
   * like a scaled-down large one; the empty space either side should change
   * instead. 280 rather than the 175 a compact mark would take, because this
   * lockup carries the wordmark and "ALL BETTER" and is 5.15 times as wide as
   * it is tall — at 175 the second line of the wordmark stops being readable.
   */
  #logo img {
    width: 280px;
    height: auto;
  }

  #logo a {
    display: block;
  }

  #graynav {
    grid-area: nav;
    justify-self: start;
    position: static;
    width: auto;
    background: none;
    box-shadow: none;
    z-index: auto;
  }

  #navwrap {
    height: auto;
    padding: 0;
  }

  .mainnav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    flex-wrap: nowrap;
    gap: clamp(18px, 1.8vw, 32px);
  }

  .mainnav > li {
    flex: 0 0 auto;
    margin: 0;
  }

  /* The theme keeps a 10px right margin on the last item, which held the menu
     inside its own right edge and threw the rows out of line with each other. */
  .mainnav > li:last-child {
    margin-right: 0;
  }

  .mainnav > li > a {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    white-space: nowrap;
    padding: 4px 0;
  }

  /*
   * The theme's caret is a 3px chevron drawn for a 23px menu. Beside 15px type
   * it is heavier than the word it belongs to, which is why the three items
   * that have one looked bigger than the four that do not.
   */
  .mainnav > li.menu-item-has-children > a:after {
    border-width: 0 2px 2px 0;
    padding: 2.5px;
    right: -7px;
    top: -2px;
  }

  .header-cta {
    grid-area: cta;
    justify-self: end;
    margin: 0 !important;
    padding: 14px 22px !important;
    border-radius: 8px;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  #mobileburger {
    display: none !important;
  }

  /* Pay Bill is in the strip and booking is the button; neither belongs in the
     menu at a width where the header has room to show them. */
  .nav-action {
    display: none !important;
  }

  /* The mega panels hang off this row, so they open below the whole of it. */
  .mainnav > li.mega > .sub-menu.megamenu {
    top: 100%;
  }

  /* ---- the section bar ---- */

  #header.has-section #secbar {
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 16px rgba(33, 33, 33, 0.1);
  }

  /* `#secbar` on the front, because the base rules for these come later in
     the file and would otherwise win on order at equal specificity. */
  #secbar .secbar-in {
    min-height: 44px;
  }

  #secbar .secbar-item > a {
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.2;
  }

  #secbar .secbar-name {
    padding-right: 22px;
    font-size: 17px;
    line-height: 1.2;
  }
}

/*
 * A smaller desktop tightens rather than scales. The menu closes up and the
 * action shortens to one word; the logo comes down a step. Everything else —
 * the heights, the container, the typography's relationship to itself — is
 * the same as it is at any larger width.
 */
@media (min-width: 1200px) and (max-width: 1349px) {
  #logo img {
    width: 240px;
  }

  .mainnav {
    gap: 20px;
  }

  .mainnav > li > a {
    font-size: 14px;
  }

  .header-cta-full {
    display: none;
  }

  .header-cta-short {
    display: inline;
  }
}

/* The bar itself. */
#secbar {
  background: #2b93d1;
}

.secbar-in {
  display: flex;
  align-items: stretch;
  gap: 30px;
}

.secbar-name {
  display: flex;
  align-items: center;
  padding-right: 26px;
  color: #ffffff !important;
  /*
   * Montserrat, not the display face. LemonYellowSun is the brand's headline
   * type and set the pillar name in the same voice as the logo two lines
   * above it, so the bar read as a second masthead rather than as navigation.
   */
  font-family: montserrat, Arial, sans-serif;
  font-weight: 400;
  font-size: 21px;
  text-decoration: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

.secbar-list {
  display: flex;
  align-items: stretch;
  /* Never two rows: what does not fit is folded into More, not wrapped. */
  flex-wrap: nowrap;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.secbar-item {
  position: relative;
}

.secbar-item > a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 14px 0;
  border-bottom: 3px solid transparent;
  color: #ffffff !important;
  /*
   * The same size as the menu above it. They were 17 and 16, which is not a
   * hierarchy, it is a pixel out. The section's name carries the emphasis at
   * 21px; its services are peers of the menu, so they are set like it.
   */
  font-size: 17px;
  font-weight: 400 !important;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
}

.secbar-item.has-fly > a:after {
  content: "";
  width: 7px;
  height: 7px;
  border: solid rgba(255, 255, 255, 0.85);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.secbar-item.on > a,
.secbar-item:hover > a {
  border-bottom-color: #ffffff;
  font-weight: 700 !important;
}

/* The two panels: the service's topics, and the pages of the one you point at. */
.secfly {
  display: none;
  position: absolute;
  z-index: 40;
  left: -18px;
  top: 100%;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(33, 33, 33, 0.24);
}

.secbar-item.has-fly:hover .secfly,
.secbar-item.has-fly:focus-within .secfly {
  display: flex;
}

.secfly-topics {
  width: 250px;
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  background: #ffffff;
}

.secfly-topics a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 22px;
  color: #636466 !important;
  font-size: 15px;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.secfly-topics a:after {
  content: "";
  width: 6px;
  height: 6px;
  border: solid #c3c7cb;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  opacity: 0;
}

.secfly-topics li.on a {
  color: #2b93d1 !important;
  font-weight: 700 !important;
}

.secfly-topics li.on a:after {
  opacity: 1;
  border-color: #2b93d1;
}

.secfly-right {
  width: 430px;
  flex: 0 0 auto;
  background: #eef6fc;
  padding: 18px 26px 22px 26px;
}

.secfly-head {
  margin: 0 0 10px 0;
  color: #8a8a8c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.secfly-pages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: 24px;
}

.secfly-pages li {
  break-inside: avoid;
}

.secfly-pages a {
  display: block;
  padding: 6px 0;
  color: #46484b !important;
  font-size: 15px;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.secfly-pages a:hover {
  color: #2b93d1 !important;
}

.secfly-none {
  margin: 0;
  color: #8a8a8c;
  font-size: 14px;
}

/* "More" carries only names, so it needs one panel rather than two. */
.secfly-plain {
  border-radius: 0 0 14px 14px;
}

.secfly-plain .secfly-topics {
  width: 260px;
}

.secbar-toggle {
  display: none;
}

.secbar-toggle-label {
  display: inline;
}

/* The utility strip and its label are desktop-only; a phone has the burger. */
.searchlabel {
  display: none;
}

/*
 * The menu becomes a burger at 1199 rather than at the theme's 767.
 *
 * Below 1200 there is no longer room for six items, a 240px logo and a button
 * that says what it does: at 1051 the three of them came to 1051px inside a
 * 971px container, and the logo was being squeezed to 201px to make it fit.
 * Shrinking the logo and the type until they fit is worse than a button, so
 * the button is where it switches. The rules here are the ones the theme
 * applies at 767, started earlier.
 */
@media (max-width: 1199px) {
  /*
   * The header is a flex row here: the utility strip on its own line, then the
   * logo with the action and the burger opposite it. It used to fall back to
   * block layout, which left the schedule button adrift above the logo with
   * nothing aligning it to anything.
   */
  .secheadrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 0 14px 0;
  }

  /*
   * No strip here. `display: contents` dissolves the two wrappers so the search
   * glass becomes a child of the row itself and can sit beside the burger,
   * which is the only way to move it there without moving it in the markup.
   */
  #topmenuwrap,
  #topmenu {
    display: contents;
  }

  /* The social links come off a phone; they are in the footer. */
  #navbuttons {
    display: none !important;
  }

  #searchformwrap {
    order: 2;
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    /* Pushes itself and the burger together against the right edge, rather
       than letting `space-between` strand it in the middle of the row. */
    margin: 0 0 0 auto;
  }

  /* A glass on its own next to the burger; the word would only crowd it. */
  #searchformwrap .searchlabel {
    display: none;
  }

  .utility-link {
    display: none;
  }

  /* Booking is at the foot of the menu here, not in the row. */
  .header-cta {
    display: none !important;
  }

  #searchformwrap .mainsearch {
    position: static;
    flex: 0 0 auto;
  }

  #searchformwrap .searchwrap {
    position: static;
    width: 44px;
    overflow: hidden;
  }

  #searchformwrap .navsearch {
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  /*
   * A 20px glass next to a 45x44 burger read as a detail rather than as the
   * other control. It is 26px in a 44px target, which is the same height the
   * burger has and near enough its weight.
   */
  #searchformwrap .searchbutton {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  #searchformwrap .searchbutton img {
    width: 26px;
    height: 26px;
  }

  /*
   * Open, the search takes a line of its own.
   *
   * The row already wraps, so `flex-basis: 100%` drops the field under the
   * logo and the burger rather than squeezing it into the ~150px left beside
   * them on a phone. Nothing is positioned absolutely and nothing else in the
   * row has to move.
   */
  #searchformwrap.is-open {
    /* After the burger, which is `order: 3` — at the same order the search
       would come first on DOM order and push the burger onto the next line. */
    order: 4;
    flex: 1 0 100%;
    margin: 0;
  }

  /*
   * Both wrappers have to become flex rows here. Only the desktop block gives
   * them `display: flex`; at these widths they are still blocks, and a block
   * wrapper stacked the close button, the field and the glass down the left
   * edge of the row instead of laying them out along it.
   */
  #searchformwrap.is-open .mainsearch,
  #searchformwrap.is-open .searchwrap {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    overflow: visible;
    gap: 8px;
  }

  #searchformwrap.is-open .navsearch {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    top: 0;
    right: 0;
    border: 1px solid #c9ced3;
    border-radius: 20px;
    background: #ffffff;
    font-size: 16px;
    color: #4a4b4d;
  }

  #searchformwrap.is-open .navsearch:focus {
    outline: none;
    border-color: #2b93d1;
  }

  #searchformwrap.is-open .searchbutton {
    order: 3;
    width: 40px;
    height: 40px;
  }

  #searchformwrap.is-open .searchbutton img {
    width: 22px;
    height: 22px;
  }

  #logo {
    order: 1;
    position: static;
    /* The theme floats it, which pulls it out of the row. */
    float: none !important;
    margin: 0 !important;
    flex: 0 1 auto;
    min-width: 0;
  }

  #logo img {
    width: clamp(180px, 34vw, 250px);
    height: auto;
  }

  #logo a {
    display: block;
  }

  /* Action then burger, in that order, opposite the logo. */
  /*
   * The burger and its X, at the size of the glass beside them.
   *
   * The theme draws 45x5 bars, and rotating two of those 45deg makes an X
   * whose bounding box is 35x35 — bigger than the 44px control holding it and
   * more than twice the weight of everything else in the row. 26x3 bars give
   * an X of about 20px, which is what the glass is.
   */
  #mobileburger {
    order: 3;
    /* The theme floats it, which takes it out of the row it should sit in. */
    float: none !important;
    margin: 0 0 0 10px;
    display: block;
    width: 44px;
    height: 44px;
  }

  #mobileburger span {
    width: 26px;
    height: 3px;
    left: 9px;
    border-radius: 3px;
  }

  /*
   * Whole pixels, so the three bars are the same bar three times.
   *
   * The middle pair sat at 20.5px, which is where a 3px bar has to start to be
   * centred in a 44px box — and which no screen can draw. At 1x the browser
   * spread it over rows 20 to 24 at half opacity each end, so the middle bar
   * came out lighter and thicker than the two crisp ones above and below it,
   * and the gaps either side of it looked unequal. 13/20/27 puts every bar on
   * a pixel with 4px of air between them, at the cost of half a pixel of
   * centring nobody can see.
   */
  #mobileburger span:first-child {
    top: 13px;
  }

  #mobileburger span:nth-child(2),
  #mobileburger span:nth-child(3) {
    top: 20px;
  }

  #mobileburger span:nth-child(4) {
    top: 27px;
  }

  #mobileburger.open span:first-child,
  #mobileburger.open span:nth-child(4) {
    width: 0;
    left: 22px;
    top: 20.5px;
  }

  #graynav {
    order: 4;
    flex: 1 0 100%;
  }

  /*
   * The caret's focus ring.
   *
   * It is a button with no border of its own, so the browser drew its default
   * one — a hard black rectangle around a 52px box, which is the loudest thing
   * on the screen the moment anybody taps it. Same shape, in brand blue, drawn
   * only for keyboard focus so a tap does not summon it at all.
   */
  .navtoggle:focus {
    outline: none;
  }

  .navtoggle:focus-visible {
    outline: 2px solid #2b93d1;
    outline-offset: -4px;
    border-radius: 6px;
  }

  /*
   * "Popular services" comes off the burger menu.
   *
   * On the desktop panel it is a second column beside "Browse by care", and
   * two columns of shortcuts are worth the room. Stacked into a phone menu it
   * is not a column any more, it is eight more rows between the four pillars
   * and everything below Services — the same links a reader has just been
   * offered, in a longer list they now have to scroll past. The panel keeps
   * "Browse by care" and its "View all services" foot, which is the way to all
   * of them anyway.
   */
  .mega-popular {
    display: none;
  }

  /*
   * One caret per row. The theme prints its own chevron after the label and
   * this menu also has a toggle button at the far right of the row, so every
   * parent had two — one that does nothing and one that opens the panel.
   */
  .mainnav > li.menu-item-has-children > a:after {
    display: none;
  }

  /* Rows at a readable rhythm rather than 124px apart. */
  .mainnav > li {
    margin: 0;
  }

  /*
   * A parent's label stops before its caret. The rows are full width and the
   * caret is a 52px button sitting on top of the right-hand end of one, so a
   * long label ran under it — "Dentistry & Orthodontics" reached the button
   * and kept going.
   */
  .mainnav > li.menu-item-has-children > a {
    padding-right: 58px;
  }

  .mainnav > li > a,
  .mainnav > li.menu-item-has-children > a {
    display: block;
    padding: 12px 0;
    font-size: 17px;
    /* The theme bolds a parent, so the three items with a panel under them
       read heavier than the four without. They are all one weight here. */
    font-weight: 500;
  }

  /* Room for the toggle button, which sits over the right of the row. */
  .mainnav > li.menu-item-has-children > a {
    padding-right: 56px;
  }

  /*
   * The two actions at the foot of the menu. Booking is the one thing on the
   * list anyone is looking for in a hurry, so it carries the brand green; Pay
   * Bill sits above it as an ordinary link with a rule to separate the two
   * from the pages above them.
   */
  .nav-action {
    display: block;
  }

  .mainnav > li.nav-action:first-of-type,
  .nav-action + .nav-action {
    margin-top: 0;
  }

  .mainnav > li.nav-action > a {
    display: inline-block;
    padding: 12px 0;
    font-weight: 500;
  }

  .mainnav > li.nav-action-book > a {
    padding: 13px 26px;
    border-radius: 8px;
    background: #8dc63f;
    color: #ffffff !important;
    font-weight: 700;
  }

  .mainnav > li.nav-action-book > a:hover {
    background: #7cb135;
  }

  #graynav {
    display: none;
  }

  .mainnav {
    display: block;
  }

  .mainnav > li {
    flex: none;
  }

  .mainnav > li > .sub-menu {
    position: relative;
    display: none;
    left: 0;
  }

  #navwrap {
    height: auto;
    padding: 10px 0;
  }

  /*
   * The header's own copies of the theme's `.mobile` / `.desktop` helpers.
   * Scoped, because those two classes are used for hero art elsewhere and
   * moving them globally would take content with them.
   */
  #header #mobilesearch {
    display: block;
  }

  /*
   * Touch targets. The burger was 45x32, the section's Menu pill 90x36 and its
   * links 43 tall — all just under the 44px a fingertip needs, and all of them
   * the only way to reach what they open.
   */
  #mobileburger {
    height: 44px;
    margin-top: 0;
  }

  .secbar-toggle {
    min-height: 44px;
  }

  .secbar-item > a {
    min-height: 44px;
  }

  .secbar-name {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * The theme leaves `#graynav` absolutely positioned, which is right where it
   * sits by default — a sibling after the logo's container, so it drops below
   * it. Inside the row here, that same rule put the opened menu on top of the
   * logo and the burger, with no way to tap it shut. It flows instead.
   */
  #graynav {
    position: static;
    box-shadow: none;
  }

  /*
   * No room for a bar of services or a hover flyout on a phone, so the section
   * keeps its name and folds the rest behind a control beside it — the name on
   * the left, a Menu pill on the right, one line. It used to be a full-width
   * field under the name, which took two lines to say the same thing and read
   * as a form control rather than a menu.
   */
  .secbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .secbar-name {
    border-right: 0;
    padding: 4px 0;
    font-size: 18px;
  }

  .secbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
  }

  /*
   * `margin-top` is doing optical centring, not layout.
   *
   * The mark is a square with two borders rotated 45 degrees, so its ink is
   * the lower half of its box: the apex lands at the bottom edge and the arms
   * end level with the middle. Centred as a box it therefore reads low.
   * Measured against the label beside it, the ink sat 2.25px below the centre
   * of "Menu" — enough to look like a mistake without looking like anything in
   * particular. -5px puts the two within a quarter of a pixel.
   */
  .secbar-toggle:after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }

  /* Flipped, the ink is the upper half, so the correction flips with it. */
  .secbar-toggle[aria-expanded="true"]:after {
    margin-top: 0;
    transform: rotate(-135deg);
  }

  .secbar-list {
    display: none;
    flex: 1 0 100%;
    margin-top: 10px;
    gap: 0;
  }

  .secbar-list.is-open {
    display: block;
  }

  .secbar-item > a {
    padding: 11px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .secbar-item.on > a {
    border-bottom-color: #ffffff;
  }

  .secbar-item.has-fly > a:after,
  .secfly {
    display: none !important;
  }
}

/*
 * The search's close button.
 *
 * The theme positions it absolutely at `left: -18px` for a slot this header no
 * longer has, and hides it with `display: none` — then its script fades it in
 * with an inline `display: block` at widths above 767 only. Inline styles
 * outrank stylesheets, so the visibility has to be forced from the open state
 * to work at every width, which is the one place `!important` earns itself
 * here.
 */
#searchformwrap .searchclose {
  order: 2;
}

#searchformwrap.is-open .searchclose {
  display: flex !important;
  position: static;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  left: auto;
  top: auto;
  border-radius: 50%;
  color: #636466;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

#searchformwrap.is-open .searchclose:hover {
  background: #e6e8ea;
  color: #2b93d1;
}

/* ---------------------------------------------------------- service areas -- */

/*
 * The two bands the city pages add: the index on the service page, and the
 * office comparison that closes each city page.
 *
 * Both reuse `.svc-index` and `.svc-card`, so the ground, the radius and the
 * card behaviour on grey are already handled and nothing here restates them.
 * What is left is the small amount these bands do differently — a lead line
 * under the index heading, a drive time that has to read as the most important
 * thing on an office card, and two link lists that are navigation rather than
 * prose.
 */

.area-index-lead {
  margin: -18px 0 30px 0;
  color: #636466;
  font-size: 18px;
  max-width: 46em;
}

.area-group-title {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #636466;
  margin: 0 0 12px 0;
}

/*
 * Each region runs the full width and flows into columns, so seventeen cities
 * are four short columns rather than one long ribbon. The count steps down with
 * the viewport; on a phone a second column would leave orphaned single words.
 */
.area-group {
  list-style: none;
  margin: 0 0 34px 0;
  padding: 0;
  columns: 4;
  column-gap: 30px;
}

@media (max-width: 991px) {
  .area-group {
    columns: 3;
  }
}

@media (max-width: 767px) {
  .area-group {
    columns: 2;
  }
}

/*
 * The rows are a tap target, not just a line of text. At 20px tall in a
 * multi-column list they were the smallest thing on a phone anybody is
 * expected to hit accurately; the padding takes them to 36px without changing
 * the rhythm of the list, since the margin comes off by the same amount.
 */
.area-group li {
  margin-bottom: 0;
  break-inside: avoid;
}

.area-group li a {
  display: block;
  padding: 8px 0;
}

.area-group a {
  color: #2b93d1;
  text-decoration: none;
  font-size: 18px;
}

.area-group a:hover {
  color: #f58220;
  text-decoration: underline;
}

@media (max-width: 575px) {
  .area-group {
    columns: 1;
  }
}

/*
 * The map above the office cards.
 *
 * Shorter than the locations map, because it is answering a narrower question
 * — one city and up to three offices, not the whole Wasatch Front — and it
 * sits inside a band that continues underneath it rather than being the band.
 * The stacking context is the same defensive measure the locations map needs:
 * a map draws a deep stack of its own panes, and without one those z-indexes
 * compete with the sticky header's.
 */
.area-mapwrap {
  margin: 0 0 34px 0;
}

.area-map {
  display: block;
  height: 420px;
  border-radius: 25px;
  overflow: hidden;
  background: #f4f4f4;
  position: relative;
  z-index: 0;
}

/* No key configured, or the maps host never answered: sized to the message. */
.area-map.is-off {
  height: auto;
}

.area-map-off {
  margin: 0;
  padding: 36px 32px;
  color: #636466;
  font-size: 17px;
  text-align: center;
}

@media (max-width: 767px) {
  .area-map {
    height: 320px;
  }
}

/* The info window. Google supplies the box; these are the words inside it. */
.area-pop {
  font-family: inherit;
  min-width: 190px;
}

.area-pop p {
  margin: 0 0 4px 0;
  font-size: 15px;
  line-height: 21px;
  color: #636466;
}

.area-pop-name {
  font-size: 17px !important;
  font-weight: 600;
  color: #2b93d1 !important;
}

.area-pop-drive {
  font-weight: 600;
  color: #2b93d1 !important;
}

.area-pop a {
  color: #2b93d1;
  text-decoration: none;
}

.area-pop a:hover {
  text-decoration: underline;
}

/*
 * The provider grid.
 *
 * Faces, because "who would we see" is answered by a face and a name far
 * faster than by a list. Four across on a desktop, three on a tablet and two
 * on a phone — small enough that an office with nine providers is still one
 * glance rather than a scroll.
 */
.area-doc-office {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #636466;
  margin: 10px 0 18px 0;
}

.area-doc-count {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #8a8a8c;
  margin-left: 10px;
}

.area-doc-row {
  margin-bottom: 16px;
}

.area-doc {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-bottom: 28px;
}

.area-doc-photo {
  display: block;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 12px auto;
  width: 118px;
  height: 118px;
  background: #e8eaec;
}

.area-doc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.area-doc-name {
  display: block;
  color: #2b93d1;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
}

.area-doc-cred {
  display: block;
  color: #8a8a8c;
  font-size: 14px;
  line-height: 20px;
  margin-top: 2px;
}

.area-doc:hover .area-doc-name {
  color: #f58220;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .area-doc-photo {
    width: 96px;
    height: 96px;
  }
}

/* The drive time is what the reader came for, so it outranks the address. */
.area-office-drive {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600;
  color: #2b93d1;
  margin: 0 0 10px 0;
}

/*
 * The pin's number, on the card. Same blue as the teardrop on the map, sized
 * to sit with the title rather than compete with it.
 */
.area-office-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: #2b93d1;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
}

.area-office-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 12px 4px 12px;
  border-radius: 999px;
  background: #8dc63f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/*
 * The card used to end on a bare telephone number — a fact, not a thing you
 * can do. Somebody comparing two offices wants to act on the one they pick:
 * navigate to it, ring it, or read its hours. Three links, stacked so each is
 * its own tap target rather than a row of small ones side by side, and the
 * first is the one a phone can act on immediately.
 */
/*
 * One office, laid out sideways.
 *
 * A single card at half width leaves the other half of the band empty, which
 * reads as a column that failed to load rather than as a deliberate stop. Full
 * width with the photograph beside the facts uses the room and keeps the card
 * about the height it would have been. Below 768 it stacks back to the
 * portrait arrangement, where a side-by-side split gives each half too little.
 */
/*
 * The card's facts, as their own column.
 *
 * `.svc-card` is a flex column and `.area-office-act` uses `margin-top: auto`
 * to sit on the floor, so the actions line up across a row of cards whatever
 * length the addresses run to. Wrapping the facts to put a photograph beside
 * them broke that chain: the wrapper became the flex child, and the actions
 * inside it had nothing to push against. Making the wrapper a column that
 * grows restores it, at every width rather than only where the photo is beside
 * the text.
 */
.area-office-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

@media (min-width: 768px) {
  .area-office-wide {
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
  }

  .area-office-wide .area-office-photo {
    flex: 0 0 40%;
    margin: -32px 0 -30px -30px;
    border-radius: 25px 0 0 25px;
    aspect-ratio: auto;
  }
}

/*
 * The building, so you know what you are looking for when you pull up.
 *
 * Every office has one photographed for its own location page and none of them
 * had been used anywhere else. It sits above the name rather than beside it
 * because the card is narrow at three across, and it is cropped short so the
 * facts below it still start high enough to be read without scrolling.
 */
.area-office-photo {
  display: block;
  margin: -32px -30px 20px -30px;
  border-radius: 25px 25px 0 0;
  overflow: hidden;
  background: #e8eaec;
  aspect-ratio: 5 / 2;
}

.area-office-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * The provider count, as a way into the grid above rather than a verdict on
 * the office. "2 pediatricians" standing on its own invites the question of
 * whether two is enough; "Meet the 2 providers here" is an offer, and it is
 * the same number either way.
 */
.area-office-team {
  font-size: 15px !important;
  line-height: 22px !important;
  margin: 0 0 16px 0;
}

.area-office-team a {
  color: #2b93d1;
  text-decoration: none;
  font-weight: 600;
}

.area-office-team a:hover {
  color: #f58220;
  text-decoration: underline;
}

/* No grid to jump to, so it stays a fact rather than pretending to be a link. */
.area-office-team-plain {
  color: #636466;
}

.area-office-act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: auto 0 0 0;
}

.area-office-act a {
  color: #2b93d1;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  padding: 6px 0;
}

.area-office-act a:hover {
  color: #f58220;
  text-decoration: underline;
}

/* The two that are not the primary action read a step quieter. */
.area-office-act .area-office-more {
  font-size: 15px;
  font-weight: 500;
}

/* -------------------------------------------------------------- symptoms -- */

/*
 * A symptom page is three things in a row: what we say it is, the AAP's own
 * questions, and where to take it. Most of what it needs is already here —
 * `.dent-hero` for the title band, `.svc-index` for the bands, `.area-group`
 * for the list of other symptoms — so this is only what those do not cover.
 */

/*
 * The frame is the tallest thing on the site by a wide margin, and it sits in
 * a band with a heading above it and a note below. Without a little air it
 * reads as though the note belongs to the frame's last question rather than to
 * the frame.
 */
.sym-tool .sc-frame {
  display: block;
  width: 100%;
  border: 0;
  margin-top: 8px;
  background: #ffffff;
  border-radius: 25px;
}

.sym-tool .sc-note {
  margin-top: 20px;
}

/*
 * The routing list, on the symptom pages and on the checker page itself. Each
 * line is a decision, so the bold opening is the case and the rest is what to
 * do about it — a stack of short paragraphs rather than a bulleted sentence.
 */
.sc-routes {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
  max-width: 62em;
}

/*
 * The child combinator, not a descendant selector: the phone grid now lives
 * inside the first route, and as a descendant it inherited the bullet, the
 * 20px indent and 18px/28px type. Checked on the index — `.sc-reach`'s
 * `.sc-routes` has no nested list and is 1,024px at 390 before and after.
 */
.sc-routes > li {
  position: relative;
  margin-bottom: 14px;
  padding: 0 0 0 20px;
  font-size: 18px;
  line-height: 28px;
  color: #4a4b4d;
}

.sc-routes > li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2b93d1;
}

.sc-routes strong {
  color: #2b2c2e;
}

/* The reassurance under the routing, which is the point of the whole page. */
.sc-trust {
  max-width: 62em;
  font-size: 18px;
  line-height: 28px;
  color: #636466;
  font-style: italic;
  margin: 0 0 26px 0;
}

/* The index of symptom pages on the checker page, in the same columns the
   service-area index uses so the two read as one pattern. */
.sc-index .area-group {
  margin-bottom: 0;
}

/*
 * The line above everything else on a symptom page.
 *
 * The emergency guidance used to sit below a 2200px frame, which on the one
 * page somebody opens at two in the morning is the worst place for it. It is
 * the first thing under the title now, in a band of its own so the eye finds
 * it without reading — and phrased so it is as true on the teething page as on
 * the head injury one, since it appears on all of them.
 *
 * Orange rather than red: this is a signpost, not an alarm, and a red bar
 * across the top of a page about a cough frightens more people than it helps.
 */
.sym-alert {
  border-bottom: 1px solid #e4e7ea;
  padding: 14px 0;
}

/*
 * A standing note, not an alert component.
 *
 * It had the whole apparatus: a tinted fill, a 3px accent edge above and a
 * hairline below, brown type on cream, and 109 of its 193 characters set bold
 * — 56% of the sentence shouting, which is the same as none of it shouting.
 * At 390 that came to 170px, a fifth of the first screen, on a warning most
 * of the people reading it do not need.
 *
 * What is left is the orange rule the rest of the section already uses for
 * 911 — the same 3px `#f58220` as `.sym-doctor-911` — and one emphasised
 * phrase, which is the phrase that tells a parent what to do. The words of
 * the emergency sentence are unchanged.
 */
.sym-alert p {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid #f58220;
  font-size: 15px;
  line-height: 23px;
  color: #6b6d70;
  max-width: 62em;
}

.sym-alert .sym-911 {
  color: #8a4b12;
}

/* The line introducing the tool — what it does, not why it is embedded. */
/*
 * The line introducing the tool. `-18px` pulled it into the heading: the gap
 * measured -4px here against +15px for the identical heading-and-lead pairing
 * in the intro band 300px above, so the page ran two rhythms. It sits below
 * the frame now, so the margin is on the other side.
 */
/*
 * Above the frame, because all 164 of these sentences say "The AAP guide
 * below". It was rendering after the frame, so every page promised something
 * underneath a paragraph that was already underneath it. Moving one element is
 * the fix; rewriting 164 strings to say "above" is not.
 */
.sym-tool-lead {
  margin: 0 0 16px 0;
  color: #636466;
  font-size: 18px;
  line-height: 28px;
  max-width: 58em;
}

/*
 * The symptom index: the landing page's main job.
 *
 * It was twenty-eight links in a column, each ending "in Children", below a
 * 2200px frame — which made the most useful thing on the page the hardest to
 * find and the hardest to read. Tiles now, grouped by what a parent can
 * actually see or hear, because that is how somebody with a sick child
 * narrows down. Alphabetical would only help a reader who already knows the
 * word for it.
 */
.sc-lead {
  font-size: 19px;
  line-height: 30px;
  color: #636466;
  max-width: 56em;
  margin-bottom: 34px;
}

.sym-group {
  margin-bottom: 34px;
}

.sym-others-all {
  margin: 22px 0 0 0;
  font-size: 17px;
  font-weight: 600;
}

.sym-embed-plain {
  margin: 4px 0 0 0;
}

/*
 * A row of pills, not the office card's stacked text links. Reusing
 * .area-office-act here inherited its "padding: 6px 0", which is right for a
 * plain link and strips a .btn of the horizontal padding its 25px radius
 * needs: the label then ran straight off both rounded ends.
 */
.sym-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0 0;
}

.sym-acts .btn {
  padding: 10px 28px;
  font-size: 17px;
  line-height: 1.35;
}

@media (max-width: 575px) {
  .sym-acts {
    gap: 10px;
  }

  .sym-acts .btn {
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-size: 16px;
  }
}

/*
 * The theme gave `.herowrap` a 60px top margin that collapsed through the page
 * section and dropped the whole page below the nav. The index is on
 * `.dent-hero` now like the other 272 pages, so only the section itself still
 * needs pinning flush to the header.
 */
.sc-pagebody {
  margin-top: 0;
}

/*
 * Bands on this page were white, grey, white, grey with nothing at the seam,
 * so at a glance the whole page read as one column of text. A hairline at the
 * top of each band gives the eye somewhere to stop.
 */
.sc-index,
.sc-more,
.sc-reach,
.sc-questions,
.sym-tool,
.sym-doctor,
.sym-next,
.sym-seen,
.sym-others {
  border-top: 1px solid #e4e7ea;
}

/* ------------------------------------------- the symptom index -------- */

/*
 * 164 tiles in 13 groups runs to nine thousand pixels on a phone. Scanning
 * that is not navigation. So the box comes first: nearly everyone arrives
 * knowing the word for what they are looking at, and typing three letters
 * of it beats any amount of scrolling. The groups stay underneath for the
 * people who do not have the word, collapsed so the whole set is one screen.
 */
/*
 * One number owns where the field's text begins, so the hint under it cannot
 * drift out of line with it again.
 *
 * It had: the hint was set from the card's padding plus a 4px margin and
 * landed at x=100 at 1280, while the input's placeholder began at x=152 —
 * 52px apart, and 4px off the input's own left edge. Near-alignment reads
 * worse than either alignment, because the eye finds the 4px and not the
 * intent. The inset is the input's border plus its padding, and the hint and
 * the result count are both indented by it, so all three text runs share one
 * vertical line.
 */
.sym-find {
  --sym-find-inset: 56px; /* 2px border + 54px padding */
  max-width: 660px;
  margin: 4px 0 38px 0;
}

.sym-find-box {
  position: relative;
  display: flex;
  align-items: center;
}

.sym-find-icon {
  position: absolute;
  left: 21px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #9a9b9d;
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.sym-find-input {
  width: 100%;
  padding: 18px 20px 18px calc(var(--sym-find-inset) - 2px);
  border: 2px solid #dfe2e5;
  border-radius: 999px;
  background: #ffffff;
  font-size: 18px;
  color: #4a4b4d;
  appearance: none;
}

.sym-find-input:focus {
  outline: none;
  border-color: #2b93d1;
  box-shadow: 0 0 0 4px rgba(43, 147, 209, 0.15);
}

.sym-find-input::-webkit-search-cancel-button {
  display: none;
}

.sym-find-clear {
  position: absolute;
  right: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #2b93d1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sym-find-clear:hover {
  color: #f58220;
}

/* Scoped to the band: the theme sets a 23px paragraph size inside
 * .usergenerated, which a bare class cannot outrank. */
.sc-pagebody .sym-find-hint {
  margin: 12px 4px 0 var(--sym-find-inset);
  font-size: 15px;
  line-height: 1.5;
  color: #8a8b8d;
}

.sc-pagebody .sym-find-count {
  margin: 12px 4px 0 var(--sym-find-inset);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: #2b93d1;
}

/* Filled rather than emptied on zero hits, so the polite live region says
   something instead of saying nothing. */
.sc-pagebody .sym-find-count.is-none {
  color: #8a4b12;
}

.sc-pagebody .sym-find-count:empty {
  display: none;
}

/*
 * What stands in for the box when there is no script to drive it. Only ever
 * rendered inside <noscript>, so it costs a reader with script nothing; the
 * matching rule that hides `.sym-find` is in the head, in `build.ts`.
 */
.sc-pagebody .sym-find-off {
  max-width: 620px;
  margin: 4px 0 38px 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f4f5f6;
  font-size: 16px;
  line-height: 24px;
  color: #4a4b4d;
}

/*
 * "Common right now" and "Browse by category" are the two ways into the
 * list, so they get the same label, sitting on a rule that separates them
 * from what came before. Previously they were two differently-styled scraps
 * of grey text and read as unrelated.
 */
.sym-sec {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px 0;
  padding: 0 0 10px 0;
  border-bottom: 2px solid #eef0f2;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #636466;
}

.sym-sec-note {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: #9a9b9d;
}

.sym-common {
  margin-bottom: 40px;
}

.sym-browse-title {
  margin-top: 0;
}

/* Set by script once the groups can actually be opened and shut. */
.sym-browse.is-collapsible .sym-group-title {
  margin: 0;
}

/*
 * Inside the accordion these are controls, not quiet section labels, so
 * they drop the uppercase treatment the standalone headings carry and take
 * a readable weight and colour.
 */
.sym-group-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 12px;
  border-radius: 8px;
  border: 0;
  border-bottom: 1px solid #e4e7ea;
  background: none;
  color: #4a4b4d;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
}

.sym-group-toggle:hover,
.sym-group-toggle:focus-visible {
  color: #2b93d1;
  background: #f7f9fa;
}

.sym-group-toggle:hover .sym-group-chevron {
  color: #2b93d1;
}

.sym-group-toggle .sym-group-count {
  margin-left: auto;
}

.sym-group-chevron {
  flex: 0 0 auto;
  color: #2b93d1;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.sym-group-toggle[aria-expanded="true"] .sym-group-chevron {
  transform: rotate(90deg);
}

.sym-browse.is-collapsible .sym-tiles {
  margin: 14px 0 22px 0;
}

.sym-group-count {
  display: inline-block;
  min-width: 26px;
  padding: 2px 8px 3px 8px;
  border-radius: 999px;
  background: #eef0f2;
  color: #7c7d7f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
}

/*
 * A zero-hit query used to change nothing on screen: the count was cleared,
 * `:empty` hid it, and the panel sat 857px down, below the fold. The panel is
 * directly under the box now and names the query back, so the answer to
 * "seizure" is not a screen identical to the one before it.
 */
.sym-none {
  max-width: 620px;
  margin: 0 0 26px 0;
  padding: 22px 24px 6px 24px;
  border-radius: 16px;
  background: #f4f5f6;
  border-left: 4px solid #f58220;
}

.sym-none-lead {
  margin: 0 0 10px 0;
  font-size: 19px;
  font-weight: 600;
  color: #4a4b4d;
}

/* An unbroken 40-character token must not widen the panel. */
.sym-none-q {
  font-style: italic;
  color: #2b2c2e;
  overflow-wrap: anywhere;
}

/*
 * "seizure" and "choking" are two of the four words in our own 911 sentence,
 * and no page covers either — nor should one. Shipped hidden, revealed only by
 * typing, so it never sits on the page as a warning about nothing.
 */
.sym-emergency {
  max-width: 620px;
  margin: 0 0 26px 0;
  padding: 22px 24px 8px 24px;
  border-radius: 16px;
  background: #fff4e8;
  border: 2px solid #f58220;
}

.sym-emergency-lead {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: #8a4b12;
}

.sc-pagebody .sym-emergency-body {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  color: #6b4a24;
}

.sc-pagebody .sym-emergency-body a {
  color: #8a4b12;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sym-emergency .btn.sym-emergency-call {
  background: #a63d08;
  color: #ffffff !important;
}

.sym-none p {
  color: #636466;
}

.sc-more-acts {
  margin-top: 22px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 575px) {
  .sym-find {
    --sym-find-inset: 50px; /* 2px border + 48px padding */
  }

  .sym-find-input {
    font-size: 16px;
    padding: 15px 16px 15px calc(var(--sym-find-inset) - 2px);
  }

  .sym-find-icon {
    left: 16px;
  }
}

.sym-group-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #8a8a8c;
  margin: 0 0 14px 0;
}

.sym-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/*
 * Each one is a target rather than a line of text — 48px tall, which is a
 * comfortable thumb on a phone, and wide enough that the longest label does
 * not wrap. A parent doing this one-handed at 2am is the case to design for.
 */
.sym-tiles a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid #dfe2e5;
  border-radius: 24px;
  background: #ffffff;
  color: #2b93d1;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.sym-tiles a:hover,
.sym-tiles a:focus-visible {
  border-color: #2b93d1;
  text-decoration: none;
}

.graybg .sym-tiles a {
  background: #ffffff;
}

@media (max-width: 575px) {
  .sym-tiles a {
    padding: 10px 16px;
    font-size: 16px;
  }
}

/* The tool is the fallback here, not the headline, so it sits quieter. */
.sc-tool .sc-frame {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 25px;
  background: #ffffff;
  margin-top: 8px;
}

/*
 * The embedded Symptom Checker, given a frame of its own.
 *
 * A raw 2200px iframe reads as a hole in the page: the AAP's own typography
 * starts abruptly, there is no edge to it, and when the tool is short the
 * bottom half is blank white with no explanation. Wrapping it in a titled panel
 * says three things a bare frame cannot — that this is a tool rather than more
 * of our page, whose it is, and where to go when it misbehaves.
 *
 * The width is capped as well. The questions are a single narrow column, and
 * stretching that column across 1200px of desktop leaves the reader tracking
 * one short line across an enormous field of white.
 */
/*
 * Deliberately not a card. A filled header bar and a hard border around a
 * third-party page make it read as a widget bolted onto ours; a plain label
 * line above a white sheet reads as part of the page. The sheet is white
 * because the frame's own background is, so no seam shows at its edge.
 */
.sym-embed {
  max-width: 860px;
  margin: 0 0 8px 0;
}

/*
 * A control bar again, and the reversal is deliberate. design-01 moved these
 * controls below the frame "where the hand is", and that was right when the
 * frame was 460px and its bottom edge was on screen with it. design-02 fitted
 * the frame to the viewport, so it is now 698px at 390 — the whole usable fold
 * — and "below the frame" means off screen: parked at the natural reading
 * position, "Full screen" landed at screen y=767 under a dock starting at 772
 * and "Open on HealthyChildren.org" at y=825, below the fold entirely.
 *
 * So the way out of the frame comes back above it, where it stays in view for
 * as long as the frame is being read, and the frame gives back 44px of itself
 * to pay for it. The rescue link — the one that matters when the frame shows
 * nothing — stays below and now has the row to itself.
 *
 * `min-height` rather than content height, so revealing the `hidden` button
 * moves nothing.
 */
.sym-embed-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px 0;
  padding: 0 2px;
  min-height: 44px;
}

.sym-embed-cap .sym-embed-grow {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #dfe2e5;
  border-radius: 22px;
  background: #ffffff;
  color: #1a6f9f;
  font-size: 15px;
}

.sym-embed-cap .sym-embed-grow:hover,
.sym-embed-cap .sym-embed-grow:focus-visible {
  border-color: #2b93d1;
  color: #b3540c;
}

.sym-embed-cap .sym-embed-grow svg {
  width: 14px;
  height: 14px;
}

.sym-embed-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #636466;
}

/* The topic the frame is opened at, so the panel says what it is showing. */
.sym-embed-topic {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px 4px 10px;
  border-radius: 999px;
  background: #2b93d1;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: none;
}

.sym-embed-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: #2b93d1;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sym-embed-open:hover {
  color: #f58220;
  text-decoration: underline;
}

.sym-embed-open svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * The AAP viewer is cross-origin and sends no resize message, so the frame
 * cannot size itself to its content. Its tallest tab runs past 1500px on some
 * topics, and a box tall enough for the worst case leaves a slab of white on
 * every other one. So the frame gets a comfortable height and scrolls inside
 * itself, and the bar offers full screen for anyone who wants the room.
 */
.sym-embed-acts {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

.sym-embed-grow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #2b93d1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.sym-embed-grow:hover {
  color: #f58220;
}

.sym-embed-grow svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * The two ways out of the frame, as real targets. 94x21 and 74x21 against a
 * 44px minimum, and the only thing on the page telling a reader what to do
 * when the frame shows nothing.
 */
.sym-embed-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid #dfe2e5;
  border-radius: 24px;
  background: #ffffff;
  color: #1a6f9f;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.sym-embed-act:hover,
.sym-embed-act:focus-visible {
  border-color: #2b93d1;
  text-decoration: none;
}

.sym-embed .sym-embed-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 10px 0 0 0;
}

/*
 * The panel's edge belongs to the stage rather than to the frame, so it looks
 * the same whether or not anything loads.
 */
.sym-embed-stage {
  position: relative;
  border: 1px solid #e4e7ea;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

/*
 * Behind the frame, not instead of it. Nothing here asks whether the frame
 * loaded — a cross-origin frame gives no trustworthy load or error signal, and
 * hard constraint 3 forbids depending on one. When the frame arrives the AAP's
 * own white page covers this; when it never does, this is what was always
 * there. Worded as a condition rather than as a report, because it is in the
 * document either way and a screen reader reads it either way.
 *
 * Honest limit: an offline or DNS failure makes the browser paint its own
 * error page inside the frame, which covers this. The always-visible
 * "Open on HealthyChildren.org" control below the frame is the rescue that
 * does not depend on anything.
 */
.sym-embed-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px 22px;
  background: #f8f9fa;
}

.sym-embed-fallback-lead {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #4a4b4d;
}

.sym-embed-fallback p {
  margin: 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 25px;
  color: #636466;
}

/*
 * The frame must not paint its own fill, or it covers the message.
 *
 * The client: "the iframe almost always requires scrolling". It was a flat
 * 460/560px on 158 pages at every screen size. At 390x844 the usable fold is
 * 714px — 844 less the 58px sticky header and the 72px the fixed CTA dock
 * covers — so the frame spent 64% of the screen and asked the reader to scroll
 * inside the other 36%. The literal request, measuring the frame's content, is
 * not possible: healthychildren.org is another origin, there is no postMessage
 * contract, and hard constraint 3 forbids depending on the frame having
 * loaded. So the frame is fitted to the screen instead.
 *
 * `svh` and not `dvh`: `dvh` changes every time a mobile URL bar collapses, so
 * the frame would resize under the reader's thumb mid-scroll. `svh` is the
 * viewport with the browser chrome shown and does not move during a scroll, so
 * this reflows exactly never after first paint.
 *
 * The static declaration first is the fallback. A browser that does not know
 * `svh` drops the second declaration at parse time and gets today's height —
 * verified, it computes to 560px. No JavaScript, no @supports, no feature test.
 *
 * The floor is today's value at each breakpoint, so no viewport anywhere ends
 * up with less frame than it has now. The 720px ceiling is deliberate: UI_RULES
 * records "the frame previously sat in an oversized box that dominated the page
 * without being usable", and a cap is what stops that returning on a tall
 * desktop.
 *
 * The client: "the iframe is not being automatically sized ... i have to scroll
 * up and down on the iframe just to see all the content". It cannot be sized to
 * its content, and this is why, recorded so nobody re-derives it. The AAP
 * viewer is a three-tab widget — its own 126-byte AAP.SymptomChecker.js runs
 * jQuery Tools `.tabs()` over Definition, When To Call and Care Advice — and it
 * shows one tab at a time. Across the 158 topics with a tool, the tab the
 * reader lands on holds a median 1,826 characters and the Care Advice tab a
 * median 3,355, up to 17,930. The height of the content is a property of a
 * click that happens inside a cross-origin frame, not of the topic. Any fixed
 * height either restores the scrollbar on the long tab or leaves a slab of
 * white on the short one, and the tallest-pane figure would push the routing
 * band and its eight phone numbers past y=5,000 on a phone.
 *
 * So the frame keeps its viewport fit and gives back 44px of itself to buy the
 * control bar above, which stays on screen while the frame is being read. Only
 * the three subtrahends change.
 */
.sym-embed-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 560px;
  height: clamp(560px, calc(100svh - 202px), 720px);
  border: 0;
  background: transparent;
}

/* The launched tool. Closed dialogs stay display:none via the UA sheet. */
.sym-modal {
  width: min(1060px, 100vw - 32px);
  height: min(900px, 100vh - 32px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.sym-modal[open] {
  display: flex;
  flex-direction: column;
}

.sym-modal::backdrop {
  background: rgba(33, 37, 41, 0.62);
}

/*
 * The dialog was spending 144px of an 844px phone on a 71px bar and a 73px
 * footer, which is why escaping to full screen gained two pixels over the
 * inline frame. The close button stays 44x44 and the footer button stays a
 * full-width 44px; only the padding around them comes in.
 */
.sym-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #f4f5f6;
  border-bottom: 1px solid #e4e7ea;
}

.sym-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  color: #636466;
  cursor: pointer;
}

.sym-modal-close:hover {
  color: #f58220;
}

.sym-modal-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.sym-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  background: #ffffff;
}

.sym-modal-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * A phone has no Escape key and, at 100vw, no backdrop to tap, so the 58x21px
 * "Close" in the top-right corner was the only way out of a full-screen
 * dialog — and the top-right corner is the least reachable place on an 844px
 * screen held in one hand. The way out is a full-width control at the bottom.
 */
.sym-modal-foot {
  flex: 0 0 auto;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  background: #f4f5f6;
  border-top: 1px solid #e4e7ea;
}

.sym-modal-done {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 22px;
  background: #1a6f9f;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .sym-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

@media (min-width: 768px) {
  /* Room for both, so neither has to be full width. */
  .sym-embed-act {
    flex: 0 0 auto;
  }

  /* Escape and a backdrop both exist here; the top-right close is enough. */
  .sym-modal-foot {
    display: none;
  }
}

@media (max-width: 575px) {
  .sym-embed-cap .sym-embed-topic {
    display: none;
  }

  /* Inside the dialog the bar otherwise read only "SYMPTOM CHECKER" and no
     longer said which symptom it was showing. */
  .sym-modal .sym-embed-topic {
    display: inline-block;
  }

  .sym-modal .sym-embed-acts {
    gap: 14px;
  }

  /* 58px sticky header + 72px dock + 44px bar + 9px gap + 7px of daylight */
  .sym-embed-frame {
    height: 460px;
    height: clamp(460px, calc(100svh - 190px), 720px);
  }
}

@media (min-width: 1200px) {
  /* No sticky header and no dock here, so the acts row fits below as well. */
  .sym-embed-frame {
    height: 560px;
    height: clamp(560px, calc(100svh - 140px), 720px);
  }
}

/* ------------------------------------------ symptom section: contrast -- */

/*
 * `#2B93D1` is a brand colour and stays exactly that as a fill, a border, the
 * hero wash and the topic pill. Text is the one place it fails: 3.39:1 on
 * white against the 4.5:1 minimum, on all 164 tile labels among others.
 * `#1a6f9f` is 5.50:1 on white and 5.00:1 on the theme's `#F4F4F4`, which
 * matters because half the section is grey bands. The existing hover
 * `#1c7cb4` was not enough: 4.57 on white but 4.16 on grey.
 */
.sym-tiles a,
.sym-find-clear,
.sym-others .area-group a,
.sym-embed-open,
.sym-embed-grow,
.sc-pagebody .sym-find-count {
  color: #1a6f9f;
}

.sym-sec-note,
.sc-pagebody .sym-find-hint {
  color: #636466; /* 2.78 and 3.41 -> 5.92 */
}

.sym-group-count {
  color: #5a5b5d; /* 3.61 -> 5.95 on its own #eef0f2 pill */
}

/* Hover was `#F58220` on white, 2.59:1. A text-only shade at 5.01:1; every
   orange fill and rule stays `#F58220`. */
.sym-tiles a:hover,
.sym-tiles a:focus-visible,
.sym-find-clear:hover,
.sym-others .area-group a:hover,
.sym-embed-open:hover,
.sym-embed-grow:hover {
  color: #b3540c;
}

/* ------------------------------------- symptom section: tap targets -- */

/* 366 x 43px against a 44px minimum, on 5 to 11 links per page. Scoped to
   `.sym-others`: `.area-group` is also /locations/ and the service areas. */
.sym-others .area-group li a {
  padding: 9px 0;
}

/* 67 x 32px inside a 52px input: the padding grows without growing the box. */
.sym-find-clear {
  min-height: 44px;
  min-width: 76px;
  padding: 11px 18px;
}

/*
 * 107 x 15px at y=95. The trail is pinned, so the pad is absorbed by an equal
 * negative margin and the hero does not grow. 35px is not 44; the 366 x 52px
 * "All symptoms" button below it is the reachable route to the same place.
 */
.sym-hero .hero-crumbs a {
  display: inline-block;
  padding: 10px 2px;
  margin: -10px 0;
}

/* ------------------------------------ symptom index: the first screen -- */

/*
 * 711px of an 844px phone screen went before the search box, and no topic
 * link was visible at all. Nothing is removed: the photograph stays, because
 * every other page has one and this section is not the place to become the odd
 * page out, and the alert band is untouched at 170px. What comes out is
 * spacing that was sized for a page with more to say above the fold than this
 * one has.
 */
.sc-index {
  padding-top: 24px;
}

.sc-index h2 {
  margin-bottom: 6px;
}

.sc-index .sc-lead {
  margin-bottom: 10px;
}

.sym-find,
.sc-pagebody .sym-find-off {
  margin: 0 0 18px 0;
}

.sym-sec {
  margin: 0 0 14px 0;
  padding: 0 0 8px 0;
}

@media (min-width: 992px) {
  .sc-index {
    padding-top: 34px;
  }
}

/* --------------------------------- the alert band and the hero call -- */

/*
 * "911" at 17px/300 did not survive a four-pixel blur, on the one band that
 * must not be missed. The band's height is unchanged, so finding 4's
 * arithmetic is not affected.
 */
.sym-911 {
  white-space: nowrap;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #f58220;
}

.sym-hero-call {
  background: #ffffff;
  color: #1a6f9f !important;
  border: 2px solid #ffffff;
}

/*
 * The theme uppercases every `.btn`, and "HOURS, ADDRESSES AND DIRECTIONS" is
 * 30 characters of it. At 390 the pill is 347px wide with 307px usable inside
 * the padding its 25px radius needs, and the label at the shared 16px measured
 * 330px — so it wrapped to two lines and made a 69px pill. 15px brings it back
 * to one line on the narrowest phone this site is designed for, without
 * touching the label, which is the client's wording.
 */
@media (max-width: 575px) {
  .sym-call-acts .btn {
    font-size: 15px;
    padding: 13px 18px;
  }
}

@media (max-width: 767px) {
  /* Two buttons on one line rather than two stacked bars, so the hero does
     not grow to pay for the first one. */
  .sym-hero .dent-hero-act {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .sym-hero .dent-hero-act .btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 10px;
    text-align: center;
  }
}

/* -------------------------------- the space above the frame, and bands -- */

/*
 * `padme90` is 90px, 50px below 768. It was sized for pages carrying three
 * paragraphs; these carry one, of 16 to 52 words, and /sty/ at 1280 measured
 * 326px of band around 116px of content — 65% padding. Four of these bands at
 * 390 spent 400px on a 3,700px page.
 *
 * The hairline at the seam is what fixed the recorded fault "no dividers
 * between sections", so it stays and only the padding around it comes in.
 * Anchored on our own band classes; `.padme90` is here to outrank the theme's
 * utility, which 272 pages use, and is never selected on its own.
 */
.sym-tool.padme90,
.sym-doctor.padme90,
.sym-next.padme90,
.sym-seen.padme90,
.sym-others.padme90 {
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .sym-tool.padme90,
  .sym-doctor.padme90,
  .sym-next.padme90,
  .sym-seen.padme90,
  .sym-others.padme90 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/*
 * The hero was a fixed 420px box holding 330 to 384px of content, so every one
 * of the 164 pages carried 36 to 90px of empty blue below its buttons — inside
 * the 1,306px that stood between the reader and the tool the page exists for.
 */
.sym-hero .dent-hero-inner {
  min-height: 0;
}

@media (max-width: 767px) {
  /* The trail two lines above already says "Symptom Checker". */
  .sym-hero .dent-hero-eyebrow {
    display: none;
  }

  /*
   * 40px was the design's number and it put the H1 through the pinned trail:
   * measured -10px between the last crumb and the title, because dropping the
   * eyebrow also dropped the buffer it had been providing. 56px clears both
   * the trail's text and the tap box finding 14 gave its link.
   */
  .sym-hero .dent-hero-inner {
    padding-top: 56px;
    padding-bottom: 28px;
  }

  .sym-hero .hero-crumbs {
    top: 8px;
  }

  .sym-hero .dent-hero-act {
    margin-top: 24px;
  }
}

/*
 * The flex wrapper that used to paint the AAP frame above our own paragraph
 * while keeping it after it in the document has gone with the band it
 * reordered: the overview is the hero's text now, so it is above the frame at
 * both, and there is nothing left to swap.
 */
/* ------------------------------- symptom index: three zones, three surfaces -- */

/*
 * The client's report: search, common and categories "are all in one section
 * but they lack color to divide them up". Measured, that is literally true —
 * `.sc-index` is 1,953px of one white field at 390 and every child computes to
 * `rgba(0,0,0,0)`. The only internal boundary was the `2px #eef0f2` rule under
 * the two `.sym-sec` labels, 1.14:1 on white.
 *
 * The answer is the page's own band alternation, one level down: the search
 * sits on a plinth, the twelve common topics stay on the page's white so the
 * fast path is the one thing not in a box, and the thirteen categories sit in a
 * panel. The panel shape is `.sym-embed-stage`'s, so this is a third content in
 * an existing shape and not a third card style.
 *
 * Still three surfaces, but the first of them has since moved into the hero and
 * is now blue rather than grey: blue band, white common, grey browse panel. The
 * declarations below are the plinth as it is anywhere; `.sc-findband` overrides
 * the two that only made sense against white.
 *
 * Honest limit, since it decides how much of this works: `#f4f5f6` on white is
 * 1.09:1 and the `#e4e7ea` edge is 1.24:1. The fill alone is not the boundary.
 * What carries it is the accent on each zone's entry point — the 44px bars
 * under the two labels — plus the thirteen white cards, which are a pattern
 * rather than a contrast.
 */
.sc-find-plinth {
  max-width: 660px;
  margin: 0 0 18px 0;
  padding: 12px;
  background: #f4f5f6;
  border: 1px solid #e4e7ea;
  border-top: 3px solid #2b93d1; /* `.sym-alert`'s idiom, in the other brand colour */
  border-radius: 14px;
}

.sc-find-plinth .sym-find {
  margin: 0;
  max-width: none;
}

.sc-find-plinth .sym-find-hint,
.sc-find-plinth .sym-find-count {
  margin: 6px 4px 0 var(--sym-find-inset);
}

/* White on `#f4f5f6` is 1.09:1, so the input has to keep an edge of its own. */
.sc-find-plinth .sym-find-input {
  border-color: #c9ced4;
}

/* Its own `#f4f5f6` would vanish into the plinth's; the answers are white now. */
.sc-find-plinth .sym-none {
  background: #ffffff;
}

.sc-find-plinth .sym-none,
.sc-find-plinth .sym-emergency {
  margin: 12px 0 0 0;
  max-width: none;
}

/*
 * Only ever rendered inside <noscript>, and it is inside the plinth so that
 * `build.ts`'s `.sym-find{display:none}` does not leave an empty grey box with
 * a blue edge and nothing in it. The plinth supplies the surface this used to
 * carry for itself.
 */
.sc-find-plinth .sym-find-off {
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border-radius: 0;
}

/* Paying for most of the plinth's own height out of the copy above it. */
.sc-index .sym-common {
  margin-bottom: 28px;
}

/*
 * Thirteen categories, and on a wide screen they were thirteen full-width
 * bars.
 *
 * Measured at 1280: each row was 1,300px of card carrying a label about 120px
 * long, so roughly 90% of every bar was empty, and the thirteen of them ran to
 * 1,180px inside a 1,617px section. That is a phone pattern stretched to a
 * desktop, which is what it looked like.
 *
 * They are a grid now — two from 768, three from 1200 — so the same thirteen
 * fit five rows instead of thirteen, and each tile is about the width of its
 * own label. `align-items: start` matters: a category opens inside its own
 * cell, and without it every tile in that row would stretch to match the one
 * that opened.
 *
 * The grey panel goes with the bars. The tiles are bordered cards already, and
 * a panel around cards is a box inside a box; the section's own label and the
 * page's white are enough to hold them.
 */
.sc-index .sym-browse {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.sc-index .sym-browse .sym-group-toggle {
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid #e4e7ea;
  border-radius: 10px;
}

/*
 * One column on a phone, and `gap` owning the spacing there too.
 *
 * The grid below only started at 768, so on a phone the cards stayed a plain
 * block stack and kept `.sym-group`'s own 34px bottom margin -- written for a
 * stack, and more than three times the 10px between the tiles directly above
 * them. Thirteen cards at 34px apart is 300px of gap in a column a parent is
 * already scrolling.
 */
.sym-browse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.sym-browse-grid > .sym-group {
  margin: 0;
}

@media (min-width: 768px) {
  .sym-browse-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
    align-items: stretch;
  }

  /*
   * Only the shut ones stretch.
   *
   * This is here so two collapsed cards sharing a row are the same height
   * whatever their blurbs do. Applied to an open card as well, it was the
   * whole of the expansion bug: the heading took the full row height, 258px
   * against the 74px it needs, which left a blank band under the title and
   * pushed the symptom list past the card's own bottom edge -- the list
   * started at y1435 where the card ended at y1425, so it painted over the
   * two cards below it, which had been laid out at y1439.
   *
   * An open card has to size itself to its heading plus its list, so it is
   * excluded and does that.
   */
  .sym-browse-grid > .sym-group:not(.is-open) > .sym-group-title,
  .sym-browse-grid > .sym-group:not(.is-open) > .sym-group-toggle {
    height: 100%;
  }

  /*
   * `gap` owns the spacing here, so the two margins that used to do it are
   * cleared. `.sym-group`'s own 34px bottom margin was written for a stack and
   * became a 34px row gap on top of the toggle's 10px — measured 34px between
   * rows against 10px between the columns, which read as four loose rows
   * rather than one grid.
   */
  .sym-browse-grid > .sym-group {
    margin: 0;
  }

  .sc-index .sym-browse .sym-group-toggle {
    margin-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .sym-browse-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * An open category takes the whole row.
 *
 * Left in its own column it was a 347px strip: "Knocks, pain and injuries" put
 * its 26 pages into thirteen rows of two and ran 1,350px down a third of the
 * page, with the other two columns blank beside it. Spanning every column lets
 * the same 26 sit in a few wide rows, and it makes which category is open
 * unmistakable.
 */
@media (min-width: 768px) {
  .sym-browse-grid > .sym-group.is-open {
    grid-column: 1 / -1;
  }

  .sc-index .sym-browse.is-collapsible .sym-tiles {
    margin: 10px 0 4px 0;
    padding: 0 2px 2px 2px;
  }
}

/*
 * Caused by this change rather than a separate fix: this heading is visible
 * only with scripting off, and `#8a8a8c` was already 3.45:1 on white. On the
 * panel it would be 3.16:1. `#5a5b5d` is 6.23:1 on `#f4f5f6`.
 */
.sc-index .sym-browse .sym-group-title {
  color: #5a5b5d;
}

/*
 * The saturated cue the client asked for, on the two entry points that carry a
 * label. Decoration over the surface and the label, never the only signal:
 * `#f58220` is 2.59:1 on white and would fail 1.4.11 if it were carrying
 * meaning alone. Each zone is also named in text at 5.43:1 and separated by a
 * surface change. `.sym-sec` is index-only today; the prefix keeps a bare
 * `.sym-sec:after` out of the cascade if it ever stops being.
 */
.sc-index .sym-sec {
  position: relative;
}

/*
 * The accent bar was pinned to the bottom of a heading that had a border to sit
 * on. That border is gone and the heading is a flex column now, so the bar is a
 * row in it — see the ordered rule further down. Left absolute it landed on top
 * of "all 164 pages".
 */

@media (min-width: 768px) {
  .sc-index .sym-browse {
    padding: 22px 20px 10px 20px;
  }
}

/* --------------------------------- symptom index: the search in the header -- */

/*
 * The client: "lets stick the search bar in the main h1 header". Measured, the
 * box was at y=598 on a 390x844 phone and y=769 at 1280x800 — the last thing on
 * the first screen, on the page whose whole job is naming what you can see.
 *
 * Below 992 the theme hides `.herowrap` and shows `.mobileheromessage`, whose
 * computed background is `rgb(43,147,209)`, exactly `#2B93D1`. This band
 * carries the same fill and no top padding, so on a phone the title and the
 * search read as one block with no seam. From 992 up both of those are
 * `display: none` and the band lands under the photographic hero, where the
 * plinth is pulled up onto the hero's bottom edge.
 *
 * The input is never on the photograph. A white card on `#2B93D1` is a 3.39:1
 * boundary, and every word inside it keeps a white background: the hint at
 * `#636466` is 5.92:1 there and would be 1.9:1 on the blue.
 *
 * The rules this element's contents rely on are scoped to `.sc-pagebody` and
 * not to `.sc-index`, because they are no longer inside `.sc-index`. That
 * prefix is load-bearing rather than tidy: without it the theme's
 * `.pagebody p` at 18px wins and the hint alone grows 39px.
 */
/*
 * The band under the hero, and no longer a second blue.
 *
 * It was `#2b93d1` because below 992 it sat directly under the theme's blue
 * `.mobileheromessage`, and matching it made the two read as one block. The
 * hero above is now `.dent-hero`, the same photograph-and-wash the 164 symptom
 * pages use, at every width — so the theme's blue band is gone and the reason
 * for this one's fill went with it. What was left was two different blues
 * meeting at a hard horizontal seam: the photograph's own blue above, a flat
 * `#2b93d1` below.
 *
 * White also retires the plinth. The card existed to give the input and its
 * hint a white ground to be legible on; on a white band that is the band's
 * job, and a white card on white is an outline around nothing. `#8a8b8d` on
 * white is 3.54:1 for the hint, which is why it is 15px here rather than 14.
 */
/*
 * The search zone as one tinted panel, centred.
 *
 * It was a bare input on white under a left-aligned heading a screen further
 * down, so the page's own instruction and the box that carries it out were two
 * unrelated things. They are one object now: heading, sub-line, field, hint and
 * the 911 note, on a ground tinted from the brand blue rather than a new
 * colour — `#2b93d1` at the weight that lands on `#eef6fc`, which is the
 * lightest step the palette already implies rather than a fifth hue.
 */
.sc-findband {
  background: #ffffff;
  padding: 26px 0 30px 0;
}

.sc-findband .sc-find-plinth {
  max-width: none;
  margin: 0;
  padding: 34px 20px 30px 20px;
  background: #eef6fc;
  border: 0;
  border-radius: 24px;
  text-align: center;
}

/*
 * The panel's decoration, and the only three things on it that are not words.
 *
 * The example carried soft waves, a heart outline and a handwritten line. The
 * first two are shapes and are drawn here; the third was "Healthy children,
 * brighter tomorrows", which is not this practice's. Its mark is ALL BETTER —
 * `.allbetter` in the theme, set in LemonYellowSun — so that is what the panel
 * carries. Inventing a tagline to match a mockup would be the one thing on
 * this page nobody could sign off.
 *
 * All three are `aria-hidden` and sit behind the content at low opacity, so
 * nothing here is load-bearing for a reader or a screen reader.
 */
.sc-find-plinth {
  position: relative;
  overflow: hidden;
}

.sc-find-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #2b93d1;
  opacity: 0.06;
  pointer-events: none;
}

.sc-find-wash-b {
  opacity: 0.75;
}

.sc-find-heart {
  position: absolute;
  top: 26px;
  right: 30px;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #2b93d1;
  stroke-width: 8;
  opacity: 0.22;
  pointer-events: none;
}

/*
 * Top left, opposite the heart. At the bottom it collided with the 911 note —
 * the one thing on this panel that must stay legible — and read as a rendering
 * fault rather than a mark. Hidden below 768, where the panel has no margin to
 * spare for decoration.
 */
.sc-pagebody .sc-find-mark {
  position: absolute;
  left: 28px;
  top: 26px;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  color: #f58220;
  opacity: 0.34;
  pointer-events: none;
}

/*
 * The script mark stays off below 768 -- at 366px of panel it runs into the
 * centred title, which the mockup's wider drawing has room for. The heart is
 * small and lives in the corner, so the phone block further down turns it
 * back on.
 */
@media (max-width: 767px) {
  .sc-find-mark,
  .sc-find-heart {
    display: none;
  }
}

.sc-find-plinth > *:not(.sc-find-wash):not(.sc-find-heart):not(.sc-find-mark) {
  position: relative;
}

.sc-pagebody .sc-find-eyebrow {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  /*
   * The darker blue again, not the brand blue: 13px is small, and `#2b93d1` on
   * the `#eef6fc` plinth is 3.1:1. This is 5.03:1 on the same tint. The title
   * below it keeps the brand blue, which it can, being 38px.
   */
  color: #1a6f9f;
}

.sc-pagebody .sc-find-eyebrow:after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 9px auto 0 auto;
  border-radius: 2px;
  background: #2b93d1;
}

/*
 * Brand blue, because that is what a section heading is on this site —
 * `.dent-band-title` is `#2b93d1` on every other band, and a page that opens
 * in a navy nobody else uses is a page that has left the brand to match a
 * mockup. Measured: 3.10:1 on the panel's tint and 3.39:1 on white, against
 * the 3.0 AA asks of text this size, which every heading here is.
 */
.sc-find-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: #2b93d1;
}

.sc-pagebody .sc-find-sub {
  margin: 10px auto 0 auto;
  max-width: 40em;
  font-size: 16px;
  line-height: 25px;
  color: #4a4b4d;
}

.sc-find-plinth .sym-find {
  margin: 20px auto 0 auto;
  max-width: 620px;
  text-align: left;
}

/* The field is a pill with a button inside it, so the two read as one control. */
.sc-find-plinth .sym-find-input {
  padding-right: 116px;
  border-color: #c9ced4;
  box-shadow: 0 1px 2px rgba(26, 78, 112, 0.06);
}

/*
 * Not a `<button>`: the list filters as the reader types, so there is nothing
 * for a submit to do that has not happened already. A control that looks like
 * it acts and does not is worse than none, so this is a label — it names what
 * the field is for and is `aria-hidden`, leaving the input itself as the only
 * thing in the tab order.
 */
/*
 * The clear button, out from under the Search pill.
 *
 * Both are absolutely positioned against the right-hand end of the field, one
 * at right:8 and one at right:5, and the pill was added to this page later
 * without moving the other. Measured, the clear button's box sat entirely
 * inside the pill's -- 976 to 1052 against 954 to 1055 -- so it was invisible
 * behind it and could not be pressed. It now sits to the pill's left, clear
 * of it at both sizes.
 */
.sc-find-plinth .sym-find-clear {
  right: 112px;
}

.sym-find-go {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  /*
   * It is a painted label, not a control -- the list filters as you type, so
   * there is nothing for it to do -- and it sits over the right-hand end of
   * the field. Leaving it able to take a tap meant it swallowed every one
   * aimed at what was underneath it, which is where the clear button sits.
   * A tap now falls through to the input and puts the cursor in the field,
   * which is what someone reaching for a search box wants anyway.
   */
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-radius: 999px;
  /*
   * `#1a6f9f`, the site's darker blue, not the brand blue: white on `#2b93d1`
   * is 3.39:1, and a 16px label is normal text however bold it is, so it needs
   * 4.5. On this it is 5.50:1. The pill still reads as the brand's blue; it is
   * the same hue a step down, and it is already the colour of every link on
   * the page.
   */
  background: #1a6f9f;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.sc-find-plinth .sym-find-hint,
.sc-find-plinth .sym-find-count {
  margin-left: 0;
  text-align: center;
}

/*
 * The label goes on a phone.
 *
 * It was eating the field: at 390 the placeholder measured 198px against
 * 192px of room and rendered as "Type what you are see", and the input cannot
 * be set below 16px to buy the space because iOS zooms the page on focus at
 * anything smaller. Shrinking the label to 15px still left 360 and 390 short.
 *
 * Nothing is lost by dropping it. It is `aria-hidden` decoration rather than a
 * control — the list filters as you type — and the magnifier at the other end
 * of the field already says what the field is. It returns at 576, where there
 * is room for both.
 */
@media (max-width: 575px) {
  /*
   * The phone layout, against the client's phone mockup.
   *
   * The sub-line is back: an earlier pass cut it here to buy height, and the
   * mockup keeps it, so the height comes out of the padding instead.
   */
  .sc-findband {
    padding: 18px 0 22px 0;
  }

  .sc-findband .sc-find-plinth {
    padding: 22px 12px 0 12px;
  }

  .sc-pagebody .sc-find-sub {
    display: block;
    margin: 6px 0 0 0;
    font-size: 15px;
    line-height: 22px;
  }

  .sc-pagebody .sc-find-eyebrow {
    margin-bottom: 10px;
  }

  .sc-find-plinth .sym-find {
    margin-top: 14px;
  }

  /*
   * The 911 line becomes the panel's footer rather than a box floating inside
   * it. The mockup runs it as its own band directly under the panel; it is a
   * child of the panel in the markup, and on a desktop the mockup wants it
   * inside the tint, so `order` moves it last and the negative margins take it
   * out to the panel's edges. Welded to the bottom rather than separated by a
   * gap, which is the one place this departs from the drawing -- a gap needs
   * the tint to stop early, and the tint is the panel's own background.
   */
  .sc-find-plinth {
    display: flex;
    flex-direction: column;
  }

  /* The decorations the mockup keeps on a phone. */
  .sc-find-heart {
    display: block;
    top: 16px;
    right: 16px;
    width: 26px;
    height: 26px;
  }

  .sc-pagebody .sym-alert-note {
    padding: 11px 12px;
    line-height: 21px;
  }
}

/*
 * Brand grey. It was `#5f7d92`, a blue-grey invented to sit on the tint, and
 * it measured 3.98:1 there — under the 4.5 AA needs for text this size.
 * `#636466` is the brand's own grey and is 5.42:1 on the same ground.
 */
.sc-find-plinth .sym-find-hint {
  color: #636466;
}

/*
 * The 911 line inside the panel. Same words and the same one emphasised
 * phrase as the symptom pages; here it keeps a ground of its own, because on
 * the panel's blue a plain rule would be the third thing on that tint.
 */
/*
 * Scoped to `.sc-pagebody`, and that prefix is the whole reason this works.
 *
 * The theme's `.pagebody p { margin: 15px 0 }` is (0,1,1) and a bare
 * `.sym-alert-note` is (0,1,0), so `margin: auto` lost and the box sat flush
 * left: measured 122..842 against a panel centred on 640, 158px off. The same
 * trap is already recorded two rules up for the hint, which carries the prefix
 * for the same reason.
 *
 * It spans the panel's content width rather than a fixed 720px, and its text
 * is centred, so it reads as the example's full-width strip. One line needs
 * about 1,020px with the disc; whether it gets it is a function of the window,
 * and it stays centred either way.
 */
.sc-pagebody .sym-alert-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: none;
  margin: 22px 0 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff4e8;
  font-size: 14px;
  line-height: 22px;
  color: #6b6d70;
  text-align: center;
}

.sym-alert-mark {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #f58220;
  color: #f58220;
}

.sym-alert-note .sym-911 {
  color: #8a4b12;
}

.sc-find-plinth .sym-none,
.sc-find-plinth .sym-emergency {
  text-align: left;
}

@media (min-width: 768px) {
  .sc-findband .sc-find-plinth {
    padding: 40px 40px 34px 40px;
  }

  /*
   * The panel keeps the full content width and the field grows instead.
   *
   * Capping the panel at 880 was the wrong half to change: it fixed the ratio
   * of tint to field by shrinking the panel, and the panel is the thing the
   * page is built around. The mockup sets the field at about three quarters
   * of the panel it sits in; at 620 inside 1116 ours was 56%, which is what
   * left the field looking lost in its own box. 840 is 75% of 1116.
   */
  .sc-find-plinth .sym-find {
    max-width: 840px;
  }

  .sc-find-title {
    font-size: 38px;
  }

  .sc-find-sub {
    font-size: 17px;
  }
}

/* ------------------------------------- the group discs and the tiles ---- */

/*
 * One disc per group, and the same disc wherever that group appears: on its
 * own card, and on every common symptom belonging to it. The tint is the
 * colour at 14%, which is why the four brand colours can carry thirteen groups
 * without any of them shouting.
 */
.sym-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sym-badge) 14%, #ffffff);
  color: var(--sym-badge);
}

.sym-badge svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

/* A browser without color-mix still gets a disc, just a plain one. */
@supports not (background: color-mix(in srgb, red 14%, white)) {
  .sym-badge {
    background: #f4f5f6;
  }
}

.sym-sec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sc-pagebody .sym-sec-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: #1a6f9f;
  white-space: nowrap;
}

.sc-pagebody .sym-sec-all svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The common list: a disc, then the name, in a grid rather than a pill row. */
.sym-tiles-lead {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sym-tiles-lead li {
  margin: 0;
}

.sym-tiles-lead .sym-tile-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 9px 14px;
  border: 1px solid #e4e7ea;
  border-radius: 14px;
  background: #ffffff;
  font-size: 16px;
  font-weight: 600;
  color: #1a6f9f;
  text-decoration: none;
}

.sym-tiles-lead .sym-tile-icon:hover,
.sym-tiles-lead .sym-tile-icon:focus-visible {
  border-color: #2b93d1;
  background: #f2f8fc;
  text-decoration: none;
}

@media (min-width: 768px) {
  .sym-tiles-lead {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

/*
 * Every tile the same height, whatever its label does. The measurements
 * above buy "Stomach pain" a single line at 360, but the next symptom
 * promoted into this row may not be so accommodating, and a lone 64px tile
 * beside a 56px one reads as a mistake. `1fr` rows plus a full-height link
 * means a wrapped label lengthens the whole grid evenly instead.
 */
.sym-tiles-lead {
  grid-auto-rows: 1fr;
}

.sym-tiles-lead li {
  display: flex;
}

/*
 * An author `display` beats the browser's own `[hidden] { display: none }`,
 * so the rule above would leave a hidden tile painted. Nothing hides these
 * today -- the search hides the whole section rather than tile by tile -- but
 * the site's other filter does hide item by item with `el.hidden`, and the
 * next thing written here should not have to rediscover why it did nothing.
 */
.sym-tiles-lead li[hidden] {
  display: none;
}

/*
 * The theme puts `margin: 15px 0` on `.pagebody ul li`, which is (0,1,2) and
 * beat every `.sym-... li { margin: 0 }` in this file at (0,1,1). Nothing
 * looked broken, so it went unnoticed: the lists simply carried 30px of
 * invisible padding on every row. On a phone that was 90px of empty space
 * down the eight common symptoms and as much again down the category cards,
 * measured as a 96px step between rows of 56px tiles.
 *
 * Scoped to `.sc-pagebody` to reach (0,2,1), which is how the eyebrow, the
 * hint and the 911 banner each ended up escaping the same trap.
 */
.sc-pagebody .sym-tiles-lead li,
.sc-pagebody .sym-browse-grid li,
.sc-pagebody .sym-tiles li {
  margin: 0;
}

.sym-tiles-lead .sym-tile-icon {
  height: 100%;
}

/*
 * The common tiles carry a bare blue glyph, not a tinted disc.
 *
 * The disc was carrying its category's colour, which made the row read as
 * eight unrelated colours in an order nobody can see a rule in -- the rule
 * was real (each tile takes its group's colour) but a rule you have to be
 * told is not one the eye can use. Colour now appears once on this page, on
 * the category cards, where it separates four things sitting side by side.
 *
 * Dropping the disc also drops its 38px box to the glyph's own width, so the
 * label gets 14px back; the icon grows a little to hold the space the disc
 * used to hold.
 */
.sym-tiles-lead .sym-badge {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #2b93d1;
}

.sym-tiles-lead .sym-badge svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .sym-tiles-lead {
    gap: 12px;
  }
}

/*
 * The phone sizes for these tiles live here, after the base rules rather than
 * with the rest of the small-screen block further up. Both are one class deep,
 * so the later one wins whatever the viewport is: written up there, the 30px
 * disc and 10px padding lost to the 38px disc and 14px padding below them, and
 * "Stomach pain" kept wrapping with 93px of room for a 97px label.
 */
@media (max-width: 575px) {
  .sym-tiles-lead .sym-tile-icon {
    gap: 8px;
    padding: 9px 10px;
    font-size: 15px;
  }

  .sym-tiles-lead .sym-badge svg {
    width: 21px;
    height: 21px;
  }

  /* Pills on a phone, as the mockup draws them; the desktop keeps its cards. */
  .sym-tiles-lead .sym-tile-icon {
    border-radius: 999px;
  }
}

/* ------------------------------- "Getting your child seen", uncluttered -- */

/*
 * The client, four times: "it looks very cluttered", and then "it is still too
 * cluttered". Each earlier round answered a different reading of the word.
 *
 * Round one: the band held two headings saying the same thing 400px apart with
 * eight numbers stranded between them, and a button row repeating two links
 * already in the prose. Those went. Round two: eight separately outlined cards
 * were eight objects to scan when a parent needs one, so they became a single
 * bordered directory. Round three: the three routes sat in a bulleted list
 * whose items were of wildly unequal weight — one carried a 225px directory,
 * the others a sentence each — so the list became three objects on one edge.
 *
 * Round three answered the structure and then paid for it in ink. It put a
 * filled panel round the first route and a bordered tile round each of the
 * other two, on top of a bordered directory that already had seven internal
 * rules of its own. Counted at 390: three boxes, four corner radii, eleven
 * drawn lines and two fills, around 62 words. The structure was right and the
 * decoration was the clutter.
 *
 * So the fourth round removes rather than arranges. Nothing here is boxed.
 * Hierarchy comes from type, space and three hairlines:
 *
 *   - The urgent route is marked by a 3px orange rule down its left edge and
 *     nothing else. One line of ink where a filled, bordered, rounded panel
 *     was, and it still wins the two-second glance because it is the only
 *     colour in the band above the links.
 *   - The directory loses its outer border, its radius and its vertical rules.
 *     Eight cells separated by three horizontal hairlines and a 24px gutter
 *     read as eight numbers; they did that before, with nine more lines drawn
 *     round them.
 *   - The office labels lose their uppercase and their letterspacing. Eight
 *     shouted labels are half the text in the directory and none of the
 *     information: the number is the information.
 *   - The two later routes lose their tiles and are separated from the urgent
 *     one by a single hairline, which is the whole of the divider the band
 *     needs.
 *
 * Every word is the copy that was there, all eight `tel:` links are still
 * visible, and `offices.ts` still holds eight distinct numbers with no
 * practice-wide one to give.
 *
 * The markup is `.sym-*` and not `.sc-routes`, which stays as it is for the
 * index's `.sc-reach`: that list is three plain sentences with no directory in
 * it, and the shared selector was what made every rule here an override of a
 * rule written for the other page.
 */
/*
 * Under a two-second glance the routing used to invert its own priority: the
 * survivors were the blue underlined inline links, so "Talk to a nurse now" —
 * no link, no colour, no number — was the least salient of the three routes
 * despite being the first and the most urgent. The rule is the whole fix.
 */
/*
 * Now the whole of its own band, under a heading that says what it is. The
 * orange rule stays: one line of ink, and the only thing marking this section
 * apart from the appointment section below it, which is the distinction that
 * matters at three in the morning.
 */
.sym-route-now {
  max-width: 62em;
  border-left: 3px solid #f58220;
  padding-left: 16px;
  scroll-margin-top: 72px; /* the header is sticky below 1200 */
}

.sym-route-title {
  margin: 0 0 8px 0;
  font-size: 17px;
  line-height: 25px;
  font-weight: 700;
  color: #2b2c2e;
}

/*
 * Two levels of prose, not one.
 *
 * The round before this one flattened every sentence in the band to a single
 * treatment, on the theory that fewer treatments is less clutter. It is not,
 * when the treatments were carrying a distinction: the band holds three routes
 * a parent acts on and two notes that reassure, and giving both the same
 * 16px/25 #4a4b4d made the notes read as loud as the routes. The client, on
 * seeing it: the nights-and-weekends note "is distracting", and so is "If you
 * are worried, call" — the information is useful, the size and colour are not.
 *
 * So the routes keep that treatment and the notes step back to 15px/24 in a
 * lighter grey. Both notes take the same one, because they are the same kind
 * of thing in the same band.
 */
.sym-route-body {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: #4a4b4d;
}

/*
 * #6b6d70 is 5.19:1 on white, against the routes' 8.73:1. Measured rather than
 * eyeballed because the obvious next stop, #75777a, is 4.49:1 and fails AA for
 * normal text by a hundredth — on a page somebody reads at three in the
 * morning. This one clears the 4.5 floor with room to spare and is still
 * visibly quieter than the sentence above it.
 */
.sym-seen .sc-trust {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  font-style: normal;
  color: #6b6d70;
}

/*
 * One link treatment. The band held three: the numbers (bold #1a6f9f, no
 * underline), the /locations/ link (600 #1a6f9f, underlined) and the two
 * prose links — which the theme was drawing at 700 in Bootstrap's own
 * rgb(13, 110, 253), a second blue that is not in the brand and was the
 * loudest thing in the band. The numbers keep their own weight because they
 * are the payload; every other link in the band now reads the same.
 */
.sym-route-body a {
  font-weight: 600; /* without this the theme puts them back to 700 */
  color: #1a6f9f;
}

/*
 * The divider between the route that is answered here and the two that are
 * answered elsewhere. One hairline, the full width of the routes, doing the
 * work three borders and two fills were doing.
 */
/*
 * The hairline this drew was standing in for a section break. It is a real
 * band now, so the seam rule draws it and a heading names it, and this rule
 * would be a second divider a few pixels from the first.
 */
.sym-route-pair {
  display: grid;
  gap: 20px;
  max-width: 62em;
}

/* --- the directory: eight numbers, three hairlines, no box --- */

.sym-call-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
}

.sym-call-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 52px;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid #e6e9ec;
  color: #1a6f9f; /* the theme's Bootstrap blue is not a brand colour */
  text-decoration: none;
}

/* The first row sits under the lead-in and needs no rule above it. */
.sym-call-list > li:nth-child(-n + 2) .sym-call-item {
  border-top: 0;
}

/*
 * No border of its own to recolour, and a fill would put back the box this
 * round removed — so the hover and focus state is the number's own underline,
 * which is also what a keyboard user gets.
 */
.sym-call-item:hover .sym-call-num,
.sym-call-item:focus-visible .sym-call-num {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sym-call-item:focus-visible {
  outline: 2px solid #2b93d1;
  outline-offset: 2px;
  border-radius: 4px;
}

.sym-call-office {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: #636466;
}

.sym-call-num {
  font-size: 17px;
  line-height: 23px;
  font-weight: 700;
  color: #1a6f9f;
}

/*
 * The /locations/ route is a pill now rather than a standing link. `.sym-acts`
 * carries the geometry, because it exists for exactly this mistake: reusing
 * the office card's link class for a `.btn` inherited its "padding: 6px 0"
 * and ran the label off both rounded ends. Only the margin changes here — 26px
 * is spaced for a row of pills closing a band, and this one follows a
 * directory inside one. The pill is its own tap target, so the inline-block
 * padding that used to buy 44px goes with the paragraph it sat in.
 */
.sym-call-acts {
  margin-top: 16px;
}

/*
 * The closing line follows a route sentence directly, so without this it sits
 * on the paragraph above: two different voices four pixels apart, reading as
 * one block.
 */
.sym-seen .sc-trust {
  margin-top: 22px;
}

@media (min-width: 768px) {
  .sym-route-now {
    padding-left: 20px;
  }

  .sym-route-pair {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .sym-call-list {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Four columns, so the first row is four cells and not two. */
  .sym-call-list > li:nth-child(-n + 2) .sym-call-item {
    border-top: 1px solid #e6e9ec;
  }

  .sym-call-list > li:nth-child(-n + 4) .sym-call-item {
    border-top: 0;
  }
}

/* ---------------------------------------- "When to see a doctor" ------- */

/*
 * The client's two lists. They reuse `.sym-route` and `.sym-route-pair`, so
 * the block geometry, the title treatment and the 2-up-from-768 behaviour are
 * the ones the appointment section already uses rather than a fifth idiom.
 *
 * Each block carries a 3px rule, and the rules are the information rather than
 * decoration: blue is the practice, orange is 911. Orange rather than red is a
 * decision this project already made and recorded — a red block on a page
 * about a cough frightens more people than it helps — and it is the same
 * orange the alert band and `.sym-911` use, so the page has one emergency
 * colour and not two.
 *
 * The lead-in ends in a colon and the list completes the sentence, so the two
 * are set tight together: 6px, against the 20px between one block and the
 * next.
 */
.sym-doctor-call,
.sym-doctor-911 {
  padding-left: 16px;
  border-left: 3px solid #2b93d1;
}

.sym-doctor-911 {
  border-left-color: #f58220;
}

.sym-doctor-call .sym-route-title,
.sym-doctor-911 .sym-route-title {
  margin-bottom: 6px;
}

.sym-doctor-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * A marker rather than a bullet glyph, so the hanging indent is ours and a
 * wrapped line lines up under the first word instead of under the dot. The
 * same 8px dot the routing list used before it stopped being a list.
 */
.sym-doctor-list li {
  position: relative;
  margin: 0 0 8px 0;
  padding-left: 18px;
  font-size: 16px;
  line-height: 25px;
  color: #4a4b4d;
}

.sym-doctor-list li:last-child {
  margin-bottom: 0;
}

.sym-doctor-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c3c7cb;
}

.sym-doctor-911 .sym-doctor-list li:before {
  background: #f58220;
}

@media (min-width: 768px) {
  .sym-doctor-call,
  .sym-doctor-911 {
    padding-left: 20px;
  }
}

/* ------------------------------------- symptom index: the hero ---------- */

/*
 * The index now wears the same hero as the 164 pages under it.
 *
 * It had the theme's three-part arrangement: `.herowrap` with a background
 * image above 992, `.mobileheromessage` below it, and a separate
 * `#mobileheroimage` photograph under that. Three elements, two of them
 * mutually exclusive, and the page title rendered twice in two treatments.
 *
 * The mobile one was the fault worth measuring: `.interiorpagetitle` computes
 * to `#636466` at 18px regular on the `#2b93d1` band — 1.75:1, against the
 * 4.50 AA needs for normal text, and not title-sized either. The page's own
 * name was the least legible thing on it.
 *
 * `.dent-hero` solves both by construction: one photograph at every width, and
 * a wash that guarantees the type its ground whatever the picture is doing
 * underneath. White on that wash is the same white the symptom pages use, and
 * the index and its children now open identically.
 */
.sc-hero .dent-hero-title {
  max-width: 9em;
}

/*
 * Shorter than a symptom page's hero: that one carries an eyebrow, a title, a
 * lead and two buttons, and this carries a title and a lead, with the search
 * box immediately below the fold line rather than another band away.
 */
.sc-hero .dent-hero-inner {
  min-height: 300px;
  padding-top: 56px;
  padding-bottom: 36px;
}

@media (max-width: 767px) {
  /*
   * The trail is `position: absolute`, so the inner's top padding is the only
   * thing keeping the title out of it. At 52px the title's box started 8px
   * ABOVE the last crumb's bottom — the same overlap `.sym-hero` records
   * finding at 40px. Measured, not guessed: 68px against a trail lifted to
   * 10px leaves 16px of daylight at 390.
   */
  .sc-hero .hero-crumbs {
    top: 10px;
  }

  .sc-hero .dent-hero-inner {
    min-height: 0;
    padding-top: 68px;
    padding-bottom: 26px;
  }

  .sc-hero .dent-hero-title {
    font-size: 38px;
  }

  .sc-hero .dent-hero-lead {
    font-size: 17px;
  }
}

/*
 * The overview is the hero's text now.
 *
 * The client: it belongs in the hero and should replace what was there. It was
 * two paragraphs in a band of its own under a written heading, and the hero
 * carried a separate one-sentence lead — so the page opened by saying two
 * different things in two places before it reached the AAP's tool. The band is
 * gone and its paragraphs are the lead, which is why there can now be more
 * than one of them.
 */
.sym-hero .dent-hero-lead + .dent-hero-lead {
  margin-top: 12px;
}

@media (min-width: 992px) {
  .sym-hero .dent-hero-lead {
    max-width: 44em;
  }
}

/*
 * The three sections a parent acts on alternate, so each is its own surface
 * rather than one long white field: the frame's band is grey, "When to see a
 * doctor" white, the nurse line grey, "When can my child be seen" white, and
 * the group index grey again.
 *
 * `.sym-next` takes the theme's `graybg`, which is `#F4F4F4`. The phone
 * directory inside it draws its hairlines in `#e6e9ec`, which is 1.06:1 on
 * that grey — invisible, where it was the whole structure of the directory on
 * white. On grey the cells take a white ground of their own instead, which is
 * the same separation by a different means and keeps the eight numbers reading
 * as eight rows.
 */
.sym-next .sym-call-list {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.sym-next .sym-call-item {
  background: #ffffff;
}

/* --------------------------------- the category cards on the index ------ */

/*
 * A category was a name and a number on a bar, so a parent had to already know
 * that a sore throat lives under "Ears, nose, mouth and teeth". The card now
 * carries the group's disc, its name, and a line naming what is actually
 * inside it in the words somebody would search with.
 *
 * The chevron moves to the far right and the count sits beside it, so the left
 * edge of every card is a disc and the reading order is disc, name, blurb.
 */
.sc-index .sym-browse .sym-group-toggle {
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
}

/*
 * `setOpen`'s button wraps whatever the heading held in a single `<span>`, so
 * the disc, the text and the count are that span's children rather than the
 * button's. Without this they stack: the disc took a line of its own and the
 * chevron sat in the middle of the card.
 */
.sym-browse .sym-group-toggle > span {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sym-group-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sym-group-name {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: #2b2c2e;
}

.sym-group-blurb {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #6b6d70;
}

.sym-group-toggle .sym-group-count {
  order: 8;
  margin-left: auto;
}

.sym-group-toggle .sym-group-chevron {
  order: 9;
  transform: rotate(90deg);
}

.sym-group-toggle[aria-expanded="true"] .sym-group-chevron {
  transform: rotate(-90deg);
}

/* With script off the heading is not a button, so it lays itself out. */
.sym-browse .sym-group-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

/*
 * Thirteen categories is a wall on first sight, so four are shown and the rest
 * follow on a press. Script-driven: with JavaScript off every category ships
 * visible and there is no button, which is the same rule the groups themselves
 * follow.
 */
.sym-browse-grid.is-capped > .sym-group[hidden] {
  display: none;
}

.sym-browse-more {
  display: flex;
  justify-content: center;
  margin: 18px 0 0 0;
}

.sym-browse-more button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid #c9ced4;
  border-radius: 999px;
  background: #ffffff;
  color: #1a6f9f;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.sym-browse-more button:hover,
.sym-browse-more button:focus-visible {
  border-color: #2b93d1;
  background: #f2f8fc;
}

.sym-browse-more svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.sym-browse-more button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/*
 * The two section headings, as the example has them: a large sentence-case
 * line rather than a small-caps label with a rule under it. The accent bar
 * stays — it is the index's own way of marking where a zone begins, and it is
 * the one part of the old treatment carrying meaning rather than style.
 */
/*
 * Scoped to `.sc-pagebody`, all of it, because the theme's `.pagebody p` and
 * `.pagebody a` are (0,1,1) and a bare class is (0,1,0). Unscoped, the eyebrow
 * and the sub-line rendered at the theme's 23px rather than the 13 and 16 set
 * here, and the "View all symptoms" link kept the theme's blue. Three rules in
 * this file already carry the prefix for this reason; these now do too.
 */

/*
 * The heading, and nothing under it.
 *
 * It carried a 44px accent bar and, on the browse section, an "all 164 pages"
 * note. The example has neither: the heading sits directly above the thing it
 * names. Both went for that reason, and removing the bar also removed the
 * problem it had become — it was an absolutely positioned rule left over from
 * a bordered heading, and it had to be put back in flow just to stop it
 * landing on the note.
 *
 * The count is not lost: "View all symptoms" sits opposite the first heading,
 * and the search box above reports a live count for whatever is typed.
 */
.sc-index .sym-sec {
  display: block;
  margin: 0 0 20px 0;
  padding: 0;
  border-bottom: 0;
  font-size: 29px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #2b93d1;
}

.sc-index .sym-sec:after {
  content: none;
}

.sc-index .sym-sec-note {
  display: none;
}

.sc-index .sym-sec-row {
  margin-bottom: 20px;
}

.sc-index .sym-sec-row .sym-sec {
  margin-bottom: 0;
}

.sym-sec-all {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sc-pagebody .sym-browse-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 0 0;
  font-size: 15px;
  color: #6b6d70;
}

.sc-pagebody .sym-browse-foot svg {
  width: 19px;
  height: 19px;
  fill: #2b93d1;
}

.sc-pagebody .sym-browse-foot a {
  color: #1a6f9f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Two columns, as the example has, so a blurb gets a line rather than three. */
@media (min-width: 1200px) {
  .sym-browse-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*
 * Even lines, rather than a full line and an orphan.
 *
 * The default is greedy: the browser fills each line to the edge and drops
 * whatever is left onto the next one. On a phone that gave the title 290px
 * and then "see" on a line of its own, the hint 317px and then "hit head",
 * and the 911 copy two full lines and then "call 911 now" -- which is the
 * difference the client spotted against the mockup, where these break down
 * the middle. It reads as a font-size problem and is not one: the type fits,
 * it is the break points that are wrong.
 *
 * `balance` evens the lines out. Browsers cap it at a handful of lines and
 * anything older simply ignores it, in which case the text sets exactly as it
 * does now, so there is nothing to fall back to.
 */
.sc-find-title,
.sc-pagebody .sc-find-sub,
.sc-find-plinth .sym-find-hint,
.sc-pagebody .sym-alert-note,
.sym-group-blurb {
  text-wrap: balance;
}

/*
 * The rest of the phone layout, down here on purpose.
 *
 * These four lost where they were first written a few hundred lines above:
 * each is the same specificity as the base rule it has to beat and came
 * before it, so the note kept its `margin: 22px 0 0`, the heading kept 29px,
 * and the row went on wrapping. Written after the rules they override, they
 * apply. The same lesson as `.pagebody ul li` from the other direction --
 * there the theme outranked us, here we outranked ourselves.
 */
@media (max-width: 575px) {
  /*
   * And the vertical compression, measured against the client's phone
   * drawing. From the top of the band to the foot we were at 1412px where the
   * drawing fits its whole page in roughly 960, so every row was giving away
   * height: a 30px title on two lines, a 15px hint on two more, four-line
   * 911 copy, 56px tiles and cards whose two-line blurbs ran to 102px.
   *
   * Nothing here is a wholesale shrink. Type comes down a step where it has a
   * step to give, padding comes out where it was a desktop figure inherited
   * unchanged, and the gaps close up.
   */
  .sc-findband .sc-find-plinth {
    padding-top: 18px;
  }

  .sc-find-title {
    font-size: 26px;
    line-height: 31px;
  }

  .sc-pagebody .sc-find-sub {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
  }

  .sc-find-plinth .sym-find {
    margin-top: 12px;
  }

  .sc-find-plinth .sym-find-input {
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /*
   * A 20px mark rather than 24, with the 12px of panel padding above: between
   * them they carry the 911 line's two lines through 375 as well as 390 --
   * the SE and the mini sit there, and without it that line goes to three.
   */
  .sym-alert-note .sym-alert-mark {
    width: 20px;
    height: 20px;
  }

  /*
   * Back to 13px. 11px fitted all four examples on one line and was too small
   * to read, which is the wrong trade for a line whose whole job is to be
   * skimmed. The copy gives up an example instead: three of them measure
   * 317px against the 338px column, so this still sets on one line at a size
   * a parent can actually read.
   */
  .sc-find-plinth .sym-find-hint {
    margin-top: 4px;
    font-size: 13px;
    line-height: 19px;
  }

  /*
   * 10px more text column, which is what takes this from three lines to two.
   *
   * Not a type problem: at 13px the sentence needs 589px and two lines of the
   * 308px column offer 616, so it fits with room to spare -- but the break has
   * to land on a word. "…cannot be woken," came to 308.4px against 308 of
   * column and lost the last word by less than half a pixel, which pushed
   * eleven words onto a third line. Trimming the note's own padding and gap
   * gives 318px, "woken," stays up, and the rest lands on line two. Same size,
   * 77px down to 58.
   */
  .sc-pagebody .sym-alert-note {
    padding: 10px 6px;
    gap: 6px;
    font-size: 13px;
    line-height: 19px;
  }

  /*
   * 48px tiles, not the drawing's ~35. Everything else here follows the
   * mockup; this one does not, because a tile is a tap target and 44px is the
   * floor every platform's guidance sets. 48 keeps a comfortable margin over
   * it and still takes 8px off each of the four rows.
   */
  .sym-tiles-lead {
    gap: 8px;
  }

  .sym-tiles-lead .sym-tile-icon {
    min-height: 48px;
    padding: 6px 10px;
  }

  /* The cards: the toggle's padding was the desktop's, and its margin
   * double-counted the grid's gap. */
  .sym-browse-grid {
    gap: 8px;
  }

  .sc-index .sym-browse .sym-group-toggle {
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 0;
  }

  .sym-group-name {
    font-size: 15px;
    line-height: 21px;
  }

  .sym-group-blurb {
    font-size: 13px;
    line-height: 19px;
  }

  .sym-browse .sym-badge {
    width: 32px;
    height: 32px;
  }

  .sym-browse .sym-badge svg {
    width: 18px;
    height: 18px;
  }

  /*
   * Spacing that groups, which is the thing that read as clutter.
   *
   * Measured, a heading sat 14px above its own list while the items inside
   * that list sat 8px apart, and whole sections were 25 to 28px apart. Three
   * numbers that close together give the eye nothing to group by, so twelve
   * boxes and two headings read as one undifferentiated stack. The earlier
   * pass through here is what flattened them: chasing height, the headings
   * went from 20px to 14 and the gaps to 8, which bought 30px and cost the
   * grouping.
   *
   * So: 8px inside a group, 8px from a heading to what it labels -- a heading
   * belongs to the thing under it -- and 34px between one section and the
   * next. Roughly 1:4, which is enough to see. It costs 36px, which is the
   * right way round: the compression was worth doing and this is the part of
   * it to give back.
   *
   * Written on `.sc-index .sym-sec` because that is the rule holding the
   * spacing; `.sym-browse-title` is one of these too and at (0,1,0) lost to
   * it. The row heading keeps its own 0 from the rule below it.
   */
  .sc-index .sym-sec {
    margin-bottom: 8px;
  }

  .sc-index .sym-sec-row {
    margin-bottom: 8px;
  }

  .sc-index .sym-common {
    margin-top: 34px;
    margin-bottom: 0;
  }

  .sc-index .sym-browse {
    margin-top: 34px;
  }

  /* A tighter rule under the eyebrow, and less air under that. */
  .sc-pagebody .sc-find-eyebrow {
    margin-bottom: 8px;
  }

  .sc-pagebody .sc-find-eyebrow:after {
    margin-top: 6px;
  }

  .sc-pagebody .sym-alert-note {
    order: 99;
    margin: 14px -12px 0 -12px;
    border-radius: 0 0 24px 24px;
  }

  /*
   * The Search pill stays on a phone, as the mockup draws it.
   *
   * It came off once because the placeholder clipped to "Type what you are
   * see" -- 198px of text in a 192px field. The input's 16px is a floor, not a
   * choice (anything under it makes iOS zoom the page on focus), so the pill
   * gives the width back instead: narrower padding and a 15px label. Measured
   * at 360 as well as 390.
   */
  .sym-find-go {
    padding: 0 14px;
    font-size: 15px;
  }

  .sc-find-plinth .sym-find-input {
    padding-right: 86px;
  }

  .sc-find-plinth .sym-find-clear {
    right: 88px;
  }

  /*
   * "Common symptoms" and "View all symptoms" share a line here, as they do in
   * the mockup, rather than the link dropping underneath. 29px of heading plus
   * the link measured 451px against 366 of screen, so the heading comes down
   * to 23 and the link to 14.
   */
  .sc-index .sym-sec {
    font-size: 21px;
  }

  .sym-sec-row {
    gap: 10px;
  }

  .sc-pagebody .sym-sec-all {
    font-size: 14px;
  }

  /* The foot centres and stacks rather than wrapping mid-sentence. */
  .sc-pagebody .sym-browse-foot {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}