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 #04a77d/#037558 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 {
  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;
}
.grid-3col > :nth-last-child(1):nth-child(3n + 1) {
  grid-column: span 6;
}
.background-image-wrapper {
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.testimonial-card {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  -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;
}
.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);
}
.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;
}
.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;
  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(../biz/decor-faq.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 {
  from {
    transform: translateY(3.5rem) rotate(-6deg);
  }
  to {
    transform: translateY(-3.5rem) rotate(6deg);
  }
}
.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;
}
/* ---- 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;
}
.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;
}
/* ---- #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 —
   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;
  }
}
@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: #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;
}
.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% - 2rem) / 3);
}
@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;
}
.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;
  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;
}
.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. The
   mobile value is larger because the bar stacks into two rows below 767px. */
.faq-section {
  padding-bottom: 8rem;
}
.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 {
  --carousel-arrow-top: 10rem;
  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;
  }
  .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;
  }
  .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;
  }
  .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 and the FAQ needs correspondingly more room beneath it. */
  .faq-section {
    padding-bottom: 11rem;
  }
  .sticky-cta__content {
    font-size: 1rem;
  }
  .testimonial-card {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    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__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;
  }
  .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%;
    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: 11rem;
  }
  .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;
  }
  .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, #2d40ea, #2504a7);
}

.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: #2504a7;
}

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

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

/* 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);
  }
}

/* ---- 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;
}