/* Mobile-only editorial composition. The approved desktop presentation is not altered. */
.experience-mobile-kicker{display:none}

@media (max-width:430px){
  :root{--mobile-gutter:20px}
  .shell{width:calc(100% - (var(--mobile-gutter) * 2))}
  .section-pad{padding:104px 0}
  .section-label,.eyebrow{font-size:11px;line-height:1.45;letter-spacing:.115em}
  .section-label{margin-bottom:29px}

  /* A compact header, with the navigation intentionally moved into the drawer. */
  .site-header{height:78px}
  .brand{width:268px;height:70px}
  .mobile-menu summary{width:47px;height:47px}
  .mobile-menu summary i{width:19px}.mobile-menu summary i:first-of-type{top:19px}.mobile-menu summary i:last-of-type{top:27px}
  .mobile-menu[open] summary i:first-of-type,.mobile-menu[open] summary i:last-of-type{top:23px}
  .mobile-menu nav{top:55px;width:min(320px,calc(100vw - 40px));padding:21px 20px}
  .mobile-menu nav a{padding:18px 0;font-size:16px}

  /* Hero — a vertical introduction, not a reduced desktop grid. */
  .hero{padding-top:37px;padding-bottom:35px}
  .hero .eyebrow{max-width:285px;margin-bottom:35px}
  .hero-layout{display:flex;flex-direction:column;align-items:stretch;gap:34px}
  .hero-copy h1{font-size:52px;line-height:.92;letter-spacing:-.07em}
  .hero-copy p{max-width:355px;margin:30px 0 32px;font-size:18px;line-height:1.58}
  .hero-actions{gap:21px}
  .hero-actions .button,.contact-actions .button{min-height:56px;padding:18px 20px;font-size:12px}
  .hero-actions .text-link,.contact-actions .text-link{font-size:12px}
  .brand-composition{height:276px;order:2;margin-top:3px}
  .composition-grid{inset:25px 0 25px 31px}
  .composition-ring{width:330px;height:330px;right:-42px;bottom:-11px}
  .composition-ring img{width:1965px;left:-16px;top:-81px}
  .composition-rule{top:42px;height:181px}
  .hero-foot{margin-top:34px;padding-top:20px;grid-template-columns:1fr auto 1fr;gap:10px;font-size:11px}
  .hero-foot span:nth-of-type(1),.hero-foot span:nth-of-type(3){text-align:left}.hero-foot span:nth-of-type(2),.hero-foot span:nth-of-type(4){text-align:right}

  /* Built for fuel retail — measured reading pace and one proof point per row. */
  .intro{padding-top:103px;padding-bottom:104px}
  .intro-grid{display:flex;flex-direction:column;gap:35px}
  .intro h2,.specialties h2,.section-heading-row h2,.process h2,.experience h2,.proof h2{font-size:39px;line-height:.99;letter-spacing:-.065em}
  .large-copy{font-size:19px;line-height:1.58;max-width:350px}
  .principles{display:flex;flex-direction:column;margin-top:52px;gap:0}
  .principles>div{padding:24px 0 28px}
  .principles b{margin-bottom:15px;font-size:11px}
  .principles strong{font-size:14px;line-height:1.3}
  .principles p{max-width:322px;margin-top:12px;font-size:17px;line-height:1.58}

  /* The two specialties become a deliberate vertical sequence. */
  .specialties{padding-top:104px;padding-bottom:104px}
  .specialties h2{max-width:358px}
  .specialty-rule{height:3px;margin:46px 0 35px}
  .specialty-grid{display:flex;flex-direction:column;gap:0}
  .specialty{width:100%;height:auto;min-height:0;padding:31px 19px 28px}
  .specialty-octane{border-top-width:3px;background:#101010}
  .specialty-top{min-height:36px;align-items:start}
  .specialty-octane .specialty-top span{font-size:29px}
  .specialty b{font-size:11px;line-height:1.35}
  .specialty ul{margin-top:29px}
  .specialty li{padding:15px 0;font-size:16px;line-height:1.46}
  .plus{width:100%;height:54px;font-size:34px;color:var(--soft)}
  .plus:before,.plus:after{height:11px;background:var(--red)}
  .specialty-bazo{padding-top:31px;background:#1b1b1b}
  .specialty-bazo img{width:232px;height:52px;margin-bottom:20px}
  .specialty-bazo .text-link{margin-top:30px;font-size:12px}

  /* Capabilities retain their service-list grammar, enlarged for touch. */
  .capabilities{padding-top:104px;padding-bottom:104px}
  .capabilities .section-heading-row{display:flex;flex-direction:column;gap:28px;padding-bottom:31px}
  .section-heading-row>p{max-width:337px;font-size:17px;line-height:1.58}
  .capability-list a{grid-template-columns:34px 1fr 17px;gap:13px;min-height:94px;padding:26px 0}
  .capability-list b{font-size:14px;padding-top:5px}
  .capability-list span{font-size:27px;line-height:1.12;letter-spacing:-.06em}
  .capability-list i{font-size:19px}

  /* Connected process — true vertical timeline. */
  .process{padding-top:104px;padding-bottom:105px}
  .process-grid{display:flex;flex-direction:column;gap:43px}
  .process-list{padding:0;border:0}
  .process-list:before{left:18px;top:18px;bottom:25px;background:rgba(247,247,247,.32)}
  .process-list li{grid-template-columns:48px 1fr;gap:16px;padding:0 0 35px}
  .process-list b{width:37px;height:37px;font-size:10px}
  .process-list strong{padding-top:3px;font-size:27px;line-height:1.14}
  .process-list span{margin:7px 0 0;font-size:17px;line-height:1.52}

  /* Field experience sits entirely in one readable vertical stack. */
  .experience{padding-top:105px;padding-bottom:104px}
  .experience-grid{display:flex;flex-direction:column;gap:35px}
  .experience-number-wrap{display:flex;flex-direction:column;gap:16px}
  .experience-number{font-size:220px;line-height:.62;letter-spacing:-.13em}
  .experience-mobile-kicker{display:block;max-width:260px;color:var(--soft);font-size:14px;font-weight:600;line-height:1.35;letter-spacing:.095em;text-transform:uppercase}
  .experience h2{text-wrap:balance}
  .experience-copy>p{max-width:355px;margin:29px 0 34px;font-size:20px;line-height:1.58}
  .bazo-note{padding-top:21px;gap:16px}.bazo-note span{font-size:11px}.bazo-note img{width:214px;height:43px}

  /* Project work is a sequential, immersive set of full-width photographs. */
  .proof{padding-top:105px;padding-bottom:104px}
  .proof-head{display:flex;flex-direction:column;align-items:stretch;gap:27px}.proof-head p{font-size:17px;line-height:1.58}
  .proof-grid{display:flex;flex-direction:column;gap:23px;margin-top:49px}
  .project-frame,.project-main,.project-frame:not(.project-main){width:100%;aspect-ratio:4 / 3}
  .project-frame figcaption{padding:17px 16px;font-size:13px;line-height:1.4}
  .project-frame:before{width:44%;height:2px}
  .proof-link{margin-top:29px;font-size:12px}

  /* Closing CTA follows a single, generous mobile reading order. */
  .contact{padding-top:104px;padding-bottom:78px}
  .contact-top{display:flex;flex-direction:column;gap:17px;padding-bottom:23px}.contact-top span{font-size:12px;line-height:1.5}
  .contact-body{display:flex;flex-direction:column;align-items:stretch;gap:35px;padding:68px 0}
  .contact h2{font-size:48px;line-height:.98}
  .contact-body p{max-width:344px;margin:0 0 32px;font-size:19px;line-height:1.58}
  .contact-actions{gap:22px}.contact-lockup{padding-top:31px}.contact-lockup img{max-width:338px}
  footer{padding:25px 0 34px;font-size:12px;line-height:1.55}
}

@media (max-width:374px){
  :root{--mobile-gutter:18px}
  .brand{width:196px}
  .hero-copy h1{font-size:49px}
  .intro h2,.specialties h2,.section-heading-row h2,.process h2,.experience h2,.proof h2{font-size:37px}
  .capability-list span{font-size:25px}
  .experience-number{font-size:205px}
}