/* Keep the shared masthead floating while reserving a small, clear gap above content. */
html body.home-page .site-header,
html body:not(.home-page) .site-header {
  position: fixed !important;
  top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 1300 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/* Phone header measured at up to 68px: reserve it plus a 6px gap. */
html body > #main-content {
  padding-block-start: calc(82px + env(safe-area-inset-top, 0px)) !important;
}

/* Keep page-specific introductory content close, but visibly separate from the header. */
body.service-page .service-hero,
body.article-page .article-detail,
body.article-page .article-hero,
body.articles-page .article-hero,
body.region-page .region-landing,
body.service-area-page .region-landing,
body.legal-page .legal-page-main,
body.delivery-page .delivery-layout,
body.delivery-page .delivery-layout.has-delivery-content {
  padding-block-start: 14px !important;
}

body:not(.home-page):not(.delivery-page):not(.service-page):not(.article-page):not(.articles-page):not(.region-page):not(.service-area-page):not(.legal-page) main > .section:first-child {
  padding-block-start: 14px !important;
}

@media (min-width: 761px) {
  html body > #main-content {
    padding-block-start: calc(82px + env(safe-area-inset-top, 0px)) !important;
  }
}

@media (min-width: 1101px) {
  html body > #main-content {
    padding-block-start: calc(92px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Keep the home banner near the floating header while leaving a visible gap. */
@media (max-width: 760px) {
  html body.home-page main > .hero {
    padding-block-start: 0 !important;
  }
}

/* Reflow text and controls naturally when zoom leaves a very narrow CSS viewport. */
@media (max-width: 360px) {
  html body main :is(h1, h2, h3, p, a, button, li, span, strong) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  html body.home-page main h2 {
    text-wrap: balance !important;
  }

  html body.service-page .service-related-article-grid .article-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
  }

  html body.service-page .service-related-article-grid .article-card-body {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  html body.service-page .service-related-article-grid .article-read {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  html body main .tvc-type-grid,
  html body main .tvc-process ol {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main .delivery-file-action {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 360px) {
  html body main ul,
  html body main ol {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body main li {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html body main li > a {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html body main .service-related-article-grid .article-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
  }

  html body main .service-related-article-grid .article-card-body {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  html body main .service-related-article-grid .article-read {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }
}

@media (max-width: 360px) {
  html body.service-page .service-hero .service-search-tags,
  html body.service-page .service-hero .service-search-tags > *,
  html body.service-page .service-hero .service-search-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.service-page .service-hero .service-search-tags ul,
  html body.service-page .service-hero .service-search-more ul {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body main .service-related-article-grid {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main .service-related-article-grid .article-card {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
  }

  html body main .service-related-article-grid .article-card-image,
  html body main .service-related-article-grid .article-card-body {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* The home page displays its tab bar at 900px, so size its children throughout
   that same range. Otherwise SVGs use the full grid-cell width at 761–900px. */
@media (max-width: 900px) {
  html body .mobile-tabbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: 1fr;
    align-items: stretch;
  }
  html body .mobile-tabbar > a {
    display: flex;
    min-width: 0;
    min-height: 47px;
    max-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 2px;
    border-radius: 15px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
  }
  html body .mobile-tabbar > a > svg {
    display: block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html body .mobile-tabbar > a > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  html body .mobile-tabbar > a > svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    min-height: 16px;
    max-height: 16px;
    flex-basis: 16px;
  }
  html body .mobile-tabbar > a {
    font-size: 8.5px;
  }
}

/* Extreme desktop zoom can leave fewer than 240 CSS pixels even on a phone.
   Keep each action inside its own cell; accessible labels remain on the links. */
@media (max-width: 240px) {
  html body .mobile-tabbar {
    left: 4px !important;
    right: 4px !important;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: 34px !important;
    min-height: 0 !important;
    max-height: 34px !important;
    box-sizing: border-box !important;
    gap: 1px !important;
    padding: 2px !important;
    transform: none !important;
  }
  html body .mobile-tabbar > a {
    min-height: 28px !important;
    max-height: 32px !important;
    padding: 2px 0 !important;
  }
  html body .mobile-tabbar > a > svg {
    width: min(12vw, 14px) !important;
    height: min(12vw, 14px) !important;
    min-width: 0 !important;
    max-width: 14px !important;
    min-height: 0 !important;
    max-height: 14px !important;
    flex: 0 1 auto !important;
  }
  html body .mobile-tabbar > a > span {
    display: none !important;
  }
  html body .site-header {
    top: calc(4px + env(safe-area-inset-top, 0px)) !important;
    width: calc(100% - 8px) !important;
    min-height: clamp(24px, 30vw, 36px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 2px !important;
  }
  html body .site-header .header-cta,
  html body .site-header .brand-text {
    display: none !important;
  }
  html body .site-header .home-menu-toggle,
  html body .site-header .theme-toggle,
  html body .site-header .identity .logo,
  html body .site-header .identity .brand-mark {
    width: clamp(10px, 20vw, 24px) !important;
    height: clamp(10px, 20vw, 24px) !important;
    min-height: 0 !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-basis: auto !important;
  }
  html body .site-header .home-menu-toggle { grid-column: 1 !important; }
  html body .site-header .identity { grid-column: 2 !important; justify-self: center !important; }
  html body .site-header .theme-toggle { grid-column: 3 !important; justify-self: end !important; }
  html body > #main-content {
    padding-block-start: max(calc(82px + env(safe-area-inset-top, 0px)), calc(clamp(24px, 30vw, 36px) + 12px + env(safe-area-inset-top, 0px))) !important;
  }
}

/* At extreme browser zoom, treat the remaining CSS viewport as a narrow
   single-column canvas. Keep footer/contact content readable and in bounds. */
@media (max-width: 240px) {
  html body,
  html body #main-content,
  html body main,
  html body footer,
  html body .site-footer,
  html body .site-footer-minimal {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html body main :is(section, article, aside, div, form, fieldset, ul, ol) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body main :is([class*="grid"], .service-grid, .project-grid, .article-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main :is(.article-listing, .article-listing-feature,
    .article-editorial-grid, .article-featured, .article-card,
    .article-index-grid, .article-card-body, .article-featured-body) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-wrap: anywhere !important;
  }

  html body main :is(.article-meta, .article-card h3, .article-featured h3,
    .article-excerpt-copy, .article-read, time) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body main :is(button, .button, [type="submit"], [type="button"]) {
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.service-page .booking-form {
    min-width: 0 !important;
    padding-inline: 4px !important;
  }

  html body.service-page .booking-form > :is(button, .button, [type="submit"]) {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 3px !important;
    gap: 3px !important;
    font-size: clamp(7px, 8vw, 11px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body .site-footer-minimal .footer-main {
    display: grid !important;
    width: calc(100% - 8px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }

  html body .site-footer-minimal :is(.footer-brand, .footer-contact-list,
    .footer-links, .footer-connect, .footer-bottom, .footer-company-legal,
    .footer-company-legal-facts, .footer-legal-links) {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body .site-footer-minimal .footer-identity {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  html body .site-footer-minimal .footer-logo,
  html body .site-footer-minimal .footer-identity .brand-mark {
    width: clamp(12px, 16vw, 24px) !important;
    height: clamp(12px, 16vw, 24px) !important;
    min-width: 0 !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex: 0 1 auto !important;
  }

  html body .site-footer-minimal .footer-identity strong {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    font-size: clamp(7px, 6vw, 12px) !important;
    letter-spacing: 0 !important;
  }

  html body .site-footer-minimal .footer-contact-link {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 2px 4px !important;
  }

  html body .site-footer-minimal .footer-contact-link span:first-child {
    flex: 0 1 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body .site-footer-minimal .footer-contact-link strong {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body .site-footer-minimal .footer-contact-link .footer-contact-arrow,
  html body .site-footer-minimal .footer-links a span {
    display: none !important;
  }

  html body .contact-strip {
    width: calc(100% - 8px) !important;
    margin-inline: auto !important;
    padding: 8px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  html body .contact-strip :is(*, *::before, *::after) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html body .contact-strip .contact-method {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .floating-contact-widget {
    right: 4px !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(36px, calc(100vw - 8px)) !important;
    height: min(36px, calc(100vw - 8px)) !important;
  }

  html body .floating-contact-trigger {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 120px) {
  html body .floating-contact-widget {
    display: none !important;
  }

  html body .mobile-tabbar {
    display: none !important;
  }
}