.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100%;
  z-index: 40;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-sm);
  color: var(--color-accent-contrast);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.demo-banner {
  margin: 0;
  padding-block: var(--space-xs);
  background-color: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.demo-banner p {
  margin: 0;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  text-decoration: none;
  min-height: var(--touch-min);
}

.site-header__brand img {
  width: auto;
  height: 2.5rem;
  max-width: min(100%, 12.5rem);
  flex-shrink: 0;
}

.site-header__brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header__brand:hover {
  color: var(--color-link);
}

.site-header__tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-sm);
}

.site-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.site-header__action:hover {
  color: var(--color-link);
}

.site-header__icon {
  display: block;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.nav-toggle__icon {
  display: block;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.nav-primary {
  flex: 1 1 100%;
  max-width: 100%;
}

.nav-primary ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-primary a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-2xs);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.nav-primary a:hover,
.nav-primary a[aria-current="page"] {
  text-decoration: underline;
}

.nav-primary__pair {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.nav-primary__summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-2xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.nav-primary__summary::-webkit-details-marker {
  display: none;
}

.nav-primary__summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.nav-primary details[open] > .nav-primary__summary {
  text-decoration: underline;
}

.nav-primary .is-current > details > .nav-primary__summary,
.nav-primary .is-current > .nav-primary__pair > a[aria-current="page"] {
  text-decoration: underline;
}

.nav-mega__list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.is-nav-open,
html.is-nav-open body {
  overflow: hidden;
}

/* Keep in sync with :root --bp-nav / --screen-lg (Tailwind lg, 64rem). */
@media (max-width: 63.999rem) {
  .site-header__inner {
    padding-block: var(--space-xs);
    gap: var(--space-2xs);
  }

  .site-header__tools {
    gap: var(--space-2xs);
  }

  .site-header__brand img {
    width: 2rem;
    height: 2rem;
  }

  .site-header__cta.button {
    display: none;
  }

  .site-header__action-label {
    display: none;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .js .nav-primary {
    display: none;
    flex-basis: 100%;
    padding-block: var(--space-sm);
  }

  .js .site-header.is-nav-open {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .js .site-header.is-nav-open .nav-primary {
    display: block;
  }

  .js .nav-primary > ul,
  .js .nav-primary .nav-primary__sub,
  .js .nav-primary .nav-mega__list {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .js .nav-primary .nav-primary__sub,
  .js .nav-primary .nav-mega__list {
    padding-inline-start: var(--space-md);
  }

  .js .nav-primary__pair {
    position: relative;
    display: block;
    width: 100%;
  }

  .js .nav-primary__pair > a {
    padding-inline-end: var(--touch-min);
  }

  .js .nav-primary__pair > details {
    width: 100%;
  }

  .js .nav-primary__pair > details > .nav-primary__summary {
    position: absolute;
    top: 0;
    right: 0;
  }

  .js .nav-mega {
    display: grid;
    gap: var(--space-sm);
    padding-block-start: var(--space-xs);
  }

  .js .nav-mega__grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: minmax(0, 1fr);
  }

  .js .nav-mega__intro,
  .js .nav-mega__media,
  .js .nav-mega__note {
    display: none;
  }

  .js .nav-mega__heading {
    margin: 0;
    padding-inline: var(--space-2xs);
    font-weight: var(--font-weight-semibold);
  }

  .js .nav-mega__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding-inline-start: var(--space-md);
    list-style: none;
  }

  .js .nav-mega__cta {
    margin: 0;
    padding-inline: var(--space-2xs);
  }

  .js .nav-mega__cta .button {
    width: auto;
  }
}

@media (min-width: 64rem) {
  /* Keep in sync with :root --bp-nav / --screen-lg (Tailwind lg). */
  .nav-toggle {
    display: none !important;
  }

  .site-header__email {
    display: none;
  }

  .site-header__icon {
    display: none;
  }

  .site-header__tel {
    min-width: 0;
    justify-content: flex-start;
  }

  .nav-primary__item--branch {
    position: relative;
  }

  .nav-primary details > .nav-primary__sub {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 25;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 2rem));
    flex-direction: column;
    flex-wrap: nowrap;
    padding: var(--space-xs);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .nav-primary .nav-primary__sub .nav-primary__item--branch {
    position: relative;
  }

  .nav-primary .nav-primary__sub details > .nav-primary__sub {
    left: 100%;
    top: 0;
  }

  .nav-primary {
    position: relative;
  }

  .nav-primary__item--branch.nav-primary__item--mega {
    position: static;
  }

  .nav-primary__item--mega details > .nav-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 26;
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-block-start: var(--space-2xs);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .nav-mega__intro,
  .nav-mega__note,
  .nav-mega__heading,
  .nav-mega__cta {
    margin: 0;
  }

  .nav-mega__intro,
  .nav-mega__note {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
  }

  .nav-mega__heading {
    font-weight: var(--font-weight-semibold);
  }

  .nav-mega__grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: start;
  }

  .nav-mega__list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-mega__featured {
    padding: var(--space-sm);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .nav-mega__media {
    margin-block-end: var(--space-xs);
  }

  .nav-mega__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 8rem;
    object-fit: cover;
  }

  .nav-mega__cta .button {
    min-height: var(--touch-min);
  }
}

.announcement {
  background-color: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

.announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
}

.announcement__text {
  margin: 0;
  flex: 1 1 12rem;
}

.announcement__dismiss {
  display: none;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-2xs) var(--space-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--font-weight-semibold);
}

.js .announcement__dismiss {
  display: inline-flex;
}

.breadcrumbs {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-xs);
  color: var(--color-text-muted);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text-muted);
}

.site-footer {
  margin-top: auto;
  padding-block: var(--space-lg);
  background-color: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.site-footer a {
  color: var(--color-link);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-lg);
  overflow-wrap: anywhere;
}

.site-footer__heading {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-sm);
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.site-footer__logo img {
  width: auto;
  height: 2.5rem;
  max-width: min(100%, 12.5rem);
  flex-shrink: 0;
}

.site-footer__nav ul,
.site-footer__social ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a,
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.site-footer__social-link {
  justify-content: center;
  min-width: var(--touch-min);
  color: var(--color-text);
  text-decoration: none;
}

.site-footer__social-link:hover {
  color: var(--color-link);
}

.site-footer__social-icon {
  display: block;
  fill: currentColor;
}

.trustindex-embed,
.reviews-embed {
  max-width: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.reviews-fallback {
  margin: 0 0 var(--space-sm);
}

.embed-section .video-preview,
.embed-section .trustindex-embed {
  max-width: 100%;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__legal-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.legal-notice h2 {
  margin-top: var(--space-lg);
}

.legal-notice h2:first-child {
  margin-top: 0;
}

.legal-notice__warning {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.legal-notice__warning p {
  margin: 0;
}

.legal-notice ul {
  margin: 0 0 var(--space-md);
  padding-left: 1.25rem;
}

.legal-notice__updated {
  margin-top: var(--space-lg);
  color: var(--color-text-muted);
}

@media (min-width: 40rem) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64rem) {
  /* Keep in sync with :root --bp-nav / --screen-lg (Tailwind lg). */
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.contact-bar {
  display: none;
}

@media (max-width: 63.999rem) {
  /* Keep in sync with :root --bp-nav / --screen-lg (Tailwind lg). */
  .has-contact-bar {
    padding-bottom: calc(var(--touch-min) + var(--space-sm) + env(safe-area-inset-bottom, 0px));
  }

  html.is-nav-open .has-contact-bar {
    padding-bottom: 0;
  }

  .contact-bar {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  html.is-nav-open .contact-bar {
    display: none;
  }

  .contact-bar__inner {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .contact-bar__action {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    padding: var(--space-xs);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
  }

  .contact-bar__action--primary {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-xs) var(--space-md);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-align: center;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.button:hover {
  background-color: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: var(--color-on-secondary);
}

.button--secondary {
  background-color: transparent;
  color: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
}

.button--secondary:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-link-hover);
  border-color: var(--color-link-hover);
}

.hero {
  padding-block: var(--space-2xl);
  background-color: var(--color-bg-subtle);
}

.hero--standard {
  /* Default hero. Split, background, and video variants are later tickets. */
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
}

.hero__title {
  margin-bottom: var(--space-sm);
  overflow-wrap: anywhere;
}

.hero__eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__lead {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lg);
  max-width: var(--screen-sm);
  overflow-wrap: anywhere;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
}

.hero__media {
  max-width: var(--screen-sm);
}

.hero__media img {
  width: 100%;
  height: auto;
}

.hero--align-center .hero__copy,
.hero--align-center .hero__inner {
  text-align: center;
}

.hero--align-center .hero__lead,
.hero--align-center .hero__media,
.hero--align-center .hero__actions {
  margin-inline: auto;
}

.hero--align-center .hero__actions {
  justify-content: center;
}

.hero--background,
.hero--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-on-dark);
  background-color: var(--color-text);
}

.hero--background .hero__backdrop,
.hero--video .hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--background .hero__backdrop img,
.hero--video .hero__backdrop img,
.hero--video .hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero--background::after,
.hero--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgb(18 24 31 / 0.75);
}

.hero--background .hero__inner,
.hero--video .hero__inner {
  position: relative;
  z-index: 2;
}

.hero--background .hero__eyebrow,
.hero--video .hero__eyebrow {
  color: rgb(255 255 255 / 0.88);
}

.hero--background .button--secondary,
.hero--video .button--secondary {
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.hero--background .button--secondary:hover,
.hero--video .button--secondary:hover {
  background-color: var(--color-on-dark);
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .hero--split .hero__inner,
  .hero--split-reverse .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .hero--split .hero__media,
  .hero--split-reverse .hero__media {
    max-width: none;
  }

  .hero--split-reverse .hero__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .hero--split-reverse .hero__media {
    grid-column: 1;
    grid-row: 1;
  }
}

.hero--minimal {
  padding-block: var(--space-lg);
  background-color: transparent;
}

.hero--minimal .hero__title {
  font-size: var(--font-size-xl);
}

.hero--landing .hero__copy {
  max-width: var(--screen-sm);
}

.hero__meta,
.hero__trust {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.hero__form {
  margin-top: var(--space-md);
  max-width: 28rem;
}

.hero--background .hero__meta,
.hero--background .hero__trust,
.hero--video .hero__meta,
.hero--video .hero__trust {
  color: rgb(255 255 255 / 0.88);
}

.content-section__title {
  margin-bottom: var(--space-sm);
}

.content-guide h2 {
  margin-top: var(--space-lg);
}

.content-guide h2:first-of-type {
  margin-top: var(--space-md);
}

.cta {
  padding: var(--space-lg);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.cta__title {
  margin-bottom: var(--space-xs);
}

.cta__text {
  margin-bottom: var(--space-md);
}

.form-field {
  margin-bottom: var(--space-md);
}

.form-hint,
.form-error {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--font-size-sm);
}

.form-hint {
  color: var(--color-text-muted);
}

.form-error {
  color: #8a1515;
}

.form-field:focus-within label {
  color: var(--color-text);
}

.pattern-block {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.pattern-block:last-child {
  border-bottom: 0;
}

.pattern-block > h2 {
  margin-top: 0;
}

.richtext > * + * {
  margin-top: var(--space-sm);
}

.richtext h2,
.richtext h3,
.richtext h4 {
  margin-top: var(--space-lg);
  overflow-wrap: anywhere;
}

.richtext a {
  overflow-wrap: anywhere;
}

.richtext blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-bg-subtle);
}

.richtext table {
  width: 100%;
  border-collapse: collapse;
}

.richtext th,
.richtext td {
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  text-align: start;
  overflow-wrap: anywhere;
}

.split-content__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 48rem) {
  .split-content__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split-content--image-start .split-content__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .split-content--image-start .split-content__media {
    grid-column: 1;
    grid-row: 1;
  }
}

.split-content__media img {
  width: 100%;
  height: auto;
}

.split-content__caption {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.media-block img,
.media-block video,
.media-block iframe {
  display: block;
  width: 100%;
  height: auto;
}

.media-block--full {
  margin-inline: 0;
}

.media-block figcaption {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
}

.embed-host {
  position: relative;
  background-color: var(--color-bg-subtle);
  min-height: 12rem;
}

.embed-host iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.embed-host__prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.quote {
  margin: 0;
}

.quote__text {
  font-size: var(--font-size-lg);
}

.quote__cite {
  display: block;
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-style: normal;
}

.meta-list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

.meta-list div {
  margin: 0;
}

.meta-list dt {
  font-weight: var(--font-weight-semibold);
}

.meta-list dd {
  margin: 0;
}

.article-figure {
  margin: 0 0 var(--space-md);
}

.article-figure img {
  width: 100%;
  height: auto;
}

.article-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.article-categories__label {
  margin: var(--space-md) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.category-nav {
  margin: 0 0 var(--space-md);
}

.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-2xs);
  overflow-wrap: anywhere;
}

.category-nav a[aria-current="page"] {
  font-weight: var(--font-weight-semibold);
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-start;
  margin: 0 0 var(--space-md);
}

.article-byline__img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.article-byline__copy {
  flex: 1 1 12rem;
  min-width: 0;
}

.article-byline__author,
.article-byline__role,
.article-byline__dates {
  margin: 0 0 var(--space-2xs);
}

.article-byline__role,
.article-byline__dates {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.parent-link {
  margin: 0;
}

.parent-link a {
  overflow-wrap: anywhere;
}

.author-bio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.author-bio__img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.author-bio__copy {
  flex: 1 1 14rem;
  min-width: 0;
}

.author-bio__role,
.author-bio__expertise {
  color: var(--color-text-muted);
}

.article-toc ol {
  margin: 0;
  padding-left: 1.25rem;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-md);
}

.pagination__pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat-grid,
.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 40rem) {
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stat__value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.feature-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.feature-list svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--color-accent);
}

.steps {
  margin: 0;
  padding-left: 1.25rem;
}

.steps li {
  margin-bottom: var(--space-sm);
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  overflow-wrap: anywhere;
}

.card img {
  width: 100%;
  height: auto;
  margin-bottom: var(--space-sm);
}

.card--news .card__meta--date {
  font-weight: var(--font-weight-semibold);
}

.card--news .card__meta time {
  font-size: var(--font-size-lg);
}

.card__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-lg);
}

.card__meta {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.logo-row {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm);
  list-style: none;
  margin: 0;
}

.logo-row li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.logo-row img {
  width: 6rem;
  height: 6rem;
}

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.review-summary {
  margin: 0;
  color: var(--color-star);
}

.faq details {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-sm);
}

.faq summary {
  cursor: pointer;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.contact-details {
  margin: 0 0 var(--space-md);
}

.gallery {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gallery img,
.before-after img {
  width: 100%;
  height: auto;
}

.map-placeholder {
  padding: var(--space-lg);
  background-color: var(--color-bg-subtle);
  border: 1px dashed var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  .logo-row {
    overflow-x: visible;
    flex-wrap: wrap;
    scroll-snap-type: none;
  }
}

.media-split {
  align-items: center;
}

.media-split__media {
  margin: 0;
}

.media-split__media img {
  width: 100%;
  max-width: 10rem;
  height: auto;
}

.stat-list {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .stat-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stat-list__value {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.stat-list__label {
  margin: 0;
  color: var(--color-text-muted);
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--color-border);
}

.timeline li {
  padding: 0 var(--space-md) var(--space-md);
  overflow-wrap: anywhere;
}

.timeline h3 {
  margin-bottom: var(--space-2xs);
}

.team-list,
.link-list {
  margin: 0;
  padding-left: 1.25rem;
}

.card-grid {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.card__link {
  display: block;
  height: 100%;
  padding: var(--space-md);
  text-decoration: none;
  color: inherit;
}

.card__link:hover .card__title {
  color: var(--color-link);
}

.card__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-lg);
}

.card__link p {
  margin: 0;
  color: var(--color-text-muted);
}

.card__media {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
}

.faq {
  display: grid;
  gap: var(--space-sm);
}

.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-md);
}

.faq__item > summary {
  cursor: pointer;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-semibold);
}

.faq__item p {
  margin: 0 0 var(--space-md);
}

.contact-details p,
.hours-list {
  margin: 0 0 var(--space-xs);
}

.hours-list {
  padding-left: 1.25rem;
}

.form-note {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
}

.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------
   Gallery
   Responsive grid of images with optional captions.
   Works without JavaScript; lightbox enhancement is separate.
   ---------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.gallery--2-col { grid-template-columns: repeat(2, 1fr); }
.gallery--3-col { grid-template-columns: repeat(2, 1fr); }
.gallery--4-col { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 48rem) {
  .gallery--3-col { grid-template-columns: repeat(3, 1fr); }
  .gallery--4-col { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .gallery--4-col { grid-template-columns: repeat(4, 1fr); }
}

.gallery figure {
  margin: 0;
}

.gallery__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.gallery__caption {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------
   Gallery lightbox (progressive enhancement over .gallery)
   Only visible when JS adds the lightbox behaviour.
   ---------------------------------------------------------------- */

.js .gallery figure {
  cursor: pointer;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 80vh;
}

.lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox__caption {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: var(--font-size-xl);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.lightbox__nav:hover {
  opacity: 0.7;
}

.lightbox__nav--prev {
  left: var(--space-xs);
}

.lightbox__nav--next {
  right: var(--space-xs);
}

/* ----------------------------------------------------------------
   Video preview (click-to-load)
   Lightweight poster + play button; iframe created on interaction.
   ---------------------------------------------------------------- */

.video-preview {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #000;
}

.video-preview__poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-preview__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.video-preview__play:hover {
  background: rgba(0, 0, 0, 0.5);
}

.video-preview__play-icon {
  width: 4rem;
  height: 4rem;
  fill: currentColor;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.video-preview__title {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.video-modal__player {
  position: relative;
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.video-modal__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----------------------------------------------------------------
   Dialog primitive
   Native <dialog> with backdrop, focus management, and scroll lock.
   Consumers add content; this provides only the shared shell.
   ---------------------------------------------------------------- */

.dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.85);
  color: var(--color-on-dark);
  overflow: hidden;
  overscroll-behavior: contain;
  z-index: 1000;
}

.dialog:not([open]) {
  display: none;
}

.dialog::backdrop {
  background: transparent;
}

.dialog__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: opacity var(--transition-fast);
}

.dialog__close:hover {
  opacity: 0.7;
}

.dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-xl) var(--space-sm);
}

html.is-dialog-open,
html.is-dialog-open body {
  overflow: hidden;
}

/* ACE preview click-to-select is parked: do not style [data-ace-field] with
   cursor/outline/hover borders. Hooks may remain in HTML for a future redesign;
   ACE ignores ace-select-field postMessages. Edit via composer or Site Options. */
