.pf-page {
  --pf-section-light-bg: var(--pair-light-bg);
  --pf-section-light-color: var(--pair-light-fg);
  --pf-section-light-media-bg: var(--pair-light-media-bg);
  --pf-section-light-pattern: url("/images/practice-area/dog-bites/light-section-pattern.jpg");
  --pf-section-light-pattern-overlay: var(--pair-light-pattern-overlay);
  --pf-section-dark-bg: var(--pair-dark-bg);
  --pf-section-dark-color: var(--pair-dark-fg);
  --pf-section-dark-media-bg: var(--pair-dark-media-bg);
  --pf-section-dark-pattern-overlay: var(--pair-dark-pattern-overlay);
}

.pf-page > :where(.pf-section:nth-child(odd):not(.pf-section--dark)),
.pf-section--light:not(.pf-section--dark) {
  background-image:
    var(--pf-section-light-pattern-overlay),
    var(--pf-section-light-pattern);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.pf-section {
  --pf-section-bg: var(--pair-light-bg);
  --pf-section-color: var(--pair-light-fg);
  --pf-section-media-bg: var(--pair-light-media-bg);
  --heading-color: var(--pair-light-heading);
  --section-title-color: var(--pair-light-heading);
  --section-subtitle-color: var(--pair-light-muted);
  --focus-color: var(--pair-light-focus);
  --field-bg: var(--pair-light-field-bg);
  --field-fg: var(--pair-light-field-fg);
  --field-border: var(--pair-light-field-border);
  --field-focus-bg: var(--pair-light-field-focus-bg);
  --field-focus-fg: var(--pair-light-field-focus-fg);
  --field-focus-border: var(--pair-light-field-focus-border);
  --field-label: var(--pair-light-heading);
  --field-help: var(--pair-light-muted);
  --form-note-color: var(--pair-light-muted);
  --note-warning-color: var(--pair-light-heading);
  --link-bg: var(--pair-light-link-bg);
  --link-fg: var(--pair-light-link-fg);
  --link-hover-bg: var(--pair-light-link-hover-bg);
  --link-hover-fg: var(--pair-light-link-hover-fg);
  --btn-bg: var(--pair-light-btn-secondary-bg);
  --btn-fg: var(--pair-light-btn-secondary-fg);
  --btn-border: var(--pair-light-btn-secondary-border);
  --btn-hover-bg: var(--pair-light-btn-secondary-hover-bg);
  --btn-hover-fg: var(--pair-light-btn-secondary-hover-fg);
  --btn-hover-border: var(--pair-light-btn-secondary-hover-border);
  --btn-primary-bg: var(--pair-light-btn-primary-bg);
  --btn-primary-fg: var(--pair-light-btn-primary-fg);
  --btn-primary-border: var(--pair-light-btn-primary-border);
  --btn-primary-hover-bg: var(--pair-light-btn-primary-hover-bg);
  --btn-primary-hover-fg: var(--pair-light-btn-primary-hover-fg);
  --btn-primary-hover-border: var(--pair-light-btn-primary-hover-border);
  --btn-secondary-bg: var(--pair-light-btn-secondary-bg);
  --btn-secondary-fg: var(--pair-light-btn-secondary-fg);
  --btn-secondary-border: var(--pair-light-btn-secondary-border);
  --btn-secondary-hover-bg: var(--pair-light-btn-secondary-hover-bg);
  --btn-secondary-hover-fg: var(--pair-light-btn-secondary-hover-fg);
  --btn-secondary-hover-border: var(--pair-light-btn-secondary-hover-border);
  --btn-ghost-bg: var(--pair-light-btn-ghost-bg);
  --btn-ghost-fg: var(--pair-light-btn-ghost-fg);
  --btn-ghost-border: var(--pair-light-btn-ghost-border);
  --btn-ghost-hover-bg: var(--pair-light-btn-ghost-hover-bg);
  --btn-ghost-hover-fg: var(--pair-light-btn-ghost-hover-fg);
  --btn-ghost-hover-border: var(--pair-light-btn-ghost-hover-border);
  --card-bg: var(--pair-light-card-bg);
  --card-fg: var(--pair-light-card-fg);
  --card-heading: var(--pair-light-card-heading);
  --card-border: var(--pair-light-card-border);
  --card-hover-bg: var(--pair-light-card-hover-bg);
  --card-hover-fg: var(--pair-light-card-hover-fg);
  --card-hover-heading: var(--pair-light-card-hover-heading);
  --card-hover-border: var(--pair-light-card-hover-border);
  --card-shadow: var(--shadow-sm);
  background-color: var(--pf-section-bg);
  color: var(--pf-section-color);
}

.pf-page > :where(.pf-section:nth-child(even):not(.pf-section--light)),
.pf-section--dark {
  --pf-section-bg: var(--pair-dark-bg);
  --pf-section-color: var(--pair-dark-fg);
  --pf-section-media-bg: var(--pair-dark-media-bg);
  --heading-color: var(--pair-dark-heading);
  --section-title-color: var(--pair-dark-heading);
  --section-subtitle-color: var(--pair-dark-muted);
  --focus-color: var(--pair-dark-focus);
  --field-bg: var(--pair-dark-field-bg);
  --field-fg: var(--pair-dark-field-fg);
  --field-border: var(--pair-dark-field-border);
  --field-focus-bg: var(--pair-dark-field-focus-bg);
  --field-focus-fg: var(--pair-dark-field-focus-fg);
  --field-focus-border: var(--pair-dark-field-focus-border);
  --field-label: var(--pair-dark-heading);
  --field-help: var(--pair-dark-muted);
  --form-note-color: var(--pair-dark-muted);
  --note-warning-color: var(--pair-dark-focus);
  --link-bg: var(--pair-dark-link-bg);
  --link-fg: var(--pair-dark-link-fg);
  --link-hover-bg: var(--pair-dark-link-hover-bg);
  --link-hover-fg: var(--pair-dark-link-hover-fg);
  --btn-bg: var(--pair-dark-btn-secondary-bg);
  --btn-fg: var(--pair-dark-btn-secondary-fg);
  --btn-border: var(--pair-dark-btn-secondary-border);
  --btn-hover-bg: var(--pair-dark-btn-secondary-hover-bg);
  --btn-hover-fg: var(--pair-dark-btn-secondary-hover-fg);
  --btn-hover-border: var(--pair-dark-btn-secondary-hover-border);
  --btn-primary-bg: var(--pair-dark-btn-primary-bg);
  --btn-primary-fg: var(--pair-dark-btn-primary-fg);
  --btn-primary-border: var(--pair-dark-btn-primary-border);
  --btn-primary-hover-bg: var(--pair-dark-btn-primary-hover-bg);
  --btn-primary-hover-fg: var(--pair-dark-btn-primary-hover-fg);
  --btn-primary-hover-border: var(--pair-dark-btn-primary-hover-border);
  --btn-secondary-bg: var(--pair-dark-btn-secondary-bg);
  --btn-secondary-fg: var(--pair-dark-btn-secondary-fg);
  --btn-secondary-border: var(--pair-dark-btn-secondary-border);
  --btn-secondary-hover-bg: var(--pair-dark-btn-secondary-hover-bg);
  --btn-secondary-hover-fg: var(--pair-dark-btn-secondary-hover-fg);
  --btn-secondary-hover-border: var(--pair-dark-btn-secondary-hover-border);
  --btn-ghost-bg: var(--pair-dark-btn-ghost-bg);
  --btn-ghost-fg: var(--pair-dark-btn-ghost-fg);
  --btn-ghost-border: var(--pair-dark-btn-ghost-border);
  --btn-ghost-hover-bg: var(--pair-dark-btn-ghost-hover-bg);
  --btn-ghost-hover-fg: var(--pair-dark-btn-ghost-hover-fg);
  --btn-ghost-hover-border: var(--pair-dark-btn-ghost-hover-border);
  --card-bg: var(--pair-dark-card-bg);
  --card-fg: var(--pair-dark-card-fg);
  --card-heading: var(--pair-dark-card-heading);
  --card-border: var(--pair-dark-card-border);
  --card-hover-bg: var(--pair-dark-card-hover-bg);
  --card-hover-fg: var(--pair-dark-card-hover-fg);
  --card-hover-heading: var(--pair-dark-card-hover-heading);
  --card-hover-border: var(--pair-dark-card-hover-border);
  --card-shadow: none;
}

.pf-section .pf-section__media {
  background: var(--pf-section-media-bg);
}

.pf-page > :where(.pf-section:nth-child(even):not(.pf-section--light)) .pf-section__media,
.pf-section--dark .pf-section__media {
  background: var(--pair-dark-media-bg);
}

.pf-section--light .pf-section__media {
  background: var(--pair-light-media-bg);
}

.page-hero--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--page-hero-overlay, var(--pair-hero-overlay));
  pointer-events: none;
}

.page-hero--overlay {
  --pf-section-y: 0;
  --pf-background-split-height: 0;
  --pf-section-bg: var(--pair-dark-bg);
  --pf-section-color: var(--pair-dark-fg);
  --heading-color: var(--pair-dark-heading);
  --site-title-color: var(--pair-dark-heading);
  --site-subtitle-color: var(--pair-dark-fg);
  --focus-color: var(--pair-dark-focus);
  --btn-primary-bg: var(--pair-dark-btn-primary-bg);
  --btn-primary-fg: var(--pair-dark-btn-primary-fg);
  --btn-primary-border: var(--pair-dark-btn-primary-border);
  --btn-primary-hover-bg: var(--pair-dark-btn-primary-hover-bg);
  --btn-primary-hover-fg: var(--pair-dark-btn-primary-hover-fg);
  --btn-primary-hover-border: var(--pair-dark-btn-primary-hover-border);
  --btn-secondary-bg: var(--pair-dark-btn-secondary-bg);
  --btn-secondary-fg: var(--pair-dark-btn-secondary-fg);
  --btn-secondary-border: var(--pair-dark-btn-secondary-border);
  --btn-secondary-hover-bg: var(--pair-dark-btn-secondary-hover-bg);
  --btn-secondary-hover-fg: var(--pair-dark-btn-secondary-hover-fg);
  --btn-secondary-hover-border: var(--pair-dark-btn-secondary-hover-border);
  --site-title-size: clamp(2.4rem, 4vw, 4.1rem);
  --site-subtitle-size: clamp(1rem, 1.3vw, 1.18rem);
}

.page-hero--overlay .pf-section__layout {
  padding-block: clamp(16px, 3vw, 32px);
}

.page-hero--overlay .pf-section__content {
  display: grid;
  align-content: center;
  gap: clamp(10px, 1.5vw, 18px);
}

.page-hero--overlay .pf-section__inner {
  width: calc(100% - var(--page-gutter));
  z-index: 2;
}

.pf-section--banner-video .pf-section__media {
  aspect-ratio: var(--pf-banner-video-ratio, 20 / 7);
  object-fit: cover;
}

@media (max-width: 1023px) {
  .pf-section--banner-video .pf-section__media {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
  }
}

.pf-section :where(.card:hover, .cardify-p > p:hover, .cardify-li > li:hover, .cardify-a > a:hover) {
  --card-bg: var(--card-hover-bg);
  --card-fg: var(--card-hover-fg);
  --card-heading: var(--card-hover-heading);
  --card-border: var(--card-hover-border);
}

.link--inverse {
  background: var(--pair-dark-link-bg);
  color: var(--pair-dark-link-fg);
}

.link--inverse:hover {
  background: var(--pair-dark-link-hover-bg);
  color: var(--pair-dark-link-hover-fg);
}

.btn--inverse {
  border-color: var(--pair-dark-btn-secondary-border);
  background: var(--pair-dark-btn-secondary-bg);
  color: var(--pair-dark-btn-secondary-fg);
}

.btn--inverse:hover {
  border-color: var(--pair-dark-btn-secondary-hover-border);
  background: var(--pair-dark-btn-secondary-hover-bg);
  color: var(--pair-dark-btn-secondary-hover-fg);
}

.card--dark {
  --card-bg: var(--pair-dark-card-bg);
  --card-fg: var(--pair-dark-card-fg);
  --card-heading: var(--pair-dark-card-heading);
  --card-border: var(--pair-dark-card-border);
  --card-hover-bg: var(--pair-dark-card-hover-bg);
  --card-hover-fg: var(--pair-dark-card-hover-fg);
  --card-hover-heading: var(--pair-dark-card-hover-heading);
  --card-hover-border: var(--pair-dark-card-hover-border);
  --card-shadow: none;
}