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;
}
.carousel__pagination {
  z-index: 2;
  text-align: center;
  -webkit-height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}
.carousel__pagination.carousel__pagination--round > div {
  border-radius: 100%;
}
.carousel__control--prev,
.carousel__control--next {
  cursor: pointer;
  color: #fff;
  -webkit--webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.carousel__control--prev:focus,
.carousel__control--next:focus {
  outline: 0;
}
.carousel__control--prev {
  z-index: 3;
  right: auto;
}
.carousel__control--next {
  z-index: 4;
  left: auto;
}
@media screen and (max-width: 767px) {
  .site-nav__brand {
    padding-left: 10px;
  }
}
.rich-text:before,
.rich-text:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}
.rich-text:after {
  clear: both;
}
.rich-text ol,
.rich-text ul {
  overflow: hidden;
}
.site-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}
.site-nav:before,
.site-nav:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}
.site-nav:after {
  clear: both;
}
.site-nav__brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}
.site-nav__menu {
  float: right;
  position: relative;
}
.site-nav__menu-button {
  float: right;
  cursor: pointer;
  -webkit--webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}
.site-nav__menu-button:focus {
  outline: 0;
}
.site-nav__menu-button.is-open {
  color: #fff;
  background-color: #c8c8c8;
}
@media screen and (max-width: 767px) {
  .site-nav__brand {
    padding-left: 10px;
  }
}
@font-face {
  font-family: Instrument Sans;
  src: url(../images/67e95a303757b975d2da1b5e_Instrument%20Sans%20Regular.woff2)
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Instrument Sans;
  src: url(../images/67e95a303757b975d2da1b62_InstrumentSans%20SemiBold.woff2)
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Instrument Sans;
  src: url(../images/67e95a303757b975d2da1b6e_InstrumentSans%20Medium.woff2)
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: IBM Plex Sans;
  src: url(../images/67e95a303757b975d2da1b71_IBMPlexSans%20Medium.woff2)
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-charcoal: #333;
  --link-primary: var(--color-brand-blue);
  --text-primary: var(--color-black);
  --text-secondary: var(--color-neutral-800);
  --page-padding-desktop: 1.25rem;
  --page-padding-mobile: 1.25rem;
  --border-primary: var(--color-neutral-100);
  --surface-secondary: var(--color-brand-blue);
  --text-inverse: var(--color-white);
  --surface-tertiary: var(--color-brand-pink);
  --surface-error: var(--color-error-soft);
  --text-error: var(--color-error);
  --surface-primary: var(--color-black);
  --border-strong: var(--color-neutral-800);
  --surface-warning: var(--color-warning-soft);
  --text-warning: var(--color-warning);
  --color-gray-200: #e5e7eb;
  --color-gray-600: #666;
  --color-white: #fff;
  --radius-medium: 1rem;
  --radius-small: 0.625rem;
  /* Semantic greens, deliberately NOT the secondary accent literals: the
     retheme swaps #b08d57/#866b42 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%;
  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;
  overflow: hidden;
}
/* 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;
}
.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 {
  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;
  /* The watermark bleeds past the intro column's left edge (#727). `clip`
     rather than `hidden` so nothing here becomes a scroll container and the
     scroll-linked drift below still animates. */
  overflow: clip;
}
/* #675 L: FAQ watermark is an element in the intro column's white space (was a
   section background behind the questions); an element can carry motion. */
.faq__intro {
  position: relative;
}
/* Everything the intro column says sits above the watermark. */
.faq__intro > * {
  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;
  /* #727: a thin-line glyph sized to the column and parked BELOW the intro
     text read as a lost sticker. It now behaves like the reference — most of
     the intro column, bleeding past its left edge and up behind the heading,
     with the heading and tag riding above it. */
  width: clamp(28rem, 46vw, 46rem);
  aspect-ratio: 1;
  position: absolute;
  top: -7rem;
  left: -9rem;
}
/* Scroll-linked drift + tilt on the watermark. @supports keeps unsupporting
   browsers a no-op (a 0s clock would snap to the end state), and the whole
   thing is gated on prefers-reduced-motion.
   #727 removed the glisten that used to ride along here: it was a brightened
   copy of a FILLED raster, and brightness() cannot lighten the black strokes
   every vertical now ships — the copy only doubled the ink. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .faq__decor {
      animation: leap-faq-decor-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}
@keyframes leap-faq-decor-drift {
  /* Wider arc so the scroll-linked turn is actually felt (#698 Exhibit L). */
  from {
    transform: translateY(3.5rem) rotate(-14deg);
  }
  to {
    transform: translateY(-3.5rem) rotate(14deg);
  }
}
.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 {
  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: center;
  align-items: center;
  margin-top: -57%;
  padding: 8rem 5rem 0;
  display: flex;
  position: relative;
  top: 6rem;
}
.hero__media {
  border-radius: var(--radius-small);
  max-height: 50rem;
  position: sticky;
  top: 4rem;
  overflow: hidden;
}
.service-card__media {
  display: block;
  position: absolute;
  inset: 0%;
}
.feature-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
}
.feature-tag {
  grid-column-gap: 0.375rem;
  grid-row-gap: 0.375rem;
  opacity: 0.5;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid #333;
  border-radius: 6.25rem;
  justify-content: flex-start;
  align-items: center;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 142.857%;
  display: flex;
}
.feature-tag.shine {
  opacity: 1;
}
.feature-content {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  display: flex;
}
.feature-grid {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* Frame on the container (#675 J2): overflow:hidden clips the cells' outward
     hairlines, and padding tiles (#109) read as blank cards. */
  background-color: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}
/* ---- plan 242 A3: the insurance grid's last row stretches ---------------
   Same technique the testimonial grid uses (.grid-3col above): four per row
   drawn on twelve tracks, so a last row of one, two or three widens to fill
   the row instead of trailing off mid-line. Overrides the four-track
   declaration above rather than replacing it, so the fallback stays intact
   if these rules are ever dropped. */
.feature-grid {
  grid-template-columns: repeat(12, 1fr);
}
.feature-grid > * {
  grid-column: span 3;
}
.feature-grid > :nth-last-child(3):nth-child(4n + 1),
.feature-grid > :nth-last-child(2):nth-child(4n + 2),
.feature-grid > :nth-last-child(1):nth-child(4n + 3) {
  grid-column: span 4;
}
.feature-grid > :nth-last-child(2):nth-child(4n + 1),
.feature-grid > :nth-last-child(1):nth-child(4n + 2) {
  grid-column: span 6;
}
.feature-grid > :nth-last-child(1):nth-child(4n + 1) {
  grid-column: span 12;
}
/* ---- plan 242 A2: generic payment categories ---------------------------
   "Workers' Compensation" has no brand mark to fetch, so it ships as a chip
   with a tag glyph instead of a bare line in a wall of logos. The mask
   machinery mirrors .section-tag .tag-icon; the glyph is painted in the
   cell's own text colour. */
.insurance-chip {
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}
.insurance-chip .tag-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.insurance-section {
  background-color: #f5f5f5;
}
.appointment-strip {
  position: relative;
  overflow: hidden;
}
.appointment-strip.overflow-mobile {
  z-index: 1000;
}
.appointment-strip__trigger {
  pointer-events: none;
  height: 100%;
  min-height: 60vh;
  position: absolute;
  inset: auto 0% 0%;
}
.shadow-large {
  box-shadow:
    0 20px 24px -4px #00000014,
    0 8px 8px -4px #10182808;
}
.appointment-card__options {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  max-height: 23rem;
  padding-bottom: 1.5rem;
  display: flex;
}
.footer-content {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 5rem;
  padding-bottom: 1.5rem;
  display: flex;
}
.footer-bar {
  z-index: 1;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: var(--color-white);
  border-radius: 1rem;
  flex-flow: column;
  width: 100%;
  margin-top: 2.5rem;
  padding: 1.5rem 2.5rem 1rem;
  display: flex;
  position: relative;
  overflow: hidden;
}
.footer-logo {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}
.footer-links {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  color: #33333380;
  font-size: 0.88rem;
  display: flex;
  /* The legal row carries up to four documents plus the copyright. On a phone
     that is wider than the screen, and a legal link the visitor cannot reach
     is the same as not having one. */
  flex-wrap: wrap;
}
.footer-links address {
  font-style: normal;
}
.footer-link {
  color: #333333b3;
  transition: color 0.2s;
}
.footer-link:hover {
  color: var(--color-charcoal);
}
.line-divider {
  background-color: var(--color-neutral-100);
  height: 1px;
}
.footer-socials {
  grid-column-gap: 1rem;
  align-items: center;
  display: flex;
}
.icon-embed-custom {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}
.scale-up {
  animation-name: scale-up;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i) * 0s);
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-fill-mode: both;
}
.site-nav__link {
  color: #111;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav__link.is-current {
  color: #1148a3;
}
.site-nav__link.show-tablet,
.site-nav__link.show-tablet.is-current {
  display: none;
}
.clip {
  z-index: 1;
  display: block;
  position: relative;
  overflow: hidden;
}
.hover-text {
  display: block;
}
.hover-text.bottom {
  position: absolute;
  bottom: -100%;
}
.site-nav__link-label {
  padding-top: 0;
}
.primary-button {
  color: var(--color-white);
  text-align: center;
  border-radius: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}
.hours-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 0.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.button-link {
  grid-column-gap: 0.5rem;
  color: #6941c6;
  white-space: nowrap;
  background-color: #0000;
  border: 0;
  appearance: none;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 0.3s,
    transform 0.15s;
  display: flex;
}
.button-link:hover {
  color: #53389e;
}
.button-link.is-address {
  color: #4861f2;
}
.fade-in {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i) * 0s);
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-fill-mode: both;
}
/* Marquee. leap-foundation.js moves the row's children into
   .leap-marquee__track, appends an aria-hidden duplicate, and sets the two
   custom properties below.

   The animation belongs on the wrapper holding both copies, never on the
   items. Animating each item was the old bug: an item can only travel its own
   width before it must snap back, which read as a stutter rather than a loop.
   Moving the pair by exactly one copy's width lands copy two where copy one
   started, so the reset is invisible. */
.loop-move-left {
  animation: none;
}
.leap-marquee {
  /* The track is wider than the row by design, so the row clips rather than
     scrolls — a scrollbar here would fight the animation. */
  overflow: hidden !important;
}
.leap-marquee__inner {
  display: flex;
  width: max-content;
  /* Matches the row's own gap so the join between the two copies keeps the
     same rhythm as the items within one. */
  gap: inherit;
  animation: leap-marquee var(--leap-marquee-duration, 30s) linear infinite;
}
.leap-marquee__track {
  display: flex;
  flex: none;
  gap: inherit;
}
/* Let a reader stop the row to finish a quote. */
.leap-marquee:hover .leap-marquee__inner,
.leap-marquee:focus-within .leap-marquee__inner {
  animation-play-state: paused;
}
@keyframes leap-marquee {
  to {
    transform: translate3d(calc(var(--leap-marquee-distance, 0px) * -1), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .leap-marquee__inner {
    animation: none;
  }
}
.appointment-card__option-icon {
  flex: none;
  width: 1.5rem;
}
.testimonial-stars {
  color: #f90;
  width: 6rem;
}
/* Star shimmer: the five stars breathe left-to-right, 80ms apart. CSS only —
   the row is exactly five <path> elements and both check-template.py and
   create-site.py assert that count, so nothing may be added to the markup.
   `opacity` only, so it composites; a site opts out with `no-shine`. */
@media (prefers-reduced-motion: no-preference) {
  .testimonial-stars:not(.no-shine) path {
    animation: leap-star-shimmer 2.8s ease-in-out infinite;
  }
  .testimonial-stars path:nth-child(2) {
    animation-delay: 80ms;
  }
  .testimonial-stars path:nth-child(3) {
    animation-delay: 160ms;
  }
  .testimonial-stars path:nth-child(4) {
    animation-delay: 240ms;
  }
  .testimonial-stars path: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 path {
    animation-duration: 3.7s;
  }
  .testimonial-card:nth-child(3n + 2) .testimonial-stars path {
    animation-duration: 4.3s;
    animation-delay: 1.1s;
  }
  .testimonial-card:nth-child(3n + 2) .testimonial-stars path:nth-child(2) {
    animation-delay: 1.34s;
  }
  .testimonial-card:nth-child(3n + 2) .testimonial-stars path:nth-child(4) {
    animation-delay: 1.82s;
  }
  .testimonial-card:nth-child(3n) .testimonial-stars path {
    animation-duration: 3.1s;
    animation-delay: 2s;
  }
  .testimonial-card:nth-child(3n) .testimonial-stars path:nth-child(3) {
    animation-delay: 2.48s;
  }
  .testimonial-card:nth-child(3n) .testimonial-stars path: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__pagination-dots {
  min-height: 1.75rem;
  height: auto;
  font-size: 0.5rem;
  inset: auto auto 0% 0%;
}
.carousel__control-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  display: flex;
}
.relative {
  position: relative;
}
.detail-page__content {
  margin-bottom: 4rem;
}
.detail-page__spacer {
  width: 100%;
  min-height: 7rem;
}
.detail-page__title {
  z-index: 1;
  text-align: left;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.detail-page__hero {
  z-index: -1;
}
.detail-page__category {
  color: #fff;
  margin-bottom: 1rem;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  font-weight: 600;
  text-decoration: none;
}
.detail-page__category.is-current {
  border-bottom: 2px solid #000;
}
.detail-page__header {
  margin-bottom: 4rem;
  position: relative;
}
.detail-page__heading {
  color: #101828;
  margin-top: 0;
  margin-bottom: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
}
.detail-page__heading.text-color-white {
  color: #fff;
}
.detail-page__prose {
  color: #475467;
}
.detail-page__prose a {
  text-decoration: underline;
}
.detail-page__prose h2 {
  color: var(--surface-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
}
.detail-page__prose h4 {
  color: var(--surface-primary);
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  font-weight: 400;
}
.detail-page__prose h6 {
  color: var(--surface-primary);
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.detail-page__prose h3 {
  color: var(--surface-primary);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  font-weight: 500;
}
.detail-page__prose p {
  color: var(--surface-primary);
  margin-bottom: 1rem;
}
.detail-page__prose h1 {
  color: var(--surface-primary);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
}
.detail-page__prose ul {
  color: var(--surface-primary);
  /* Matches the paragraph rhythm. Legal pages are the first prose here to put
     a list and a paragraph back to back, and without this they collide. */
  margin-bottom: 1rem;
}
.detail-page__prose h5 {
  color: var(--surface-primary);
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.detail-page__prose ol {
  color: var(--surface-primary);
  margin-bottom: 1rem;
}
.section-tag {
  opacity: 0.5;
  color: #333;
  text-transform: uppercase;
  border: 1px solid #333;
  border-radius: 6.25rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  font-family:
    IBM Plex Sans,
    sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2em;
  display: flex;
}
/* `is-count` is the reviews badge beside a `shine` pun pill. It carries the
   same accent so the two pills in one header read as a pair, but it is
   deliberately NOT `shine`: SECTION_TAG_RE only rewrites `shine` pills, and
   the tagline must never overwrite the review count. */
.section-tag.shine,
.section-tag.is-count {
  opacity: 1;
  color: #17819b;
  border-color: #17819b;
}
.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). Same pill as .section-tag — the row
   reads as a set of the section's own tags, not a new control language. The
   row only exists on a site whose spec declares service_groups. */
.service-filters {
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
  display: flex;
}
/* A pill is a control, so it does NOT inherit .section-tag's decorative
   opacity: .5 — #333 at half opacity resolves to #999 (2.85:1) and fails
   WCAG 1.4.3. Unpressed is a full-opacity muted grey (8.1:1 on white);
   pressed is a deeper teal on a soft teal fill (5.5:1), so the selected
   pill differs in FILL as well as hue and does not rest on colour alone. */
.service-filter {
  cursor: pointer;
  opacity: 1;
  color: #4a5057;
  background: none;
  border-color: #c9ced4;
  min-height: 2.25rem;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.service-filter[aria-pressed="true"] {
  color: #0f6b81;
  background-color: #eaf4f7;
  border-color: #0f6b81;
}
@media (hover: hover) {
  .service-filter:hover {
    color: #0f6b81;
    border-color: #0f6b81;
  }
}
/* Phones: one scrolling row rather than a wrapped block that pushes the
   carousel off the fold, and a 44px tap target. */
@media (max-width: 767px) {
  .service-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .service-filter {
    flex: none;
    min-height: 44px;
  }
}
.section-padding {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.carousel__viewport {
  height: auto;
}
.carousel__viewport.carousel__viewport--three {
  /* #726 Exhibit C: 30vw made a slide 432px wide on a 1440 desktop, so three
     cards filled the row and the fourth never showed. A fixed 18rem slide
     puts four whole cards and the edge of a fifth on screen, and squares the
     media box with the rule below. */
  width: 18rem;
  overflow: visible;
}
.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 {
  color: #15803d;
}
/* The shipped markup carries the donor's baked "Open today 9 AM to 6 PM";
   the pill is invisible until setupOpeningHours() computes the real state
   (and stays invisible without JS — better than a wrong schedule). Layout
   space is kept so the nav row does not jump when it appears. */
.site-nav__status:not(.is-live) {
  visibility: hidden;
}
.site-nav__status.is-closed {
  background-color: #7373731a;
  border-color: #7373731a;
}
.site-nav__status.is-closed .status-dot {
  background-color: #737373;
}
/* The pulse lives on the pseudo-element, so stopping it has to target that —
   `animation: none` on the dot itself stopped nothing. Dropping the
   pseudo-element is surer than stopping the animation: there is no resting
   keyframe left to paint a static ring around a closed practice. */
.site-nav__status.is-closed .status-dot::after {
  content: none;
}
.site-nav__status.is-closed .site-nav__meta.text-color-secondary {
  color: #525252;
}
.sticky-cta {
  z-index: 999;
  position: fixed;
  inset: auto 0% 1%;
}

/* The CTA floats over the page, so whatever sits last in the flow ends up
   underneath it — on the FAQ that hid the final question. Nothing in normal
   flow knows the bar is there, so the section reserves the space itself. The
   footer that follows is its own full-bleed block and reads fine behind the
   bar; the FAQ, being text the reader is mid-way through, does not.
   On desktop the section's own 8rem padding already clears the ~5.5rem bar,
   so no extra reservation — stacking another 8rem on top read as a random
   blank band under every FAQ (#698 Exhibit R). Phones still reserve a
   little because the bar stacks into two rows below 767px. */
.faq-section {
  padding-bottom: 0;
}
.site-nav__menu {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 1.5rem;
  display: flex;
  position: static;
}
.site-nav__inner {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 85rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.site-nav__menu-button {
  padding: 0;
}
.site-nav__links {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.site-nav__brand {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  display: flex;
}
.site-nav {
  background-color: #fff;
  align-items: center;
  min-height: 5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  position: sticky;
  top: 0;
}
.flex-row {
  display: flex;
}
.flex-row.space-between {
  justify-content: space-between;
}
.flex-row.space-between.vertical-center {
  flex-flow: row;
  align-items: center;
}
.flex-row.space-between.vertical-center.wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
}
.flex-row.gap-16 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.flex-row.gap-32 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}
.flex-row.gap-32.wrap {
  flex-flow: wrap;
}
.flex-row.gap-24 {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}
.team-carousel {
  background-color: #0000;
  height: auto;
  margin-top: 4rem;
  padding-bottom: 6rem;
  overflow: hidden;
}
.inline-flex-dark {
  color: #333;
}
.financing-link {
  color: var(--color-success-text);
  font-size: 2.5rem;
  display: inline;
  position: absolute;
  inset: 0% 0% auto auto;
  transform: translate(125%, -25%);
}
.financing-link--gradient {
  -webkit-text-fill-color: transparent;
  background-color: #00a5bf;
  background-image: linear-gradient(259deg, #009dd2, #00da2c);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-flex;
}
.financing-link--gradient:hover {
  filter: contrast(122%);
  background-image: linear-gradient(259deg, #5687f3, #ffa53a);
}
.feature-item {
  background-color: #f5f5f5;
  box-shadow: 0 0 0 1px #ddd;
  justify-content: center;
  align-items: center;
  height: 8rem;
  padding: 2.75rem 3.375rem;
  display: flex;
}
.services-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.button-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  display: flex;
}
.team-carousel__slide {
  height: 100%;
}
.text-color-gray-600 {
  color: #666;
}
.team-member__bio {
  color: #333;
  background-color: #f9f9f9;
  border-radius: 1rem;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  padding: 2.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
  display: flex;
  overflow: hidden;
}
.media-overlay {
  z-index: 1;
  background-image: linear-gradient(#fff, #0003);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}
.location-card {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  color: #20325a;
  background-color: #20325a0d;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  flex-flow: column;
  padding: 1.75rem 1.5rem;
  display: flex;
}
.location-card.center {
  justify-content: center;
}
.location-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.location-grid.is-two-column {
  grid-template-columns: 1fr 1fr;
}
/* ---- plan 244 F2: a practice with more than one office ------------------ */
/* Additional offices ride in a second grid under the flagship card + photo,
   so the flagship stays first — the header's live open/closed pill reads the
   first [data-hours-grid] on the page and must keep reading the same one. */
.location-grid.is-more-offices {
  margin-top: 1.5rem;
}
/* #675 G: desktop rows are balanced in markup (balance_locations_grid drops the
   decorative panel); the stretch is opt-in there and default below 992px. */
.location-grid.is-stretch-last > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* The office's name. Cards without one are addresses nobody can choose
   between; it is a heading, not a section heading, so it stays card-sized. */
.location-card__label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.contact-label {
  color: #3e6cb2;
  font-family:
    Instrument Sans,
    sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.contact-label.text-color-primary {
  color: #6b6b6b;
}
.contact-label.text-color-primary.is-larger {
  font-size: 0.85rem;
}
.contact-label.text-color-primary.is-larger.larger {
  font-size: 1rem;
}
.flex-vertical {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  flex-flow: column;
  display: flex;
}
.location-image {
  width: 100%;
}
.location-image.rounded.shorter {
  /* Self-sized by aspect-ratio: `height: 100%` against a grid cell whose
     height is not yet definite painted a portrait source ~190px tall on
     first layout (Aug 18 test build) until a relayout. */
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
  height: auto;
  align-self: start;
}
.section-heading {
  text-align: left;
}
.service-card__details {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
  background-color: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0.625rem;
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.service-card__details:hover {
  background-color: #3333334d;
}
.service-card__details.is-darker {
  background-color: #ffffff4d;
  border-color: #fff6;
}
.service-card__details.is-darker:hover {
  background-color: #77777780;
}
.service-card__details.is-darker.is-grow {
  justify-content: center;
  align-items: center;
  display: flex;
}
.service-card__overlay {
  z-index: 1;
  pointer-events: none;
  background-color: #0000005e;
  position: absolute;
  inset: 0%;
}
.services-carousel {
  background-color: #0000;
  width: 100%;
  height: auto;
  margin-top: 4rem;
  padding-bottom: 6rem;
  overflow: hidden;
}
.services-carousel__source {
  margin-right: 4rem;
}
.service-card__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.service-card__book {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
  background-color: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0.625rem;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.15s;
  display: flex;
}
.service-card__book:hover {
  background-color: #3333334d;
}
.service-card__book.is-darker {
  background-color: #ffffff4d;
  border-color: #fff6;
}
.service-card__book.is-darker:hover {
  background-color: #77777780;
}
.section-heading {
  text-align: left;
}
.technology-carousel__slide {
  margin-right: 4rem;
}
.technology-carousel__slide.is-services {
  margin-right: 1rem;
}
.carousel__control {
  color: #667085;
  background-color: #e7e7e7;
  border: 1px solid #d8d8d8;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  transition:
    color 0.2s,
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    opacity 0.2s,
    transform 0.15s;
  display: flex;
  inset: auto 0% 0% auto;
}
.carousel__control:hover {
  background-color: #e5e5e5;
}
.carousel__control.left {
  right: 4rem;
}
.technology-carousel {
  background-color: #0000;
  width: 100%;
  height: auto;
  padding-bottom: 6rem;
  overflow: hidden;
}
@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;
  }
  .full-image.hero {
    margin-top: 0;
  }
  .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__content {
    margin-top: -55%;
    padding-top: 6rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* plan 242 A3, tablet step: two per row on the same twelve tracks. */
  .feature-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .feature-grid > :nth-child(n):nth-child(n) {
    grid-column: span 6;
  }
  .feature-grid > :nth-last-child(1):nth-child(2n + 1) {
    grid-column: span 12;
  }
  .site-nav__link.show-tablet,
  .site-nav__link.show-tablet.is-current {
    display: block;
  }
  .detail-page__content {
    margin-bottom: 3rem;
  }
  .detail-page__spacer {
    min-height: 6rem;
  }
  .detail-page__heading {
    font-size: 2.75rem;
  }
  .site-nav__meta {
    font-size: 0.65rem;
  }
  .site-nav__menu {
    -webkit-text-fill-color: inherit;
    background-color: #fff;
    background-clip: border-box;
    border-top: 1px solid #f2f4f7;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    align-items: flex-start;
    margin-left: 0;
    padding: 1.5rem 2rem;
    position: absolute;
    overflow: auto;
  }
  .site-nav__menu-line--middle {
    background-color: #344054;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }
  .site-nav__menu-button.is-open {
    background-color: #0000;
  }
  .site-nav__menu-line--top {
    background-color: #344054;
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .site-nav__links {
    flex-flow: column;
  }
  .site-nav__menu-line--bottom {
    background-color: #344054;
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .site-nav__menu-icon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: -0.5rem;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }
  .site-nav__menu-line--middle-inner {
    width: 4px;
    height: 0;
    padding-bottom: 0;
    padding-right: 0;
  }
  .flex-row.space-between.text-size-regular {
    font-size: 0.88rem;
  }
  .team-carousel {
    padding-left: 0;
    padding-right: 0;
  }
  .feature-item {
    padding: 2.5rem 3rem;
  }
  .services-grid {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .team-carousel__slide {
    padding-left: 0;
    padding-right: 0;
  }
  .team-member__bio {
    min-height: auto;
  }
  .location-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Tablet: the decorative panel is hidden, so stretch the orphan. */
  .location-grid.is-more-offices > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .contact-label {
    font-size: 0.85rem;
  }
  .location-image.rounded.shorter {
    aspect-ratio: auto;
  }
  .services-carousel {
    padding-left: 0;
    padding-right: 0;
  }
  .services-carousel__source,
  .technology-carousel__slide {
    margin-right: 2.5rem;
    padding-right: 0;
  }
  .technology-carousel {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  h1,
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.875rem;
  }
  .padding-xxhuge {
    padding: 4.5rem;
  }
  .margin-xxlarge {
    margin: 3rem;
  }
  .margin-medium {
    margin: 1.25rem;
  }
  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }
  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .hide-mobile-landscape {
    display: none;
  }
  .padding-global {
    padding-right: var(--page-padding-mobile);
    padding-left: var(--page-padding-mobile);
  }
  .padding-global.nullify-mobile {
    padding-left: 0;
    padding-right: 0;
  }
  .text-size-regular.is-larger {
    font-size: 0.88rem;
  }
  .padding-section-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .padding-section-medium {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .flex-horizontal.space-between.responsive {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    flex-flow: wrap;
  }
  .flex-horizontal.gap-24.y-center.responsive {
    flex-flow: wrap;
  }
  .full-image.hero {
    aspect-ratio: 3/2;
    aspect-ratio: 3/2;
  }
  .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;
  }
  .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;
  }
  .carousel__viewport.carousel__viewport--three {
    width: 80vw;
  }
  .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: 5rem;
  }
  .financing-link.financing-link--gradient {
    font-size: 2rem;
  }
  .feature-item {
    padding: 1rem 1.5rem;
  }
  .services-grid {
    grid-auto-columns: 1fr;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    overflow: scroll;
  }
  .team-member__bio {
    font-size: 1rem;
  }
  .contact-label {
    font-size: 0.75rem;
  }
  .services-carousel {
    margin-top: 3rem;
    padding-bottom: 5rem;
  }
  .services-carousel__source {
    padding-left: 0;
    padding-right: 0;
  }
  .technology-carousel__slide {
    padding-left: 0;
    padding-right: 0;
  }
  .carousel__control:hover {
    background-color: #fff;
  }
  .carousel__control.left {
    right: 3.5rem;
  }
  .technology-carousel {
    margin-top: 3rem;
    padding-bottom: 5rem;
  }
}
@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%;
    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__content {
    margin-top: -100%;
    top: 0;
  }
  .hero__media {
    border-radius: 0;
    height: 26.25rem;
    position: relative;
    top: 0;
  }
  .appointment-strip.overflow-mobile {
    overflow: visible;
  }
  .appointment-card__options {
    max-height: 22rem;
    padding-bottom: 2rem;
  }
  .footer-bar {
    font-size: 0.88rem;
  }
  .footer-links > [aria-hidden="true"] {
    display: none;
  }
  .primary-button.animated-gradient-button {
    width: 100%;
  }
  .appointment-card__option-icon {
    width: 1.25rem;
  }
  .section-padding.nullify-mobile {
    padding-left: 0;
    padding-right: 0;
  }
  .technology-card {
    flex-flow: column;
    grid-template-rows: 16rem auto auto;
    width: 90%;
    display: flex;
  }
  .technology-card.full-mobile {
    width: 100%;
  }
  .service-card__content {
    width: 100%;
    padding: 1.25rem 1rem;
  }
  .service-card {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    display: flex;
  }
  .scroll-wrap.shorter {
    max-height: 14rem;
  }
  .site-nav__menu {
    border: 1px solid #ccc;
    border-top-style: none;
  }
  .flex-row.space-between.vertical-center.wrap {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }
  .team-member__bio {
    height: 22.5rem;
    padding: 1.5rem;
    font-size: 0.88rem;
    line-height: 1.6;
  }
  .location-card {
    padding: 1rem;
    font-size: 0.88rem;
  }
  .location-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }
  .location-grid.is-two-column {
    grid-template-columns: 1fr;
  }
  /* "Learn More" is the widest label these cards carry. At 1.25rem a side it
     pushed the pair past the card edge on a 375pt phone and the second button
     clipped. The text is the target size — the padding gives way. */
  .service-card__details,
  .service-card__book {
    flex: none;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

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

.provider-hero-fill {
  background-image: linear-gradient(140deg, #1b3a5c, #12283f);
}

.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: #12283f;
}

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