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;
}
: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 #F4A261/#97643c 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;
}
/* ---- #1203: the insurance grid picks its columns by count ---------------
   Quantity queries, so it holds after any edit: four across unless that
   strands one tile, then five (or three). Tablets/phones: two, an odd last
   tile takes the row. Why: transform-insurance-grid-1203.py. */
@media screen and (min-width: 992px) {
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feature-grid:has(> :last-child:nth-child(4n + 1)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .feature-grid:has(> :last-child:nth-child(20n + 1)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .feature-grid:has(> :last-child:nth-child(1)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-grid:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-grid:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .feature-grid.has-more:not(.is-expanded):has(> :nth-child(21)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feature-grid:has(> :last-child:nth-child(4n + 1)) > .feature-item {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  /* The closing "…and many more!" tile ends the wall bottom-right: it takes
     what its row has left (positions count DOM children, so a folded wall is
     left to its own layout). */
  .feature-grid > .insurance-more:nth-child(n + 5):nth-child(4n + 2) { --more-span: 3; }
  .feature-grid > .insurance-more:nth-child(n + 5):nth-child(4n + 3) { --more-span: 2; }
  .feature-grid:has(> :last-child:nth-child(4n + 1)) > .insurance-more:nth-child(5n + 2) { --more-span: 4; }
  .feature-grid:has(> :last-child:nth-child(4n + 1)) > .insurance-more:nth-child(5n + 3) { --more-span: 3; }
  .feature-grid:has(> :last-child:nth-child(4n + 1)) > .insurance-more:nth-child(5n + 4) { --more-span: 2; }
  .feature-grid:not(.has-more:not(.is-expanded):has(> :nth-child(22))) > .insurance-more:last-child {
    grid-column: span var(--more-span, 1);
  }
}
.feature-grid .insurance-logo {
  width: min(11.25rem, 100%);
  min-width: 0;
}
@media screen and (max-width: 991px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .feature-grid.has-more:not(.is-expanded):has(> :nth-child(21)) > :last-child {
    grid-column: auto;
  }
}
@media screen and (max-width: 767px) {
  .feature-grid.has-more:not(.is-expanded) > :last-child {
    grid-column: auto;
  }
}
/* ---- end #1203 insurance grid ---- */
/* ---- 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:
    Instrument 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;
}
/* The services wall's row (call-0916) sits between the heading and the
   grid with the same rhythm as the wall's own gutters. */
.services-section .service-filters {
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}
/* 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;
  /* #1159: the pill hugs its label — .section-tag's 0.5rem band read as
     empty space around 0.88rem text. Type size is unchanged. */
  min-height: 2rem;
  padding: 0.3rem 0.85rem;
  /* Sentence case (call-0916): "Implant dentistry", not a shouted heading.
     The glyph before the label is the same tag-icon mask as the section
     pill, painted in the control's own colour. */
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.service-filter .tag-icon,
.testimonial-filter .tag-icon {
  opacity: 0.85;
}
.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
   wall off the fold, and a 44px tap target. The row snaps pill by pill, hides
   its scrollbar (leap-foundation.css) and fades at whichever edge has more;
   the runtime's is-scroll-start / is-scroll-end classes lift the fade once
   that end is reached (call-0916). */
@media (max-width: 767px) {
  .service-filters,
  .testimonial-filters {
    --pill-fade-left: 0px;
    --pill-fade-right: 2.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.25rem;
    padding-inline: 0.25rem;
    margin-inline: -0.25rem;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      #000 var(--pill-fade-left),
      #000 calc(100% - var(--pill-fade-right)),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 var(--pill-fade-left),
      #000 calc(100% - var(--pill-fade-right)),
      transparent
    );
  }
  .service-filters:not(.is-scroll-start),
  .testimonial-filters:not(.is-scroll-start) {
    --pill-fade-left: 2.5rem;
  }
  .service-filters.is-scroll-end,
  .testimonial-filters.is-scroll-end {
    --pill-fade-right: 0px;
  }
  .service-filter,
  .testimonial-filter {
    flex: none;
    position: relative;
    min-height: 2.125rem;
    scroll-snap-align: start;
  }
  .service-filter::before,
  .testimonial-filter::before {
    content: "";
    position: absolute;
    inset: -0.35rem 0;
  }
}
/* ---- #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;
}
/* 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:not(.is-live) [data-status-text]:empty::before {
  content: "Open";
}
.site-nav__status:not(.is-live) [data-status-time]:empty::before {
  content: "today 9 AM to 6 PM";
}
.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;
}
/* The services wall (call-0916): one grid at every width — four across on
   desktop, three on tablets, two on phones. A card the pill row or the fold
   hides leaves the grid entirely (is-filtered-out), so the rows close up. */
.services-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-columns: 1fr;
  display: grid;
}
.service-card.is-filtered-out {
  display: none;
}
.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;
}
/* ---- #1190: one card height per rail ------------------------------------
   Slides stretch to their row; desktop team cards are one fixed height.
   Why: transform-team-card-height.py. */
.leap-slider-track > .carousel__slide {
  height: auto;
}
@media screen and (min-width: 992px) {
  .team-carousel .team-member {
    height: 28rem;
  }
  .team-carousel .team-member__media,
  .team-carousel .team-member__bio {
    height: 100%;
    min-height: 0;
  }
  .team-carousel .team-member__media img {
    height: 100%;
    object-fit: cover;
  }
  .team-carousel .team-member__bio .scroll-wrap {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
  }
}
/* ---- end #1190 card height ---- */
/* Desktop (call-0916): the current member takes 88% of the rail so the next
   one's photo edge peeks at the right — the strip says "there are more" by
   itself. measure() still counts one whole slide per page, and a click on
   the peeking slide brings it in (leap-foundation.js). */
@media screen and (min-width: 992px) {
  .team-carousel .leap-slider-track > .team-carousel__slide {
    flex: 0 0 88%;
    margin-right: 1.5rem;
  }
}
.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-wall {
  width: 100%;
  margin-top: 4rem;
}
/* A pill row above the wall carries the section's top rhythm itself. */
.service-filters + .services-wall {
  margin-top: 0;
}
/* The fold's button (call-0916): a real, centred pill button in the
   section-tag language — never a bare underlined link — with a chevron that
   turns when the wall is open. */
.services-wall__foot {
  justify-content: center;
  margin-top: 2rem;
  display: flex;
}
.services-wall__more {
  cursor: pointer;
  color: #333;
  background-color: #fff;
  border: 1px solid #c9ced4;
  border-radius: 6.25rem;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem 0.6rem 1.4rem;
  font: inherit;
  font-family:
    Instrument Sans,
    sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.2em;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  display: inline-flex;
}
.services-wall__more[hidden] {
  display: none;
}
.services-wall__more-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.2s ease;
  display: block;
}
.services-wall__more-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.services-wall__more[aria-expanded="true"] .services-wall__more-icon {
  transform: rotate(180deg);
}
.services-wall__more:focus-visible {
  outline: 2px solid #0f6b81;
  outline-offset: 2px;
}
@media (hover: hover) {
  .services-wall__more:hover {
    color: #0f6b81;
    border-color: #0f6b81;
    background-color: #f4f9fb;
    box-shadow: 0 1px 2px rgb(16 24 40 / 6%);
  }
}
.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;
  }
  .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: auto;
    grid-template-columns: repeat(3, minmax(0, 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;
  }
  .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-column-gap: 0.75rem;
    grid-row-gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .team-member__bio {
    font-size: 1rem;
  }
  .contact-label {
    font-size: 0.75rem;
  }
  .services-wall {
    margin-top: 3rem;
  }
  .services-section .service-filters {
    margin-top: 3rem;
    margin-bottom: 1.25rem;
  }
  .services-wall__foot {
    margin-top: 1.5rem;
  }
  .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;
  }
  .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;
  }
  /* Phone cards carry ONE button (#1159). Two wall cards across a phone
     leave ~130-190px inside a square card; call-0916 stacked "Book" and
     "Learn More" there, and under a three-line 1.5rem title the pair
     overflowed the card and "Learn More" was clipped (iPhone 12 Pro Max,
     iOS 26; the 390px Studio emulator clipped it too, less visibly). Book
     leaves the card — the sticky CTA and the docked ask bar carry booking
     on every phone screen, and desktop keeps both buttons — Learn More
     spans the card, and the title steps down to 1.05rem, clamped at three
     lines, so the button always has its row. */
  .service-card .flex-row.gap-16 {
    flex-direction: column;
    grid-row-gap: 0.5rem;
    gap: 0.5rem;
  }
  .service-card .flex-row.gap-16 .service-card__details {
    display: none;
  }
  .service-card .flex-row.gap-16 .service-card__book {
    flex: none;
    width: 100%;
    padding: 0.5rem 0.75rem;
  }
  .service-card__content {
    padding: 1rem;
  }
  .service-card__content .text-size-large {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 1.05rem;
    line-height: 1.25;
    text-wrap: balance;
  }
}

/* --- 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, #0f6c64, #0e6c64);
}

.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: #0e6c64;
}

.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%;
}

/* ---- The floating navigation bar (nav-float) ------------------------------
   The header used to be a full-width white band glued to the top edge. It is
   now a floating pill: a rounded, frosted bar inset from the top and the
   sides, with the page showing through the gutter around it as the reader
   scrolls (the serval.com reference, in the template's light palette). One
   appended block, later in the cascade than every older nav rule, so a fork
   takes it as one region (transform-nav-float.py) and a retheme never has to
   know about it — nothing in here is a brand colour.

   The header stays position: sticky (the hero's pull-up and every anchor's
   scroll-margin-top are measured from a sticky header) and keeps its
   [data-leap-header] contract; only the box inside it changes shape. */
.site-header {
  --nav-float-gutter: clamp(0.75rem, 2vw, 1.5rem);
  --nav-float-top: 0.75rem;
  padding: var(--nav-float-top) var(--nav-float-gutter) 0;
  background: transparent;
  /* The gutter beside the pill is not the header: a tap there reaches the
     page. The pill itself opts back in. */
  pointer-events: none;
}
.site-header > * {
  pointer-events: auto;
}
.site-header .site-nav {
  position: relative;
  top: auto;
  width: 100%;
  max-width: 85rem;
  min-height: 3.75rem;
  margin: 0 auto;
  padding: 0 0.5rem 0 1rem;
  border-radius: 999px;
  /* 92%, not a thinner glass: over a dark hero video anything lighter turns
     the bar grey and swallows the logo. */
  background: rgb(255 255 255 / 92%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    0 0 0 1px rgb(16 24 40 / 6%),
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 12px 32px -14px rgb(16 24 40 / 22%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header .site-nav {
    background: rgb(255 255 255 / 97%);
  }
}
.site-header .site-nav__brand {
  grid-column-gap: 0.625rem;
  grid-row-gap: 0.625rem;
  padding-left: 0.125rem;
}
.site-header .site-nav__logo {
  width: 2rem;
  height: 2rem;
}
.site-header .site-nav__name {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.site-header .site-nav__menu {
  margin-left: 1.25rem;
}
.site-header .site-nav__links {
  grid-column-gap: 0.125rem;
  grid-row-gap: 0.125rem;
}
.site-header .site-nav__link {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1.2;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.site-header .site-nav__link.is-current {
  color: #111;
  background: rgb(16 24 40 / 6%);
}
.site-header .site-nav__contact {
  grid-column-gap: 0.375rem;
  grid-row-gap: 0.375rem;
}
.site-header .site-nav__phone {
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.site-header .site-nav__status {
  padding: 0.4rem 0.7rem 0.4rem 0.6rem;
}
@media (hover: hover) {
  .site-header .site-nav__link:hover,
  .site-header .site-nav__phone:hover {
    background: rgb(16 24 40 / 5%);
  }
}
/* The ring follows the pill shape of whatever it lands on, and takes the
   text colour so a retheme carries it. */
.site-header .site-nav__brand:focus-visible,
.site-header .site-nav__link:focus-visible,
.site-header .site-nav__phone:focus-visible,
.site-header .site-nav .site-nav__menu-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 999px;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header .site-nav {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 991px) {
  .site-header {
    --nav-float-gutter: 0.75rem;
    --nav-float-top: 0.5rem;
  }
  .site-header .site-nav {
    min-height: 3.375rem;
    padding: 0 0.375rem 0 0.75rem;
  }
  .site-header .site-nav__name {
    font-size: 1rem;
  }
  /* The menu is a card that floats below the pill, not a sheet welded to
     the band's bottom edge. */
  .site-header .site-nav .site-nav__menu {
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    padding: 0.75rem;
    border: 1px solid rgb(16 24 40 / 6%);
    border-top: 1px solid rgb(16 24 40 / 6%);
    border-radius: 1.25rem;
    /* Opaque: a hero headline ghosting through the links made them harder
       to read than the glass was worth. */
    background: #fff;
    max-height: calc(100dvh - 5.5rem);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 60%) inset,
      0 20px 40px -16px rgb(16 24 40 / 24%);
  }
  /* No vertical padding: a taller button stretched the pill past
     --nav-float-depth. */
  .site-header .site-nav .site-nav__menu-button {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 999px;
  }
  /* The hero's ask bar (chat.js, z 9996) sits where the open card lands;
     while the menu is open the header outranks it. */
  .site-header:has(.site-nav__menu.is-open) {
    z-index: 9997;
  }
  .site-header .site-nav__links {
    width: 100%;
    align-items: stretch;
    grid-column-gap: 0.125rem;
    grid-row-gap: 0.125rem;
  }
  .site-header .site-nav__link {
    display: block;
    padding: 0.8rem 0.9rem;
    border-radius: 0.875rem;
    font-size: 1.05rem;
    text-align: left;
  }
}

/* nav-float, part two: on a page that opens with the hero, the video slides
   up UNDER the pill. A floating bar over a white band read as a bar glued to
   a box; now the hero's media starts at the top of the page, rounder to match
   the pill, and the pill floats inside its top edge with the same 0.75rem
   inset on all three sides. The header's own height is handed back with a
   negative margin (it stays sticky, so the bar keeps floating past the
   hero), and the hero's content starts lower by the pill's depth so the
   headline never sits under it. Pages without a hero keep the bar above
   their content. */
body:has(.hero-section) .site-header {
  --nav-float-top: 1.25rem;
  --nav-float-gutter: 2rem;
  --nav-float-depth: calc(var(--nav-float-top) + 3.75rem);
  margin-bottom: calc(-1 * var(--nav-float-depth));
}
body:has(.hero-section) .site-header .site-nav {
  max-width: calc(85rem - 1.5rem);
}
body:has(.hero-section) .hero-section {
  padding-top: 0.5rem;
}
/* Concentric: the pill's radius plus its 0.75rem inset. */
body:has(.hero-section) .hero__media {
  top: 0.5rem;
  border-radius: calc(3.75rem / 2 + 0.75rem);
}
body:has(.hero-section) .hero__content {
  padding-top: calc(clamp(3.5rem, 12svh, 6rem) + 3.5rem);
}
@media (max-width: 991px) {
  body:has(.hero-section) .site-header {
    --nav-float-depth: calc(var(--nav-float-top) + 3.375rem);
  }
  body:has(.hero-section) .hero__media {
    border-radius: calc(3.375rem / 2 + 0.75rem);
  }
}
@media (max-width: 479px) {
  /* Phones: the video is full-bleed and square, so the pill keeps its own
     gutter and simply rides over the top of it. */
  body:has(.hero-section) .site-header {
    --nav-float-top: 0.625rem;
    --nav-float-gutter: 0.75rem;
  }
  body:has(.hero-section) .hero-section {
    padding-top: 0;
  }
  body:has(.hero-section) .hero__media {
    top: 0;
    border-radius: 0;
  }
  body:has(.hero-section) .hero__content {
    padding-top: calc(clamp(2.5rem, 9svh, 4rem) + 4rem);
  }
}

/* ---- FAQ on a dark blue surface (admin request, 2026-09-19) -------------
   ONE new value: --leap-faq-surface, the dark blue that was asked for. It is
   the site's own teal (--leap-primary #0f6c64) pulled toward blue and
   darkened, so the block reads as this brand going dark rather than as a
   second palette arriving. Everything laid on it is plain white at opacities
   the template already uses, so no other colour is introduced.
   Contrast on #0d3550: white 12.7:1, the muted answer text (the template's
   own 0.7 opacity) 7.1:1 — both clear of WCAG 1.4.3.
   Scoped entirely to .faq-section, below the light-surface rules above so it
   wins on order alone, no !important and no specificity fight. */
.faq-section {
  --leap-faq-surface: #0d3550;
  background-color: var(--leap-faq-surface);
  color: var(--color-white, #fff);
}
/* The divider between questions was #3333 (black at 20%) — invisible here. */
.faq-section .faq__item {
  border-bottom-color: #ffffff2e;
}
/* #743 kept the per-question glyph a muted neutral so it guides without
   competing. Same intent, inverted for the dark surface. */
.faq-section .faq__glyph {
  color: #ffffffb3;
}
/* The chevron is a shared SVG file with a hard-coded #333 stroke, so it can
   only be recoloured from outside. invert() is exact here: the mark is a
   single flat stroke on transparent. */
.faq-section .faq__icon img {
  filter: invert(1);
}
/* #816's watermark: the tooth line art bakes its own 0.07 alpha and inherits
   black through the background-image, so inverting it gives white at the same
   7% — the identical watermark weight the light version had. */
.faq-section .faq__decor {
  filter: invert(1);
}
/* .section-tag.shine is #146b81 on a light surface; that teal only reaches
   2.1:1 on the navy. White at 85% keeps the pill quiet and legible. */
.faq-section .section-tag.shine {
  color: #ffffffd9;
  border-color: #ffffff59;
}
/* `h2 { color: #333 }` is an element rule, so the heading does not inherit the
   white above — it has to be named. Questions and answers do inherit. */
.faq-section .section-heading {
  color: var(--color-white, #fff);
}

/* ---------------------------------------------------------------------------
   Services header rhythm (admin, 2026-09-19). The filter row inherited the
   services wall's own 4rem top rhythm ON TOP of the header block's 2rem
   bottom margin, so "Our Services" sat 6rem above its own pills. The pills
   belong to the header, not to the wall: drop their top margin and the gap
   becomes the site's standard header-to-content rhythm (.margin-medium),
   the same one every peer section uses. The wall keeps its own spacing
   below the pills.
   --------------------------------------------------------------------------- */
.services-section .service-filters {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Nav: the bar is the practice's teal, at every scroll position (admin,
   2026-09-20: "make the nav bar this color instead", swatch
   refs/screenshot-2026-09-20-at-6.21.14-pm.png = #27a6b1). This replaces the
   2026-09-19 behaviour where the bar was a white glass pill over the hero and
   only turned brand green once leap-nav-scroll.js added .is-scrolled: the
   admin's new header mark is WHITE artwork on transparent, so it would have
   been invisible on a white pill. One colour in both states makes the mark
   read everywhere and is what the two requests, taken together, describe.
   leap-nav-scroll.js still toggles .is-scrolled; nothing styles it now, and
   it is left in place so the two-state look is one selector away.
   CONTRAST — white on #27a6b1 is 2.9:1, short of AA's 4.5:1 for the links and
   the practice name. The colour is the admin's explicit instruction and is
   applied exactly; flagged in the reply with the nearest passing teal.
   Four things do NOT inherit and are named below, same as the FAQ block:
   1. .site-nav__name, .site-nav__link and .site-nav__meta all set their own
      colour, so inheriting white does nothing.
   2. the brand mark and the phone glyph are IMAGE files — only recolourable
      from outside, hence brightness(0) invert(1). The new mark is already
      white, so the filter is a no-op on it and stays for the phone glyph and
      for whatever mark ships next.
   3. the open/closed pill's greens are deliberately semantic and AA-checked
      ON WHITE (#166534 etc). Rather than invent dark-surface greens, the
      pill keeps a white chip and its own colours stay exactly as audited.
   4. below 992px the links live in a separate WHITE card under the pill, so
      the white-text rules are desktop-only; the phone and links inside that
      card keep their normal colours.
   --------------------------------------------------------------------------- */
.site-header .site-nav {
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  background: var(--leap-nav-surface, #27a6b1);
  box-shadow:
    0 0 0 1px rgb(16 24 40 / 6%),
    0 12px 32px -14px rgb(16 24 40 / 22%);
}
.site-header .site-nav__name {
  color: var(--color-white, #fff);
}
.site-header .site-nav__logo {
  filter: brightness(0) invert(1);
}
.site-header .site-nav__menu-line--top,
.site-header .site-nav__menu-line--middle,
.site-header .site-nav__menu-line--bottom {
  background-color: var(--color-white, #fff);
}
@media (min-width: 992px) {
  .site-header .site-nav__link,
  .site-header .site-nav__link.is-current,
  .site-header .site-nav__meta.text-color-primary {
    color: var(--color-white, #fff);
  }
  .site-header .site-nav__link.is-current {
    background: rgb(255 255 255 / 16%);
  }
  .site-header .site-nav__phone-icon {
    filter: brightness(0) invert(1);
  }
  .site-header .site-nav__status,
  .site-header .site-nav__status.is-closed {
    background-color: var(--color-white, #fff);
    border-color: var(--color-white, #fff);
  }
}
@media (hover: hover) and (min-width: 992px) {
  .site-header .site-nav__link:hover,
  .site-header .site-nav__phone:hover {
    background: rgb(255 255 255 / 14%);
  }
}

/* Location & Hours: the right-hand panel is a Google Maps embed of the office
   address instead of the premises photo (admin request, 2026-09-20). It takes
   the photo's own box so the two halves of .location-grid still line up — an
   <iframe> has no intrinsic size, so unlike .location-image it keeps its
   aspect-ratio at every width rather than falling back to `auto` on tablet. */
.location-map {
  width: 100%;
  aspect-ratio: 3/2;
  height: auto;
  align-self: start;
  border: 0;
  display: block;
  outline: 1px solid rgb(0 0 0 / 10%);
  outline-offset: -1px;
}

/* ---------------------------------------------------------------------------
   FAQ watermark: the practice's own mark, not the stock tooth (admin,
   2026-09-20). #816's decor layer is already position:fixed, so it stays put
   while the questions scroll over it — that part is unchanged.
   Three things the swap has to undo:
   (1) The dark-surface rule above inverts the decor, because the shared tooth
       line art is black ink. This logo ships as WHITE paths on transparent,
       so it is already the right colour for the navy — inverting it would
       paint the mark black. filter: none.
   (2) The tooth bakes its own 0.07 alpha into the file; the logo does not, so
       the element carries it. Solid shapes read heavier than 2.5px linework
       at the same alpha, hence 0.06 rather than 0.07 — the same whisper of a
       watermark, not a second logo competing with the header.
   (3) The tooth sits in the middle half of a square canvas, so #816's
       negative offsets bled empty padding. This mark fills its box edge to
       edge: a cropped logo is a broken logo, so it sits fully on screen, its
       left edge on the page gutter and its foot on the section's own rhythm.
   --------------------------------------------------------------------------- */
.faq-section .faq__decor {
  background-image: url(../biz/cc-logo-svg-v2-final.svg);
  filter: none;
  opacity: 0.06;
  width: clamp(18rem, 26vw, 26rem);
  aspect-ratio: 386 / 437;
  left: var(--page-padding-desktop);
  bottom: 9rem;
}

/* ---- The hero's media box fits its content (hero-fit) --------------------
   The media box was a fixed, viewport-based height (--hero-media-h) and the
   content pulled itself up over it by the same amount, so a three-line
   title or a short browser window pushed the chip grid and the appointment
   card past the video's rounded bottom edge onto the page below. nav-float
   made it worse: the pill's depth was added to the content's top padding
   and nothing was added to the box. The two now share one grid cell — the
   media stretches to the content and --hero-media-h is only its floor, so a
   short hero still fills the fold and a long one grows with its content.
   The appointment card keeps its straddle: the media stops the same
   distance short of the content's bottom edge that .hero__content's
   min-height used to push the card past it (5rem, 9rem on phones). The
   media no longer sticks on scroll — a box as tall as its content has no
   room to. Selectors match nav-float's specificity so they win by order. */
.hero-section > .padding-global > .container-large {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
body:has(.hero-section) .hero__media,
.hero-section .hero__media {
  grid-area: 1 / 1;
  height: auto;
  /* Forks from before --hero-media-h sized the box by the video's aspect
     ratio, capped at 50rem, and nudged the content down 6rem; none of that
     survives the shared cell. */
  max-height: none;
  min-height: var(--hero-media-h, 0px);
  position: relative;
  top: 0;
  margin-bottom: 5rem;
}
body:has(.hero-section) .hero__content,
.hero-section .hero__content {
  grid-area: 1 / 1;
  margin-top: 0;
  top: 0;
}
@media (max-width: 479px) {
  body:has(.hero-section) .hero__media,
  .hero-section .hero__media {
    margin-bottom: 9rem;
  }
}
/* The title steps down ~10% (47.7px → 43.4px at 1440, 39.6px → 35.5px at
   1024) so a three-line practice name reads as a headline, not a wall, and
   the chip grid sits higher in the fold. Forks from before the hero rework
   set the title a flat 4rem (64px); this brings them to the same clamp. */
.hero__content h1 {
  font-size: clamp(1.875rem, 1rem + 1.9vw, 3rem);
}

/* ---- Rounded media keeps its corners (media-corners) ---------------------
   A rounded box clipping a video under an absolute tint only clips reliably
   as its own stacking context. hero-fit took .hero__media off sticky (which
   was one), so the tint could paint square past the rounded video. isolation
   restores the context; the tint inherits the radius as a second guard. */
body:has(.hero-section) .hero__media,
.hero-section .hero__media,
.service-card {
  isolation: isolate;
}
.hero__media::after,
.service-card__overlay {
  border-radius: inherit;
}

/* Accessibility trigger in the teal nav bar: white, like the rest of the
   bar's text (admin decision 2026-09-24; the accent measured ~1.7:1 here).
   Colour only; placement and shape stay with leap-a11y.css. */
.site-nav .asw-menu-btn.leap-a11y-nav {
  color: #fff;
}