html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}
body {
  margin: 0;
}
details,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}
progress {
  vertical-align: baseline;
  display: inline-block;
}
[hidden],
template {
  display: none;
}
a {
  background-color: #0000;
}
a:active,
a:hover {
  outline: 0;
}
strong {
  font-weight: 700;
}
h1 {
  margin: 0.67em 0;
  font-size: 2em;
}
small {
  font-size: 80%;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
textarea {
  overflow: auto;
}
* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.button-reset {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}
input.button-reset {
  -webkit-appearance: button;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 10px;
  font-weight: 700;
}
h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}
h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}
h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}
h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}
h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}
h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
.inline-icon:before,
.inline-icon:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}
.inline-icon:after {
  clear: both;
}
button,
[type="button"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}
label {
  margin-bottom: 5px;
  font-weight: 700;
  display: block;
}
.carousel {
  text-align: center;
  clear: both;
  -webkit-background: #ddd;
  height: 300px;
  position: relative;
}
.carousel__viewport {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}
.carousel__slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}
/* #994: arrows in the page gutter, centred on the row. The outset straddles
   the edge by 1.5rem once the 85rem container has margin, never past the
   1.25rem page padding before that. */
.carousel {
  --carousel-arrow-outset: clamp(-1.5rem, calc((85rem - 100vw) / 2 + 0.25rem), -1rem);
  --carousel-arrow-top: 50%;
}
.carousel__control--prev,
.carousel__control--next {
  user-select: none;
  position: absolute;
  top: var(--carousel-arrow-top);
  z-index: 3;
  transform: translateY(-50%);
}
.carousel__control--prev {
  left: var(--carousel-arrow-outset);
}
.carousel__control--next {
  right: var(--carousel-arrow-outset);
}
@media screen and (max-width: 767px) {
  .site-nav__brand {
    padding-left: 10px;
  }
}
.rich-text:before,
.rich-text:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}
.rich-text:after {
  clear: both;
}
.rich-text ol,
.rich-text ul {
  overflow: hidden;
}
.site-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}
.site-nav:before,
.site-nav:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}
.site-nav:after {
  clear: both;
}
.site-nav__brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}
.site-nav__menu {
  float: right;
  position: relative;
}
.site-nav__menu-button {
  float: right;
  cursor: pointer;
  -webkit--webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}
.site-nav__menu-button:focus {
  outline: 0;
}
.site-nav__menu-button.is-open {
  color: #fff;
  background-color: #c8c8c8;
}
@media screen and (max-width: 767px) {
  .site-nav__brand {
    padding-left: 10px;
  }
}
@font-face {
  font-family: Instrument Sans;
  src: url(../images/67e95a303757b975d2da1b5e_Instrument%20Sans%20Regular.woff2)
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Instrument Sans;
  src: url(../images/67e95a303757b975d2da1b62_InstrumentSans%20SemiBold.woff2)
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Instrument Sans;
  src: url(../images/67e95a303757b975d2da1b6e_InstrumentSans%20Medium.woff2)
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: IBM Plex Sans;
  src: url(../images/67e95a303757b975d2da1b71_IBMPlexSans%20Medium.woff2)
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-charcoal: #333;
  --link-primary: var(--color-brand-blue);
  --text-primary: var(--color-black);
  --text-secondary: var(--color-neutral-800);
  --page-padding-desktop: 1.25rem;
  --page-padding-mobile: 1.25rem;
  --border-primary: var(--color-neutral-100);
  --surface-secondary: var(--color-brand-blue);
  --text-inverse: var(--color-white);
  --surface-tertiary: var(--color-brand-pink);
  --surface-error: var(--color-error-soft);
  --text-error: var(--color-error);
  --surface-primary: var(--color-black);
  --border-strong: var(--color-neutral-800);
  --surface-warning: var(--color-warning-soft);
  --text-warning: var(--color-warning);
  --color-gray-200: #e5e7eb;
  --color-gray-600: #666;
  --color-white: #fff;
  --radius-medium: 1rem;
  --radius-small: 0.625rem;
  /* Semantic greens, deliberately NOT the secondary accent literals: the
     retheme swaps #74C374/#487948 for the customer's secondary, and on a
     red-secondary practice "Book here" turned red beside a green arrow.
     Success stays green whatever the brand. */
  --color-success: #16a34a;
  --color-success-text: #15803d;
  --color-neutral-100: #eee;
  --color-black: #000;
  --color-neutral-300: #ccc;
  --color-neutral-400: #aaa;
  --color-neutral-600: #666;
  --color-neutral-700: #444;
  --color-neutral-800: #222;
  --color-neutral-900: #111;
  --color-success-soft: #cef5ca;
  --color-warning-soft: #fcf8d8;
  --color-focus: #2d62ff;
  --border-secondary: var(--color-brand-blue);
  --color-gray-50: #f9f9f9;
  --link-secondary: var(--color-black);
  --link-inverse: var(--color-white);
  --text-success: var(--color-success-dark);
  --color-brand-blue: #2d62ff;
  --color-brand-pink: #dd23bb;
  --color-error-soft: #f8e4e4;
  --color-error: #3b0b0b;
  --color-warning: #5e5515;
  --color-success-dark: #114e0b;
}
.flex-column {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
body {
  color: var(--color-charcoal);
  font-family:
    Instrument Sans,
    sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}
h1 {
  text-wrap: balance;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.3;
}
h2 {
  color: #333;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 1.4em;
}
h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
p {
  margin-bottom: 0;
}
a {
  color: var(--link-primary);
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
}
li {
  margin-bottom: 0.25rem;
}
img {
  max-width: 100%;
  display: inline-block;
}
label {
  margin-bottom: 0.25rem;
  font-weight: 500;
}
strong {
  font-weight: 600;
}
.padding-xxhuge {
  padding: 12rem;
}
.margin-xxlarge {
  margin: 5rem;
}
.margin-small {
  margin: 1rem;
}
.margin-medium {
  margin: 2rem;
}
.margin-bottom {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.margin-bottom.margin-medium.margin-2-5 {
  margin-bottom: 2.5rem;
}
.margin-bottom.margin-small.margin-1-5 {
  margin-bottom: 1.5rem;
}
.margin-bottom.margin-small {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.padding-vertical {
  padding-left: 0;
  padding-right: 0;
}
.padding-vertical.padding-xxhuge.blog {
  padding-top: 18rem;
  padding-bottom: 6rem;
}
.margin-top {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}
.icon-1x1-small {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.text-weight-semibold {
  font-weight: 600;
}
.max-width-full {
  width: 100%;
  max-width: none;
}
.z-index-1 {
  z-index: 1;
  position: relative;
}
.text-color-primary {
  color: var(--text-primary);
}
.text-color-secondary {
  color: var(--text-secondary);
}
.container-small {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
.padding-global {
  padding-right: var(--page-padding-desktop);
  padding-left: var(--page-padding-desktop);
}
.padding-global.align-stretch {
  align-self: stretch;
}
.text-weight-medium {
  font-weight: 500;
}
.text-size-tiny {
  font-size: 0.75rem;
}
.text-size-regular {
  font-size: 1rem;
}
.text-size-regular.is-larger {
  font-size: 1.13rem;
}
.max-width-large {
  width: 100%;
  max-width: 41.25rem;
}
.text-style-muted {
  /* 0.7, not 0.5: muted body text must still clear 4.5:1 on the template's
     light surfaces (WCAG 1.4.3). */
  opacity: 0.7;
}
.text-size-small {
  font-size: 0.875rem;
}
.padding-section-large {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.text-size-large {
  font-size: 1.5rem;
}
.page-wrapper {
  overflow-x: clip;
}
.container-large {
  width: 100%;
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
}
.text-align-center {
  text-align: center;
}
.layer {
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0%;
}
.align-center {
  margin-left: auto;
  margin-right: auto;
}
.button {
  background-color: var(--surface-primary);
  color: var(--text-inverse);
  text-align: center;
  border-radius: 0.25rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}
.text-size-medium {
  font-size: 1.125rem;
}
.text-size-medium.text-size-20 {
  font-size: 1.25rem;
}
.text-size-medium.text-wrap-balance {
  text-align: center;
  text-wrap: balance;
}
.padding-section-medium {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.padding-section-medium.top-offset {
  margin-top: 8.4%;
}
.flex-horizontal {
  display: flex;
}
.flex-horizontal.space-between {
  justify-content: space-between;
}
.flex-horizontal.gap-24 {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}
.flex-horizontal.gap-24.y-center,
.flex-horizontal.y-center {
  align-items: center;
}
.flex-horizontal.gap-8 {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
}
.team-member__media {
  border-radius: 1rem;
  height: 100%;
  overflow: hidden;
}
.full-image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.full-image.object-fit-top.is-zoomed {
  transform: scale(1.05);
}
.full-image.abs {
  position: absolute;
  inset: 0%;
}
.full-image.hero {
  aspect-ratio: 16/9;
  object-position: 50% 20%;
  margin-top: 0;
}
.team-member {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 0.25fr 0.75fr;
  grid-auto-columns: 1fr;
  height: 100%;
  display: grid;
}
.team-member.team-member--no-photo {
  grid-template-columns: 1fr;
}
.team-member.team-member--no-photo .team-member__bio {
  max-width: none;
  min-height: 0;
}
.sticky-cta__inner {
  z-index: 1;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border: 1px solid var(--color-gray-200);
  background-color: #fff;
  border-radius: 0.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 2rem;
  display: grid;
  position: relative;
}
.sticky-cta__content {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  color: #333333b3;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
  display: flex;
}
.sticky-cta__phone-icon {
  flex: none;
  width: 1.375rem;
  height: 1.5rem;
  opacity: 0.5;
}
.text-color-charcoal {
  color: var(--color-charcoal);
}
.section.relative {
  position: relative;
}
/* Testimonials: three per row, drawn on a six-track grid so a last row of
   two stretches to fill it (each spans 3) and a lone last card spans the
   row — five reviews no longer leave a hole (bronxinjurydoctor.com). */
.grid-3col {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-columns: 1fr;
  display: grid;
}
.grid-3col > * {
  grid-column: span 2;
}
.grid-3col > :nth-last-child(2):nth-child(3n + 1),
.grid-3col > :nth-last-child(1):nth-child(3n + 2) {
  grid-column: span 3;
}
/* #726 Exhibit D: a lone last card used to span the whole row, which turned
   a seventh review into a banner. Centre it in its own column instead. */
.grid-3col > :nth-last-child(1):nth-child(3n + 1) {
  grid-column: 3 / span 2;
}
.background-image-wrapper {
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.testimonial-card {
  /* One name for the gap, because the "Read more" control has to claw most
     of it back (see .testimonial__more) and the phone breakpoint changes it. */
  --leap-card-gap: 3rem;
  grid-column-gap: var(--leap-card-gap);
  grid-row-gap: var(--leap-card-gap);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #fff6;
  border: 1px solid #fff6;
  border-radius: 0.5rem;
  flex-flow: column;
  justify-content: space-between;
  padding: 2rem;
  font-size: 1.125rem;
  font-weight: 500;
  display: flex;
  overflow: hidden;
}
.testimonial-card.loop-move-left {
  animation-play-state: paused;
}
/* #698 Exhibit X: one epic Google review must not stretch its whole row —
   the quote clamps and the card keeps the grid's rhythm. The quote is the
   card's first block (the author/stars row follows), so no class is needed
   and every already-published card layout benefits from the same rule. */
.testimonial-card > div:first-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* #726 Exhibit D: ten lines is most of a screen. Six keeps the row's
     rhythm, and leap-foundation.js offers "Read more" on the cards that
     actually overflow — so nothing a reviewer wrote is out of reach. */
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.testimonial-card.is-expanded > div:first-child {
  -webkit-line-clamp: unset;
  display: block;
}
.testimonial__more {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-self: flex-start;
  /* The card holds its quote a full gap clear of the author row; the control
     belongs WITH the quote, so it claws that gap back to 0.75rem rather than
     opening a third band. Derived from the gap, never a fixed pull-up: the
     phone breakpoint uses a 1rem gap, and a -2.25rem margin there put the
     label on top of the last line of the quote. */
  margin-top: calc(0.75rem - var(--leap-card-gap, 3rem));
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.text-style-muted-darker {
  opacity: 0.7;
}
.slide-tag-text {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  background-color: #3333;
  border-radius: 6.25rem;
  flex: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
.rounded {
  border-radius: var(--radius-medium);
  overflow: hidden;
}
.site-nav__name {
  color: #000;
  font-family:
    Instrument Sans,
    sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}
/* Open/closed pill: SEMANTIC colour, not the brand accent. It used to reuse
   the secondary token, so a practice whose secondary is red showed a red
   "Open today until 7 PM" that read as closed. Green = open, neutral =
   closed; the literals here are deliberately not the retheme's tokens. */
.site-nav__status {
  grid-column-gap: 0.375rem;
  grid-row-gap: 0.375rem;
  background-color: #16a34a1a;
  border: 1px solid #16a34a1a;
  border-radius: 6.25rem;
  justify-content: center;
  align-items: center;
  padding: 0.438rem 0.5rem;
  display: flex;
}
.site-nav__phone {
  grid-column-gap: 0.375rem;
  grid-row-gap: 0.375rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.site-nav__contact {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.site-header {
  z-index: 999;
  position: sticky;
  top: 0%;
  left: 0%;
  right: 0%;
}
.hero__benefit {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background-color: #ffffff0d;
  border: 1px solid #fff3;
  border-style: none solid solid none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  display: flex;
}
.hero__benefit.no-bottom-border {
  border-bottom-style: none;
}
.hero__benefit.no-bottom-border.last-bottom,
.hero__benefit.last-top {
  border-right-style: none;
}
.hero__benefit.loop-move-left {
  animation-play-state: paused;
}
.hero__benefit-label {
  grid-column-gap: 0.375rem;
  grid-row-gap: 0.375rem;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #ffffff1a;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: 0.65rem 0.75rem;
  display: flex;
  /* A pill is a single unit of meaning — "Latest Technology" broken over two
     lines reads as two chips. The pill sizes to its text and the row scrolls
     instead. */
  white-space: nowrap;
}
.hero__benefit-label.scale-up {
  animation-delay: calc((var(--i) * 0.1s) + 0.15s);
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* #698 Exhibit I: chips elaborate on hover. Hover-capable devices only, and
   the marquee pauses under the pointer so the bubble is readable. */
@media (hover: hover) {
  .hero__benefit-label[data-tip] {
    position: relative;
  }
  .hero__benefit-label[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: max-content;
    max-width: 17rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    background: rgb(17 17 17 / 92%);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: normal;
    text-align: center;
    pointer-events: none;
  }
  .hero__benefits:hover .loop-move-left {
    animation-play-state: paused;
  }
}
.appointment-card__phone-icon {
  margin-right: 0.875rem;
}
.hero__benefits {
  z-index: 1;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  border: 1px solid #fff3;
  border-radius: 7px;
  flex-flow: row;
  grid-template-rows: 9vw 9vw;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: start center;
  place-items: center start;
  width: 100%;
  display: grid;
  position: relative;
  /* #1110: visible, or the top row's chip tooltips are cut off at this edge.
     The corner cells round themselves instead (below). */
  overflow: visible;
}
/* Fewer than six hero chips (#716): the grid is authored 3x2 for the
   template's six, so a shorter spec.hero_chips list carries its own track
   counts and the row never ships an empty bordered cell. Phones ignore this —
   the benefits row is a flex marquee below 768px. */
.hero__benefits[data-benefit-columns="1"] {
  grid-template-columns: 1fr;
}
.hero__benefits[data-benefit-columns="2"] {
  grid-template-columns: 1fr 1fr;
}
.hero__benefits[data-benefit-rows="1"] {
  grid-template-rows: 9vw;
}
/* A short last row is what draws an empty box — the cell above still paints a
   bottom border and the container paints its right and bottom ones. The last
   chip spans the leftover tracks instead (five chips: 3 + a double-width 2). */
.hero__benefit[data-benefit-span="2"] {
  grid-column: span 2;
}
/* #1110 corner cells: TL/BR are fixed; TR/BL follow the #716 column count. */
.hero__benefit:first-child {
  border-top-left-radius: inherit;
}
.hero__benefit:last-child {
  border-bottom-right-radius: inherit;
}
.hero__benefit:nth-child(3),
.hero__benefits[data-benefit-columns="2"] > .hero__benefit:nth-child(2),
.hero__benefits[data-benefit-rows="1"] > .hero__benefit:last-child {
  border-top-right-radius: inherit;
}
.hero__benefit:nth-child(4),
.hero__benefits[data-benefit-columns="2"] > .hero__benefit:nth-child(3),
.hero__benefits[data-benefit-rows="1"] > .hero__benefit:first-child {
  border-bottom-left-radius: inherit;
}
.hero__benefits[data-benefit-columns="2"] > .hero__benefit:nth-child(3) {
  border-top-right-radius: 0;
}
.hero__benefits[data-benefit-columns="2"] > .hero__benefit:nth-child(4) {
  border-bottom-left-radius: 0;
}
.appointment-card__body {
  width: 100%;
  position: relative;
}
.hero__benefit-icon {
  width: 1.5rem;
}
.appointment-card__footer {
  border-top: 1px solid #e5e7eb;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.625rem 2rem;
  display: flex;
}
.appointment-card__footer.text-size-medium {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
}
.appointment-card__footer.text-size-medium:hover {
  color: var(--surface-primary);
  background-color: #f5f5f5;
}
.appointment-card {
  z-index: 1;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-white);
  color: var(--color-charcoal);
  border-radius: 1rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 31.25rem;
  padding-top: 2rem;
  font-weight: 500;
  display: flex;
  position: relative;
  overflow: hidden;
}
.appointment-card__header {
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
}
.appointment-card__option-action {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  margin-left: auto;
  display: flex;
}
.appointment-card__option-label {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  display: flex;
}
.appointment-card__option {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  flex-flow: wrap;
  place-content: space-around flex-start;
  align-items: center;
  padding: 1.25rem;
  display: flex;
}
.appointment-card__option.fade-in {
  animation-delay: calc((var(--i) * 60ms) + 0.5s);
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appointment-card__option.fade-in:hover {
  background-color: #f8f8f8;
}
.appointment-card__option-inner {
  border-radius: var(--radius-small);
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.hero-section {
  /* One height drives the hero: the media box is this tall and the content
     pulls up by the same amount, so the overlay aligns at every viewport
     (replaces the old one-aspect-ratio -57%/-55%/-100% margins). The svh
     term keeps the video short of the fold. */
  --hero-media-h: clamp(30rem, 100svh - 11rem, 46rem);
  color: #fff;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.blog-image-overlay {
  z-index: 1;
  pointer-events: none;
  background-color: #0000005e;
  background-image: linear-gradient(#0000001a, #0000);
  position: absolute;
  inset: 0%;
}
.faq-section {
  z-index: 1;
  background-color: #f5f5f5;
  position: relative;
  overflow: clip;
  /* #816: the watermark below is position: fixed and overflow never clips a
     fixed descendant — clip-path does, without becoming its containing block.
     inset(0) makes the section the "window" the fixed glyph shows through. */
  clip-path: inset(0);
}
/* #816: the watermark is pinned in viewport coordinates (the cpsdent.com
   reference) and the section content scrolls over it, so everything the
   section says must ride above the glyph. */
.faq-section > .padding-global {
  position: relative;
  z-index: 1;
}
.faq__decor {
  z-index: 0;
  pointer-events: none;
  background-image: url(../images/leap-faq-tooth-line.svg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: contain;
  width: clamp(28rem, 46vw, 46rem);
  aspect-ratio: 1;
  /* #816: fixed to the viewport's bottom-left (replacing #675/#727's in-column
     drift) so the questions layer over a stationary glyph as they scroll by.
     The section's clip-path reveals it only while the section is on screen.
     Negative offsets keep the #727 cropped-corner bleed.
     #842: `left` was -9rem, which put the box's left third off-screen and took
     the glyph's own edge with it — bronxinjurydoctor.com shipped a watermark
     sheared down its left side. Every shaped glyph sits at roughly the middle
     half of its square, so -2rem lands the ink near the centre of the FAQ's
     intro column from 1280px up, and the bleed is left to `bottom`. */
  position: fixed;
  left: -2rem;
  bottom: -7rem;
}
.faq {
  grid-column-gap: 5rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 0.75fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.faq__list {
  grid-column-gap: 1.15rem;
  grid-row-gap: 1.15rem;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  place-items: start stretch;
  display: grid;
}
.faq__answer {
  padding-right: 2rem;
  overflow: hidden;
}
.faq__item {
  border-bottom: 1px solid #3333;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.faq__icon {
  align-self: flex-start;
  width: 2rem;
  margin-left: 1.5rem;
  display: flex;
}
.faq__question {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.15rem;
  display: flex;
}
/* ---- #726 Exhibit E: a glyph per question -------------------------------
   Every row used to carry the same chevron, so the list read as a wall.
   The symbols are inlined once per page (sitegen/faq.py owns the family).
   #743: the colour used to follow --leap-secondary, the site's decorative
   accent — the loudest colour on the page, spent on a supporting mark. Gray
   is the template's own muted neutral, so the glyph guides the eye down the
   column without competing with the question it sits beside. */
.faq__glyph {
  color: var(--color-neutral-600, #666);
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.9rem;
}
.faq__glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* The question keeps the room the glyph and the chevron leave. */
.faq__glyph + .text-size-regular {
  flex: 1;
}
@media (prefers-reduced-motion: no-preference) {
  /* Stroke properties INHERIT into a <use> shadow tree, which is the only
     reason the draw-in can be written here: no selector can reach the paths
     themselves. One dash long enough for the longest glyph — a shorter path
     simply finishes early. */
  .faq__glyph svg {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
  }
  .faq__item.is-visible .faq__glyph svg {
    animation: leap-faq-draw 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .faq__item.is-visible .faq__glyph {
    animation: leap-faq-idle 6s ease-in-out 1s infinite;
  }
  .faq__item.is-open .faq__glyph {
    animation: leap-faq-wiggle 0.6s ease-in-out;
  }
}
@keyframes leap-faq-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes leap-faq-idle {
  0%,
  100% {
    opacity: 0.85;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-1px);
  }
}
@keyframes leap-faq-wiggle {
  30% {
    transform: rotate(-9deg);
  }
  65% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(0);
  }
}
/* ---- plan 242 D1: "See more questions" ---------------------------------
   Eight questions is enough to read at a glance; a longer list folds. The
   hiding rule is scoped to `has-more`, which the generator adds beside the
   button — so a list without the button (the template's own seven, a
   hand-extended site) can never hide a question with nothing to reveal it.
   Expanding drops the rule rather than restoring a display value, so the
   items go back to whatever the cascade gives them. */
.faq__list.has-more:not(.is-expanded) .faq__item:nth-child(n + 9) {
  display: none;
}
.faq__more,
.testimonials__more {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  justify-self: start;
  padding: 0.5rem 0;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
/* ---- #698 Exhibit D: long insurance walls fold -------------------------
   Same contract as the FAQ fold: the hiding rule is scoped to `has-more`,
   which the generator only adds beside the reveal pill. The LAST cell stays
   visible through the fold — that's the "… many more!" cue when one shipped
   — so collapsed grids end on the invitation, not an arbitrary carrier.
   Caps land on full rows: 20 cells on the 4-wide desktop grid, 10 on the
   2-wide phone grid. */
.feature-grid.has-more:not(.is-expanded) .feature-item:nth-child(n + 20):not(:last-child) {
  display: none;
}
@media screen and (max-width: 767px) {
  .feature-grid.has-more:not(.is-expanded) .feature-item:nth-child(n + 10):not(:last-child) {
    display: none;
  }
}
/* 11-20 cells: only phones fold anything, so the pill only exists there. */
@media screen and (min-width: 768px) {
  .mobile-fold-only {
    display: none;
  }
}
.footer {
  position: relative;
}
.appointment-card__heading {
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.text-color-green {
  color: var(--color-success-text);
}
.hero__content {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(-1 * var(--hero-media-h));
  /* Pushes the auto-margin appointment card 5rem past the media's bottom
     edge — an explicit straddle. */
  min-height: calc(var(--hero-media-h) + 5rem);
  padding: clamp(3.5rem, 12svh, 6rem) 5rem 0;
  display: flex;
  position: relative;
}
.hero__content h1 {
  font-size: clamp(2rem, 1rem + 2.2vw, 3.4rem);
  line-height: 1.2;
}
.hero__content .appointment-card {
  margin-top: auto;
}
.hero__media {
  border-radius: var(--radius-small);
  height: var(--hero-media-h);
  position: sticky;
  top: 4rem;
  overflow: hidden;
}
.service-card__media {
  display: block;
  position: absolute;
  inset: 0%;
}
.feature-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
}
.feature-tag {
  grid-column-gap: 0.375rem;
  grid-row-gap: 0.375rem;
  opacity: 0.5;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid #333;
  border-radius: 6.25rem;
  justify-content: flex-start;
  align-items: center;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 142.857%;
  display: flex;
}
.feature-tag.shine {
  opacity: 1;
}
.feature-content {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  display: flex;
}
.feature-grid {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* Frame on the container (#675 J2): overflow:hidden clips the cells' outward
     hairlines, and padding tiles (#109) read as blank cards. */
  background-color: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}
/* ---- plan 242 A3: the insurance grid's last row stretches ---------------
   Same technique the testimonial grid uses (.grid-3col above): four per row
   drawn on twelve tracks, so a last row of one, two or three widens to fill
   the row instead of trailing off mid-line. Overrides the four-track
   declaration above rather than replacing it, so the fallback stays intact
   if these rules are ever dropped. */
.feature-grid {
  grid-template-columns: repeat(12, 1fr);
}
.feature-grid > * {
  grid-column: span 3;
}
.feature-grid > :nth-last-child(3):nth-child(4n + 1),
.feature-grid > :nth-last-child(2):nth-child(4n + 2),
.feature-grid > :nth-last-child(1):nth-child(4n + 3) {
  grid-column: span 4;
}
.feature-grid > :nth-last-child(2):nth-child(4n + 1),
.feature-grid > :nth-last-child(1):nth-child(4n + 2) {
  grid-column: span 6;
}
.feature-grid > :nth-last-child(1):nth-child(4n + 1) {
  grid-column: span 12;
}
/* ---- plan 242 A2: generic payment categories ---------------------------
   "Workers' Compensation" has no brand mark to fetch, so it ships as a chip
   with a tag glyph instead of a bare line in a wall of logos. The mask
   machinery mirrors .section-tag .tag-icon; the glyph is painted in the
   cell's own text colour. */
.insurance-chip {
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}
.insurance-chip .tag-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.insurance-section {
  background-color: #f5f5f5;
}
.appointment-strip {
  position: relative;
  overflow: hidden;
}
.appointment-strip.overflow-mobile {
  z-index: 1000;
}
.appointment-strip__trigger {
  pointer-events: none;
  height: 100%;
  min-height: 60vh;
  position: absolute;
  inset: auto 0% 0%;
}
.shadow-large {
  box-shadow:
    0 20px 24px -4px #00000014,
    0 8px 8px -4px #10182808;
}
.appointment-card__options {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  max-height: 23rem;
  padding-bottom: 1.5rem;
  display: flex;
}
.footer-content {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 5rem;
  padding-bottom: 1.5rem;
  display: flex;
}
.footer-bar {
  z-index: 1;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: var(--color-white);
  border-radius: 1rem;
  flex-flow: column;
  width: 100%;
  margin-top: 2.5rem;
  padding: 1.5rem 2.5rem 1rem;
  display: flex;
  position: relative;
  overflow: hidden;
}
.footer-logo {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}
.footer-links {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  color: #33333380;
  font-size: 0.88rem;
  display: flex;
  /* The legal row carries up to four documents plus the copyright. On a phone
     that is wider than the screen, and a legal link the visitor cannot reach
     is the same as not having one. */
  flex-wrap: wrap;
}
.footer-links address {
  font-style: normal;
}
.footer-link {
  color: #333333b3;
  transition: color 0.2s;
}
.footer-link:hover {
  color: var(--color-charcoal);
}
.line-divider {
  background-color: var(--color-neutral-100);
  height: 1px;
}
.footer-socials {
  grid-column-gap: 1rem;
  align-items: center;
  display: flex;
}
.icon-embed-custom {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}
.scale-up {
  animation-name: scale-up;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i) * 0s);
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-fill-mode: both;
}
.site-nav__link {
  color: #111;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav__link.is-current {
  color: #1148a3;
}
.site-nav__link.show-tablet,
.site-nav__link.show-tablet.is-current {
  display: none;
}
.clip {
  z-index: 1;
  display: block;
  position: relative;
  overflow: hidden;
}
.hover-text {
  display: block;
}
.hover-text.bottom {
  position: absolute;
  bottom: -100%;
}
.site-nav__link-label {
  padding-top: 0;
}
.primary-button {
  color: var(--color-white);
  text-align: center;
  border-radius: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}
.hours-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 0.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.button-link {
  grid-column-gap: 0.5rem;
  color: #6941c6;
  white-space: nowrap;
  background-color: #0000;
  border: 0;
  appearance: none;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 0.3s,
    transform 0.15s;
  display: flex;
}
.button-link:hover {
  color: #53389e;
}
.button-link.is-address {
  color: #4861f2;
}
.fade-in {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i) * 0s);
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-fill-mode: both;
}
/* Marquee. leap-foundation.js moves the row's children into
   .leap-marquee__track, appends an aria-hidden duplicate, and sets the two
   custom properties below.

   The animation belongs on the wrapper holding both copies, never on the
   items. Animating each item was the old bug: an item can only travel its own
   width before it must snap back, which read as a stutter rather than a loop.
   Moving the pair by exactly one copy's width lands copy two where copy one
   started, so the reset is invisible. */
.loop-move-left {
  animation: none;
}
.leap-marquee {
  /* The track is wider than the row by design, so the row clips rather than
     scrolls — a scrollbar here would fight the animation. */
  overflow: hidden !important;
}
.leap-marquee__inner {
  display: flex;
  width: max-content;
  /* Matches the row's own gap so the join between the two copies keeps the
     same rhythm as the items within one. */
  gap: inherit;
  animation: leap-marquee var(--leap-marquee-duration, 30s) linear infinite;
}
.leap-marquee__track {
  display: flex;
  flex: none;
  gap: inherit;
}
/* Let a reader stop the row to finish a quote. */
.leap-marquee:hover .leap-marquee__inner,
.leap-marquee:focus-within .leap-marquee__inner {
  animation-play-state: paused;
}
@keyframes leap-marquee {
  to {
    transform: translate3d(calc(var(--leap-marquee-distance, 0px) * -1), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .leap-marquee__inner {
    animation: none;
  }
}
.appointment-card__option-icon {
  flex: none;
  width: 1.5rem;
}
.testimonial-stars {
  color: #f90;
  width: 6rem;
}
/* Star shimmer: the five stars breathe left-to-right, 80ms apart. CSS only —
   new rows reference five shared shapes; legacy rows keep their inline paths.
   The compiler verifies five filled stars and resolves every shared reference.
   `opacity` only, so it composites; a site opts out with `no-shine`. */
@media (prefers-reduced-motion: no-preference) {
  .testimonial-stars:not(.no-shine) :is(path, use) {
    animation: leap-star-shimmer 2.8s ease-in-out infinite;
  }
  .testimonial-stars :is(path, use):nth-child(2) {
    animation-delay: 80ms;
  }
  .testimonial-stars :is(path, use):nth-child(3) {
    animation-delay: 160ms;
  }
  .testimonial-stars :is(path, use):nth-child(4) {
    animation-delay: 240ms;
  }
  .testimonial-stars :is(path, use):nth-child(5) {
    animation-delay: 320ms;
  }
  /* #698 Exhibit P: de-sync the cards so the glints read as random glitter
     across the section rather than one synchronized wave. Prime-ish periods
     per card position mean the pattern takes minutes to repeat; still
     opacity-only, still behind the same reduced-motion gate. */
  .testimonial-card:nth-child(3n + 1) .testimonial-stars :is(path, use) {
    animation-duration: 3.7s;
  }
  .testimonial-card:nth-child(3n + 2) .testimonial-stars :is(path, use) {
    animation-duration: 4.3s;
    animation-delay: 1.1s;
  }
  .testimonial-card:nth-child(3n + 2) .testimonial-stars :is(path, use):nth-child(2) {
    animation-delay: 1.34s;
  }
  .testimonial-card:nth-child(3n + 2) .testimonial-stars :is(path, use):nth-child(4) {
    animation-delay: 1.82s;
  }
  .testimonial-card:nth-child(3n) .testimonial-stars :is(path, use) {
    animation-duration: 3.1s;
    animation-delay: 2s;
  }
  .testimonial-card:nth-child(3n) .testimonial-stars :is(path, use):nth-child(3) {
    animation-delay: 2.48s;
  }
  .testimonial-card:nth-child(3n) .testimonial-stars :is(path, use):nth-child(5) {
    animation-delay: 2.96s;
  }
}
@keyframes leap-star-shimmer {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
.site-nav__logo {
  object-fit: contain;
  width: 2.5rem;
}
.text-block {
  position: relative;
}
.carousel__control-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  display: flex;
}
.relative {
  position: relative;
}
.detail-page__content {
  margin-bottom: 4rem;
}
.detail-page__spacer {
  width: 100%;
  min-height: 7rem;
}
.detail-page__title {
  z-index: 1;
  text-align: left;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.detail-page__hero {
  z-index: -1;
}
.detail-page__category {
  color: #fff;
  margin-bottom: 1rem;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  font-weight: 600;
  text-decoration: none;
}
.detail-page__category.is-current {
  border-bottom: 2px solid #000;
}
.detail-page__header {
  margin-bottom: 4rem;
  position: relative;
}
.detail-page__heading {
  color: #101828;
  margin-top: 0;
  margin-bottom: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
}
.detail-page__heading.text-color-white {
  color: #fff;
}
.detail-page__prose {
  color: #475467;
}
.detail-page__prose a {
  text-decoration: underline;
}
.detail-page__prose h2 {
  color: var(--surface-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
}
.detail-page__prose h4 {
  color: var(--surface-primary);
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  font-weight: 400;
}
.detail-page__prose h6 {
  color: var(--surface-primary);
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.detail-page__prose h3 {
  color: var(--surface-primary);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  font-weight: 500;
}
.detail-page__prose p {
  color: var(--surface-primary);
  margin-bottom: 1rem;
}
.detail-page__prose h1 {
  color: var(--surface-primary);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
}
.detail-page__prose ul {
  color: var(--surface-primary);
  /* Matches the paragraph rhythm. Legal pages are the first prose here to put
     a list and a paragraph back to back, and without this they collide. */
  margin-bottom: 1rem;
}
.detail-page__prose h5 {
  color: var(--surface-primary);
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.detail-page__prose ol {
  color: var(--surface-primary);
  margin-bottom: 1rem;
}
.section-tag {
  opacity: 0.5;
  color: #333;
  text-transform: uppercase;
  border: 1px solid #333;
  border-radius: 6.25rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  font-family:
    IBM Plex Sans,
    sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2em;
  display: flex;
}
/* `is-count` is the reviews badge beside a `shine` pun pill. It carries the
   same accent so the two pills in one header read as a pair, but it is
   deliberately NOT `shine`: SECTION_TAG_RE only rewrites `shine` pills, and
   the tagline must never overwrite the review count. */
.section-tag.shine,
.section-tag.is-count {
  opacity: 1;
  color: #146b81;
  border-color: #146b81;
}
.section-tag {
  gap: 0.45rem;
}
/* Under the FAQ heading (not on a heading row) the pill must shrink to its
   label, not stretch across the intro column. */
.faq__intro .section-tag {
  display: inline-flex;
}
.section-tag .tag-icon {
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
/* Service group filter pills (#716), and the testimonial category pills that
   reuse them (#841). Same pill as .section-tag — the row reads as a set of the
   section's own tags, not a new control language. A row only exists on a site
   whose spec declares service_groups / testimonial_categories, so every site
   without them is untouched by every rule below. */
.service-filters,
.testimonial-filters {
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
  display: flex;
}
/* A pill is a control, so it does NOT inherit .section-tag's decorative
   opacity: .5 — #333 at half opacity resolves to #999 (2.85:1) and fails
   WCAG 1.4.3. Unpressed is a full-opacity muted grey (8.1:1 on white);
   pressed is a deeper teal on a soft teal fill (5.5:1), so the selected
   pill differs in FILL as well as hue and does not rest on colour alone. */
.service-filter,
.testimonial-filter {
  cursor: pointer;
  opacity: 1;
  color: #4a5057;
  background: none;
  border-color: #c9ced4;
  min-height: 2.25rem;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.service-filter[aria-pressed="true"],
.testimonial-filter[aria-pressed="true"] {
  color: #0f6b81;
  background-color: #eaf4f7;
  border-color: #0f6b81;
}
@media (hover: hover) {
  .service-filter:hover,
  .testimonial-filter:hover {
    color: #0f6b81;
    border-color: #0f6b81;
  }
}
/* Phones: one scrolling row rather than a wrapped block that pushes the
   carousel off the fold, and a 44px tap target. */
@media (max-width: 767px) {
  .service-filters,
  .testimonial-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .service-filter,
  .testimonial-filter {
    flex: none;
    min-height: 44px;
  }
}
/* ---- #841: the testimonials wall ---------------------------------------
   Past nine reviews the generator drops the marquee and writes a static
   grid, so a hundred reviews are a wall a reader can search rather than a
   row that carries them past. Three rules, all generator-armed:

   - `has-more` folds the grid after eleven full rows. Scoped exactly like the
     FAQ and insurance folds: the class is only ever written beside the reveal
     button, so a grid without the button can never hide a card with nothing
     to reveal it.
   - `is-filtered-out` is what the pill row hides with.
   - `is-filtered` steps the last-row stretch rules aside while a filter is
     on. Those rules key off DOM position (:nth-last-child), which stops
     meaning grid position the moment cards in the middle are hidden — without
     this a filtered view grows random double-wide cards. */
.grid-3col.has-more:not(.is-expanded) > .testimonial-card:nth-child(n + 34) {
  display: none;
}
.testimonial-card.is-filtered-out {
  display: none;
}
.grid-3col.is-filtered > :nth-child(n):nth-child(n) {
  grid-column: span 2;
}
.testimonials__more {
  margin-top: 2rem;
}
/* Phones turn .grid-3col into a horizontal strip, which is right for a nine-
   card marquee and wrong for a wall: a "See more" under a strip reveals its
   cards off the right edge, where the tap looks like it did nothing. The wall
   — the variant whose cards dropped `loop-move-left` — stacks instead, so the
   fold and the pills mean on a phone what they mean on a desktop. */
@media (max-width: 767px) {
  .grid-3col:has(> .testimonial-card:not(.loop-move-left)) {
    overflow: visible;
    display: grid;
  }
  .grid-3col:has(> .testimonial-card:not(.loop-move-left)) > .testimonial-card {
    width: auto;
  }
}
.section-padding {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.carousel__viewport {
  height: auto;
}
.carousel__viewport.carousel__viewport--three {
  width: 100%;
  overflow: hidden;
}
/* Whole cards per row, so the gutter arrow never covers a peeking card. */
.technology-carousel .leap-slider-track > .technology-carousel__slide {
  flex: 0 0 calc((100% - 3rem) / 4);
}
@media screen and (max-width: 991px) {
  .technology-carousel .leap-slider-track > .technology-carousel__slide {
    flex-basis: calc((100% - 1rem) / 2);
  }
}
.technology-card {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  flex-flow: column;
  grid-template-rows: 20rem auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: flex;
  /* Whole card opens the detail sheet, like .service-card. */
  cursor: pointer;
}
.technology-card.full-mobile {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  grid-template-rows: 20rem auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
/* #726 Exhibit C: the card media was a FIXED 20rem row inside a slide as wide
   as the viewport allowed, so every technology photo shipped letterboxed
   (432x320 on desktop, wider still on a large monitor). The box is square at
   every width instead, sized by the slide — so the row is auto here and in
   both mobile blocks, and the aspect ratio does the work. Scoped to the
   carousel: the detail pages compose these cards differently. */
.technology-carousel .technology-card,
.technology-carousel .technology-card.full-mobile {
  grid-template-rows: auto auto auto;
}
.technology-carousel .technology-card > .rounded {
  aspect-ratio: 1;
  width: 100%;
  max-width: 100%;
}
.insurance-logo {
  filter: none;
  width: 11.25rem;
  height: 3.25rem;
}
/* A logo.dev mark: served letterboxed in a square (the ink covers roughly the
   middle 60%), so it is sized by height and kept square rather than stretched
   to the row's logo width. 5.5rem leaves ~50px of ink beside 180px wordmarks;
   at 3.25rem TRICARE read as a postage stamp (Zeren test build). */
/* #675 J1: logo.dev serves icons, not wordmarks — ship mark + carrier name as
   one lockup so the tile is legible. */
.insurance-logo.insurance-logo--mark {
  width: auto;
  height: 2.5rem;
  aspect-ratio: 1;
  flex: none;
  object-fit: contain;
  /* logo.dev letterboxes some marks (TRICARE) on a pale square of its own;
     round it like the bio crests do so it reads as a badge, not a stray box. */
  border-radius: 0.5rem;
}
.insurance-lockup {
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  /* Long names wrap instead of pushing the mark out of the tile. */
  max-width: 11rem;
  display: inline-flex;
}
.insurance-lockup__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-wrap: balance;
}
@media screen and (max-width: 767px) {
  .insurance-lockup {
    max-width: 100%;
  }
  .insurance-lockup__name {
    font-size: 0.9rem;
  }
}
.service-card__content {
  z-index: 1;
  color: #fff;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  padding: 1.5rem;
  font-weight: 500;
  display: flex;
  position: relative;
}
.service-card {
  aspect-ratio: 3/2;
  border-radius: 0.625rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
/* No `overflow: hidden` here on purpose: the dot is an empty span that
   `border-radius` already rounds, and the `.pulse` ring is a `::after` at
   `inset: -0.2rem` — i.e. it lives *outside* the 8px dot. Clipping the box
   swallowed the ring entirely, which read as a broken animation. */
.status-dot {
  background-color: #16a34a;
  color: #16a34a;
  border-radius: 50%;
  width: 0.5rem;
  min-width: 0.5rem;
  height: 0.5rem;
  min-height: 0.5rem;
}
.status-dot.pulse {
  aspect-ratio: 1;
  max-width: 0.5rem;
  max-height: 0.5rem;
}
.scroll-wrap {
  cursor: ns-resize;
  text-wrap: pretty;
  max-height: 18.75rem;
  padding-right: 1rem;
  overflow: auto;
}
.scroll-wrap.shorter {
  max-height: 16rem;
}
.site-nav__meta {
  color: #3e6cb2;
  font-family:
    Instrument Sans,
    sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.site-nav__meta.text-color-primary {
  color: #6b6b6b;
}
.site-nav__meta.text-color-secondary {
  /* The open pill adds a green tint over the nav surface; use a darker
     semantic green so its small text remains AA-safe in the open state. */
  color: #166534;
}
/* The shipped markup carries the donor's baked "Open today 9 AM to 6 PM";
   the pill is invisible until setupOpeningHours() computes the real state
   (and stays invisible without JS — better than a wrong schedule). Layout
   space is kept so the nav row does not jump when it appears. */
.site-nav__status:not(.is-live) {
  visibility: hidden;
}
.site-nav__status.is-closed {
  background-color: #7373731a;
  border-color: #7373731a;
}
.site-nav__status.is-closed .status-dot {
  background-color: #737373;
}
/* The pulse lives on the pseudo-element, so stopping it has to target that —
   `animation: none` on the dot itself stopped nothing. Dropping the
   pseudo-element is surer than stopping the animation: there is no resting
   keyframe left to paint a static ring around a closed practice. */
.site-nav__status.is-closed .status-dot::after {
  content: none;
}
.site-nav__status.is-closed .site-nav__meta.text-color-secondary {
  color: #525252;
}
.sticky-cta {
  z-index: 999;
  position: fixed;
  inset: auto 0% 1%;
}

/* The CTA floats over the page, so whatever sits last in the flow ends up
   underneath it — on the FAQ that hid the final question. Nothing in normal
   flow knows the bar is there, so the section reserves the space itself. The
   footer that follows is its own full-bleed block and reads fine behind the
   bar; the FAQ, being text the reader is mid-way through, does not.
   On desktop the section's own 8rem padding already clears the ~5.5rem bar,
   so no extra reservation — stacking another 8rem on top read as a random
   blank band under every FAQ (#698 Exhibit R). Phones still reserve a
   little because the bar stacks into two rows below 767px. */
.faq-section {
  padding-bottom: 0;
}
.site-nav__menu {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 1.5rem;
  display: flex;
  position: static;
}
.site-nav__inner {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 85rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.site-nav__menu-button {
  padding: 0;
}
.site-nav__links {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.site-nav__brand {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  display: flex;
}
.site-nav {
  background-color: #fff;
  align-items: center;
  min-height: 5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  position: sticky;
  top: 0;
}
.flex-row {
  display: flex;
}
.flex-row.space-between {
  justify-content: space-between;
}
.flex-row.space-between.vertical-center {
  flex-flow: row;
  align-items: center;
}
.flex-row.space-between.vertical-center.wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
}
.flex-row.gap-16 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.flex-row.gap-32 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}
.flex-row.gap-32.wrap {
  flex-flow: wrap;
}
.flex-row.gap-24 {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}
.team-carousel {
  background-color: #0000;
  height: auto;
  margin-top: 4rem;
  padding-bottom: 0;
  overflow: visible;
}
.inline-flex-dark {
  color: #333;
}
.financing-link {
  color: var(--color-success-text);
  font-size: 2.5rem;
  display: inline;
  position: absolute;
  inset: 0% 0% auto auto;
  transform: translate(125%, -25%);
}
.financing-link--gradient {
  -webkit-text-fill-color: transparent;
  background-color: #00a5bf;
  background-image: linear-gradient(259deg, #009dd2, #00da2c);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-flex;
}
.financing-link--gradient:hover {
  filter: contrast(122%);
  background-image: linear-gradient(259deg, #5687f3, #ffa53a);
}
.feature-item {
  background-color: #f5f5f5;
  box-shadow: 0 0 0 1px #ddd;
  justify-content: center;
  align-items: center;
  height: 8rem;
  padding: 2.75rem 3.375rem;
  display: flex;
}
.services-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.button-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  display: flex;
}
.team-carousel__slide {
  height: 100%;
}
.text-color-gray-600 {
  color: #666;
}
.team-member__bio {
  color: #333;
  background-color: #f9f9f9;
  border-radius: 1rem;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  padding: 2.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
  display: flex;
  overflow: hidden;
}
.media-overlay {
  z-index: 1;
  background-image: linear-gradient(#fff, #0003);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}
.location-card {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  color: #20325a;
  background-color: #20325a0d;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  flex-flow: column;
  padding: 1.75rem 1.5rem;
  display: flex;
}
.location-card.center {
  justify-content: center;
}
.location-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.location-grid.is-two-column {
  grid-template-columns: 1fr 1fr;
}
/* ---- plan 244 F2: a practice with more than one office ------------------ */
/* Additional offices ride in a second grid under the flagship card + photo,
   so the flagship stays first — the header's live open/closed pill reads the
   first [data-hours-grid] on the page and must keep reading the same one. */
.location-grid.is-more-offices {
  margin-top: 1.5rem;
}
/* #675 G: desktop rows are balanced in markup (balance_locations_grid drops the
   decorative panel); the stretch is opt-in there and default below 992px. */
.location-grid.is-stretch-last > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* The office's name. Cards without one are addresses nobody can choose
   between; it is a heading, not a section heading, so it stays card-sized. */
.location-card__label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.contact-label {
  color: #3e6cb2;
  font-family:
    Instrument Sans,
    sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.contact-label.text-color-primary {
  color: #6b6b6b;
}
.contact-label.text-color-primary.is-larger {
  font-size: 0.85rem;
}
.contact-label.text-color-primary.is-larger.larger {
  font-size: 1rem;
}
.flex-vertical {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  flex-flow: column;
  display: flex;
}
.location-image {
  width: 100%;
}
.location-image.rounded.shorter {
  /* Self-sized by aspect-ratio: `height: 100%` against a grid cell whose
     height is not yet definite painted a portrait source ~190px tall on
     first layout (Aug 18 test build) until a relayout. */
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
  height: auto;
  align-self: start;
}
.section-heading {
  text-align: left;
}
.service-card__details {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
  background-color: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0.625rem;
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.service-card__details:hover {
  background-color: #3333334d;
}
.service-card__details.is-darker {
  background-color: #ffffff4d;
  border-color: #fff6;
}
.service-card__details.is-darker:hover {
  background-color: #77777780;
}
.service-card__details.is-darker.is-grow {
  justify-content: center;
  align-items: center;
  display: flex;
}
.service-card__overlay {
  z-index: 1;
  pointer-events: none;
  background-color: #0000005e;
  position: absolute;
  inset: 0%;
}
.services-carousel {
  background-color: #0000;
  width: 100%;
  height: auto;
  margin-top: 4rem;
  padding-bottom: 0;
  overflow: visible;
}
.services-carousel__source {
  margin-right: 4rem;
}
.service-card__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.service-card__book {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
  background-color: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0.625rem;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.15s;
  display: flex;
}
.service-card__book:hover {
  background-color: #3333334d;
}
.service-card__book.is-darker {
  background-color: #ffffff4d;
  border-color: #fff6;
}
.service-card__book.is-darker:hover {
  background-color: #77777780;
}
.section-heading {
  text-align: left;
}
.technology-carousel__slide {
  margin-right: 4rem;
}
.technology-carousel__slide.is-services {
  margin-right: 1rem;
}
.carousel__control {
  color: #333;
  background-color: #fff;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  box-shadow:
    0 1px 2px rgb(16 24 40 / 8%),
    0 8px 24px rgb(16 24 40 / 14%);
  transition:
    color 0.2s,
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    opacity 0.2s,
    transform 0.15s;
  display: flex;
}
.technology-carousel {
  background-color: #0000;
  width: 100%;
  height: auto;
  padding-bottom: 0;
  overflow: visible;
}
@media screen and (max-width: 991px) {
  h1,
  h2 {
    font-size: 3rem;
  }
  .padding-xxhuge {
    padding: 8rem;
  }
  .margin-xxlarge {
    margin: 4rem;
  }
  .margin-medium {
    margin: 1.5rem;
  }
  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .margin-bottom.margin-medium.margin-2-5 {
    margin-bottom: 2rem;
  }
  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }
  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .hide-tablet {
    display: none;
  }
  .padding-section-large {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .text-size-medium.text-size-20 {
    font-size: 1.15rem;
  }
  .padding-section-medium {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .team-member {
    grid-template-columns: 1fr;
  }
  .grid-3col {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-3col > :nth-child(n):nth-child(n) {
    grid-column: span 2;
  }
  .grid-3col > :nth-last-child(1):nth-child(2n + 1) {
    grid-column: span 4;
  }
  .site-nav__name {
    font-size: 1rem;
  }
  .faq {
    grid-column-gap: 3rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    min-height: auto;
  }
  .faq__list {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .hero-section {
    /* Narrower screens carry less content beside the title, so a shorter
       media box keeps the lower half of the video from sitting empty. */
    --hero-media-h: clamp(26rem, 100svh - 11rem, 40rem);
  }
  .hero__content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* plan 242 A3, tablet step: two per row on the same twelve tracks. */
  .feature-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .feature-grid > :nth-child(n):nth-child(n) {
    grid-column: span 6;
  }
  .feature-grid > :nth-last-child(1):nth-child(2n + 1) {
    grid-column: span 12;
  }
  .site-nav__link.show-tablet,
  .site-nav__link.show-tablet.is-current {
    display: block;
  }
  .detail-page__content {
    margin-bottom: 3rem;
  }
  .detail-page__spacer {
    min-height: 6rem;
  }
  .detail-page__heading {
    font-size: 2.75rem;
  }
  .site-nav__meta {
    font-size: 0.65rem;
  }
  .site-nav__menu {
    -webkit-text-fill-color: inherit;
    background-color: #fff;
    background-clip: border-box;
    border-top: 1px solid #f2f4f7;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    align-items: flex-start;
    margin-left: 0;
    padding: 1.5rem 2rem;
    position: absolute;
    overflow: auto;
  }
  .site-nav__menu-line--middle {
    background-color: #344054;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }
  .site-nav__menu-button.is-open {
    background-color: #0000;
  }
  .site-nav__menu-line--top {
    background-color: #344054;
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .site-nav__links {
    flex-flow: column;
  }
  .site-nav__menu-line--bottom {
    background-color: #344054;
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .site-nav__menu-icon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: -0.5rem;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }
  .site-nav__menu-line--middle-inner {
    width: 4px;
    height: 0;
    padding-bottom: 0;
    padding-right: 0;
  }
  .flex-row.space-between.text-size-regular {
    font-size: 0.88rem;
  }
  .team-carousel {
    padding-left: 0;
    padding-right: 0;
  }
  .feature-item {
    padding: 2.5rem 3rem;
  }
  .services-grid {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .team-carousel__slide {
    padding-left: 0;
    padding-right: 0;
  }
  .team-member__bio {
    min-height: auto;
  }
  .location-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Tablet: the decorative panel is hidden, so stretch the orphan. */
  .location-grid.is-more-offices > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .contact-label {
    font-size: 0.85rem;
  }
  .location-image.rounded.shorter {
    aspect-ratio: auto;
  }
  .services-carousel {
    padding-left: 0;
    padding-right: 0;
  }
  .services-carousel__source,
  .technology-carousel__slide {
    margin-right: 2.5rem;
    padding-right: 0;
  }
  .technology-carousel {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  h1,
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.875rem;
  }
  .padding-xxhuge {
    padding: 4.5rem;
  }
  .margin-xxlarge {
    margin: 3rem;
  }
  .margin-medium {
    margin: 1.25rem;
  }
  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }
  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .hide-mobile-landscape {
    display: none;
  }
  .padding-global {
    padding-right: var(--page-padding-mobile);
    padding-left: var(--page-padding-mobile);
  }
  .padding-global.nullify-mobile {
    padding-left: 0;
    padding-right: 0;
  }
  .text-size-regular.is-larger {
    font-size: 0.88rem;
  }
  .padding-section-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .padding-section-medium {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .flex-horizontal.space-between.responsive {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    flex-flow: wrap;
  }
  .flex-horizontal.gap-24.y-center.responsive {
    flex-flow: wrap;
  }
  .sticky-cta__inner {
    grid-column-gap: 1.125rem;
    grid-row-gap: 1.125rem;
    grid-template-columns: 1fr;
    padding-left: 1rem;
  }
  /* Two stacked rows here, so the bar is roughly twice as tall as it is on
     desktop; the section's own 6rem padding covers most of it, and this
     tops it up to clear the bar without the old 17rem blank band (#698 R). */
  .faq-section {
    padding-bottom: 4rem;
  }
  .sticky-cta__content {
    font-size: 1rem;
  }
  .testimonial-card {
    --leap-card-gap: 1rem;
    grid-column-gap: var(--leap-card-gap);
    grid-row-gap: var(--leap-card-gap);
    padding: 1.5rem;
    font-size: 0.88rem;
  }
  .testimonial-card.loop-move-left {
    animation-play-state: paused;
  }
  .slide-tag-text {
    font-size: 0.75rem;
  }
  .site-nav__name {
    font-size: 1rem;
  }
  .site-nav__contact {
    display: none;
  }
  .hero__benefit {
    background-color: #fff0;
    border-style: none;
    flex: none;
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero__benefit.loop-move-left {
    animation-play-state: running;
  }
  .hero__benefit-label {
    font-size: 0.88rem;
  }
  .hero__benefits {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    border-style: none;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    display: flex;
    overflow: scroll;
  }
  .appointment-card {
    width: 95%;
    min-width: auto;
  }
  .appointment-card.shadow-large.fade-in-40 {
    width: 93%;
  }
  .hero-section {
    padding-top: 0;
  }
  .faq {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }
  /* One column: no white space that is not behind text. */
  .faq__decor {
    display: none;
  }
  .faq__icon {
    width: 1.75rem;
  }
  .faq__glyph {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.7rem;
  }
  .faq__question {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .hero__content {
    padding-left: 0;
    padding-right: 0;
  }
  /* Content padding is zero here so the chip row can bleed edge to edge;
     the title keeps its own inset. */
  .hero__content h1 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .feature-wrapper {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }
  .feature-tag {
    font-size: 0.75rem;
  }
  .feature-content {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
  .footer-bar {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding: 1.5rem;
  }
  .footer-links {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    flex-flow: wrap;
  }
  .button-link {
    font-size: 1rem;
  }
  .button-link:hover {
    color: #6941c6;
  }
  .appointment-card__arrow {
    width: 0.35rem;
  }
  .detail-page__content {
    margin-bottom: 2rem;
  }
  .detail-page__spacer {
    min-height: 4rem;
  }
  .detail-page__header {
    margin-bottom: 3rem;
  }
  .detail-page__heading {
    font-size: 2.25rem;
  }
  .section-tag {
    font-size: 0.81rem;
  }
  .section-padding {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .section-padding.nullify-mobile {
    padding-left: 0;
    padding-right: 0;
  }
  .technology-card {
    flex: none;
    width: 100%;
  }
  .service-card__content {
    font-size: 0.88rem;
  }
  .service-card {
    aspect-ratio: 1;
    flex: none;
  }
  .site-nav__meta {
    font-size: 0.75rem;
  }
  .site-nav__menu {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .site-nav__links {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
  .site-nav {
    min-height: 4.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .flex-row.space-between.vertical-center.wrap.padding-mobile {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .flex-row.gap-32.wrap.is-mobile-padded-less {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }
  .team-carousel {
    margin-top: 3rem;
    padding-bottom: 0;
  }
  .financing-link.financing-link--gradient {
    font-size: 2rem;
  }
  .feature-item {
    padding: 1rem 1.5rem;
  }
  .services-grid {
    grid-auto-columns: 1fr;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    overflow: scroll;
  }
  .team-member__bio {
    font-size: 1rem;
  }
  .contact-label {
    font-size: 0.75rem;
  }
  .services-carousel {
    margin-top: 3rem;
    padding-bottom: 0;
  }
  .services-carousel__source {
    padding-left: 0;
    padding-right: 0;
  }
  .technology-carousel__slide {
    padding-left: 0;
    padding-right: 0;
  }
  .technology-carousel {
    margin-top: 3rem;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 479px) {
  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .margin-bottom.margin-xxlarge {
    margin-bottom: 2rem;
  }
  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }
  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .padding-global.nullify-mobile {
    padding-left: 0;
    padding-right: 0;
  }
  .text-size-regular.text-style-muted.new-line {
    display: block;
  }
  .text-size-medium {
    font-size: 1rem;
  }
  .padding-section-medium {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .padding-section-medium.top-offset {
    margin-top: 0%;
  }
  .flex-horizontal.space-between.responsive {
    flex-flow: wrap-reverse;
  }
  .flex-horizontal.space-between.responsive.reverse {
    flex-flow: wrap;
  }
  .flex-horizontal.gap-24.y-center.responsive {
    flex-flow: wrap-reverse;
  }
  .team-member__media {
    height: 26rem;
  }
  .full-image {
    object-position: 58% 50%;
  }
  .full-image.object-fit-top {
    object-position: 50% 0%;
  }
  .full-image.hero {
    object-position: 49% 50%;
  }
  .sticky-cta__inner.shadow-large {
    place-items: center;
    box-shadow:
      0 20px 24px -4px #0000001f,
      0 8px 8px -4px #1018280f;
  }
  .sticky-cta__content {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .grid-3col {
    grid-template-columns: 1fr;
    display: flex;
    overflow: scroll;
  }
  .testimonial-card {
    flex: none;
    width: 80%;
  }
  .testimonial-card.loop-move-left {
    animation-play-state: running;
  }
  .hero__benefit.loop-move-left {
    width: 170px;
    line-height: 1.4;
  }
  .appointment-card__phone-icon {
    width: 1.25rem;
    margin-right: 0.5rem;
  }
  .appointment-card__footer.text-size-medium {
    padding: 1.25rem 1.5rem;
  }
  .appointment-card {
    padding-top: 1.5rem;
  }
  .appointment-card.shadow-large.fade-in-40 {
    width: 91%;
  }
  .appointment-card__header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .appointment-card__option.fade-in {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .appointment-card__option-inner {
    padding-left: 0;
    padding-right: 0;
  }
  .hero-section {
    padding-top: 0;
  }
  .faq-section {
    /* Same reservation as the 767px step — the CTA is still two rows here. */
    padding-bottom: 4rem;
  }
  .faq {
    grid-template-columns: 1fr;
  }
  .faq__icon {
    width: auto;
  }
  .faq__question {
    width: 100%;
    padding-top: 0;
  }
  .appointment-card__heading {
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }
  .hero-section {
    /* Phones: shorter media so the title, chips, and card all read within
       one screen; the shared variable keeps the overlay aligned. */
    --hero-media-h: clamp(24rem, 88svh - 10rem, 32rem);
  }
  .hero__content {
    min-height: calc(var(--hero-media-h) + 9rem);
    padding-top: clamp(2.5rem, 9svh, 4rem);
  }
  .hero__media {
    border-radius: 0;
    position: relative;
    top: 0;
  }
  .appointment-strip.overflow-mobile {
    overflow: visible;
  }
  .appointment-card__options {
    max-height: 22rem;
    padding-bottom: 2rem;
  }
  .footer-bar {
    font-size: 0.88rem;
  }
  .footer-links > [aria-hidden="true"] {
    display: none;
  }
  .primary-button.animated-gradient-button {
    width: 100%;
  }
  .appointment-card__option-icon {
    width: 1.25rem;
  }
  .section-padding.nullify-mobile {
    padding-left: 0;
    padding-right: 0;
  }
  .technology-card {
    flex-flow: column;
    grid-template-rows: 16rem auto auto;
    width: 90%;
    display: flex;
  }
  .technology-card.full-mobile {
    width: 100%;
  }
  .service-card__content {
    width: 100%;
    padding: 1.25rem 1rem;
  }
  .service-card {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    display: flex;
  }
  .scroll-wrap.shorter {
    max-height: 14rem;
  }
  .site-nav__menu {
    border: 1px solid #ccc;
    border-top-style: none;
  }
  .flex-row.space-between.vertical-center.wrap {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }
  .team-member__bio {
    height: 22.5rem;
    padding: 1.5rem;
    font-size: 0.88rem;
    line-height: 1.6;
  }
  .location-card {
    padding: 1rem;
    font-size: 0.88rem;
  }
  .location-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }
  .location-grid.is-two-column {
    grid-template-columns: 1fr;
  }
  /* "Learn More" is the widest label these cards carry. At 1.25rem a side it
     pushed the pair past the card edge on a 375pt phone and the second button
     clipped. The text is the target size — the padding gives way. */
  .service-card__details,
  .service-card__book {
    flex: none;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

/* --- Provider bio pages ----------------------------------------------------
   Generated per team member from spec.team (create-site.py). No hero photo:
   a small headshot cannot carry a full-bleed header, so a flat brand panel
   keeps the white heading readable. The hexes are the canonical accent pair
   the retheme pass swaps to the customer's palette. */

.provider-hero-fill {
  background-image: linear-gradient(140deg, #236765, #2f3f50);
}

.provider-bio__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.provider-bio__photo {
  width: 7rem;
  height: 8.6rem;
  border-radius: 0.75rem;
  object-fit: cover;
  object-position: top;
  flex: none;
}

.provider-bio__role {
  margin: 0;
  color: #2f3f50;
}

.provider-bio__where {
  margin: 0.25rem 0 0;
  color: var(--color-neutral-600);
}

.provider-bio__cta {
  margin-top: 1.75rem;
}

/* #698 Exhibit O: degrees, languages, and countries as scannable chips. */
.provider-bio__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

/* #698 S/Q: lazily-created card hover loops and section backdrop video.
   The hover video sits over its still and fades in while playing; the bg
   video slots between the backdrop photo and the media overlay.
   #725: opacity-only — no transform, so the clip never zooms. */
.leap-hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.leap-hover-video.is-playing {
  opacity: 1;
  transition: opacity 450ms cubic-bezier(0.19, 1, 0.22, 1);
}

.leap-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms ease;
}

.leap-bg-video.is-live {
  opacity: 1;
}

/* #728: the Locations photo animates too. The runtime wraps the <img> in a
   frame that inherits the image's own classes (so .location-image's
   aspect-ratio and grid placement move to the frame) and lays the clip over
   the still; the still fills the frame so the two register exactly. */
.leap-motion-frame {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Street View pan (#727). Rung 3 of the Locations ladder is Google's own
   photograph of the address the business gave us, and Maps Platform terms
   forbid MODIFYING that imagery — so it gets neither the cosmetic enhance
   rungs 1-2 get nor the generative ambient clip. A slow Ken-Burns pan is
   presentation, not modification: the pixels that ship are the pixels Google
   served, the browser simply moves the viewport over them.
   `:has()` puts the clip on whatever box actually holds the image, so no
   markup had to change and the rule cannot leak onto a card without one. */
@media (prefers-reduced-motion: no-preference) {
  :has(> .leap-sv-pan) {
    overflow: clip;
  }
  .leap-sv-pan {
    animation: leap-sv-pan 28s ease-in-out infinite alternate;
    transform-origin: 50% 55%;
    will-change: transform;
  }
}
@keyframes leap-sv-pan {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.07) translate(-1.5%, -1%);
  }
}

.leap-motion-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--color-neutral-100, #f2f2f2);
  color: var(--color-neutral-800, #333);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The team card's provider page hangs off the name and the photo — the same
   card as a member without a page, no extra element. */
.team-member__name-link,
.team-member__name-link:visited {
  color: inherit;
  text-decoration: none;
}
.team-member__name-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
@media (hover: hover) {
  .team-member__name-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.team-member__photo-link {
  display: block;
  height: 100%;
}