/* Intentional handset composition. Desktop rules remain the approved source of truth. */
.mobile-menu{display:none}

@media(max-width:430px){
  html,body{scrollbar-width:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
  body{overflow-x:clip}
  .shell{width:calc(100% - 40px)}
  .section-pad{padding:88px 0}
  .section-label,.eyebrow{font-size:11px;line-height:1.45;letter-spacing:.115em}

  /* Header / navigation */
  .site-header{height:88px;position:relative;z-index:20}
  .brand{width:224px;height:68px}
  .site-header>.nav-cta,.site-header>nav{display:none}
  .mobile-menu{display:block;position:relative}
  .mobile-menu summary{display:flex;align-items:center;justify-content:center;position:relative;width:52px;height:52px;cursor:pointer;list-style:none;color:var(--soft);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-left:1px solid var(--line)}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary span{position:absolute;opacity:0}
  .mobile-menu summary i{display:block;position:absolute;width:20px;height:1px;background:var(--soft);transition:transform .22s ease,top .22s ease}
  .mobile-menu summary i:first-of-type{top:21px}.mobile-menu summary i:last-of-type{top:29px}
  .mobile-menu[open] summary i:first-of-type{top:25px;transform:rotate(45deg)}.mobile-menu[open] summary i:last-of-type{top:25px;transform:rotate(-45deg)}
  .mobile-menu nav{position:absolute;right:0;top:63px;width:min(310px,calc(100vw - 40px));display:flex;flex-direction:column;align-items:stretch;padding:22px;background:#111;border:1px solid rgba(247,247,247,.24);border-top:3px solid var(--red)}
  .mobile-menu nav a{padding:17px 0;border-bottom:1px solid var(--line);color:var(--soft);font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.01em;text-decoration:none;text-transform:none}
  .mobile-menu nav .button{justify-content:space-between;margin-top:20px;padding:17px 18px;border:0;font-size:11px;text-transform:uppercase;letter-spacing:.11em}

  /* Hero */
  .hero{min-height:0;padding-top:38px;padding-bottom:34px;overflow:hidden}
  .hero .eyebrow{max-width:290px;color:var(--steel)}
  .hero-layout{display:flex;flex-direction:column;gap:34px;align-items:stretch}
  .hero-copy{position:relative;z-index:2}
  .hero-copy h1{font-size:50px;line-height:.97;letter-spacing:-.065em}
  .hero-copy p{max-width:350px;margin:26px 0 30px;font-size:17px;line-height:1.55}
  .hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:19px}
  .hero-actions .button{width:100%;justify-content:space-between;min-height:54px;padding:17px 20px;font-size:12px}
  .hero-actions .text-link{align-self:flex-start;font-size:12px;padding:4px 0}
  .brand-composition{order:2;height:280px;width:100%;overflow:clip;border-left:1px solid rgba(247,247,247,.2);border-bottom:1px solid rgba(247,247,247,.2)}
  .composition-grid{inset:22px 0 22px 28px}
  .composition-ring{width:340px;height:335px;right:-43px;bottom:-12px;transform:none}
  .composition-ring img{width:2020px;left:-18px;top:-82px}
  .composition-rule{top:39px;height:182px;width:3px}
  .hero-foot{display:grid;grid-template-columns:auto 1fr auto;gap:10px;margin-top:30px;padding-top:19px;font-size:11px;letter-spacing:.105em;line-height:1.6}
  .hero-foot i{justify-self:center}.hero-foot span:nth-of-type(3){grid-column:1 / 2}.hero-foot i:nth-of-type(3){grid-column:2}.hero-foot span:nth-of-type(4){grid-column:3}

  /* Intro */
  .intro{padding-top:82px;padding-bottom:88px}
  .intro-grid{gap:32px}
  .intro h2,.specialties h2,.section-heading-row h2,.process h2,.experience h2,.proof h2{font-size:38px;line-height:1.02;letter-spacing:-.06em}
  .large-copy{font-size:18px;line-height:1.56;max-width:350px}
  .principles{margin-top:46px;gap:0}
  .principles>div{padding:20px 0 25px}
  .principles b{margin-bottom:14px;font-size:11px}
  .principles strong{font-size:14px;letter-spacing:.09em}
  .principles p{max-width:300px;margin-top:10px;font-size:16px;line-height:1.55}

  /* OCTANE + BAZO */
  .specialties{padding-top:86px;padding-bottom:88px}
  .specialties h2{max-width:350px}
  .specialty-rule{height:3px;margin:42px 0 30px}
  .specialty-grid{gap:0}
  .specialty{height:auto;min-height:0;padding:28px 24px 29px}
  .specialty-top{min-height:42px}
  .specialty-octane .specialty-top span{font-size:28px}
  .specialty b{font-size:11px;line-height:1.4;text-align:right}
  .specialty ul{margin-top:28px}
  .specialty li{padding:13px 0;font-size:16px;line-height:1.45}
  .plus{height:62px;display:grid;place-items:center;font-size:38px;color:var(--steel);position:relative}
  .plus:before,.plus:after{content:"";position:absolute;left:50%;width:1px;height:15px;background:rgba(247,247,247,.35)}
  .plus:before{top:0}.plus:after{bottom:0}
  .specialty-bazo{padding-top:28px}
  .specialty-bazo img{width:226px;height:50px;margin-bottom:17px}
  .specialty-bazo .text-link{margin-top:26px;font-size:12px}

  /* Capabilities */
  .capabilities{padding-top:88px;padding-bottom:84px}
  .capabilities .section-heading-row{gap:24px;padding-bottom:28px}
  .section-heading-row>p{max-width:328px;text-align:left;font-size:17px;line-height:1.55}
  .capability-list a{grid-template-columns:37px 1fr 16px;gap:12px;padding:25px 0;min-height:87px}
  .capability-list b{align-self:start;padding-top:4px;font-size:14px}
  .capability-list span{font-size:26px;line-height:1.13;letter-spacing:-.055em}
  .capability-list i{font-size:18px}

  /* Connected process */
  .process{padding-top:88px;padding-bottom:90px}
  .process-grid{gap:38px}
  .process-list{position:relative;border-top:0;padding-left:0}
  .process-list:before{content:"";position:absolute;top:17px;bottom:17px;left:17px;width:1px;background:rgba(247,247,247,.24)}
  .process-list li{grid-template-columns:45px 1fr;gap:15px;min-height:0;padding:0 0 29px;border-bottom:0;align-items:start;position:relative}
  .process-list li:last-child{padding-bottom:0}
  .process-list b{width:35px;height:35px;font-size:10px;z-index:1}
  .process-list strong{padding-top:4px;font-size:26px;line-height:1.13}
  .process-list span{grid-column:2;margin:4px 0 0;color:#e2e2e2;font-size:16px;line-height:1.5}

  /* BAZO field experience */
  .experience{padding-top:84px;padding-bottom:88px}
  .experience-grid{gap:36px}
  .experience-number{font-size:205px;line-height:.67;letter-spacing:-.12em}
  .experience-copy>p{margin:26px 0 30px;max-width:350px;font-size:18px;line-height:1.58}
  .bazo-note{width:100%;gap:15px;padding-top:18px;flex-wrap:wrap}
  .bazo-note span{font-size:11px}.bazo-note img{width:190px;height:38px}

  /* Editorial project gallery */
  .proof{padding-top:86px;padding-bottom:88px}
  .proof-head{gap:24px}.proof-head p{max-width:320px;font-size:17px;line-height:1.55}
  .proof-grid{gap:17px;margin-top:45px}
  .project-frame,.project-main{aspect-ratio:4 / 3;grid-row:auto}
  .project-frame:not(.project-main){aspect-ratio:3 / 2}
  .project-frame figcaption{padding:14px 15px;font-size:12px;line-height:1.35}
  .proof-link{margin-top:26px;font-size:12px}

  /* Final CTA and footer */
  .contact{padding-top:86px;padding-bottom:56px}
  .contact-top{padding-bottom:20px}.contact-top span{font-size:11px;line-height:1.5}
  .contact-body{gap:34px;padding:62px 0}
  .contact h2{font-size:46px;line-height:1.01}
  .contact-body p{max-width:330px;margin-bottom:29px;font-size:18px;line-height:1.55}
  .contact-actions{display:flex;flex-direction:column;align-items:stretch;gap:19px}
  .contact-actions .button{justify-content:space-between;min-height:54px;font-size:12px}.contact-actions .text-link{font-size:12px;align-self:flex-start}
  .contact-lockup{padding-top:26px}.contact-lockup img{width:100%;max-width:330px}
  footer{width:calc(100% - 40px);display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;height:auto;gap:6px;padding:20px 0 24px;font-size:11px;line-height:1.5;letter-spacing:.085em}
  footer span{display:block;width:100%;max-width:100%;white-space:normal}
}

@media(max-width:374px){
  .shell{width:calc(100% - 34px)}
  .brand{width:212px}
  .hero-copy h1{font-size:47px}
  .capability-list span{font-size:24px}
  .experience-number{font-size:190px}
  footer{width:calc(100% - 34px)}
}

@media(min-width:431px){.mobile-menu{display:none}}