/* Shared layout, heading visibility and enquiry separation safeguards */
/* Prevent headings from being clipped by tight line boxes or visual wrappers. */
main h1,main h2,main h3,section h1,section h2,section h3{line-height:1.25;overflow:visible;overflow-wrap:anywhere}
section,figure{scroll-margin-top:24px}
/* Workflow / infographic panels must not crop their headings above the graphic. */
.workflow-panel,.diagram-panel,.visual-panel,.content-visual,.technology-building-blocks,.structured-route,.workflow-graphic,.process-visual{overflow:visible!important;padding-top:18px}
.workflow-panel h2,.diagram-panel h2,.visual-panel h2,.content-visual h2,.technology-building-blocks h2,.structured-route h2,.workflow-graphic h2,.process-visual h2{margin-top:0;padding-top:6px}
/* Keep the Request a Component CTA visually clean across all pages. */
.site-header .nav-cta::before,.site-header .nav-cta::after{display:none!important;content:none!important}
.site-header .nav-cta,.site-header .nav-cta:hover,.site-header .nav-cta:focus,.site-header .nav-cta:active{text-decoration:none!important;box-shadow:none!important}
@media(max-width:760px){main h1,section h1{line-height:1.18} .workflow-panel,.diagram-panel,.visual-panel,.content-visual,.technology-building-blocks,.structured-route,.workflow-graphic,.process-visual{padding-top:14px}}


/* Site-wide layout audit fixes (2026-10-29): apply to every content page. */
:root{scroll-padding-top:90px}
body{min-width:0;overflow-wrap:break-word}
main,section,article,figure,.container,.page-hero,.page-hero-inner,.page-visual,.page-visual-inner,.section-head,.process-v4,.process-v4-content,.process-v4-grid,.process-v4-card,.process-v4-image,.diagram{min-width:0}
/* Headings must remain fully visible even when a parent has a constrained line box. */
h1,h2,h3,h4,h5,h6{box-sizing:border-box;max-width:100%;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty}
.page-hero h1{line-height:1.16;margin-block:10px 18px;padding-block:2px}
.page-hero p{line-height:1.7;margin-block:0}
.section-head{height:auto;min-height:0;overflow:visible;margin-block:0 28px}
.section-head h2,.section-head h3{height:auto;min-height:0;line-height:1.25;padding-block:2px;margin-block:8px 14px}
/* Do not crop workflow headings or infographic labels; scale diagrams to their container. */
.diagram,.process-v4,.process-v4-content,.process-v4-grid,.process-v4-card,.process-v4-image,.page-visual-inner,.home-visual-inner{height:auto;min-height:0;overflow:visible}
.diagram{min-height:250px;padding:clamp(18px,3vw,32px);}
.diagram strong{line-height:1.3;overflow-wrap:anywhere}
.process-v4-image img,.page-visual img,.home-visual img,.process-v4 img{display:block;max-width:100%;height:auto;object-fit:contain}
.page-visual-inner,.home-visual-inner{padding:0}
/* If the graphic itself is a raster/SVG, do not force a crop that can hide labels near its edges. */
.page-visual img{width:100%;max-height:none;object-fit:contain;object-position:center top}
/* Keep spacing between hero and following section intentional and consistent. */
.page-hero+section,.page-hero+.container,.page-hero+.page-visual{margin-top:0}
.page-visual+section,.home-visual+section{margin-top:0}
/* Mobile layout: no fixed heights or negative top offsets that clip titles/diagrams. */
@media(max-width:850px){
  .page-hero{padding-block:34px 42px}
  .page-hero h1{font-size:clamp(30px,7.8vw,40px);line-height:1.18;margin-block:8px 14px}
  .page-hero p{font-size:17px;line-height:1.65}
  .section-head{margin-bottom:22px}
  .section-head h2{font-size:clamp(25px,6vw,32px);line-height:1.25}
  .diagram{padding:18px;min-height:0}
  .process-v4,.process-v4-content,.process-v4-grid,.process-v4-card,.process-v4-image{height:auto;min-height:0;overflow:visible}
  .page-visual img,.home-visual img,.process-v4-image img{max-height:none;height:auto;object-fit:contain}
}
@media(max-width:480px){
  h1,h2,h3{letter-spacing:normal}
  .page-hero h1{font-size:clamp(28px,8vw,36px)}
  .page-visual,.home-visual{padding-inline:14px}
  .diagram strong{font-size:clamp(19px,5.4vw,26px)}
}


/* Footer bottom: three balanced zones, with VKEC credit at the far right. */
.site-footer .footer-bottom{max-width:1180px;margin:0 auto;padding:13px 24px;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:12px;font-size:10px;line-height:1.45;color:#91a7b1;border-top:1px solid rgba(255,255,255,.12)}
.site-footer .footer-bottom-left{text-align:left}
.site-footer .footer-bottom-center{text-align:center}
.site-footer .footer-bottom-right{text-align:right;white-space:nowrap;font-size:9px;color:#91a7b1}
.site-footer .footer-bottom-right a{display:inline!important;margin:0!important;font-size:9px!important;color:#8fe0c0!important;font-weight:600;text-decoration:none}
.site-footer .footer-bottom-right a:hover,.site-footer .footer-bottom-right a:focus{text-decoration:underline}
@media(max-width:760px){.site-footer .footer-bottom{grid-template-columns:1fr;gap:5px;text-align:center;padding:12px 16px}.site-footer .footer-bottom-left,.site-footer .footer-bottom-center,.site-footer .footer-bottom-right{text-align:center;white-space:normal}.site-footer .footer-bottom-right{font-size:9px}}


/* Request a Component CTA: no orange hover underline/accent in any state. */
.site-header .main-nav > a.nav-cta::before,
.site-header .main-nav > a.nav-cta::after,
.site-header .nav-cta::before,
.site-header .nav-cta::after {
  content: none !important; display: none !important;
  border: 0 !important; background: none !important;
  box-shadow: none !important;
}
.site-header .main-nav > a.nav-cta,
.site-header .main-nav > a.nav-cta:hover,
.site-header .main-nav > a.nav-cta:active,
.site-header .main-nav > a.nav-cta:visited {
  background: #0b2b66 !important; color: #fff !important;
  text-decoration: none !important; border: 0 !important;
  box-shadow: none !important; transform: none !important;
}
.site-header .main-nav > a.nav-cta:hover { filter: brightness(1.08); }
.site-header .main-nav > a.nav-cta:focus-visible {
  outline: 2px solid #1769d2 !important; outline-offset: 3px;
}
#generalEnquiryForm { scroll-margin-top: 110px; }