/* AdminCMS V3.2 — one outer content width throughout the public site.
   Layered after page themes, site-shell and article-layout: no changes to
   imported HTML, stored SEO data, admin UI or navigation routes. */
:root {
  --cms-content-max: 1280px;
  --cms-content-gutter: clamp(14px, 2.2vw, 28px);
}
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; min-width: 0; }
body, body *, body *::before, body *::after { box-sizing: border-box; }

/* Identical external left/right edges for: header, main image, hero copy,
   service blocks, article, related links and footer. Do not add extra padding
   to a .wrap: its width ALREADY includes the horizontal viewport gutters. */
body .wrap,
body main .hero > .wrap.heroGrid,
body .topbar .wrap.nav,
body #article > .wrap,
body .cms-article-pro > .wrap,
body #article > .container.article,
body .cms-article-pro > .container.article,
body .cms-directory .wrap,
body .cms-contextual-links .wrap,
body main.cms-legacy > .wrap {
  width: min(var(--cms-content-max), calc(100% - 2 * var(--cms-content-gutter))) !important;
  max-width: var(--cms-content-max) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Explicitly reset v3.1's extra inset on some sections. */
body .wrap,
body .topbar .wrap.nav,
body main .hero > .wrap.heroGrid,
body .section > .wrap,
body .sectionTight > .wrap,
body .imageBand .wrap,
body footer .wrap,
body .cms-directory .wrap,
body .cms-contextual-links .wrap,
body #article > .wrap,
body .cms-article-pro > .wrap {
  padding-inline: 0 !important;
}
/* Older pages use .wrap as the article card itself. Keep INNER card padding,
   otherwise their paragraphs would touch the border. */
body main.cms-legacy > .wrap {
  padding: clamp(18px, 2.6vw, 36px) !important;
}

/* A few imported UPS/furniture templates use .container instead of .wrap.
   Keep their page-level sections on the same 1280px outer grid too. */
body main > .container,
body main > section > .container,
body main .hero > .container.heroGrid,
body main .hero > .container.heroFullImage,
body main #article > .container.article {
  width: min(var(--cms-content-max), calc(100% - 2 * var(--cms-content-gutter))) !important;
  max-width: var(--cms-content-max) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}
/* Do not flatten the inset of an entire article-card element. */
body main > section > .container:not(.article):not(.heroText),
body main .hero > .container.heroGrid {
  padding-inline: 0 !important;
}
body main .hero .heroGrid.heroFullImage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  align-items: start !important;
  gap: clamp(10px, 1.2vw, 16px) !important;
}
body main .hero .heroFullImage > .mainVisual {
  grid-area: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: clamp(16px, 2vw, 26px) !important;
  overflow: hidden !important;
}
body main .hero .heroFullImage > .mainVisual img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
body main .hero .heroFullImage > .heroText {
  grid-area: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: clamp(18px, 2.25vw, 30px) !important;
  margin: 0 !important;
  text-align: left !important;
}
body main .hero .heroFullImage > .heroText h1,
body main .hero .heroFullImage > .heroText .lead,
body main .hero .heroFullImage > .heroText .trust { max-width: none !important; margin-inline: 0 !important; }
body main .hero .heroFullImage > .heroText .trust { width: 100%; }


/* Figure and content card occupy the SAME outer width. Image preserves its
   full native 2:1 composition even on narrow screens (no crop or distortion). */
body main .hero > .wrap.heroGrid {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(10px, 1.2vw, 16px) !important;
}
body main .hero .heroCard,
body main .hero .heroText {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
}
body main .hero .heroCard {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: clamp(16px, 2vw, 26px) !important;
}
body main .hero .heroCard > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body main .hero .heroCard .floatingTag { display: none !important; }
body main .hero .heroText { padding: clamp(18px, 2.25vw, 30px) !important; }
body main .hero .heroText > h1 { max-width: none !important; overflow-wrap: anywhere; }
body main .hero .heroText > .heroLead { max-width: 100% !important; }
body main .hero .heroText > :is(.heroActions, .trustRow) { min-width: 0; }

/* Feature grids must shrink rather than enforce fixed minimum column widths.
   Avoid the common 320px mobile horizontal scroll from cards and tables. */
body main :is(.split, .benefitGrid, .processGrid, .categoryGrid2, .careGrid,
              .keywordClusters, .faqGrid, .metricGrid, .officeContent,
              .categoryGrid, .serviceGrid, .cms-service-grid),
body footer :is(.footerTop, .footGrid, .footerActions) { min-width: 0; max-width: 100%; }
body main :is(.benefitGrid, .processGrid, .categoryGrid2, .careGrid,
              .keywordClusters, .faqGrid, .metricGrid, .cms-service-grid) > *,
body main .split > *,
body footer :is(.footerTop, .footGrid, .footerActions) > * { min-width: 0; }
body main :is(.imageFrame, .showcase, .articleShell, .articleContent,
              .panel, .cms-reading-grid, .cms-article-aside, .featureList),
body footer :is(.footCard, .footerBrandCard, .footerContactCard) { min-width: 0; max-width: 100%; }
body main .showcase > img,
body main .imageFrame img,
body #article img,
body .cms-article-pro img {
  max-width: 100% !important;
  height: auto !important;
}
body main :is(.showcase > img, .imageFrame > img) {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
body main :is(pre, table, iframe, video) {
  max-width: 100%;
}
body main pre { overflow-x: auto; white-space: pre; }
body main table { display: block; overflow-x: auto; overscroll-behavior-inline: contain; }
body main :is(h1,h2,h3,h4,p,li,a,small,strong,summary) { overflow-wrap: anywhere; }
body main .cms-reading-grid { min-width: 0; max-width: 100%; }

@media (max-width: 1040px) {
  body main .hero .heroText { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 780px) {
  body main :is(.benefitGrid,.processGrid,.categoryGrid2,.careGrid,.keywordClusters,.metricGrid) {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  body main :is(.faqGrid,.cms-service-grid) { grid-template-columns: minmax(0,1fr); }
  body footer .footerTop { grid-template-columns: minmax(0,1fr); }
  body footer .footGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .cms-search-form { width: 100%; max-width: 100%; }
}
@media (max-width: 640px) {
  :root { --cms-content-gutter: 14px; }
  body main .hero { padding-top: 12px !important; }
  body main .hero .heroText { padding: 17px 15px !important; }
  body main .hero .heroFullImage > .heroText { padding: 17px 15px !important; }
  body main .hero .heroFullImage > .heroText .trust { grid-template-columns: minmax(0,1fr) !important; }
  body main .hero .heroFullImage > .heroText .ctaRow { flex-wrap: wrap; }
  body main .hero .heroFullImage > .heroText .ctaRow > a { flex: 1 1 200px; justify-content: center; }
  body main .hero .heroText > .trustRow,
  body main :is(.benefitGrid,.processGrid,.categoryGrid2,.careGrid,.keywordClusters,
               .faqGrid,.metricGrid,.cms-service-grid),
  body footer :is(.footGrid,.footerTop,.footerActions) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body main :is(.split, .officeContent, .finalCta) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body main .hero .heroCard { border-radius: 17px !important; }
  body main .hero .heroText { border-radius: 16px !important; }
  body .cms-directory .cms-search-form { flex-wrap: wrap; }
  body .cms-directory .cms-search-form input { flex: 1 1 150px; min-width: 0; }
  body .cms-directory .cms-search-form button { flex: 1 1 auto; }
  body footer .footerBottom { flex-direction: column; align-items: flex-start; }
  body main.cms-legacy > .wrap { padding: 18px 15px !important; }
  body .topbar .brand { min-width: 0; flex: 1 1 auto; }
  body .topbar .brand > span { min-width: 0; overflow-wrap: anywhere; }
  body .cms-mobile-nav { flex: 0 0 auto; }
}
@media (max-width: 359px) {
  :root { --cms-content-gutter: 12px; }
  body .topbar .brand { gap: 6px !important; }
  body .topbar .brand img { width: 38px !important; height: 38px !important; }
  body .topbar .brand strong { font-size: 15px !important; }
  body .topbar .brand small { font-size: 10px !important; }
  body .cms-mobile-nav > summary { padding-inline: 9px; }
  body main .hero .heroText { padding: 16px 13px !important; }
  body main .hero .heroText > h1 { font-size: clamp(1.6rem,9vw,2rem) !important; }
  body .cms-analytics-consent { max-width: calc(100vw - 16px); }
}