@layer components {

  /* ——— Floating header ——— */
  .site-header {
    position: fixed;
    top: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - var(--spacing-8));
    max-width: var(--breakpoint-xl);
    padding: var(--spacing-3) var(--spacing-6);
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
  }

  .site-header__logo {
    display: block;
    height: 2.5rem;
    width: auto;
    flex-shrink: 0;
  }

  .site-header__logo img {
    height: 100%;
    width: auto;
    display: block;
  }

  .site-header__nav {
    display: none;
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
  }

  /* Show nav at --breakpoint-lg (1024px) and up — hidden on phone + tablet */
  @media (min-width: 1024px) {
    .site-header__nav {
      display: flex;
    }
  }

  .site-header__nav a {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base);
    white-space: nowrap;
    text-decoration: none;
  }

  .site-header__nav a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }

  /* Desktop nav: parent item with dropdown */
  .site-header__nav-item--has-sub {
    position: relative;
  }

  .site-header__subnav {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--spacing-4));
    margin: 0;
    padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-4);
    min-width: 10rem;
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-lg);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
  }

  .site-header__nav-item--has-sub:hover .site-header__subnav,
  .site-header__nav-item--has-sub:focus-within .site-header__subnav {
    opacity: 1;
    visibility: visible;
  }

  .site-header__subnav li {
    margin: 0;
  }

  .site-header__subnav a {
    display: block;
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 0;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    text-decoration: none;
  }

  .site-header__subnav a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }

  .site-header__cta {
    flex-shrink: 0;
  }

  /* Hamburger: visible only below --breakpoint-lg */
  .site-header__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-base);
  }

  @media (max-width: 1023px) {
    .site-header__menu-btn {
      display: flex;
    }
  }

  .site-header__menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 1.25rem;
    height: 1rem;
  }

  .site-header__menu-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform var(--transition-medium), opacity var(--transition-medium);
  }

  .site-header__menu-btn[aria-expanded="true"] .site-header__menu-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header__menu-btn[aria-expanded="true"] .site-header__menu-icon span:nth-child(2) {
    opacity: 0;
  }

  .site-header__menu-btn[aria-expanded="true"] .site-header__menu-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ——— Mobile drawer (right to left, full width) ——— */
  .mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
  }

  .mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  .mobile-drawer__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(47, 48, 46, 0.5);
    opacity: 0;
    transition: opacity var(--transition-medium);
  }

  .mobile-drawer.is-open .mobile-drawer__overlay {
    opacity: 1;
  }

  .mobile-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    background-color: var(--color-bg-secondary);
    box-shadow: var(--box-shadow-2xl);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-8) var(--spacing-6);
    transform: translateX(100%);
    transition: transform var(--transition-slow) var(--easing-ease-out-quad);
  }

  .mobile-drawer.is-open .mobile-drawer__panel {
    transform: translateX(0);
  }

  .mobile-drawer__close {
    align-self: flex-end;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: var(--font-size-4xl);
    line-height: 1;
    color: var(--color-text-base);
    cursor: pointer;
    margin-bottom: var(--spacing-4);
  }

  .mobile-drawer__close:hover {
    color: var(--color-accent-hover);
  }

  .mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--spacing-8);
  }

  .mobile-drawer__nav>a,
  .mobile-drawer__nav>.mobile-drawer__nav-item--has-sub {
    border-bottom: 1px solid var(--color-border-base);
  }

  .mobile-drawer__nav a {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base);
    padding: var(--spacing-3) 0;
    text-decoration: none;
  }

  .mobile-drawer__nav a:hover {
    color: var(--color-accent-hover);
  }

  /* Mobile nav: sub-items in expandable accordion */
  .mobile-drawer__nav-item--has-sub {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mobile-drawer__nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    width: 100%;
  }

  .mobile-drawer__nav-row>a {
    flex: 1;
    min-width: 0;
  }

  .mobile-drawer__subnav-toggle {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
  }

  .mobile-drawer__subnav-toggle:hover {
    color: var(--color-accent-hover);
  }

  .mobile-drawer__subnav-arrow {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 2px;
    transition: transform var(--transition-medium);
  }

  .mobile-drawer__subnav-toggle[aria-expanded="true"] .mobile-drawer__subnav-arrow {
    transform: rotate(-135deg);
    margin-bottom: -2px;
  }

  .mobile-drawer__subnav {
    margin: 0;
    padding: 0 0 0 var(--spacing-4);
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow) var(--easing-ease-out-quad);
    background-color: var(--color-bg-base);
  }

  .mobile-drawer__nav-item--has-sub.is-open .mobile-drawer__subnav {
    padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-4);
  }

  .mobile-drawer__nav-item--has-sub.is-open .mobile-drawer__subnav {
    max-height: 20rem;
  }

  .mobile-drawer__subnav li {
    margin: 0;
  }

  .mobile-drawer__subnav a {
    display: block;
    font-size: var(--font-size-md);
    padding: var(--spacing-2) 0;
  }

  .mobile-drawer__cta {
    margin-top: auto;
    padding-top: var(--spacing-6);
  }

  .mobile-drawer__cta .btn-primary {
    width: 100%;
    justify-content: center;
  }

  @media (min-width: 1024px) {
    .mobile-drawer {
      display: none;
    }
  }

  /* ——— Hero ——— */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    background-color: #2F302E;
  }

  .hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(47, 48, 46, 0.6) 0%,
        rgba(47, 48, 46, 0.35) 50%,
        transparent 100%);
    pointer-events: none;
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    padding: var(--spacing-16) var(--spacing-6) var(--spacing-16) var(--spacing-8);
  }

  .hero__title {
    font-size: clamp(var(--font-size-5xl), 5vw, var(--font-size-6xl));
    color: var(--color-bg-secondary);
    margin-bottom: var(--spacing-4);
    line-height: 1.15;
    max-width: 16ch;
  }

  .hero__subtitle {
    font-family: var(--font-arimo);
    font-size: var(--font-size-lg);
    color: var(--color-bg-secondary);
    margin-bottom: var(--spacing-8);
    line-height: var(--line-height-lg);
    opacity: 0.95;
  }

  @media (min-width: 768px) {
    .hero__subtitle {
      font-size: var(--font-size-xl);
    }
  }

  @media (min-width: 1024px) {
    .hero__title {
      font-size: clamp(var(--font-size-6xl), 6vw, var(--font-size-8xl));
    }

    .hero__subtitle {
      font-size: var(--font-size-2xl);
    }
  }

  .hero__cta {
    display: inline-block;
  }

  /* Hero variant: text shadow only (no overlay) */
  .hero--text-shadow::before {
    display: none;
  }

  .hero--text-shadow .hero__title {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.8),
      0 2px 8px rgba(0, 0, 0, 0.6),
      0 4px 16px rgba(0, 0, 0, 0.5);
  }

  .hero--text-shadow .hero__subtitle {
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.8),
      0 2px 6px rgba(0, 0, 0, 0.6);
  }

  /* ——— Welcome section ——— */
  .welcome {
    background-color: var(--color-bg-base);
    padding: var(--spacing-16) var(--spacing-6);
  }

  .welcome__inner {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
    align-items: center;
  }

  @media (min-width: 1024px) {
    .welcome__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-16);
    }
  }

  .welcome__title {
    font-size: var(--font-size-3xl);
    color: var(--color-text-base);
    margin-bottom: var(--spacing-2);
  }

  @media (min-width: 768px) {
    .welcome__title {
      font-size: var(--font-size-4xl);
    }
  }

  .welcome__subtitle {
    font-family: var(--font-gelasio);
    font-size: var(--font-size-xl);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-base);
    margin-bottom: var(--spacing-6);
  }

  .welcome__text {
    font-family: var(--font-arimo);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin-bottom: var(--spacing-4);
  }

  .welcome__text:last-of-type {
    margin-bottom: var(--spacing-8);
  }

  .welcome__cta {
    display: inline-block;
  }

  .welcome__media {
    order: -1;
  }

  @media (min-width: 1024px) {
    .welcome__media {
      order: unset;
    }
  }

  .welcome__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center 25%;
  }

  @media (min-width: 1024px) {
    .welcome__image {
      min-height: 100%;
      max-height: 32rem;
      object-fit: cover;
    }
  }

  /* ——— Services section ——— */
  .services {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-16) var(--spacing-6);
  }

  .services__inner {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
  }

  .services__title {
    font-size: var(--font-size-3xl);
    color: var(--color-text-base);
    text-align: center;
    margin-bottom: var(--spacing-12);
  }

  @media (min-width: 768px) {
    .services__title {
      font-size: var(--font-size-4xl);
    }
  }

  .services__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
  }

  @media (min-width: 640px) {
    .services__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .services__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-12);
    }
  }

  .services__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-end;
  }

  .services__icon {
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    min-height: 3.5rem;
    margin: 0 auto var(--spacing-5);
    display: block;
    object-fit: contain;
    object-position: center;
    color: var(--color-icon-base);
    flex-shrink: 0;
  }

  /* Endodontics icon: keep larger so tooth+syringe matches perceived size of other teeth */
  .services__item:nth-child(5) .services__icon {
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem;
    min-height: 5.5rem;
  }

  .services__item-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-base);
    margin-bottom: var(--spacing-2);
  }

  .services__item-desc {
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin-bottom: var(--spacing-3);
    /* max-width: 28ch; */
  }

  .services__link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent-base);
    transition: color var(--transition-medium), text-decoration var(--transition-medium);
  }

  .services__link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
  }

  .services__cta {
    text-align: center;
    margin-top: var(--spacing-12);
  }

  /* ——— Testimonials section ——— */
  .testimonials {
    background-color: var(--color-bg-base);
    padding: var(--spacing-24) var(--spacing-6);
  }

  .testimonials__inner {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
  }

  .testimonials__title {
    font-size: var(--font-size-3xl);
    color: var(--color-text-base);
    text-align: center;
    margin-bottom: var(--spacing-12);
  }

  @media (min-width: 768px) {
    .testimonials__title {
      font-size: var(--font-size-4xl);
    }
  }

  .testimonials__slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .testimonials__track-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    margin-bottom: var(--spacing-2);
  }

  .testimonials__track-container:active {
    cursor: grabbing;
  }

  .testimonials__track {
    display: flex;
    flex-direction: row;
    width: calc(100% * var(--total, 4));
    flex-shrink: 0;
    min-width: 0;
    min-height: 18rem;
    touch-action: pan-y;
    transition: transform var(--transition-slow) var(--easing-ease-out-quad);
  }

  .testimonials__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
    padding: var(--spacing-2) 0;
  }

  .testimonials__prev,
  .testimonials__next {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border-base);
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
      color var(--transition-fast);
  }

  .testimonials__prev:hover,
  .testimonials__next:hover {
    background-color: var(--color-bg-base);
    border-color: var(--color-text-muted);
    color: var(--color-accent-hover);
  }

  .testimonials__prev svg,
  .testimonials__next svg {
    display: block;
  }

  .testimonials__dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
  }

  .testimonials__dot {
    width: .75em;
    height: .75em;
    border-radius: 50%;
    border: none;
    padding: 0;
    background-color: var(--color-border-base);
    cursor: pointer;
    transition: background-color var(--transition-medium), transform var(--transition-medium);
  }

  .testimonials__dot:hover {
    background-color: var(--color-text-muted);
  }

  .testimonials__dot.is-active {
    background-color: var(--color-accent-base);
    transform: scale(1.2);
  }

  .testimonials__card {
    flex: 0 0 calc(100% / var(--total, 4));
    width: calc(100% / var(--total, 4));
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-md);
    padding: var(--spacing-8);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  @media (max-width: 639px) {
    .testimonials__card {
      padding: var(--spacing-4);
    }
  }

  .testimonials__stars {
    display: flex;
    justify-content: flex-start;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-4);
  }

  .testimonials__star {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent-stars);
  }

  .testimonials__star::before {
    content: '★';
    font-size: 1.25rem;
    line-height: 1;
  }

  .testimonials__content {
    margin-bottom: var(--spacing-6);
    text-align: left;
  }

  .testimonials__card.is-expanded .testimonials__content {
    min-height: 0;
  }

  .testimonials__content p,
  .testimonials__content .testimonials__content-text {
    font-family: var(--font-arimo);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin-bottom: var(--spacing-3);
    text-align: left;
  }

  .testimonials__content p:last-child,
  .testimonials__content .testimonials__content-text:last-of-type {
    margin-bottom: 0;
  }

  .testimonials__read-more {
    display: inline-block;
    margin-top: var(--spacing-2);
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent-base);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    -webkit-appearance: none;
    appearance: none;
  }

  .testimonials__read-more:hover {
    color: var(--color-accent-hover);
  }

  .testimonials__author {
    display: flex;
    justify-content: flex-start;
  }

  .testimonials__author-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
  }

  .testimonials__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
  }

  .testimonials__name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-base);
    font-size: var(--font-size-md);
    line-height: 1.25;
  }

  .testimonials__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-family: var(--font-arimo);
  }




  /* ——— Gallery section (full-width office photos) ——— */
  .gallery {
    width: 100%;
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-16) var(--spacing-6);
  }

  .gallery__inner {
    max-width: var(--breakpoint-xl);
    margin-left: auto;
    margin-right: auto;
  }

  .gallery__header {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    padding: 0 0 var(--spacing-8);
  }

  .gallery__title {
    font-size: var(--font-size-3xl);
    color: var(--color-text-base);
    text-align: center;
    margin: 0;
  }

  @media (min-width: 768px) {
    .gallery__title {
      font-size: var(--font-size-4xl);
    }
  }

  .gallery__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-bg-footer);
  }

  .gallery__track {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  @media (min-width: 768px) {
    .gallery__track {
      aspect-ratio: 21 / 9;
    }
  }

  .gallery__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
  }

  .gallery__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }

  .gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
  }

  .gallery__prev,
  .gallery__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border-base);
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    color: var(--color-icon-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow-md);
    transition: background-color var(--transition-medium), border-color var(--transition-medium);
  }

  .gallery__prev {
    left: var(--spacing-3);
  }

  .gallery__next {
    right: var(--spacing-3);
  }

  .gallery__prev:hover,
  .gallery__next:hover {
    background-color: var(--color-bg-footer);
    border-color: var(--color-icon-base);
  }

  .gallery__prev svg,
  .gallery__next svg {
    display: block;
  }

  .gallery__dots {
    position: absolute;
    bottom: var(--spacing-4);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    z-index: 2;
  }

  .gallery__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background-color var(--transition-medium), transform var(--transition-medium);
  }

  .gallery__dot:hover {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .gallery__dot.is-active {
    background-color: var(--color-accent-base);
    transform: scale(1.2);
  }

  /* ——— Our Office section ——— */
  .office {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-16) var(--spacing-6);
  }

  .office__inner {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    align-items: start;
  }

  @media (min-width: 1024px) {
    .office__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-8) var(--spacing-12);
    }

    .office__title {
      grid-column: 1 / -1;
    }
  }

  .office__map-wrap {
    width: 100%;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--color-bg-footer);
    aspect-ratio: 4 / 3;
  }

  .office__map-iframe {
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: block;
  }

  @media (min-width: 768px) {
    .office__map-iframe {
      min-height: 400px;
    }
  }

  .office__title {
    font-size: var(--font-size-3xl);
    color: var(--color-text-base);
    text-align: center;
  }

  @media (min-width: 768px) {
    .office__title {
      font-size: var(--font-size-4xl);
    }
  }

  .office__details {
    margin: 0;
  }

  .office__row {
    display: block;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-base);
  }

  .office__row:first-child {
    padding-top: 0;
  }

  .office__row--hours {
    border-bottom: none;
    padding-bottom: 0;
  }

  .office__label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-base);
    margin: 0 0 var(--spacing-2) 0;
    display: block;
  }

  .office__value {
    font-family: var(--font-arimo);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin: 0;
  }

  .office__value a {
    color: var(--color-accent-base);
    text-decoration: underline;
  }

  .office__value a:hover {
    color: var(--color-accent-hover);
  }

  .office__hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .office__hours-list li {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-base);
    font-size: var(--font-size-md);
  }

  .office__hours-list li:last-child {
    border-bottom: none;
  }

  .office__day {
    font-weight: var(--font-weight-medium);
    display: inline-block;
    min-width: 6.5rem;
  }

  /* ——— Patient Education Resources ——— */
  .patient-resources {
    background-color: var(--color-bg-base);
    padding: var(--spacing-16) var(--spacing-6);
  }

  .patient-resources__inner {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
  }

  .patient-resources__title {
    font-size: var(--font-size-3xl);
    color: var(--color-text-base);
    text-align: center;
    margin-bottom: var(--spacing-12);
  }

  @media (min-width: 768px) {
    .patient-resources__title {
      font-size: var(--font-size-4xl);
    }
  }

  .patient-resources__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
  }

  @media (min-width: 768px) {
    .patient-resources__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .patient-resources__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-8);
    }
  }

  .patient-resources__card {
    background-color: var(--color-bg-base);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-md);
    overflow: hidden;
  }

  .patient-resources__link-wrap {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform var(--transition-medium);
  }

  .patient-resources__link-wrap:hover {
    color: inherit;
  }

  .patient-resources__card:hover .patient-resources__link-wrap {
    transform: translateY(-2px);
  }

  .patient-resources__card:hover .patient-resources__read-more {
    color: var(--color-accent-hover);
    text-decoration: underline;
  }

  .patient-resources__image-wrap {
    position: relative;
    width: calc(100% + 2 * var(--spacing-5));
    margin-left: calc(-1 * var(--spacing-5));
    margin-right: calc(-1 * var(--spacing-5));
    margin-bottom: var(--spacing-4);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-bg-footer);
  }

  .patient-resources__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .patient-resources__tag {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--color-accent-base);
    color: var(--color-bg-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--border-radius-sm);
  }

  .patient-resources__link-wrap {
    padding: 0 var(--spacing-5) var(--spacing-5);
  }

  .patient-resources__meta {
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-2);
  }

  .patient-resources__card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-base);
    margin: 0 0 var(--spacing-2);
    line-height: var(--line-height-sm);
  }

  .patient-resources__author {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-3);
  }

  .patient-resources__snippet {
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin: 0 0 var(--spacing-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .patient-resources__read-more {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent-base);
    transition: color var(--transition-medium), text-decoration var(--transition-medium);
  }

  .patient-resources__cta {
    text-align: center;
    margin-top: var(--spacing-12);
  }

  /* ——— CTA section ——— */
  .cta {
    background-color: var(--color-bg-cta);
    padding: var(--spacing-16) var(--spacing-6);
  }

  .cta__inner {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-8);
    text-align: center;
  }

  @media (min-width: 768px) {
    .cta__inner {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      text-align: left;
    }
  }

  .cta__title {
    font-size: var(--font-size-2xl);
    color: var(--color-text-base);
    margin-bottom: var(--spacing-2);
  }

  @media (min-width: 768px) {
    .cta__title {
      font-size: var(--font-size-3xl);
    }
  }

  .cta__text {
    font-family: var(--font-arimo);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin: 0;
  }

  .cta__action {
    flex-shrink: 0;
  }

  /* ——— Site footer ——— */
  .site-footer {
    background-color: var(--color-bg-footer);
    padding: var(--spacing-12) var(--spacing-6);
  }

  .site-footer__inner {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
    text-align: left;
  }

  @media (min-width: 640px) {
    .site-footer__inner {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .site-footer__inner {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--spacing-8) var(--spacing-10);
    }
  }

  .site-footer__col {
    min-width: 0;
  }

  .site-footer__heading {
    font-family: var(--font-gelasio);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-base);
    margin: 0 0 var(--spacing-4);
  }

  .site-footer__text {
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin: 0;
  }

  .site-footer__line {
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
    margin: 0;
  }

  .site-footer__line+.site-footer__line {
    margin-top: var(--spacing-1);
  }

  .site-footer__line a {
    color: var(--color-accent-base);
    text-decoration: underline;
  }

  .site-footer__line a:hover {
    color: var(--color-accent-hover);
  }

  .site-footer__hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer__hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-4);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-base);
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
  }

  .site-footer__hours-list li:last-child {
    border-bottom: none;
  }

  .site-footer__day {
    flex-shrink: 0;
  }

  .site-footer__time {
    text-align: right;
  }

  .site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .site-footer__nav a {
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    color: var(--color-text-base);
  }

  .site-footer__nav a:hover {
    color: var(--color-accent-hover);
  }

  .site-footer__copy {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--color-border-base);
    font-family: var(--font-arimo);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
  }

}