/* Shared CKEditor output normalization, restricted to the three detail views. */
body:is(.service-page,.article-page,.region-page) .dif-rich-content{
  min-width:0;
  max-width:100%;
  color:var(--text);
  font-size:clamp(15px,1.08rem,17px);
  line-height:1.78;
  overflow-wrap:anywhere;
  word-break:normal;
}

body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,ul,ol,blockquote,pre,figure,table,hr){
  max-width:100%;
}

body:is(.service-page,.article-page,.region-page) .dif-rich-content p{
  margin:0 0 1.08em;
  line-height:inherit;
}

body:is(.service-page,.article-page,.region-page) .dif-rich-content p:empty,
body:is(.service-page,.article-page,.region-page) .dif-rich-content p:has(> br:only-child){
  min-height:.45em;
  margin-bottom:.45em;
}

body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(h1,h2,h3,h4,h5,h6){
  max-width:100%;
  color:var(--text);
  font-family:inherit;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.28;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}

body:is(.service-page,.article-page,.region-page) .dif-rich-content h1{font-size:clamp(1.55rem,3.2vw,2.15rem);margin:1.55em 0 .58em}
body:is(.service-page,.article-page,.region-page) .dif-rich-content h2{font-size:clamp(1.4rem,2.7vw,1.9rem);margin:1.55em 0 .58em}
body:is(.service-page,.article-page,.region-page) .dif-rich-content h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin:1.35em 0 .5em}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(h4,h5,h6){font-size:1.08rem;margin:1.2em 0 .48em}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}

body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(ul,ol){
  display:block;
  margin:.4em 0 1.2em;
  padding-inline-start:clamp(22px,3vw,32px);
  list-style-position:outside;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content li{padding-inline-start:.18em;margin:.34em 0;line-height:inherit}
body:is(.service-page,.article-page,.region-page) .dif-rich-content li::marker{color:var(--gold)}
body:is(.service-page,.article-page,.region-page) .dif-rich-content li> :is(ul,ol){margin-block:.5em}

body:is(.service-page,.article-page,.region-page) .dif-rich-content blockquote{
  margin:1.35em 0;
  padding:clamp(15px,2.4vw,22px) clamp(17px,2.8vw,26px);
  border-inline-start:3px solid var(--gold);
  border-radius:0 14px 14px 0;
  background:color-mix(in srgb,var(--gold) 8%,var(--surface));
  color:var(--text);
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content blockquote>:last-child{margin-bottom:0}
body:is(.service-page,.article-page,.region-page) .dif-rich-content a{color:var(--service-accent,var(--gold));text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em;overflow-wrap:anywhere}
body:is(.service-page,.article-page,.region-page) .dif-rich-content a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(strong,b){font-weight:700}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(code,kbd,samp){padding:.12em .36em;border:1px solid var(--line);border-radius:5px;background:var(--surface);font: .9em/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
body:is(.service-page,.article-page,.region-page) .dif-rich-content pre{max-width:100%;margin:1.1em 0;padding:16px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);white-space:pre;}
body:is(.service-page,.article-page,.region-page) .dif-rich-content pre code{padding:0;border:0;background:transparent;white-space:inherit}

body:is(.service-page,.article-page,.region-page) .dif-rich-content{display:flow-root}
body:is(.service-page,.article-page,.region-page) .dif-rich-content figure{width:auto;max-width:100%;margin:1.15em auto 1.45em}
body:is(.service-page,.article-page,.region-page) .dif-rich-content figure.image{display:table;table-layout:fixed}
body:is(.service-page,.article-page,.region-page) .dif-rich-content figure.image img,
body:is(.service-page,.article-page,.region-page) .dif-rich-content img{
  display:block;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border-radius:clamp(9px,1.4vw,16px);
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content figure.image img{width:100%;margin-inline:auto}
body:is(.service-page,.article-page,.region-page) .dif-rich-content figcaption{
  max-width:70ch;
  margin:.6em auto 0;
  color:var(--muted);
  font-size:.86em;
  line-height:1.55;
  text-align:center;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(.image-style-align-left,.image-style-block-align-left,.image-style-side){float:left;max-width:min(48%,34rem);margin:.25em 1.35em 1em 0}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(.image-style-align-right,.image-style-block-align-right){float:right;max-width:min(48%,34rem);margin:.25em 0 1em 1.35em}
body:is(.service-page,.article-page,.region-page) .dif-rich-content .image-style-align-center{float:none;margin-inline:auto;text-align:center}

body:is(.service-page,.article-page,.region-page) .dif-rich-content figure.table{
  display:block;
  width:100%;
  max-width:100%;
  margin:1.3em 0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  border:1px solid var(--line);
  border-radius:12px;
  -webkit-overflow-scrolling:touch;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(table,figure.table table){
  display:table;
  width:max-content;
  min-width:100%;
  max-width:none;
  margin:0;
  overflow:visible;
  border-collapse:collapse;
  border-spacing:0;
  background:var(--surface);
  font-size:.93em;
  line-height:1.55;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content .dif-table-scroll{
  display:block;
  max-width:100%;
  margin:1.3em 0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  border:1px solid var(--line);
  border-radius:12px;
  -webkit-overflow-scrolling:touch;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(figure.table,.dif-table-scroll):focus-visible{outline:3px solid var(--gold);outline-offset:3px}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(th,td){
  min-width:7.5rem;
  padding:clamp(9px,1.25vw,14px);
  border:1px solid var(--line);
  text-align:start;
  vertical-align:top;
  overflow-wrap:anywhere;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content th{background:color-mix(in srgb,var(--gold) 10%,var(--surface));font-weight:700}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(th,td)>:last-child{margin-bottom:0}

body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(video,audio,iframe,embed){display:block;max-width:100%;margin:1.2em auto}
body:is(.service-page,.article-page,.region-page) .dif-rich-content video{width:auto;height:auto;max-height:min(78vh,780px);background:#080808;border-radius:14px}
body:is(.service-page,.article-page,.region-page) .dif-rich-content iframe{width:100%;height:auto;min-height:220px;border:0;border-radius:14px}
body:is(.service-page,.article-page,.region-page) .dif-rich-content hr{margin:1.7em 0;border:0;border-top:1px solid var(--line)}

/* Keep editor-authored blocks on one reliable text edge across detail pages. */
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6,li){
  box-sizing:border-box;
  max-width:none;
  margin-inline:0;
  text-align:start;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6){
  padding-inline:0;
  border-inline:0;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content>p:first-child{
  margin-block:0 1.08em;
  padding:0;
  border:0;
  font-size:inherit;
  line-height:inherit;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(.ql-align-center,.ql-align-right,.ql-align-justify){text-align:start}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-1,
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-2,
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-3,
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-4,
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-5,
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-6,
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-7,
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(p,h1,h2,h3,h4,h5,h6).ql-indent-8{padding-inline:0}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(ul,ol){
  display:block;
  width:auto;
  max-width:none;
  margin-inline:0;
  padding-inline-start:1.45em;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content li{display:list-item;padding-inline-start:.15em}
body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(.image-style-align-left,.image-style-align-right,.image-style-block-align-left,.image-style-block-align-right,.image-style-side){
  float:none;
  clear:both;
  width:auto;
  max-width:100%;
  margin:1.15em auto 1.45em;
}
body:is(.service-page,.article-page,.region-page) .dif-rich-content figure.image{margin-inline:auto}

@media(max-width:760px){
  body:is(.service-page,.article-page,.region-page) .dif-rich-content{font-size:16px;line-height:1.76}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(.image-style-align-left,.image-style-align-right,.image-style-block-align-left,.image-style-block-align-right,.image-style-side){float:none;width:auto;max-width:100%;margin:1em auto}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content figure.image{width:100% !important;max-width:100%}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(figure.image-style-align-left,figure.image-style-align-right,figure.image-style-side){width:100% !important;max-width:100%}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(figure.image-style-align-left,figure.image-style-align-right,figure.image-style-side) img,
  body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(img.image-style-align-left,img.image-style-align-right,img.image-style-side){width:100% !important}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(video,iframe){max-height:72vh}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content :is(th,td){min-width:8rem}
}
@media(max-width:380px){
  body:is(.service-page,.article-page,.region-page) .dif-rich-content{font-size:15.5px}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content blockquote{padding:14px 15px}
  body:is(.service-page,.article-page,.region-page) .dif-rich-content pre{padding:12px}
}
@media(prefers-reduced-motion:reduce){body:is(.service-page,.article-page,.region-page) .dif-rich-content *{scroll-behavior:auto}}

/* Wide-viewport balance: desktop browser zoom at 70%, 50% and 25% expands the CSS viewport. Keep shared page rails fluid instead of letting fixed max-widths collapse into narrow islands. */
@media (min-width: 1600px) {
  body.service-page .service-detail-section,
  body.service-page .service-related-articles > .section-intro,
  body.service-page .service-related-articles .service-related-article-grid,
  body.service-page .service-related-articles > .article-all,
  body.region-page .region-hero,
  body.region-page .region-hero-layout,
  body.region-page .region-main-grid,
  body.region-page .region-services,
  body.region-page .region-related-areas,
  body.service-area-page .service-area-details,
  body .site-footer-minimal .footer-main,
  body .site-footer-minimal .footer-bottom,
  body .footer-company-legal,
  body .footer-legal-links,
body .footer-map{
    box-sizing: border-box;
    width: calc(100% - clamp(64px, 6vw, 180px));
    max-width: none;
    margin-inline: auto;
  }

  body.service-page .service-detail-section .service-seo-content--plain {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body.service-page .service-detail-section .service-seo-content--plain :is(figure, .content-illustration) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

/* The short customer lookup page should keep its footer at the viewport edge, not leave a blank tail below it. */
body.delivery-page {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
}
body.delivery-page > #main-content {
  flex: 1 0 auto;
  width: 100%;
}

/* Rich service copy fills the same rail as its section; editorial media remains proportional and bounded by the viewport. */
body.service-page .service-detail-section .service-seo-content--plain {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
body.service-page .service-detail-section .service-seo-content--plain .content-illustration {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
body.service-page .service-detail-section .service-seo-content--plain img.content-inline-image {
  max-width: 100%;
  height: auto;
}

/* At reduced browser zoom, keep detail pages on the same fluid frame as their
   full-width related sections. The default reading widths remain unchanged at
   normal desktop and mobile sizes. */
@media (min-width: 1600px) {
  body.service-page .service-hero {
    padding-inline: clamp(48px, 4vw, 240px);
  }
  body.service-page .service-hero > :is(.eyebrow, h1, p, .service-hero-intro, .site-topic-links, .service-search-more, .service-search-tags) {
    width: min(100%, 3200px);
    max-width: 3200px;
  }
  body.service-page .service-hero h1 {
    width: min(100%, 3200px);
    max-width: 3200px;
  }
  body.service-page .service-hero > p:not(.eyebrow),
  body.service-page .service-hero .service-hero-intro {
    max-width: min(100%, 1500px);
  }

  body.article-page .article-detail {
    box-sizing: border-box;
    width: calc(100% - clamp(64px, 8vw, 320px));
    max-width: none;
    margin-inline: auto;
  }
  body.article-page .article-detail-header,
  body.article-page .article-cover,
  body.article-page .article-layout,
  body.article-page .article-cta {
    width: 100%;
    max-width: none;
  }
  body.article-page .article-detail h1,
  body.article-page .article-excerpt {
    max-width: 100%;
  }
  body.article-page .article-cover img {
    max-height: min(68vw, 1800px);
  }
  body.article-page .article-layout {
    grid-template-columns: minmax(0, 2.4fr) minmax(300px, 0.8fr);
    gap: clamp(28px, 3vw, 120px);
  }
  body.article-page .article-content :is(p, ul, ol, blockquote) {
    max-width: none;
  }
  body.article-page .article-cta h2 {
    max-width: min(100%, 1800px);
  }

  /* Region pages use the same share section, but their default 1180px cap
     leaves a narrow island between full-width locality and booking sections. */
  body.region-page .service-related-articles > .section-intro,
  body.region-page .service-related-articles .service-related-article-grid,
  body.region-page .service-related-articles > .article-all {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  body.region-page .service-related-articles > .section-intro h2 {
    width: 100%;
    max-width: none;
  }
}

/* Searchable coverage controls and local-area blocks share the same responsive page rails. */
body.service-area-page .service-area-details,
body.region-page .region-local-coverage,
body.region-page .region-request-context {
  box-sizing: border-box;
  width: min(1800px, calc(100% - 48px));
  max-width: 1800px;
  margin-inline: auto;
}
body.service-area-page .service-area-search-controls {
  grid-template-columns: minmax(240px, 1.4fr) minmax(220px, 1fr) auto;
  align-items: stretch;
}
body.service-area-page .service-area-search-controls select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font: inherit;
}
body.service-area-page .service-area-province-index {
  margin: 16px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
}
body.service-area-page .service-area-province-index > summary {
  cursor: pointer;
  color: var(--heading);
  font-weight: 700;
}
body.service-area-page .service-area-province-index .service-area-list { margin: 14px 0 0; }
body.region-page .region-locality-details {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2, var(--surface));
}
body.region-page .region-locality-details > summary {
  cursor: pointer;
  color: var(--heading);
  font-size: .92rem;
  font-weight: 700;
}
body.region-page .region-locality-details .region-locality-list { margin-top: 12px; }
.service-area-search-results .service-area-result-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  color: var(--service-accent, var(--gold));
  font-size: .92em;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.region-page .region-local-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin: clamp(24px, 4vw, 48px) auto;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
}
body.region-page .region-local-coverage > div:first-child,
body.region-page .region-local-coverage > .text-link { grid-column: 1 / -1; }
body.region-page .region-local-coverage h2 {
  max-width: 30ch;
  margin: 0 0 12px;
  color: var(--heading);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
}
body.region-page .region-local-coverage p { max-width: 90ch; color: var(--muted); line-height: 1.75; }
body.region-page .region-locality-group { min-width: 0; }
body.region-page .region-locality-group h3 { margin: 0 0 10px; color: var(--heading); font-size: 1rem; }
body.region-page .region-locality-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.region-page .region-locality-list li {
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.region-page .region-request-context {
  margin-top: 18px;
  color: var(--muted);
}
@media (min-width: 1600px) {
  body.service-area-page .service-area-details,
  body.region-page .region-local-coverage,
  body.region-page .region-request-context {
    width: calc(100% - clamp(64px, 6vw, 180px));
    max-width: none;
  }
}
@media (max-width: 760px) {
  body.service-area-page .service-area-search-controls { grid-template-columns: minmax(0, 1fr); }
  body.region-page .region-local-coverage {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 32px);
    padding: 22px 18px;
    border-radius: 18px;
  }
  body.region-page .region-local-coverage > div:first-child,
  body.region-page .region-local-coverage > .text-link { grid-column: auto; }
  body.region-page .region-request-context { width: calc(100% - 32px); }
}

/* One shared, fluid page frame for very wide CSS viewports (including 10–25%
   browser zoom). Align the fixed header, main sections and footer to the same
   rails instead of letting independent max-width caps create side gutters. */
@media (min-width: 1600px) {
  :root {
    --public-page-gutter: max(24px, 4vw);
    --public-page-rail: calc(100% - var(--public-page-gutter) - var(--public-page-gutter));
    --public-content-inset: max(16px, 2vw);
  }

  body:not(.delivery-page) .site-header,
  body:not(.delivery-page) .site-footer.site-footer-minimal {
    box-sizing: border-box;
    width: var(--public-page-rail);
    max-width: none;
  }
  body:not(.delivery-page) .site-footer-minimal .footer-main,
  body:not(.delivery-page) .site-footer-minimal .footer-bottom,
  body:not(.delivery-page) .footer-company-legal,
  body:not(.delivery-page) .footer-legal-links,
body:not(.delivery-page) .footer-map{
    box-sizing: border-box;
    width: 100%;
    max-width: none;
  }

  body:not(.delivery-page) main > .section {
    box-sizing: border-box;
    width: var(--public-page-rail);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
  body.home-page #dich-vu.section,
  body.home-page .articles-teaser.section,
  body.home-page .booking,
  body.home-page .portfolio.section,
  body.home-page .portfolio-empty-note,
  body.home-page .lookup-banner,
  body.home-page .contact-strip,
  body.home-page .about-us-section,
  body.home-page .hero-service-line,
  body.home-page .site-header,
  body.home-page .site-footer.site-footer-minimal,
  body.home-page .site-footer-minimal .footer-main,
  body.home-page .site-footer-minimal .footer-bottom,
  body.home-page .footer-company-legal,
  body.home-page .footer-legal-links,
body.home-page .footer-map{
    box-sizing: border-box;
    width: var(--public-page-rail);
    max-width: none;
    margin-inline: auto;
  }
  body.home-page main > .section { padding-inline: 0; }

  body.service-page .service-hero {
    padding-inline: clamp(24px, 3.5vw, 240px);
  }
  body.service-page .service-detail-section,
  body.service-page .service-area-summary,
  body.region-page .region-local-coverage,
  body.region-page .region-request-context,
  body.service-area-page .service-area-details,
  body.service-page .service-related-articles > .section-intro,
  body.service-page .service-related-articles .service-related-article-grid,
  body.service-page .service-related-articles > .article-all,
  body.region-page .service-related-articles > .section-intro,
  body.region-page .service-related-articles .service-related-article-grid,
  body.region-page .service-related-articles > .article-all {
    box-sizing: border-box;
    width: var(--public-page-rail);
    max-width: none;
    margin-inline: auto;
  }
  body.service-page .service-related-articles > .section-intro,
  body.region-page .service-related-articles > .section-intro {
    margin-bottom: 24px;
  }
  body.service-page .service-related-articles > .section-intro h2,
  body.region-page .service-related-articles > .section-intro h2 {
    width: 100%;
    max-width: none;
  }
  body.article-page .article-detail {
    width: var(--public-page-rail);
  }
  body.region-page .region-local-coverage p { max-width: 110ch; }
}

/* Apply the shared page rail on desktop and zoomed-out layouts. A lower
   breakpoint avoids relying on a particular browser's zoom-to-CSS-pixel map. */
@media (min-width: 761px) {
  :root {
    --public-page-gutter: max(16px, 4vw);
    --public-page-rail: calc(100% - var(--public-page-gutter) - var(--public-page-gutter));
    --public-content-inset: max(16px, 2vw);
  }

  body.home-page .site-header,
  body:not(.home-page) .site-header {
    box-sizing: border-box;
    width: var(--public-page-rail) !important;
    max-width: none !important;
    padding-inline: var(--public-content-inset) !important;
  }
  body.home-page .site-footer.site-footer-minimal,
  body:not(.home-page) .site-footer.site-footer-minimal {
    box-sizing: border-box;
    width: var(--public-page-rail) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }
  body.home-page .site-footer-minimal .footer-main,
  body.home-page .site-footer-minimal .footer-bottom,
  body.home-page .footer-company-legal,
  body.home-page .footer-legal-links,
  body:not(.home-page) .site-footer-minimal .footer-main,
  body:not(.home-page) .site-footer-minimal .footer-bottom,
  body:not(.home-page) .footer-company-legal,
  body:not(.home-page) .footer-legal-links,
body.home-page .footer-map,
body:not(.home-page) .footer-map{
    box-sizing: border-box;
    width: 100%;
    max-width: none;
  }

  body.home-page #dich-vu.section,
  body.home-page .articles-teaser.section,
  body.home-page .booking,
  body.home-page .portfolio.section,
  body.home-page .portfolio-empty-note,
  body.home-page .lookup-banner,
  body.home-page .contact-strip,
  body.home-page .about-us-section,
  body.home-page .hero-service-line,
  body:not(.home-page) main > .section {
    box-sizing: border-box;
    width: var(--public-page-rail) !important;
    max-width: none !important;
    margin-inline: auto;
    padding-inline: var(--public-content-inset);
  }

  body:not(.delivery-page) main :where(h1, h2, h3, h4, p, li, a, label, dt, dd) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  body.home-page #dich-vu > .section-intro,
  body.home-page .articles-teaser > .section-intro,
  body.home-page .booking > .section-intro,
  body.home-page .portfolio > .section-intro,
  body:not(.home-page) main > .section > .section-intro,
  body:not(.home-page) .service-related-articles > .section-intro {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body.service-page .service-hero { padding-inline: clamp(24px, 2vw, 128px); }
  body.service-page .service-hero h1,
  body.service-page .service-hero > .service-hero-intro,
  body.service-page .service-hero > p:not(.eyebrow) {
    width: min(100%, 78vw);
    max-width: 78vw;
  }
  body.service-page .service-detail-section,
  body.service-page .service-area-summary,
  body.service-page .service-related-articles > .section-intro,
  body.service-page .service-related-articles .service-related-article-grid,
  body.service-page .service-related-articles > .article-all,
  body.region-page .region-local-coverage,
  body.region-page .region-request-context,
  body.region-page .service-related-articles > .section-intro,
  body.region-page .service-related-articles .service-related-article-grid,
  body.region-page .service-related-articles > .article-all,
  body.service-area-page .service-area-details {
    box-sizing: border-box;
    width: var(--public-page-rail) !important;
    max-width: none !important;
    margin-inline: auto;
  }
  body.service-page .service-detail-section .service-detail-head,
  body.service-page .service-detail-section .service-seo-content,
  body.service-page .service-detail-section .service-content-grid {
    width: 100%;
    max-width: none;
  }
  body.region-page .region-local-coverage p { max-width: 78vw; }

  body.article-page .article-detail {
    box-sizing: border-box;
    width: var(--public-page-rail) !important;
    max-width: none !important;
    margin-inline: auto;
  }
  body.article-page .article-detail-header,
  body.article-page .article-cover,
  body.article-page .article-layout,
  body.article-page .article-cta {
    width: 100%;
    max-width: none;
  }
}

/* Prevent frame-edge collisions after widening the shared page rail. */
@media (min-width: 761px) {
  body.service-page .service-area-summary,
  body.region-page .region-local-coverage,
  body.service-page .service-detail-section {
    padding-inline: var(--public-content-inset) !important;
    overflow: visible;
  }

  body.home-page .site-footer-minimal .footer-main,
  body.home-page .site-footer-minimal .footer-bottom,
  body.home-page .footer-company-legal,
  body.home-page .footer-legal-links,
  body:not(.home-page) .site-footer-minimal .footer-main,
  body:not(.home-page) .site-footer-minimal .footer-bottom,
  body:not(.home-page) .footer-company-legal,
  body:not(.home-page) .footer-legal-links,
body.home-page .footer-map,
body:not(.home-page) .footer-map{
    padding-inline: var(--public-content-inset);
  }
}

/* Align each public section and the footer's inner rows to the header rail.
   Keep the footer shell unpadded so its content inset is applied only once. */
@media (min-width: 761px) {
  body main > section {
    box-sizing: border-box;
    width: var(--public-page-rail) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: var(--public-content-inset) !important;
  }

  body.home-page .site-footer.site-footer-minimal,
  body:not(.home-page) .site-footer.site-footer-minimal {
    padding-inline: 0 !important;
  }

  body.home-page .site-footer-minimal .footer-main,
  body.home-page .site-footer-minimal .footer-bottom,
  body.home-page .footer-company-legal,
  body.home-page .footer-legal-links,
  body:not(.home-page) .site-footer-minimal .footer-main,
  body:not(.home-page) .site-footer-minimal .footer-bottom,
  body:not(.home-page) .footer-company-legal,
  body:not(.home-page) .footer-legal-links,
body.home-page .footer-map,
body:not(.home-page) .footer-map{
    padding-inline: var(--public-content-inset);
  }

  body.home-page .site-header,
  body:not(.home-page) .site-header {
    width: var(--public-page-rail) !important;
    margin-inline: auto !important;
  }

  body.home-page .site-footer.site-footer-minimal,
  body:not(.home-page) .site-footer.site-footer-minimal {
    width: var(--public-page-rail) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  body .site-footer-minimal .footer-main,
  body .site-footer-minimal .footer-bottom,
  body .footer-company-legal,
  body .footer-legal-links,
body .footer-map{
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: var(--public-content-inset);
  }

  body main :where(section, article, div, ul, li, figure, form, fieldset) {
    min-width: 0;
  }

  body main :where(h1, h2, h3, h4, p, li, a, label, dt, dd) {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  body main :where(img, video, iframe, table) {
    max-inline-size: 100%;
  }

  body main [id] {
    scroll-margin-top: calc(108px + env(safe-area-inset-top, 0px));
  }

  /* Let layout shells follow their aligned section instead of retaining the
     old 760–1240px caps that created narrow islands at reduced browser zoom. */
  body main > * :where(
    .section-intro,
    .article-hero-inner,
    .article-hero-copy,
    .service-hero-intro,
    .service-detail-head,
    .service-detail-title,
    .service-detail-description,
    .service-content-grid,
    .service-seo-content,
    .service-grid,
    .article-grid,
    .article-listing-heading,
    .article-listing-feature,
    .article-index-more,
    .article-index-grid,
    .article-editorial-grid,
    .article-editorial-side,
    .service-related-article-grid,
    .article-detail-header,
    .article-cover,
    .article-layout,
    .article-content,
    .article-sidebar-stack,
    .article-toc,
    .article-cta,
    .region-hero-layout,
    .region-main-grid,
    .region-content,
    .region-services,
    .region-related-areas,
    .region-request-context,
    .service-area-details,
    .service-area-search,
    .service-area-search-results,
    .delivery-layout,
    .delivery-intro,
    .delivery-card,
    .project-detail,
    .project-description,
    .booking-form,
    .portfolio-grid
  ) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* The article index carried its own 1180px desktop cap. At browser zoom
     below 100%, that cap becomes a tiny centered island while the page rail
     grows. Keep the listing and its heading on the same content rail. */
  body.articles-page main > .article-listing :where(
    .article-listing-heading,
    .article-listing-feature,
    .article-index-more,
    .article-index-grid
  ) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  /* Keep headings from inheriting narrow character-count caps on wide rails. */
  body main :where(h1, h2, h3) {
    width: min(100%, 80vw) !important;
    max-width: min(100%, 80vw) !important;
  }

  body main .section-intro > p:not(.eyebrow) {
    width: min(100%, 72vw) !important;
    max-width: min(100%, 72vw) !important;
  }

  /* Scale hero copy with the viewport. Old pixel/character width caps made
     titles and ledes microscopic at reduced browser zoom on large displays. */
  body.home-page .hero-copy-overlay {
    width: min(72vw, 100%) !important;
    max-width: none !important;
  }
  body.home-page .hero-copy-overlay h1 {
    width: min(66vw, 100%) !important;
    max-width: none !important;
  }
  body.home-page .hero-copy-overlay p:not(.eyebrow) {
    width: min(58vw, 100%) !important;
    max-width: none !important;
  }

  body.service-page .service-hero h1 {
    width: min(72vw, 100%) !important;
    max-width: none !important;
  }
  body.service-page .service-hero > p:not(.eyebrow),
  body.service-page .service-hero > .service-hero-intro {
    width: min(64vw, 100%) !important;
    max-width: none !important;
  }

  body.region-page .region-hero h1 {
    width: min(72vw, 100%) !important;
    max-width: none !important;
  }
  body.region-page .region-hero-description {
    width: min(64vw, 100%) !important;
    max-width: none !important;
  }
}



/* DIF layout contract: one shared rail, normal-flow header and predictable
   top spacing. This contract is loaded after all legacy theme layers. */
:root {
  --public-page-gutter: max(12px, 4vw);
  --public-page-rail: calc(100% - var(--public-page-gutter) - var(--public-page-gutter));
  --public-content-inset: max(14px, 2vw);
}

html, body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body .site-header {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  box-sizing: border-box;
  display: flex;
  width: var(--public-page-rail) !important;
  max-width: none !important;
  margin: max(8px, 1vw) auto 0 !important;
  transform: none !important;
}

body > #main-content,
body main {
  min-width: 0;
  max-width: 100%;
}

body main > :is(section, article, aside) {
  box-sizing: border-box;
  width: var(--public-page-rail) !important;
  max-width: none !important;
  min-width: 0;
  margin-inline: auto !important;
  padding-inline: var(--public-content-inset) !important;
}

body .site-footer.site-footer-minimal {
  box-sizing: border-box;
  width: var(--public-page-rail) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body .site-footer-minimal .footer-main,
body .site-footer-minimal .footer-bottom,
body .footer-company-legal,
body .footer-legal-links,
body .footer-map{
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--public-content-inset) !important;
}

body.home-page main { padding-top: 0 !important; }
body.service-page .service-hero { padding-block-start: clamp(28px, 3vw, 64px) !important; }
body.article-page .article-detail { padding-top: clamp(24px, 3vw, 54px) !important; }
body.article-page .article-hero { padding-top: clamp(24px, 3vw, 54px) !important; }
body.articles-page .article-hero { padding-top: clamp(24px, 3vw, 54px) !important; }
body.region-page .region-landing,
body.service-area-page .region-landing { padding-top: clamp(22px, 3vw, 56px) !important; }
body.legal-page .legal-page-main { padding-top: clamp(24px, 3vw, 56px) !important; }
body.delivery-page .delivery-layout { padding-top: clamp(24px, 3vw, 56px) !important; }
body.delivery-page .delivery-layout.has-delivery-content { padding-top: clamp(24px, 3vw, 56px) !important; }

@media (min-width: 761px) {
  body.home-page .hero-carousel,
  body.home-page .hero-service-line,
  body.home-page .portfolio-empty-note,
  body.home-page .lookup-banner,
  body.home-page .contact-strip,
  body.home-page .about-us-section,
  body.home-page .hero-service-line,
  body .site-footer.site-footer-minimal {
    box-sizing: border-box;
    width: var(--public-page-rail) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  body main :where(section, article, div, ul, li, figure, form, fieldset, nav, aside) {
    min-width: 0;
  }
  body main :where(img, video, iframe, canvas, svg) {
    max-inline-size: 100%;
  }
  body main :where(h1, h2, h3, h4, p, li, a, label, dt, dd) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }
  body main [id] { scroll-margin-top: 24px; }

  body.home-page .hero-carousel { max-width: none !important; }
  body.home-page .hero-copy-overlay { width: min(72vw, 100%) !important; max-width: 100% !important; }
  body.home-page .hero-copy-overlay h1 { width: min(66vw, 100%) !important; max-width: 100% !important; }
  body.home-page .hero-copy-overlay p:not(.eyebrow) { width: min(58vw, 100%) !important; max-width: 100% !important; }

  body.service-page .service-hero h1,
  body.region-page .region-hero h1,
  body main .section-intro h2 {
    width: min(100%, 80vw);
    max-width: min(100%, 80vw);
    text-wrap: balance;
  }
  body.service-page .service-hero > p:not(.eyebrow),
  body.service-page .service-hero > .service-hero-intro,
  body.region-page .region-hero-description {
    width: min(100%, 68vw);
    max-width: min(100%, 68vw);
  }

  body.article-page .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(240px, .7fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: start;
  }
  body.article-page .article-main,
  body.article-page .article-aside,
  body.article-page .article-content { min-width: 0; max-width: 100%; }
}

@media (max-width: 760px) {
  body .site-header { margin-top: max(6px, 1.5vw) !important; }
  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-top: 24px !important;
  }
  body.article-page .article-layout { grid-template-columns: minmax(0, 1fr); }
}


/* Shared responsive media rule: ignore fixed editor dimensions and stay inside
   the reading rail at every desktop zoom. Floated editorial images keep their
   deliberately narrower treatment. */
@media (min-width: 761px) {
  body:is(.service-page,.article-page,.region-page) main .dif-rich-content figure:not(.table):not(.image-style-align-left):not(.image-style-block-align-left):not(.image-style-side):not(.image-style-align-right):not(.image-style-block-align-right),
  body.service-page main .service-detail-section .service-seo-content--plain .content-illustration {
    display: block !important;
    box-sizing: border-box;
    width: min(72vw, 100%) !important;
    max-width: min(72vw, 100%) !important;
    margin-inline: auto !important;
  }
  body:is(.service-page,.article-page,.region-page) main .dif-rich-content figure:not(.table) > img,
  body:is(.service-page,.article-page,.region-page) main .dif-rich-content img.content-inline-image {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Override legacy high-specificity fixed headers. The global header belongs to
   document flow, shares the page rail, and cannot cover content titles. */
html body.home-page .site-header,
html body:not(.home-page) .site-header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box;
  width: var(--public-page-rail) !important;
  max-width: none !important;
  margin: max(8px, 1vw) auto 0 !important;
}

@media (max-width: 760px) {
  html body.home-page .site-header,
  html body:not(.home-page) .site-header {
    width: var(--public-page-rail) !important;
    min-width: 0;
    margin: max(6px, 1.5vw) auto 0 !important;
  }
}

/* Reduce the mobile header-to-banner gap without placing the header over
   the banner label or headline. */
@media (max-width: 760px) {
  html body.home-page main > .hero {
    margin-top: 0 !important;
    padding-top: 12px !important;
  }
}

/* Keep complete video filenames visible in delivery cards instead of clamping
   long project names to two lines with an ellipsis. */
body.delivery-page .delivery-media-section-video .delivery-media-card[data-media-type="video"] .delivery-file-details strong {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  line-height: 1.45;
}

@media (max-width: 760px) {
  body.delivery-page .delivery-media-section-video .delivery-media-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.delivery-page .delivery-media-section-video .delivery-media-card[data-media-type="video"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Home hero full-bleed override: this file loads after homepage-polish.css and
   previously constrained the carousel back to the shared content rail. */
html body.home-page main > .hero {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-inline: 0 !important;
  overflow: visible !important;
}
html body.home-page .hero-carousel {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
html body.home-page .hero-carousel-track {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Shared responsive inset for all public page masthead banners. The vw-based
   gutter stays visually proportional at browser zoom levels from 5% to 200%. */
:root {
  --public-banner-gutter: clamp(14px, 2.4vw, 64px);
  --public-banner-radius: clamp(10px, 1.2vw, 24px);
  --public-banner-frame: rgba(255, 255, 255, .2);
}
html body.home-page main > .hero,
html body.service-page main > .service-hero,
html body.article-page main > .article-hero,
html body.articles-page main > .article-hero,
html body.region-page main > .region-hero,
html body.service-area-page main > .article-hero {
  box-sizing: border-box !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 2 * var(--public-banner-gutter)) !important;
  max-width: none !important;
  margin-inline: 0 !important;
  border-radius: var(--public-banner-radius) !important;
  outline: clamp(1px, .08vw, 2px) solid var(--public-banner-frame) !important;
  outline-offset: clamp(-2px, -.08vw, -1px) !important;
  box-shadow: none !important;
  transition: none !important;
}
html body.home-page .hero-carousel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
html body.home-page .hero-carousel::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  border: clamp(1px, .08vw, 1.5px) solid var(--public-banner-frame) !important;
  border-radius: var(--public-banner-radius) !important;
  pointer-events: none !important;
  transition: none !important;
}
html body.home-page main > .hero {
  outline: 0 !important;
  box-shadow: none !important;
  overflow: clip !important;
  clip-path: inset(0 round var(--public-banner-radius)) !important;
}
html body.home-page .hero-carousel-track {
  box-sizing: border-box !important;
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1983 / 793 !important;
  border-radius: var(--public-banner-radius) !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  clip-path: none !important;
}
html body.home-page .hero-poster-slide {
  box-sizing: border-box !important;
  border-radius: inherit !important;
  background: #111 !important;
}
html body.home-page .hero-poster-slide img,
html body.home-page .hero-poster-slide video {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
}

/* Keep the homepage headline inside the banner when browser zoom reduces the
   CSS viewport. The poster remains at its native ratio and is never cropped. */
@media (min-width: 621px) and (max-width: 1100px) {
  html body.home-page .hero-copy-overlay {
    box-sizing: border-box !important;
    inset: 0 0 16px !important;
    justify-content: flex-end !important;
    padding: 24px clamp(16px, 3vw, 32px) 18px !important;
  }
  html body.home-page .hero-copy-overlay .eyebrow {
    margin-bottom: 8px !important;
    font-size: clamp(9px, 1.2vw, 11px) !important;
  }
  html body.home-page .hero-copy-overlay h1 {
    width: 100% !important;
    max-width: 760px !important;
    font-size: clamp(22px, 3.8vw, 36px) !important;
    line-height: 1.1 !important;
  }
  html body.home-page .hero-copy-overlay > p:not(.eyebrow) {
    display: none !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions {
    gap: 8px !important;
    margin-top: 12px !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions > a {
    min-height: 38px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}

/* At extreme zoom on narrow screens, reserve enough height for wrapped copy
   while keeping the full source image visible with object-fit: contain. */
@media (max-width: 360px) {
  html body.home-page .hero-carousel-track {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
  }
  html body.home-page .hero-copy-overlay {
    width: calc(100% - 20px) !important;
    padding-bottom: 8px !important;
  }
  html body.home-page .hero-copy-overlay h1 {
    font-size: clamp(8px, 3vw, 10px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions > a {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* Below this width the copy needs more room than the full-ratio poster.
   Give it its own natural-height panel instead of adding dark bars to image. */
@media (min-width: 101px) and (max-width: 260px) {
  html body.home-page .hero-copy-overlay {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(6px, 3vw, 10px) !important;
    background: #111 !important;
  }
  html body.home-page .hero-copy-overlay h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(8px, 4vw, 12px) !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 6px !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions > a {
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }
}

/* At a CSS viewport below 100px (possible at 500% zoom on a small phone),
   place the copy after the complete poster so it can grow without clipping. */
@media (max-width: 100px) {
  html body.home-page .hero-carousel-track {
    min-height: 0 !important;
    aspect-ratio: 1983 / 793 !important;
  }
  html body.home-page .hero-copy-overlay {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 6px 10px !important;
    background: #111 !important;
  }
  html body.home-page .hero-copy-overlay .eyebrow {
    font-size: 6px !important;
    line-height: 1.2 !important;
  }
  html body.home-page .hero-copy-overlay h1 {
    margin-bottom: 0 !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions > a {
    width: 100% !important;
    min-height: 24px !important;
    padding: 4px 2px !important;
    font-size: 7px !important;
  }
}

/* At high zoom the service card's reserved arrow column leaves less than one
   glyph of width for its heading. Stack the content and let the card grow. */
@media (max-width: 240px) {
  html body main .service-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body main .service-grid .service-card {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 9px !important;
  }
  html body main .service-grid .service-card > div {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
  html body main .service-grid .service-card h3 {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(10px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body main .service-grid .service-card .card-arrow {
    display: none !important;
  }
}

/* Browser zoom can leave less than 120 CSS pixels on a small phone. Article
   cards must give text the available width instead of retaining mobile pads. */
@media (max-width: 240px) {
  html body.article-page .article-detail {
    min-width: 0 !important;
    padding-right: clamp(3px, 4vw, 10px) !important;
    padding-left: clamp(3px, 4vw, 10px) !important;
  }
  html body.article-page .article-layout,
  html body.article-page .article-main,
  html body.article-page .article-content,
  html body.article-page .article-cta {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.article-page .article-content,
  html body.article-page .article-cta {
    padding: clamp(3px, 4vw, 10px) !important;
  }
  html body.article-page .article-content h2,
  html body.article-page .article-content h3,
  html body.article-page .article-cta h2 {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body.article-page .article-content h2 {
    padding-left: clamp(2px, 2vw, 5px) !important;
    border-left-width: 1px !important;
  }
}

/* Keep service content readable when a high zoom level leaves a very narrow
   CSS viewport. Fixed card pads and the related article image column exhaust
   the text area before the browser can wrap its headings. */
@media (max-width: 240px) {
  html body.service-page main > .section,
  html body.service-page .service-related-articles {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: clamp(3px, 4vw, 8px) !important;
    padding-left: clamp(3px, 4vw, 8px) !important;
  }
  html body.service-page .service-detail-section,
  html body.service-page .service-related-articles > .section-intro,
  html body.service-page .service-related-articles .service-related-article-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  html body.service-page .service-detail-title h2,
  html body.service-page .service-related-articles .section-intro h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body.service-page .service-content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.service-page .service-content-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(3px, 4vw, 8px) !important;
  }
  html body.service-page .service-content-card h3 {
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body.service-page .service-related-article-grid .article-card {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  html body.service-page .service-related-article-grid .article-card-image {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  html body.service-page .service-related-article-grid .article-card-body {
    min-width: 0 !important;
    padding: clamp(3px, 4vw, 8px) !important;
  }
  html body.service-page .service-related-article-grid .article-card-body h3 {
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 240px) {
  html body.articles-page main > .article-listing {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: clamp(3px, 4vw, 8px) !important;
    padding-left: clamp(3px, 4vw, 8px) !important;
  }
  html body.articles-page .article-listing-heading,
  html body.articles-page .article-index-more,
  html body.articles-page .article-index-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.articles-page .article-listing-heading h2,
  html body.articles-page .article-index-grid .article-card-body h3 {
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body.articles-page .article-index-grid .article-card,
  html body.articles-page .article-index-grid .article-card-body {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body.articles-page .article-index-grid .article-card-body {
    padding: clamp(3px, 4vw, 8px) !important;
  }
}

@media (max-width: 240px) {
  html body.delivery-page .delivery-layout,
  html body.delivery-page .delivery-layout.has-delivery-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: clamp(3px, 4vw, 8px) !important;
    padding-left: clamp(3px, 4vw, 8px) !important;
  }
  html body.delivery-page .delivery-intro,
  html body.delivery-page .delivery-layout.has-delivery-content .delivery-intro,
  html body.delivery-page .delivery-card,
  html body.delivery-page .delivery-layout.has-delivery-content .delivery-card,
  html body.delivery-page #delivery-result:not(:empty),
  html body.delivery-page .delivery-project-summary {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(3px, 4vw, 8px) !important;
  }
  html body.delivery-page .delivery-intro h1,
  html body.delivery-page .delivery-project-summary h2,
  html body.delivery-page .delivery-card-heading strong {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body.delivery-page .delivery-media-grid,
  html body.delivery-page .delivery-feature-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 240px) {
  html body.region-page .region-hero,
  html body.region-page .region-main-grid,
  html body.region-page .region-services,
  html body.region-page .region-related-areas,
  html body.region-page .region-local-coverage,
  html body.region-page .service-related-articles {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: clamp(3px, 4vw, 8px) !important;
    padding-left: clamp(3px, 4vw, 8px) !important;
  }
  html body.region-page .region-hero-card,
  html body.region-page .region-content,
  html body.region-page .region-planning-card,
  html body.region-page .service-related-articles > .section-intro,
  html body.region-page .service-related-articles .service-related-article-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(3px, 4vw, 8px) !important;
  }
  html body.region-page .region-hero-card h2,
  html body.region-page .region-content h2,
  html body.region-page .region-planning-card h2,
  html body.region-page .region-services .section-intro h2,
  html body.region-page .region-local-coverage h2,
  html body.region-page .service-related-articles .section-intro h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body.region-page .service-related-article-grid .article-card {
    display: block !important;
    min-width: 0 !important;
  }
  html body.region-page .service-related-article-grid .article-card-body {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: clamp(3px, 4vw, 8px) !important;
  }
  html body.region-page .service-related-article-grid .article-card-body h3 {
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 240px) {
  html body.service-area-page main > .section,
  html body.service-area-page .service-area-details {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: clamp(3px, 4vw, 8px) !important;
    padding-left: clamp(3px, 4vw, 8px) !important;
  }
  html body.service-area-page .service-area-group {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(3px, 4vw, 8px) !important;
  }
  html body.service-area-page .service-area-details .section-intro,
  html body.service-area-page main > .section > .section-intro {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body.service-area-page .service-area-group h2,
  html body.service-area-page .service-area-details .section-intro h2,
  html body.service-area-page main > .section > .section-intro h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 240px) {
  html body.legal-page .legal-page-main,
  html body.legal-page .legal-public-content,
  html body.legal-page .legal-public-head,
  html body.legal-page .legal-document-body,
  html body.legal-page .legal-section {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body.legal-page .legal-page-main,
  html body.legal-page .legal-public-head,
  html body.legal-page .legal-document-body > .legal-lead,
  html body.legal-page .legal-section {
    padding-right: clamp(3px, 4vw, 8px) !important;
    padding-left: clamp(3px, 4vw, 8px) !important;
  }
  html body.legal-page .legal-public-head h1,
  html body.legal-page .legal-section h2 {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(8px, 8vw, 16px) !important;
    overflow-wrap: anywhere !important;
  }
  html body.legal-page .legal-section h2 {
    grid-template-columns: 12px minmax(0, 1fr) !important;
    gap: 3px !important;
  }
  html body.legal-page .legal-section-number {
    width: 12px !important;
    height: 12px !important;
    font-size: 6px !important;
  }
}

@media (max-width: 100px) {
  html body.home-page main > .section {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
  }
  html body.home-page .service-grid .service-card {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 3px !important;
  }
  html body.home-page .articles-teaser .article-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body.home-page .articles-teaser .article-card-body {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 3px !important;
  }
  html body.home-page .articles-teaser .article-card-body h3 {
    font-size: 8px !important;
    overflow-wrap: anywhere !important;
  }
}

/* A hidden absolute tooltip still expands its heading's scroll box in Chrome.
   Remove it from layout until hover, keyboard focus, or explicit open state. */
html body .term-tooltip-content {
  display: none !important;
}
html body .term-tip:is(:hover, :focus-within, .is-open) .term-tooltip-content {
  display: block !important;
}
@media (max-width: 240px) {
  html body.article-page .article-content .term-tip button {
    display: inline !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body.article-page .article-content .term-tooltip-content {
    display: none !important;
  }
  html body.article-page .article-content .term-tip:is(:hover, :focus-within, .is-open) .term-tooltip-content {
    box-sizing: border-box !important;
    display: block !important;
    position: fixed !important;
    z-index: 100 !important;
    top: auto !important;
    right: 4px !important;
    bottom: calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    left: 4px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 45dvh !important;
    overflow: auto !important;
    padding: 4px !important;
    transform: none !important;
  }
}

/* Share cards repeat on every public template. Keep their actual page title
   visible instead of truncating it with the base single-line ellipsis. */
html body .social-share-copy strong {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 240px) {
  html body .social-share {
    box-sizing: border-box !important;
    width: calc(100% - 2 * clamp(3px, 4vw, 8px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: clamp(3px, 4vw, 8px) !important;
  }
  html body .social-share-copy {
    min-width: 0 !important;
    width: 100% !important;
  }
  html body .social-share-trigger {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}
/* DIF service system default: one shared rail and content rhythm for every service page.
   The rail follows the CSS viewport so browser zoom and device width do not create
   mismatched insets between detail, related content, location, and booking sections. */
html body.service-page main > section.section {
  box-sizing: border-box;
  width: calc(100% - clamp(6px, 4vw, 128px));
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(8px, 2vw, 40px);
}
html body.service-page main > .service-area-summary {
  box-sizing: border-box;
  width: calc(100% - clamp(6px, 4vw, 128px));
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(8px, 2vw, 40px);
}
html body.service-page .service-detail-section {
  padding-block: clamp(34px, 5vw, 88px);
}
html body.service-page .service-detail-head,
html body.service-page .service-seo-content,
html body.service-page .service-content-grid {
  min-width: 0;
  width: 100%;
  max-width: none;
}
html body.service-page .service-detail-head {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 4vw, 64px);
}
html body.service-page .service-detail-title,
html body.service-page .service-detail-description,
html body.service-page .service-content-card,
html body.service-page .service-content-card-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
html body.service-page .service-detail-title h2 {
  max-width: 22ch;
  text-wrap: balance;
}
html body.service-page .service-content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 22px);
}
html body.service-page .service-content-card {
  height: 100%;
}
html body.service-page .service-content-card-copy :is(img, video, iframe, table, pre) {
  max-width: 100%;
}
html body.service-page .service-content-card-copy table {
  display: block;
  overflow-x: auto;
}
html body.service-page .service-related-articles > .section-intro,
html body.service-page .service-related-articles .service-related-article-grid,
html body.service-page .service-related-articles > .article-all {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}
html body.service-page main > .service-related-articles .service-related-article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html body.service-page main > .service-related-articles .article-card {
  min-width: 0;
}
html body.service-page main > .booking {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(16px, 4vw, 64px);
}
html body.service-page main > .booking > *,
html body.service-page main > .booking .booking-form,
html body.service-page main > .booking .form-grid > * {
  min-width: 0;
}
html body.service-page main > .booking .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body.service-page main > .booking .form-grid .full {
  grid-column: 1 / -1;
}
@media (max-width: 760px) {
  html body.service-page main > section.section,
  html body.service-page main > .service-area-summary {
    width: calc(100% - clamp(12px, 6vw, 32px));
    padding-inline: clamp(8px, 3vw, 18px);
  }
  html body.service-page .service-detail-head,
  html body.service-page main > .booking {
    grid-template-columns: minmax(0, 1fr);
  }
  html body.service-page .service-content-grid,
  html body.service-page main > .service-related-articles .service-related-article-grid,
  html body.service-page main > .booking .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html body.service-page main > .booking .form-grid .full {
    grid-column: auto;
  }
}
@media (max-width: 360px) {
  html body.service-page main > section.section,
  html body.service-page main > .service-area-summary {
    width: calc(100% - 12px);
    padding-inline: 8px;
  }
  html body.service-page .service-content-card {
    padding-inline: clamp(8px, 4vw, 14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.service-page .service-content-card {
    transition: none;
  }
}
/* Service editorial presentation: keep the shared grid, remove the boxed cards.
   This matches the open, unframed reading style used by the media service page. */
html body.service-page .service-content-grid {
  align-items: start;
  column-gap: clamp(22px, 3.5vw, 56px);
  row-gap: clamp(28px, 4vw, 60px);
}
html body.service-page .service-content-card {
  height: auto;
  min-height: 0;
  padding: 12px clamp(0px, .75vw, 10px) 16px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
html body.service-page .service-content-card::before {
  display: none;
}
html body.service-page .service-content-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
html body.service-page .service-content-index {
  display: block;
  width: max-content;
  min-width: 0;
  height: auto;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--service-accent, var(--gold));
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .12em;
}
html body.service-page .service-content-card h3 {
  margin-bottom: 10px;
}
@media (max-width: 760px) {
  html body.service-page .service-content-grid {
    row-gap: 26px;
  }
  html body.service-page .service-content-card {
    padding: 8px 0 12px;
  }
  html body.service-page .service-content-index {
    margin-bottom: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.service-page .service-content-card,
  html body.service-page .service-content-card:hover {
    transition: none;
    transform: none;
  }
}
/* Shared service guide modules: one clear vertical reading path across every service. */
html body.service-page .service-guide-module {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  padding-block: clamp(40px, 6vw, 88px);
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
}
html body.service-page .service-guide-module > :is(header, section) {
  width: 100%;
  min-width: 0;
  margin: 0;
}
html body.service-page .service-guide-module h2 {
  max-width: 28ch;
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.16;
  text-wrap: balance;
}
html body.service-page .service-guide-intro > p:last-child,
html body.service-page .service-guide-costs > p:not(.eyebrow) {
  max-width: 76ch;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.8;
}
html body.service-page .service-guide-process > .eyebrow,
html body.service-page .service-guide-prepare > .eyebrow,
html body.service-page .service-guide-costs > .eyebrow {
  margin-bottom: 10px;
}
html body.service-page .service-guide-process ol,
html body.service-page .service-guide-prepare ul,
html body.service-page .service-guide-costs ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
html body.service-page .service-guide-process li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
html body.service-page .service-guide-process li:last-child {
  border-bottom: 1px solid var(--line);
}
html body.service-page .service-guide-index {
  color: var(--service-accent, var(--gold));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}
html body.service-page .service-guide-process h3 {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4;
}
html body.service-page .service-guide-process li p {
  max-width: 76ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}
html body.service-page .service-guide-prepare li,
html body.service-page .service-guide-costs li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}
html body.service-page .service-guide-prepare li:last-child,
html body.service-page .service-guide-costs li:last-child {
  border-bottom: 1px solid var(--line);
}
html body.service-page .service-guide-module .button {
  margin-top: 22px;
}
html body.service-page .tvc-production-content {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
}
html body.service-page .tvc-intro,
html body.service-page .tvc-budget {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
html body.service-page .tvc-type-grid,
html body.service-page .tvc-process ol,
html body.service-page .tvc-format-grid,
html body.service-page .tvc-reading {
  grid-template-columns: minmax(0, 1fr);
}
html body.service-page .tvc-type-card,
html body.service-page .tvc-step-card,
html body.service-page .tvc-format-card {
  min-height: 0;
}
html body.service-page .tvc-budget ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
html body.service-page .tvc-reading a {
  min-width: 0;
}
@media (max-width: 760px) {
  html body.service-page .service-guide-module {
    gap: 32px;
    padding-block: 36px;
  }
  html body.service-page .service-guide-process li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
  }
  html body.service-page .tvc-production-content {
    gap: 34px;
  }
}

/* Desktop article utility rail stays visible while reading; mobile keeps normal flow. */
@media (min-width: 901px) {
  html body.article-page .article-aside {
    position: sticky;
    top: calc(var(--site-header-height, 88px) + 20px);
    align-self: start;
    max-height: calc(100vh - var(--site-header-height, 88px) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  html body.article-page .article-sidebar-stack { margin-top: 0; }
}
@media (max-width: 900px) {
  html body.article-page .article-aside {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}


/* System-wide service detail standard: one balanced top-to-bottom reading column. */
html body.service-page .service-detail-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}
html body.service-page .service-detail-title h2 { max-width: 42ch !important; }
html body.service-page .service-content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(22px, 3.2vw, 44px) !important;
}
html body.service-page .service-content-card,
html body.service-page .service-content-card:hover {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 95%, var(--gold)), var(--surface)) !important;
  box-shadow: 0 10px 28px #0000000d !important;
  transform: none !important;
}
html body.service-page .service-content-card::before { display: none !important; }
html body.service-page .service-content-card-copy { max-width: 80ch !important; }
html body.service-page .service-content-card-copy figure.image {
  display: block !important;
  width: fit-content !important;
  max-width: min(100%, 56rem) !important;
  margin: 18px 0 22px !important;
}
html body.service-page .service-content-card-copy figure.image img,
html body.service-page .service-content-card-copy > img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(66vh, 720px) !important;
  object-fit: contain !important;
  margin: 0 !important;
}
html body.service-page .service-guide-module {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
}
html body.service-page .service-guide-module > :is(header, section) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
html body.service-page .service-guide-topics > ol,
html body.service-page .service-guide-process > ol,
html body.service-page .service-guide-prepare > ul,
html body.service-page .service-guide-costs > ul {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html body.service-page .service-guide-topics-item,
html body.service-page .service-guide-step-item,
html body.service-page .service-guide-prepare-item,
html body.service-page .service-guide-cost-item {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--line) !important;
}
html body.service-page .service-guide-module li:last-child { border-bottom: 1px solid var(--line) !important; }
@media (max-width: 760px) {
  html body.service-page .service-content-grid { gap: 18px !important; }
  html body.service-page .service-content-card-copy figure.image { margin: 14px 0 18px !important; }
  html body.service-page .service-guide-topics-item,
  html body.service-page .service-guide-step-item,
  html body.service-page .service-guide-prepare-item,
  html body.service-page .service-guide-cost-item { grid-template-columns: 28px minmax(0, 1fr) !important; gap: 10px !important; }
}
/* Match the media guide's restrained cards while keeping every service section vertical. */
html body.service-page .service-guide-topics > ol,
html body.service-page .service-guide-process > ol,
html body.service-page .service-guide-prepare > ul,
html body.service-page .service-guide-costs > ul {
  gap: 10px !important;
}
html body.service-page .service-guide-topics-item,
html body.service-page .service-guide-step-item,
html body.service-page .service-guide-prepare-item,
html body.service-page .service-guide-cost-item {
  padding: clamp(16px, 2vw, 22px) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 95%, var(--gold)), var(--surface)) !important;
}
html body.service-page .service-guide-module li:last-child { border-bottom: 1px solid var(--line) !important; }


/* Service body content follows the media page's open editorial layout (no enclosing card boxes). */
html body.service-page .service-content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;
}
html body.service-page .service-content-card,
html body.service-page .service-content-card:hover {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 0 clamp(24px, 2.8vw, 44px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
html body.service-page .service-content-card:last-child { border-bottom: 0 !important; }
html body.service-page .service-content-card::before { display: none !important; }
html body.service-page .service-content-card-copy { max-width: 82ch !important; }
html body.service-page .service-content-card-copy figure.image {
  width: min(100%, 56rem) !important;
  margin: 18px 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.service-page .service-content-card-copy figure.image img,
html body.service-page .service-content-card-copy > img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 16px !important;
}

/* Service-wide editorial cards without sequence numbers, shared by all service pages. */
html body.service-page .tvc-type-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; }
html body.service-page .tvc-type-card h3,
html body.service-page .tvc-type-card p { grid-column: 1 !important; }
html body.service-page .tvc-type-card h3 { padding-right: 28px !important; }

/* Shared pre-share service page system: align hero, detail and media-style guide on one rail. */
html body.service-page .service-hero {
  box-sizing: border-box !important;
  padding-inline: clamp(16px, 6vw, 96px) !important;
}
html body.service-page main > .service-detail-section,
html body.service-page main > .tvc-production-content {
  box-sizing: border-box !important;
  width: calc(100% - clamp(32px, 8vw, 128px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: clamp(8px, 2vw, 32px) !important;
}
html body.service-page main > .service-detail-section { padding-block: clamp(38px, 5vw, 76px) !important; }
html body.service-page main > .tvc-production-content {
  padding-block: clamp(42px, 6vw, 88px) !important;
}
html body.service-page .service-detail-head {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(14px, 2vw, 24px) !important;
  padding-bottom: clamp(24px, 3vw, 40px) !important;
  border-bottom: 1px solid var(--line) !important;
}
html body.service-page .service-detail-title h2 {
  max-width: 36ch !important;
  font-size: clamp(26px, 3.2vw, 44px) !important;
  line-height: 1.14 !important;
  text-wrap: balance !important;
}
html body.service-page .service-detail-description,
html body.service-page .service-detail-description > * {
  max-width: 78ch !important;
}
@media (max-width: 760px) {
  html body.service-page main > .service-detail-section,
  html body.service-page main > .tvc-production-content {
    width: calc(100% - 32px) !important;
    padding-inline: 0 !important;
  }
  html body.service-page .service-hero { padding-inline: 16px !important; }
}
@media (max-width: 320px) {
  html body.service-page main > .service-detail-section,
  html body.service-page main > .tvc-production-content { width: calc(100% - 20px) !important; }
  html body.service-page .service-hero { padding-inline: 10px !important; }
}

/* Home banner: scale the long editable headline to the poster and place the
   whole copy group at its lower-left, without changing the shared header. */
@media (min-width: 761px) {
  html body.home-page .hero-copy-overlay {
    box-sizing: border-box !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(20px, 3vw, 60px) clamp(20px, 3vw, 60px) clamp(24px, 3vw, 50px) !important;
  }
  html body.home-page .hero-copy-overlay h1 {
    width: min(100%, 1160px) !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(20px, 2.4vw, 44px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
  }
  html body.home-page .hero-copy-overlay > p:not(.eyebrow) {
    width: auto !important;
    max-width: min(100%, 62ch) !important;
    margin-top: clamp(8px, 1vw, 14px) !important;
    font-size: clamp(13px, 1.15vw, 17px) !important;
    line-height: 1.5 !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions {
    margin-top: clamp(10px, 1.25vw, 18px) !important;
  }
}