/*
 * NEWWORK shared responsive layout contract.
 * Page-level layouts use these tokens; diagrams retain their own named
 * component layouts so labels are never compressed to fit the page grid.
 */
:root{
  --nw-layout-columns:4;
  --nw-layout-edge:16px;
  --nw-layout-gap:16px;
  --nw-layout-max:1600px;
  --nw-layout-stack-gap:32px;
  --nw-layout-content:min(var(--nw-layout-max),calc(100% - 2 * max(var(--nw-layout-edge),env(safe-area-inset-left),env(safe-area-inset-right))));
  --nw-layout-inline:max(var(--nw-layout-edge),env(safe-area-inset-left),env(safe-area-inset-right),calc((100% - var(--nw-layout-max)) / 2));
  --gutter:var(--nw-layout-edge);
}

/* One outer edge rule.  All full-bleed surfaces retain their backgrounds;
   their meaningful direct content aligns to the shared inner container. */
html{box-sizing:border-box}
main,section,article,header,footer,[class*="-inner"],[class*="-layout"],[class*="-grid"]{min-inline-size:0}
.site-header{padding-inline:var(--nw-layout-inline)}
.site-footer-inner,.page-intro,.product-showcase>*,.contact-layout,.connect-content,.workplace-content,.foundation-content,.legal-content,.detail-return-nav{max-inline-size:calc(var(--nw-layout-max) + 2 * var(--nw-layout-edge));}
.site-footer-inner,.contact-layout,.connect-content,.workplace-content,.foundation-content,.legal-content,.detail-return-nav{padding-inline:max(var(--nw-layout-edge),env(safe-area-inset-left),env(safe-area-inset-right));}
.site-footer-inner{max-width:none;width:var(--nw-layout-content);padding-inline:0}

/* Named reusable grid families. Existing templates opt in through their
   established class names below; these utilities remain available to future
   templates without another page-specific width rule. */
.nw-layout-grid{display:grid;grid-template-columns:repeat(var(--nw-layout-columns),minmax(0,1fr));gap:var(--nw-layout-gap);width:var(--nw-layout-content);margin-inline:auto}
.nw-layout-full{grid-column:1/-1;min-inline-size:0}
.nw-layout-pair,.nw-layout-media,.nw-layout-editorial,.nw-layout-cards{display:grid;grid-template-columns:repeat(var(--nw-layout-columns),minmax(0,1fr));gap:var(--nw-layout-gap);min-inline-size:0}
.nw-layout-pair>*,.nw-layout-media>*,.nw-layout-editorial>*,.nw-layout-cards>*{grid-column:1/-1;min-inline-size:0}
.nw-reading-measure{max-inline-size:min(70ch,100%)}

/* Existing shared families. */
.home-hero,.world-intro,.product-body,.section-heading,.constitution-section,.closing-grid,.beyond-teaser,.connect-teaser,.editorial-pair,.related{gap:var(--nw-layout-stack-gap)}
.product-grid,.capability-band{gap:var(--nw-layout-gap)}
.product-card,.editorial-card,.contact-form-panel{min-inline-size:0;height:auto}
.content-page p,.legal-content p,.editorial-body p,.contact-intro p{max-inline-size:70ch;hyphens:auto}
.content-page a,.legal-content a,.contact-page a{overflow-wrap:anywhere}

/* The Start_new collection already has semantic inner wrappers. Apply the
   same shell width and the canonical outer edge exactly once. */
body:has(.start-new-page) .start-new-page{--sn-gutter:0px;overflow:clip}
body:has(.start-new-page) .sn-hero-inner,body:has(.start-new-page) .sn-delivers-inner,body:has(.start-new-page) .sn-execution-inner,body:has(.start-new-page) .sn-product-inner,body:has(.start-new-page) .sn-beyond-inner,body:has(.start-new-page) .sn-finale-inner,body:has(.start-new-page) .sn-statement-inner,body:has(.start-new-page) .sn-media-inner{width:var(--nw-layout-content);max-width:none;padding-inline:0}
/* Start_new previously gave the header an independent 104px desktop inset.
   Keep the full-width surface, but put its visible controls on the same
   container edge as the page sections. */
body:has(.start-new-page) .site-header{padding-inline:var(--nw-layout-inline)}

/* Tablet: 8 tracks / 24px edge and gap. */
@media (min-width:768px){
 :root{--nw-layout-columns:8;--nw-layout-edge:24px;--nw-layout-gap:24px;--nw-layout-stack-gap:40px}
 .nw-layout-cards>*{grid-column:span 4}
 .product-grid,.editorial-pair,.capability-band{grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-footer-inner{width:var(--nw-layout-content)}
}

/* Desktop: 12 tracks / 32px edge and gap. Grid choices are deliberately
   semantic: prose/media 5+7, editorial/sidebar 4+8, standard pairs 6+6. */
@media (min-width:1024px){
 :root{--nw-layout-columns:12;--nw-layout-edge:32px;--nw-layout-gap:32px;--nw-layout-stack-gap:48px}
 .nw-layout-pair>*{grid-column:span 6}
 .nw-layout-media>*:first-child{grid-column:span 5}.nw-layout-media>*:last-child{grid-column:span 7}
 .nw-layout-editorial>*:first-child{grid-column:span 4}.nw-layout-editorial>*:last-child{grid-column:span 8}
 .nw-layout-cards>*{grid-column:span 4}
 .home-hero,.beyond-teaser,.connect-teaser,.product-body,.constitution-section,.closing-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--nw-layout-gap)}
 .world-intro,.section-heading,.related{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--nw-layout-gap)}
 .editorial-pair,.product-grid,.capability-band{gap:var(--nw-layout-gap)}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .capability-band{grid-template-columns:repeat(2,minmax(0,1fr))}
 .contact-layout,.detail-return-inner{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--nw-layout-gap)}
 .detail-return-inner>.text-link{grid-column:2}
 .site-header{min-height:var(--header)}
}

/* Wide desktop: 12 tracks / 40px edge and gap. Four-card families may use
   four columns only here; current three-card collections retain their cards. */
@media (min-width:1440px){
 :root{--nw-layout-edge:40px;--nw-layout-gap:40px}
 .nw-layout-cards--four>*{grid-column:span 3}
 .capability-band{grid-template-columns:repeat(4,minmax(0,1fr))}
 .sn-delivers-inner,.sn-beyond-inner{grid-template-columns:minmax(20rem,5fr) minmax(25rem,7fr);gap:var(--nw-layout-gap)}
 .sn-media-inner{grid-template-columns:minmax(20rem,5fr) minmax(25rem,7fr);gap:var(--nw-layout-gap)}
 /* The three designated start-page editorial sections reserve a stable
    right-side visual lane while letting their prose use the full text track. */
 .start-new-page :is(#sn-office,#sn-beyond) .sn-media-inner{column-gap:80px}
 .start-new-page :is(#sn-office,#sn-beyond) .sn-media-body{width:min(100%,680px)}
 .start-new-page #sn-workforce .sn-product-inner{grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:80px}
 .start-new-page #sn-workforce .sn-product-copy{max-width:560px}
}

/* Header and footer use the same geometry. The full navigation is retained
   from 1024px up; the established compact navigation handles smaller widths. */
@media (min-width:1024px){
 .site-header{padding-inline:var(--nw-layout-inline)}
 .new-navigation-panel:not(.products-mega-panel){padding-inline:var(--nw-layout-inline)}
 .new-navigation-panel-inner{width:var(--nw-layout-content);max-width:none}
}

@media (max-width:1023px){
 .home-hero,.beyond-teaser,.connect-teaser,.product-body,.constitution-section,.closing-grid,.editorial-pair,.world-intro,.section-heading,.related{grid-template-columns:minmax(0,1fr)}
 .contact-layout,.detail-return-inner{grid-template-columns:minmax(0,1fr)}
 .detail-return-inner>.text-link{grid-column:1}
 .start-new-page .sn-delivers-inner,.start-new-page .sn-beyond-inner,.start-new-page .sn-media-inner{grid-template-columns:minmax(0,1fr)}
}

@media print{.site-header{position:static}.mobile-dialog,.new-navigation-panel{display:none!important}.start-new-page{overflow:visible}}