/* Shared responsive layout contract, 2026-09-08.
   The homepage credentials define the outer content edges on EVERY route.
   One gutter at the page boundary, never another gutter in nested components.
   No zoom, raster scaling, alternate photographs, or viewport-dependent content. */
:root{
  --site-gutter:clamp(24px,2.5vw,64px);
  --site-content-max:clamp(1320px,calc(81.25vw - 240px),1840px);
  --site-content-width:min(var(--site-content-max),calc(100% - 2 * var(--site-gutter)));
  --site-nav-font:clamp(14px,calc(.546875vw + 3.5px),17.5px);
  --site-nav-row:clamp(37.5px,calc(1.64vw + 6px),48px);
}
@media(min-width:1025px){:root{--side:clamp(245px,21vw,270px);--ccw-approved-side:var(--side)}}
@media(min-width:1921px){:root{--side:clamp(270px,calc(7.8125vw + 120px),320px)}}
@media(max-width:1024px){:root{--side:0px;--ccw-approved-side:0px}}
@media(max-width:620px){:root{--site-gutter:16px}}

/* Shell and content use the same geometry; long prose remains readable inside it. */
body .wrap,
.ccw-approved-site .ccw-shared-home .wrap,
.ccw-approved-site .ccw-editorial-page .ed-wrap,
body .shared-topline-shell .topline{width:var(--site-content-width);max-width:none;margin-inline:auto}
.ccw-approved-site :is(.ccw-main,.ccw-services-main){width:100%;max-width:none;padding:32px 0 56px;--ccw-main-gutter:0px}
.ccw-approved-site :is(.ccw-blueprint-page,.ccw-services-page,.ccw-article,.ccw-contact-page){width:100%;max-width:none;margin-inline:0;padding-inline:0}
.ccw-approved-site .ccw-blueprint-page>*,
.ccw-approved-site .ccw-blueprint-page:has(.ccw-shared-home)>*,
.ccw-approved-site .ccw-blueprint-page:has(>.ccw-blueprint-slot>.credentials)>:not(:has(>.credentials)){
  width:var(--site-content-width);max-width:none;margin-inline:auto;
}
.ccw-approved-site .ccw-blueprint-page>.ccw-blueprint-slot:has(>.ccw-shared-home),
.ccw-approved-site .ccw-blueprint-page>.ccw-blueprint-slot:has(>.credentials),
.ccw-approved-site .ccw-editorial-page>*,
.ccw-approved-site .ccw-editorial-page>.ccw-blueprint-slot{width:100%;max-width:none;margin-inline:0}
.ccw-approved-site .ccw-blueprint-page.ccw-editorial-page:has(.ccw-shared-home)>*,
.ccw-approved-site .ccw-blueprint-page.ccw-editorial-page>*:not(.ed-wrap){width:100%;max-width:none;margin-inline:0}
.ccw-approved-site .ccw-blueprint-page.ccw-editorial-page>.ed-wrap{width:var(--site-content-width);max-width:none;margin-inline:auto}
.ccw-approved-site .ccw-blueprint-slot>.ccw-shared-home,
.ccw-approved-site .ccw-blueprint-slot>.credentials{width:100%;margin-inline:0}
.ccw-approved-site .ccw-blueprint-slot:has(>.ccw-shared-home)>:not(.ccw-shared-home){width:var(--site-content-width);max-width:none;margin-inline:auto}
.ccw-approved-site .ccw-blueprint-slot:has(>.credentials)>:not(.credentials){max-width:none}
.ccw-approved-site .ccw-editorial-page>.ccw-blueprint-slot .ccw-team-consultation{width:var(--site-content-width);margin-inline:auto}
.ccw-approved-site .ccw-services-main:has(.ccw-editorial-page){padding:0}
.ccw-blueprint-page :is(.ccw-content-section,.ccw-content-extension)>p{max-width:85ch}

/* Identical regular-weight, spaced lettering on all menu items and routes. */
body .side-nav>a,body .side-nav>.nav-group>summary{
  font-size:var(--site-nav-font)!important;min-height:var(--site-nav-row);
  font-weight:300!important;letter-spacing:.085em;line-height:1.35!important;
}
body .nav-submenu>a,body .nav-subgroup>div>a,body .nav-subgroup>summary{
  font-size:clamp(12px,calc(.46875vw + 3px),15px)!important;font-weight:300!important;
}
@media(min-width:1921px){
  body .sidebar{padding-inline:21px}
  body .brand,.ccw-approved-site .brand{height:118px}
  body .brand img,.ccw-approved-site .brand img{width:236px;height:118px;max-height:118px}
  body .side-nav{margin-top:12px}
  body .side-nav>a>svg:not(.nav-retro-frame),body .side-nav>.nav-group>summary>svg:not(.nav-retro-frame){width:19px;height:19px}
  body .side-nav>a,body .side-nav>.nav-group>summary{grid-template-columns:21px minmax(0,1fr) 11px;gap:10px}
  body .side-copy{font-size:14px}
  body .side-search input{font-size:16px}
  body .footer-grid{font-size:18px}
  body .footer-bottom{font-size:15px}
}

/* Natural document flow replaces the fixed 1040 x 750 coordinate stage. */
@media(min-width:1025px){
  body .hero-scale-shell{height:auto;overflow:visible}
  body .hero{height:auto;min-height:clamp(750px,calc(28.125vw + 210px),930px)}
  body .hero-content{height:auto;min-height:inherit;display:flex;flex-direction:column;padding:22px 0 54px}
  body .hero-content>.topline{position:relative;inset:auto;width:100%;margin:0}
  body .topline{height:auto;min-height:36px;display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(20px,3vw,64px);font-size:clamp(16px,1vw,20px)}
  body .topline>a,body .topline>span,body .topline .eye-btn,body .topline .vk{position:relative!important;inset:auto!important;flex:none}
  body .topline .vk{margin-left:auto}
  body .shared-topline-shell{min-height:80px;padding:22px 0}
  body .shared-topline-shell .topline{position:relative;inset:auto}
  body .audio-frame{position:relative;inset:auto;width:min(700px,68%);height:48px;margin:30px 0 0;flex:none}
  body .hero-title-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,24%);gap:clamp(24px,3vw,60px);align-items:center;margin:clamp(42px,3.5vw,80px) 0 0}
  body .hero h1{position:relative;inset:auto;width:auto;font-size:clamp(58px,4.9vw,112px);line-height:1.03;margin:0}
  body .hero-kicker{position:relative;inset:auto;width:auto;height:auto;min-height:140px;align-self:center;font-size:clamp(13px,.85vw,18px);padding:18px 0 28px 24px}
  body .hero-kicker:after{bottom:8px}
  body .hero-stats{position:relative;inset:auto;width:100%;height:auto;margin:clamp(36px,3vw,64px) 0 0;padding:34px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  body .hero-stats:before{width:100%}
  body .hero-stats>div:nth-child(n){position:relative;inset:auto;width:auto;height:auto;min-height:64px;grid-template-columns:clamp(48px,3.4vw,72px) minmax(0,1fr);padding:0 clamp(12px,1.25vw,30px);gap:14px}
  body .hero-stats>div:first-child{padding-left:0}
  body .hero-stats>div:last-child{padding-right:0}
  body .hero-stats p{font-size:clamp(15px,1vw,21px);white-space:normal}
  body .hero-stats .stat-icon{width:clamp(48px,3.4vw,72px)!important;height:clamp(48px,3.4vw,72px)!important}
  body .hero-stats .stat-icon svg{width:clamp(26px,1.7vw,36px)!important;height:clamp(26px,1.7vw,36px)!important}
  body .framed-cta{position:relative;inset:auto;transform:none;width:100%;height:auto;min-height:108px;margin:40px 0 0;padding:20px 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,34%);gap:24px;align-items:center}
  body .framed-cta p{white-space:normal;font-size:clamp(21px,1.4vw,30px)}
  body .framed-cta .button{position:relative!important;inset:auto!important;align-self:center;width:100%;height:auto;min-height:68px;font-size:clamp(18px,1vw,23px)}
}
@media(min-width:1025px) and (max-width:1250px){
  body .hero-title-grid{grid-template-columns:minmax(0,1fr) 190px;gap:20px}
  body .hero h1{font-size:56px}
  body .hero-stats>div:nth-child(n){grid-template-columns:42px minmax(0,1fr);gap:8px;padding-inline:10px}
  body .hero-stats .stat-icon{width:42px!important;height:42px!important}
  body .framed-cta{grid-template-columns:1fr 280px;padding:20px}
}

/* Prevent the original width/height HTML attributes from stretching illustrations
   when a desktop three-column block switches to two or one columns. */
body .principle-art img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:330px;object-fit:contain}
body .principle-grid.reverse .principle-art{min-width:0;min-height:0}
@media(min-width:1921px){
  body .principle-art img{max-height:360px}
  body .split-feature{min-height:420px}
  body .feature-copy>p:not(.section-label),body .principle-copy p{font-size:18px}
  body .credential-card{min-height:165px}
}
@media(max-width:767px){
  body .principle-art img{max-height:260px}
  body .principle-grid,body .principle-grid.reverse{grid-template-columns:1fr;min-height:0}
  body .principle-art{grid-column:1;min-height:0}
  .ccw-approved-site .ccw-blueprint-page>.ccw-blueprint-slot{margin-block:24px}
}
/* Accessibility preferences outrank decorative sizing. */
html:is([data-a11y-size=large],[data-a11y-size=xlarge]) .side-nav :is(a,summary){font-size:22px!important;line-height:1.6!important}
html[data-a11y-images=hidden] .ed-hero-portrait,
html[data-a11y-images=hidden] .ed-demand-image,
html[data-a11y-images=hidden] .ed-mission-grid figure{display:none!important}
html[data-a11y-images=hidden] :is(.ed-hero-grid,.ed-demand-grid,.ed-mission-grid){grid-template-columns:1fr}
html[data-a11y-theme=contrast] :is(.ed-hero,.ed-section,.ed-card,.ed-document){color:#fff!important;background:#000!important}
html[data-a11y-theme=contrast] .ccw-editorial-page :is(p,h1,h2,h3,a,span,li,summary){color:#fff!important}

/* Approved banner stays untouched. Only 23 source pixels of the completed visor
   crown are exposed above its original crop. The contour excludes every pixel
   of the generated banner and its baked checkerboard. */
.safety-promo{overflow:visible}
.safety-promo{container-type:inline-size}
/* Owner correction: the final question is the largest emotional step.
   Size follows the artwork, not the viewport; portraits and visor stay unchanged. */
.safety-promo .safety-question{position:absolute;top:16%;right:3.6%;width:28.8%;margin:0;padding:0;border:0;background:none;display:grid;grid-template-columns:1fr;gap:clamp(4px,1.2cqw,22px);color:#102531}
.safety-promo .safety-question span{font-size:clamp(30px,9cqw,165px);line-height:.72;color:#a72828}
.safety-promo .safety-question strong{font-size:clamp(13px,4.1cqw,76px);line-height:1.04;font-weight:400;text-shadow:none}
.safety-promo .safety-note-bottom{color:#fff1d0;text-shadow:none}
.safety-promo::after{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  top:0;
  left:0;
  width:100%;
  aspect-ratio:1981/27;
  transform:translate(-.05%,-100%) scaleX(.93);
  transform-origin:48% 100%;
  background-position:left top;
  background-size:100% auto;
  background-repeat:no-repeat;
  clip-path:polygon(47.45078% 14.81481%,48.66229% 14.81481%,49.16709% 22.22222%,49.46996% 29.62963%,49.82332% 37.03704%,50.17668% 48.14815%,50.37860% 59.25926%,50.58051% 66.66667%,50.78243% 74.07407%,50.98435% 81.48148%,51.03483% 88.88889%,51.18627% 96.29630%,51.23675% 100.00000%,44.82585% 100.00000%,44.87633% 96.29630%,45.02776% 88.88889%,45.12872% 81.48148%,45.22968% 74.07407%,45.38112% 66.66667%,45.63352% 59.25926%,45.88592% 51.85185%,45.98688% 44.44444%,46.34023% 37.03704%,46.64311% 29.62963%,47.04695% 22.22222%);
}
.safety-promo[data-visor-ready]::after{background-image:url('/assets/home/images/safety-visor-extension-source.png')}
