@font-face {
  font-family: Nunito;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-6);
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  font-synthesis: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--link-color);
}

p {
  margin: 0 0 var(--space-4);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--heading-section-size);
  line-height: var(--heading-section-line-height);
  letter-spacing: var(--letter-spacing-heading);
}

h3 {
  font-size: var(--heading-card-size);
  line-height: var(--heading-card-line-height);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  color: inherit;
}

button:disabled {
  cursor: default;
}

button,
input,
select {
  border-radius: var(--radius-button);
}

[hidden] {
  display: none!important;
}

a,
button {
  transition: color var(--motion-fast) var(--motion-easing),background-color var(--motion-fast) var(--motion-easing),border-color var(--motion-fast) var(--motion-easing);
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.container {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--container-max);
  margin-inline: auto;
}

.section {
  margin-top: var(--section-spacing);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.section-heading h2 {
  max-width: 80%;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
}

.flipped {
  transform: rotate(180deg);
}

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

.skip-link {
  position: fixed;
  z-index: var(--layer-dialog);
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  box-shadow: var(--shadow-panel);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-min-height);
  padding: var(--space-3) var(--button-padding-inline);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-button);
  font-size: var(--control-text-size);
  line-height: var(--control-text-line-height);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
}

.button--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.button--primary:hover {
  background: var(--button-primary-hover-bg);
  color: var(--button-primary-text);
}

.button--primary:active {
  background: var(--button-primary-active-bg);
}

.button--accent {
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}

.button--accent:hover {
  background: var(--button-accent-hover-bg);
  color: var(--button-accent-text);
}

.button--accent:active {
  background: var(--button-accent-active-bg);
}

.button--secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.button--secondary:hover {
  background: var(--button-secondary-hover-bg);
  color: var(--button-secondary-text);
}

.button--outline {
  color: var(--button-outline-text);
  border-color: var(--button-outline-border);
  background: var(--button-outline-bg);
  font-weight: var(--font-weight-semibold);
}

.button--outline:hover {
  background: var(--button-outline-hover-bg);
}

.button .icon {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}

.site-header {
  position: relative;
  z-index: var(--layer-dropdown);
  padding-inline: var(--space-4);
  background: var(--color-white);
}

.header-top {
  max-width: var(--header-max);
  min-height: var(--header-height);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: block;
  flex: none;
  width: var(--brand-logo-width);
}

.brand img {
  width: 100%;
  height: var(--brand-logo-height);
  object-fit: contain;
}

.header-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
}

.header-phone {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18-28);
  color: var(--phone-color);
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
}

.header-phone:hover {
  color: var(--phone-hover-color);
}

.small-link {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.header-location,
.header-hours {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  color: var(--text-secondary);
}

.header-email {
  color: var(--text-secondary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-actions .button {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  white-space: nowrap;
}

.search-toggle,
.mobile-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  background: var(--color-turquoise);
  color: var(--color-white);
}

.mobile-menu-button {
  display: none;
  background: var(--surface-soft);
  color: var(--color-primary);
}

.nav-shell {
  max-width: var(--header-max);
  min-height: var(--nav-height);
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-2) var(--space-6);
  box-shadow: var(--header-shadow);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  font-weight: var(--font-weight-semibold);
}

.main-nav>a {
  white-space: nowrap;
  padding-block: var(--space-2);
}

.mega-menu summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-2);
  white-space: nowrap;
}

.mega-menu summary::-webkit-details-marker {
  display: none;
}

.mega-menu summary .icon {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}

.mega-menu[open] summary {
  color: var(--color-blue);
}

.mega-menu[open] summary .icon {
  transform: rotate(180deg);
}

.mega-panel {
  position: absolute;
  top: calc(100% - var(--space-3));
  left: var(--space-4);
  right: var(--space-4);
  max-width: var(--container-max);
  margin: auto;
  background: var(--surface-soft);
  padding: var(--space-10);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-8);
}

.mega-panel h3 {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18-28);
  margin-bottom: var(--space-5);
}

.mega-panel a {
  display: block;
  margin-block: var(--space-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.nav-actions {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex-shrink: 0;
}

.nav-actions .button {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
}

.accessibility-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  white-space: nowrap;
}

.accessibility-toggle:hover {
  color: var(--color-primary);
}

.site-search {
  display: flex;
  gap: var(--space-2);
  margin: 0 auto var(--space-4);
  max-width: var(--container-max);
  padding: var(--space-2);
  background: var(--surface-soft);
}

.site-search input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-turquoise);
  background: var(--color-white);
}

.hero {
  position: relative;
  height: var(--hero-height);
  background: var(--gradient-brand);
  color: var(--color-white);
  overflow: hidden;
}

.hero-inner {
  height: 100%;
  position: relative;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: var(--hero-copy-width);
  padding-top: var(--hero-copy-top);
}

.hero h1 {
  font-size: var(--heading-page-size);
  line-height: var(--heading-page-line-height);
  letter-spacing: var(--letter-spacing-heading);
  margin: 0 0 var(--space-6);
}

.hero-copy p {
  font-size: var(--font-size-20);
  line-height: var(--line-height-20-30);
  max-width: var(--hero-description-width);
  margin-bottom: var(--space-10);
}

.hero-cta {
  min-width: var(--hero-action-min-width);
  min-height: var(--field-min-height);
}

.hero-person {
  position: absolute;
  bottom: 0;
  right: var(--space-12);
  width: var(--hero-person-width);
  height: calc(100% - var(--space-6));
  object-fit: contain;
  object-position: bottom;
}

.hero-ribbon {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--hero-ribbon-width);
  height: 100%;
  color: var(--color-turquoise);
  max-width: none;
}

.hero :focus-visible,
.appointment :focus-visible,
.guides-section :focus-visible {
  outline-color: var(--focus-color-inverse);
}

.quick-links {
  position: relative;
  margin-top: calc(-1 * var(--quick-overlap));
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.quick-card {
  min-height: var(--quick-card-min);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
}

.quick-card h2 {
  font-size: var(--font-size-22);
  line-height: var(--line-height-22-22);
  letter-spacing: normal;
  padding: var(--space-1) 0 var(--space-6);
  border-bottom: var(--border-width) solid var(--color-blue-light);
}

.quick-card ul {
  padding: var(--space-3) 0 var(--space-6);
  flex: 1;
}

.quick-card li {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  margin-top: var(--space-5);
}

.quick-card .button {
  padding-inline: var(--space-2);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  min-height: var(--button-card-min-height);
  white-space: nowrap;
}

.appointment {
  padding: var(--appointment-padding);
  border-radius: var(--appointment-radius);
  background: var(--gradient-brand);
  color: var(--color-white);
}

.appointment-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.appointment-heading h2 {
  font-size: var(--font-size-48);
  line-height: var(--line-height-48-48);
}

.appointment-heading p {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18-28);
  margin: 0;
}

.appointment-form {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-5);
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.appointment input:not([type=checkbox]),
.appointment select {
  width: 100%;
  min-height: var(--appointment-control-min-height);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-blue-light);
  color: var(--text-primary);
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
}

.appointment input::placeholder {
  color: var(--color-gray);
  opacity: 1;
}

.appointment select {
  padding-right: var(--space-8);
}

.appointment .button {
  min-height: var(--appointment-control-min-height);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  cursor: pointer;
}

.consent input {
  appearance: none;
  flex: none;
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  margin: var(--space-1) 0 0;
  border: var(--focus-width) solid var(--color-white);
  border-radius: 0;
  background: var(--color-white);
  cursor: pointer;
}

.consent input:checked {
  background: var(--color-primary);
  box-shadow: var(--consent-checked-shadow);
}

.consent span {
  padding-top: var(--space-1);
}

.about-section {
  margin-top: var(--space-10);
}

.about-main {
  height: var(--about-height);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  overflow: hidden;
}

.about-copy {
  align-self: center;
}

.about-copy h2 {
  margin-bottom: var(--space-10);
}

.about-copy p {
  max-width: var(--about-copy-width);
  font-size: var(--font-size-18);
  line-height: var(--line-height-18-28);
}

.about-portrait {
  position: relative;
  overflow: hidden;
}

.about-portrait img {
  position: absolute;
  top: 0;
  right: var(--space-12);
  width: var(--about-portrait-width);
  max-width: 100%;
  height: auto;
}

.facts-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-10);
  background: var(--surface-soft);
  padding: var(--facts-padding);
  border-radius: var(--radius-sm);
}

.medical-plus {
  display: block;
  position: relative;
  width: var(--medical-plus-size);
  height: var(--medical-plus-size);
  margin-bottom: var(--space-6);
}

.medical-plus::before,
.medical-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--color-turquoise);
  border-radius: var(--radius-sm);
}

.medical-plus::before {
  width: 100%;
  height: var(--medical-plus-stroke);
}

.medical-plus::after {
  height: 100%;
  width: var(--medical-plus-stroke);
}

.fact h3 {
  color: var(--color-blue);
  font-size: var(--font-size-22);
  line-height: var(--line-height-22-22);
  margin-bottom: var(--space-3);
}

.fact p {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  margin: 0;
  max-width: var(--fact-copy-width);
}

.carousel-controls {
  display: flex;
  gap: var(--space-3);
  flex: none;
}

.round-button {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  border: 0;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--arrow-bg);
  color: var(--arrow-text);
  padding: var(--space-3);
}

.round-button:hover:not(:disabled),
.round-button--next:not(:disabled) {
  background: var(--arrow-hover-bg);
  color: var(--arrow-hover-text);
}

.round-button:disabled {
  opacity: var(--disabled-opacity);
}

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track>* {
  scroll-snap-align: start;
  min-width: 0;
}

.four-columns {
  grid-auto-columns: calc((100% - var(--space-8) * 3) / 4);
}

.two-columns {
  grid-auto-columns: calc((100% - var(--space-8)) / 2);
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.card-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: var(--card-photo-ratio);
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-transition) var(--motion-easing);
}

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

.service-card-body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card h3 {
  font-size: var(--font-size-20);
  line-height: var(--line-height-20-28);
  font-weight: var(--font-weight-semibold);
  min-height: var(--field-min-height);
  margin-bottom: var(--space-6);
}

.service-card .button {
  padding-inline: var(--space-2);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  min-height: var(--field-min-height);
  margin-top: auto;
}

.feature-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.feature-banner {
  display: block;
  position: relative;
  height: var(--banner-height);
  border-radius: var(--appointment-radius);
  overflow: hidden;
  background: var(--gradient-brand);
  color: var(--color-white);
}

.feature-banner:hover {
  color: var(--color-white);
}

.feature-banner>img {
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  object-fit: cover;
  clip-path: ellipse(90% 80% at 100% 50%);
}

.banner-copy {
  position: relative;
  z-index: 1;
  max-width: 64%;
  height: 100%;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tag {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-turquoise-light);
  color: var(--color-primary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  font-weight: var(--font-weight-bold);
}

.banner-copy h3 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-32-40);
  margin-bottom: var(--space-3);
}

.banner-copy p {
  font-size: var(--font-size-20);
  line-height: var(--line-height-20-28);
  margin: 0;
}

.banner-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  padding: var(--space-5) var(--space-3);
  transform: translateY(-50%);
  background: var(--color-blue);
  color: var(--color-white);
  clip-path: polygon(100% 0,100% 100%,0 50%);
}

.banner-arrow svg {
  margin-left: var(--space-2);
}

.doctor-card>a {
  display: block;
}

.doctor-card img,
.portrait-placeholder {
  height: var(--doctor-photo-height);
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.doctor-card h3 {
  font-size: var(--font-size-22);
  line-height: var(--line-height-22-22);
  color: var(--doctor-name-color);
  margin-bottom: var(--space-3);
  transition: color var(--motion-fast) var(--motion-easing);
}

.doctor-card>a:hover h3 {
  color: var(--doctor-name-hover-color);
}

.doctor-card p {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18-28);
  margin-bottom: 0;
}

.portrait-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.reviews-track {
  gap: var(--space-16);
  grid-auto-columns: calc((100% - var(--space-16)) / 2);
}

.review-card h3 {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  margin-bottom: var(--space-1);
}

.review-source {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  color: var(--text-secondary);
  margin: 0;
}

.review-stars {
  color: var(--color-orange);
  font-size: var(--font-size-22);
  line-height: var(--line-height-22-22);
  margin-block: var(--space-8);
}

.review-card blockquote {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-20);
  line-height: var(--line-height-20-28);
  min-height: var(--review-quote-min-height);
}

.review-card .button {
  min-width: var(--review-action-min-width);
}

.review-clinic {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  margin: var(--space-8) 0 0;
}

.review-clinic span {
  color: var(--color-blue);
}

.diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-8);
}

.diagnostic-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-soft);
}

.diagnostic-photo {
  display: block;
  background: var(--color-turquoise-light);
  aspect-ratio: var(--diagnostic-photo-ratio);
  overflow: hidden;
}

.diagnostic-photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.diagnostic-copy {
  padding: var(--space-8);
}

.diagnostic-copy>span {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  color: var(--color-blue);
  display: block;
  margin-bottom: var(--space-3);
}

.diagnostic-copy h3 {
  font-size: var(--font-size-28);
  line-height: var(--line-height-28-38);
  color: var(--color-blue);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
}

.diagnostic-copy p {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  color: var(--text-secondary);
  margin: 0;
}

.guides-section {
  background: var(--gradient-brand);
  color: var(--color-white);
  padding: var(--space-20) 0;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-8);
}

.guide-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.guide-card>a {
  display: block;
}

.guide-card a:hover {
  color: var(--color-white);
}

.guide-card-main>img {
  width: 100%;
  aspect-ratio: var(--guide-photo-ratio);
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
}

.guide-card h3 {
  font-size: var(--font-size-22);
  line-height: var(--line-height-22-22);
  margin-bottom: var(--space-4);
}

.guide-card>p {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  min-height: var(--space-24);
  margin-bottom: var(--space-6);
}

.guide-card .guide-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
}

.guide-brand {
  display: flex;
  align-items: center;
  flex: 0 0 var(--guide-brand-width);
  width: var(--guide-brand-width);
  height: var(--guide-brand-height);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}

.guide-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--button-min-height);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.guide-card .guide-action:hover {
  color: var(--color-turquoise-light);
}

.guide-meta .icon {
  height: var(--icon-size-small);
  width: var(--icon-size-small);
}

.insurance-section {
  text-align: center;
}

.insurance-section>p {
  max-width: var(--insurance-copy-width);
  margin: var(--space-6) auto var(--space-10);
  color: var(--text-secondary);
}

.insurance-details {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-3);
}

.insurance-details>div {
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.insurance-details .icon {
  color: var(--color-turquoise);
  width: var(--space-8);
  height: var(--space-8);
}

.insurance-details strong {
  font-size: var(--font-size-20);
  line-height: var(--line-height-20-28);
  color: var(--color-primary);
}

.insurance-details a,
.insurance-details span {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
}

.patient-resources {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-8);
}

.document-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  height: var(--document-height);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-blue-light);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
}

.document-brand {
  display: block;
  margin-bottom: var(--space-8);
}

.document-brand img {
  width: var(--document-logo-width);
  height: auto;
}

.document-label {
  font-size: var(--document-copy-size);
  line-height: var(--line-height-14-18);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing-eyebrow);
  margin-bottom: var(--space-4);
}

.document-preview>strong {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18-28);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.document-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.document-lines>span {
  display: flex;
  gap: var(--space-2);
  font-size: var(--document-copy-size);
  line-height: var(--line-height-14-18);
}

.document-lines .icon {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  color: var(--color-turquoise);
}

.document-bottom {
  font-size: var(--document-copy-size);
  line-height: var(--line-height-14-18);
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-muted);
}

.document-zoom {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  width: var(--space-16);
  height: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  color: var(--color-blue);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-control);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-easing);
}

.document-preview:hover .document-zoom,
.document-preview:focus-visible .document-zoom {
  opacity: 1;
}

.patient-resource h3 {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

.location-address {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  color: var(--color-primary);
}

.location-address .icon {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}

.map-panel {
  height: var(--map-height);
  position: relative;
  overflow: hidden;
  border-radius: var(--appointment-radius);
  background: var(--surface-soft);
}

.map-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-link {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  box-shadow: var(--shadow-panel);
}

.location-section {
  margin-bottom: var(--space-10);
}

.site-footer {
  background: var(--surface-soft);
  margin-top: var(--space-10);
  padding: var(--space-8) 0 var(--space-6);
}

.footer-top {
  display: flex;
  gap: var(--space-20);
  align-items: center;
  margin-bottom: var(--space-8);
}

.footer-top nav {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: var(--space-6);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  font-weight: var(--font-weight-semibold);
}

.footer-details {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr 1fr;
  gap: var(--space-8);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
}

.copyright {
  color: var(--text-secondary);
}

.footer-phone {
  display: block;
  color: var(--color-primary);
  font-size: var(--font-size-28);
  line-height: var(--line-height-28-38);
  margin-bottom: var(--space-5);
  white-space: nowrap;
}

.footer-email {
  color: var(--color-primary);
}

.footer-details>div>p {
  line-height: var(--line-height-16-22);
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-6);
}

.footer-cta .button {
  white-space: nowrap;
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  color: var(--text-secondary);
  margin-top: var(--space-12);
}

.footer-bottom a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-bottom .icon {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}

.content-dialog {
  max-width: var(--dialog-width);
  width: calc(100% - var(--space-8));
  padding: var(--space-12);
  border: 0;
  border-radius: var(--appointment-radius);
  color: var(--text-primary);
  background: var(--color-white);
  box-shadow: var(--dialog-shadow);
  max-height: var(--dialog-max-height);
  overflow: auto;
}

.content-dialog::backdrop {
  background: var(--overlay-backdrop);
}

.dialog-close {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
}

.dialog-content h2 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-32-40);
  margin: var(--space-4) 0 var(--space-6);
}

.dialog-content p {
  margin-bottom: var(--space-6);
}

.dialog-content ul {
  list-style: disc;
  padding-left: var(--space-6);
  margin-block: var(--space-6);
}

.dialog-content li {
  margin-block: var(--space-3);
}

.dialog-eyebrow {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-blue);
}

.request-summary {
  background: var(--surface-soft);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
}

.request-summary dt {
  font-weight: var(--font-weight-bold);
}

.request-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.dialog-footnote {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
  color: var(--text-secondary);
  margin-top: var(--space-6);
}

.dialog-footnote a {
  text-decoration: underline;
}

.no-script-note {
  padding-block: var(--space-6);
}

.utility-page {
  padding-block: var(--space-12);
  min-height: 100vh;
  background: var(--surface-soft);
}

.utility-card {
  max-width: var(--dialog-width);
  margin: auto;
  padding: var(--space-12);
  background: var(--color-white);
  border-radius: var(--appointment-radius);
}

.utility-card h1 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-32-40);
  margin-block: var(--space-6);
}

.utility-card h2 {
  font-size: var(--font-size-22);
  line-height: var(--line-height-22-22);
  margin-block: var(--space-6);
}

.utility-back {
  color: var(--color-primary);
  text-decoration: underline;
}

.request-form {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-8);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field input,
.form-field select,
.request-copy {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-muted);
  background: var(--color-white);
  color: var(--text-primary);
}

.request-copy {
  min-height: var(--request-copy-min-height);
}

.field-error,
.form-errors {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.form-errors {
  padding: var(--space-5);
  background: var(--surface-soft);
  margin-block: var(--space-5);
}

.utility-card .consent input {
  border-color: var(--color-primary);
}

html.high-contrast {
  font-size: var(--high-contrast-scale);
}

.high-contrast .hero,
.high-contrast .appointment,
.high-contrast .guides-section,
.high-contrast .feature-banner {
  background: var(--color-primary);
}

.high-contrast .button--accent,
.high-contrast .search-toggle {
  color: var(--color-ink);
}

.high-contrast .hero-ribbon {
  opacity: var(--accessible-ribbon-opacity);
}

.high-contrast .doctor-card>a:hover h3 {
  color: var(--color-primary);
  text-decoration: underline;
}

.high-contrast .text-muted,
.high-contrast .document-label,
.high-contrast .document-bottom {
  color: var(--color-gray);
}

@media (min-width: 90rem) {
  .header-top {
    padding-inline: var(--space-3);
  }
}

@media (max-width: 85rem) {
  .main-nav {
    gap: var(--space-5);
  }

  .nav-actions {
    gap: var(--space-4);
  }

  .nav-actions .accessibility-toggle span {
    display: none;
  }

  .header-email {
    display: none;
  }

  .hero-person {
    right: 0;
  }

  .quick-card {
    padding-inline: var(--space-6);
  }

  .appointment {
    padding: var(--space-12);
  }

  .service-card-body {
    padding: var(--space-6);
  }

  .document-preview {
    padding: var(--space-5);
  }

  .footer-top {
    gap: var(--space-10);
  }
}

@media (max-width: 64rem) {
  .header-hours {
    display: none;
  }

  .header-top {
    gap: var(--space-4);
  }

  .main-nav {
    gap: var(--space-4);
  }

  .nav-shell {
    padding-inline: var(--space-3);
    gap: var(--space-3);
  }

  .main-nav>a {
    font-size: var(--font-size-14);
  }

  .nav-actions>.button {
    padding-inline: var(--space-4);
  }

  .main-nav>a[href='#medical-exams'] {
    display: none;
  }

  .hero h1 {
    font-size: var(--font-size-48);
    line-height: var(--line-height-48-48);
  }

  .hero-copy {
    max-width: 55%;
  }

  .hero-copy p {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
  }

  .hero-person {
    width: 45%;
    right: 0;
    height: 95%;
  }

  .quick-links {
    gap: var(--space-4);
  }

  .quick-card h2 {
    font-size: var(--font-size-20);
    line-height: var(--line-height-20-28);
  }

  .quick-card {
    padding: var(--space-5);
  }

  .quick-card li {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
  }

  .appointment-heading h2,
  h2 {
    font-size: var(--font-size-32);
    line-height: var(--line-height-32-40);
  }

  .appointment-heading {
    grid-template-columns: 1.8fr 1fr;
    margin-bottom: var(--space-8);
  }

  .appointment input:not([type=checkbox]),
  .appointment select {
    padding-inline: var(--space-4);
  }

  .appointment .button {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
  }

  .about-main {
    gap: var(--space-8);
  }

  .about-copy h2 {
    margin-bottom: var(--space-6);
  }

  .about-portrait img {
    right: 0;
  }

  .facts-strip {
    padding: var(--space-8);
    gap: var(--space-6);
  }

  .four-columns {
    grid-auto-columns: calc((100% - var(--space-6) * 2) / 3);
    gap: var(--space-6);
  }

  .banner-copy {
    padding: var(--space-6);
    max-width: 72%;
  }

  .feature-banner {
    height: var(--banner-height-tablet);
  }

  .diagnostics-grid {
    gap: var(--space-6);
  }

  .diagnostic-copy {
    padding: var(--space-6);
  }

  .diagnostic-copy h3 {
    font-size: var(--font-size-22);
    line-height: var(--line-height-22-22);
  }

  .guides-grid {
    grid-template-columns: repeat(2,1fr);
    gap: var(--space-10) var(--space-6);
  }

  .guide-card>p {
    min-height: 0;
  }

  .patient-resources {
    grid-template-columns: repeat(2,1fr);
    gap: var(--space-8);
  }

  .document-preview {
    height: var(--media-height-compact);
    padding: var(--space-8);
  }

  .footer-top {
    align-items: flex-start;
    gap: var(--space-8);
  }

  .footer-top nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-4) var(--space-6);
  }

  .footer-details {
    grid-template-columns: repeat(2,1fr);
    gap: var(--space-8);
  }

  .footer-cta {
    align-items: flex-start;
  }

  .location-address {
    max-width: 50%;
  }
}

@media (max-width: 48rem) {
  .site-header {
    padding-inline: var(--space-4);
  }

  .header-contact,
  .header-location,
  .header-actions>.button {
    display: none;
  }

  .header-actions {
    gap: var(--space-2);
  }

  .mobile-menu-button {
    display: flex;
  }

  .search-toggle,
  .mobile-menu-button {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
  }

  .header-top {
    min-height: var(--header-height);
  }

  .nav-shell {
    display: block;
    padding: var(--space-4);
    box-shadow: none;
    margin-bottom: var(--space-2);
  }

  .js .nav-shell:not(.is-open) {
    display: none;
  }

  .main-nav {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-16);
  }

  .main-nav>a,
  .mega-menu summary {
    padding-block: var(--space-3);
    font-size: var(--font-size-16);
  }

  .main-nav>a[href='#medical-exams'] {
    display: block;
  }

  .nav-actions {
    margin-top: var(--space-4);
    justify-content: space-between;
  }

  .nav-actions .accessibility-toggle span {
    display: inline;
  }

  .mega-panel {
    position: static;
    padding: var(--space-5);
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    box-shadow: none;
  }

  .mega-panel h3 {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16-22);
  }

  .site-search {
    margin-top: var(--space-2);
  }

  .site-search .button {
    padding-inline: var(--space-4);
  }

  .site-search .button .icon {
    display: none;
  }

  .hero-copy {
    max-width: 100%;
    padding-top: var(--hero-copy-top);
  }

  .hero h1 {
    font-size: var(--heading-page-compact-size);
    line-height: var(--heading-page-compact-line-height);
    margin-bottom: var(--space-4);
  }

  .hero-copy p {
    max-width: var(--hero-description-width-compact);
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
    margin-bottom: var(--space-6);
  }

  .hero-cta {
    min-width: var(--hero-action-min-width-compact);
    min-height: var(--button-card-min-height);
  }

  .hero-person {
    width: var(--hero-person-width);
    height: var(--media-height-medium);
    right: 50%;
    transform: translateX(50%);
    max-width: 100%;
    object-position: bottom;
  }

  .hero-ribbon {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 58%;
    right: -10%;
  }

  .quick-links {
    grid-template-columns: repeat(2,1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .quick-card {
    padding: var(--space-5);
    min-height: var(--quick-card-min-compact);
  }

  .quick-card h2 {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
    padding-bottom: var(--space-4);
  }

  .quick-card li {
    margin-top: var(--space-4);
  }

  .quick-card .button {
    white-space: normal;
    min-height: var(--button-card-min-height);
    padding-inline: var(--space-2);
  }

  .quick-card ul {
    padding-bottom: var(--space-5);
  }

  .appointment {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--appointment-radius);
  }

  .appointment-heading {
    display: block;
    margin-bottom: var(--space-8);
  }

  .appointment-heading h2 {
    font-size: var(--font-size-28);
    line-height: var(--line-height-28-38);
    margin-bottom: var(--space-4);
  }

  .appointment-heading p {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16-22);
  }

  .appointment-form {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .appointment input:not([type=checkbox]),
  .appointment select,
  .appointment .button {
    min-height: var(--field-min-height);
  }

  .form-column {
    gap: var(--space-4);
  }

  .consent {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
  }

  h2 {
    font-size: var(--heading-section-compact-size);
    line-height: var(--heading-section-compact-line-height);
  }

  .section-heading {
    align-items: flex-start;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
  }

  .section-heading h2 {
    max-width: 80%;
  }

  .carousel-controls {
    gap: var(--space-2);
  }

  .round-button {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    padding: var(--space-3);
  }

  .section-heading:has(.carousel-controls) h2 {
    max-width: calc(100% - var(--carousel-controls-reserved-width));
  }

  .about-section {
    margin-top: var(--space-12);
  }

  .about-main {
    display: block;
    height: auto;
  }

  .about-copy h2 {
    margin-bottom: var(--space-6);
  }

  .about-copy p {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
    margin-bottom: var(--space-8);
  }

  .about-portrait {
    height: var(--portrait-height-compact);
  }

  .about-portrait img {
    width: var(--about-portrait-width-compact);
    right: 50%;
    transform: translateX(50%);
  }

  .facts-strip {
    grid-template-columns: repeat(2,1fr);
    gap: var(--space-8);
    padding: var(--space-8) var(--space-6);
  }

  .fact h3 {
    font-size: var(--font-size-20);
    line-height: var(--line-height-20-28);
  }

  .fact p {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
  }

  .medical-plus {
    margin-bottom: var(--space-4);
    width: var(--space-10);
    height: var(--space-10);
  }

  .four-columns {
    grid-auto-columns: calc((100% - var(--space-5)) / 2);
    gap: var(--space-5);
  }

  .service-card-body {
    padding: var(--space-4);
  }

  .service-card h3 {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
    margin-bottom: var(--space-4);
  }

  .service-card .button {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
    padding: var(--space-3);
    min-height: var(--field-min-height);
  }

  .feature-banners {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .feature-banner {
    height: var(--banner-height-compact);
  }

  .banner-copy {
    padding: var(--space-8);
    max-width: 70%;
  }

  .banner-copy h3 {
    font-size: var(--font-size-28);
    line-height: var(--line-height-28-38);
  }

  .banner-copy p {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
  }

  .doctor-card img,
  .portrait-placeholder {
    height: var(--portrait-height-compact);
  }

  .doctor-card h3 {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
    margin-bottom: var(--space-1);
  }

  .doctor-card p {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16-22);
  }

  .reviews-track {
    grid-auto-columns: 100%;
    gap: var(--space-8);
  }

  .review-card blockquote {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
    min-height: 0;
  }

  .review-stars {
    margin-block: var(--space-6);
  }

  .review-clinic {
    margin-top: var(--space-6);
  }

  .diagnostics-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .diagnostic-photo {
    aspect-ratio: var(--diagnostic-photo-ratio);
  }

  .diagnostic-copy h3 {
    font-size: var(--font-size-28);
    line-height: var(--line-height-28-38);
  }

  .guides-section {
    padding-block: var(--space-12);
  }

  .guides-section .section-heading {
    flex-direction: column;
    gap: var(--space-6);
  }

  .guides-section .section-heading h2 {
    max-width: 100%;
  }

  .guides-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .guide-card h3 {
    font-size: var(--font-size-22);
    line-height: var(--line-height-22-22);
  }

  .guide-card>p {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18-28);
    margin-bottom: var(--space-5);
  }

  .guide-card-main>img {
    margin-bottom: var(--space-5);
  }

  .insurance-section>p {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16-22);
    margin-top: var(--space-4);
  }

  .insurance-details {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .patient-resources {
    gap: var(--space-6) var(--space-4);
  }

  .document-preview {
    padding: var(--space-4);
    height: var(--media-height-medium);
  }

  .document-brand {
    margin-bottom: var(--space-5);
  }

  .document-label {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
    letter-spacing: normal;
  }

  .document-preview>strong {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16-22);
    margin-bottom: var(--space-4);
  }

  .document-lines {
    gap: var(--space-3);
  }

  .document-lines .icon {
    display: none;
  }

  .document-bottom {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
  }

  .document-zoom {
    width: var(--space-10);
    height: var(--space-10);
    right: var(--space-2);
    bottom: var(--space-2);
    opacity: 1;
  }

  .document-zoom .icon {
    width: var(--space-5);
    height: var(--space-5);
  }

  .location-section .section-heading {
    flex-direction: column;
    gap: var(--space-4);
  }

  .location-address {
    max-width: 100%;
    font-size: var(--font-size-14);
    line-height: var(--line-height-14-18);
  }

  .map-link {
    left: var(--space-4);
    bottom: var(--space-4);
  }

  .footer-top {
    display: block;
  }

  .footer-top .brand {
    margin-bottom: var(--space-8);
  }

  .footer-top nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-details {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-phone {
    font-size: var(--font-size-28);
    line-height: var(--line-height-28-38);
    margin-bottom: var(--space-3);
  }

  .footer-details .copyright {
    order: 4;
    margin-top: var(--space-4);
  }

  .footer-cta {
    gap: var(--space-4);
  }

  .footer-bottom {
    align-items: flex-start;
    gap: var(--space-5);
    flex-direction: column;
    margin-top: var(--space-8);
  }

  .content-dialog {
    padding: var(--space-10) var(--space-6);
    max-height: var(--dialog-max-height-compact);
  }

  .dialog-content h2 {
    font-size: var(--font-size-28);
    line-height: var(--line-height-28-38);
  }

  .request-summary {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-5);
  }

  .request-summary dd {
    margin-bottom: var(--space-3);
  }

  .utility-card {
    padding: var(--space-8) var(--space-6);
  }
}

@media (max-width: 25rem) {
  .quick-links {
    grid-template-columns: 1fr;
  }

  .quick-card {
    min-height: auto;
    padding: var(--space-6);
  }

  .quick-card li {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16-22);
  }

  .quick-card .button {
    margin-top: var(--space-2);
  }

  .four-columns {
    grid-auto-columns: 82%;
  }

  .patient-resources {
    grid-template-columns: 1fr;
  }

  .document-preview {
    height: var(--media-height-compact);
    padding: var(--space-8);
  }

  .document-lines .icon {
    display: block;
  }

  .facts-strip {
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .banner-copy {
    padding: var(--space-6);
  }

  .header-actions {
    gap: var(--space-1);
  }

  .hero-person {
    height: var(--media-height-compact);
  }

  .guide-card-main>img {
    aspect-ratio: var(--guide-photo-ratio);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none!important;
    animation: none!important;
  }

  .card-photo:hover img {
    transform: none;
  }
}

.email-fallback {
  margin-top: var(--space-6);
}

.email-fallback summary {
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
}

.email-fallback .request-copy {
  margin-top: var(--space-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14-18);
}

/* Shared navigation now exposes the implemented catalogue. */
.main-nav a[aria-current="page"] {
  color: var(--link-color);
}

.mega-panel .mega-all-services {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  grid-column: 1 / -1;
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-color);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* Let enlarged navigation wrap instead of creating horizontal page overflow. */
.high-contrast .header-top,
.high-contrast .main-nav {
  flex-wrap: wrap;
}

.high-contrast .main-nav {
  min-width: 0;
  gap: var(--space-4);
}

@media (max-width: 48rem) {
  .nav-actions {
    flex-wrap: wrap;
  }
}