/* Local composition study. Brand assets and the published broad scrim are unchanged. */
:root{--composition-gap:32px;--composition-rule:rgba(0,37,84,.17)}
body[data-scene=night]{--composition-rule:rgba(224,234,241,.2)}
.scene-layout .side-note h2{font-size:38px!important;line-height:1.18!important;margin:0 0 20px!important;letter-spacing:0;text-wrap:balance}
.scene-layout .side-note p{font-size:19px!important;line-height:1.55!important;max-width:260px;margin:0}
.brand-promise{padding:30px 0}
.brand-promise h2{font-size:26px;line-height:1.38;margin:0;text-wrap:balance;letter-spacing:0}
.brand-promise:first-child{padding-top:0}
.brand-promise:last-child{padding-bottom:0}
body[data-scene=dawn] .scene-layout .side-note h2,
body[data-scene=dawn] .scene-layout .side-note p,
body[data-scene=dawn] .scene-layout .brand-promise h2{
  color:#fff;
  text-shadow:0 0 1.4px rgba(3,17,29,.98),0 1px 2.8px rgba(3,17,29,.86),0 0 6px rgba(3,17,29,.62),0 2px 11px rgba(3,17,29,.28);
}
.about{padding:0}
.about-inner{width:92%;max-width:1680px;margin:0 auto;padding:0}
.about-top{display:block;padding:32px 0;border-color:var(--composition-rule)}
.experience{display:flex;gap:14px;align-items:baseline;font-size:18px;line-height:1.5}
.about-top>p.experience{font-size:18px;line-height:1.5;text-align:left;color:inherit;margin:0}
.experience b{font-family:'Aspect Display','Segoe UI',sans-serif;font-size:34px;line-height:1.1;margin:0}
.company-story,.contact-grid,.principle-details{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--composition-gap)}
.company-story{padding:48px 0;border-color:var(--composition-rule)}
.company-story h2{grid-column:span 4;font-size:34px;line-height:1.25}
.company-story>div{grid-column:span 8;max-width:760px}
.company-story p{font:400 16px/1.75 'Segoe UI',Arial,sans-serif;max-width:72ch}
.principles{padding:48px 0;border-bottom:1px solid var(--composition-rule)}
.principles>h2{font:400 34px/1.25 'Aspect Display','Segoe UI',sans-serif;letter-spacing:0;margin:0 0 32px}
.principle-details article{grid-column:span 4;min-width:0}
.principle-details h3{font:400 25px/1.35 'Aspect Display','Segoe UI',sans-serif;letter-spacing:0;margin:0 0 14px}
.principle-details p{font:400 16px/1.75 'Segoe UI',Arial,sans-serif;margin:0;max-width:46ch;color:#cbd5df}
body[data-scene=dawn] .principle-details p{color:#425569}
.contact-grid{padding:36px 0}
.contact-grid>div{grid-column:span 4;min-width:0}
.contact-grid h2{font-size:25px;line-height:1.35;margin:0 0 16px}
.contact-grid p,.contact-grid address,.contact-grid .email{font:400 15px/1.7 'Segoe UI',Arial,sans-serif}
.contact-grid p{max-width:46ch}
.footer-line{border-color:var(--composition-rule);padding:24px 0}
@media(min-width:1800px){.scene-layout .side-note h2{font-size:42px!important}.brand-promise h2{font-size:30px}.brand-promise{padding:34px 0}.scene-layout .side-note p{font-size:20px!important;max-width:300px}}
@media(max-width:1200px){
  .scene-layout .side-note h2{font-size:34px!important;max-width:580px;margin:0 auto 14px!important}
  .scene-layout .side-note p{max-width:none;margin:0 auto;font-size:18px!important}
  .brand-promises.mobile-promises{padding:32px 4%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .mobile-promises .brand-promise{padding:0;border:0;margin:0;max-width:none}
  .mobile-promises .brand-promise h2{font-size:25px;line-height:1.35;text-shadow:none}
  .company-story h2{grid-column:span 4}.company-story>div{grid-column:span 8}
  .principle-details h3,.contact-grid h2{font-size:24px}
}
@media(max-width:760px){
  :root{--composition-gap:24px}
  .about-inner{width:calc(100% - 40px)}
  .scene-layout .side-note h2{font-size:30px!important;line-height:1.22!important}
  .scene-layout .side-note p{font-size:17px!important}
  .brand-promises.mobile-promises{display:block;padding:12px 20px}
  .mobile-promises .brand-promise{padding:24px 0;border-top:1px solid var(--composition-rule)}
  .mobile-promises .brand-promise:first-child{border-top:0}
  .mobile-promises .brand-promise h2{font-size:25px;text-wrap:initial}
  .company-story,.contact-grid,.principle-details{grid-template-columns:minmax(0,1fr)}
  .company-story h2,.company-story>div,.contact-grid>div,.principle-details article{grid-column:1}
  .company-story,.principles{padding:32px 0}
  .company-story h2,.principles>h2{font-size:30px}
  .principles>h2{margin-bottom:24px}
  .principle-details{gap:28px}
  .contact-grid{gap:32px;padding:32px 0}
  .about-top{padding:24px 0}
  .experience b{font-size:32px}
  .company-story p,.principle-details p{font-size:16px;line-height:1.7}
}
@media(max-width:360px){.scene-layout .side-note h2{font-size:28px!important}.mobile-promises .brand-promise h2{font-size:24px}}
