/* About opening and anniversary phone layout. Desktop artwork and timing are unchanged. */
@media (max-width:560px){
  html[data-theme] body.about-fueltek-page{
    /* Header: 8px top + 48px + 6px + 48px + 14px breathing room. */
    --abx-mobile-clearance:calc(116px + max(8px,env(safe-area-inset-top)));
    padding-top:var(--abx-mobile-clearance)!important;
  }
  html[data-theme] body.about-fueltek-page .header{
    top:max(8px,env(safe-area-inset-top))!important;
    width:calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:48px 48px!important;
    gap:6px!important;
    height:auto!important;min-height:0!important;
  }
  html[data-theme] body.about-fueltek-page .header .logo{
    grid-column:1!important;grid-row:1!important;
    width:min(190px,100%)!important;min-width:0!important;
    height:48px!important;min-height:48px!important;
  }
  html[data-theme] body.about-fueltek-page .header .header-actions-v56{
    box-sizing:border-box!important;
    grid-column:1!important;grid-row:2!important;
    display:flex!important;width:100%!important;max-width:100%!important;
    min-width:0!important;height:48px!important;min-height:48px!important;
    padding:2px 4px!important;gap:4px!important;
    justify-content:space-between!important;overflow:visible!important;
  }
  html[data-theme] body.about-fueltek-page .header .fmo-login-v56{
    box-sizing:border-box!important;flex:1 1 auto!important;
    min-width:86px!important;max-width:none!important;width:auto!important;
    min-height:44px!important;padding:0 8px!important;
    font-size:10px!important;letter-spacing:.035em!important;white-space:nowrap!important;
  }
  html[data-theme] body.about-fueltek-page .header .a11y-menu-v163,
  html[data-theme] body.about-fueltek-page .header .a11y-trigger-v163,
  html[data-theme] body.about-fueltek-page .header .pages-menu-btn-v56{
    box-sizing:border-box!important;flex:0 0 44px!important;
    width:44px!important;min-width:44px!important;max-width:44px!important;
    height:44px!important;min-height:44px!important;max-height:44px!important;
  }
  html[data-theme] body.about-fueltek-page .header .sky-theme-switch[data-theme-toggle]{
    box-sizing:border-box!important;flex:0 0 60px!important;
    width:60px!important;min-width:60px!important;max-width:60px!important;
    min-height:44px!important;margin-left:0!important;
  }
  html[data-theme] body.about-fueltek-page .header .sky-theme-switch__container{
    width:60px!important;min-width:60px!important;max-width:60px!important;
  }
  html:has(body.about-fueltek-page){scroll-padding-top:calc(116px + max(8px,env(safe-area-inset-top)))}

  /* Keep the sticky artwork between the header and the browser bottom edge. */
  .about-fueltek-page .cula-about .abx-opening-sticky,
  .about-fueltek-page .cula-about .abx-years25-sticky{
    top:var(--abx-mobile-clearance);
    height:calc(100svh - var(--abx-mobile-clearance));
    min-height:480px;
  }
  .about-fueltek-page .cula-about .abx-opening{
    height:max(145svh,670px);
  }
  .about-fueltek-page .cula-about .abx-opening-image{
    clip-path:inset(calc(var(--abx-hero-clip) * .34) 12px 7vh 12px);
  }
  .about-fueltek-page .cula-about .abx-kicker{
    top:18px;left:20px;right:20px;
    gap:12px;line-height:1.4!important;
  }
  .about-fueltek-page .cula-about .abx-opening h1{
    left:20px;right:20px;top:47%;
    max-width:calc(100% - 40px);
    font-size:clamp(48px,16vw,70px);
    letter-spacing:-.075em;line-height:.9;
  }
  .about-fueltek-page .cula-about .abx-opening h1 strong{
    margin-left:0;max-width:100%;white-space:nowrap;
  }
  .about-fueltek-page .cula-about .abx-scroll-cue{
    left:20px;right:20px;
    bottom:calc(86px + env(safe-area-inset-bottom));
    gap:10px;min-width:0;
  }
  .about-fueltek-page .cula-about .abx-scroll-cue i{
    flex:1 1 auto;min-width:24px;width:auto;
  }

  /* Date, milestone, and journey each own a grid row. */
  .about-fueltek-page .cula-about .abx-years25-sticky{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:12px;
    padding:18px 16px calc(88px + env(safe-area-inset-bottom));
  }
  .about-fueltek-page .cula-about .abx-years25-sticky>.abx-label{
    position:relative;z-index:3;grid-row:1;
    font-size:8px!important;line-height:1.4!important;
  }
  .about-fueltek-page .cula-about .abx-25{
    position:relative;left:auto;right:auto;top:auto;
    grid-row:2;align-self:center;display:flex;
    flex-direction:column;align-items:center;justify-content:center;
    min-height:0;margin:0;transform:none;text-align:center;
  }
  .about-fueltek-page .cula-about .abx-25 strong{
    font-size:clamp(116px,42vw,195px);
    line-height:.8;letter-spacing:-.105em;
  }
  .about-fueltek-page .cula-about .abx-25>span{
    display:block;margin-top:10px;padding:0;
    font-size:clamp(29px,8.7vw,43px);
    line-height:.9;letter-spacing:-.05em;
  }
  .about-fueltek-page .cula-about .abx-25-journey{
    position:relative;left:auto;right:auto;bottom:auto;
    grid-row:3;min-width:0;width:100%;
    max-height:clamp(140px,31svh,220px);overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px 14px;
    opacity:clamp(.8,var(--abx-25-journey-opacity,.35),1);
  }
  .about-fueltek-page .cula-about .abx-25-journey p small{
    font-size:8px;line-height:1.35;
  }
  .about-fueltek-page .cula-about .abx-25-journey p strong{
    font-size:clamp(19px,5.4vw,25px);line-height:1.1;
  }
  .about-fueltek-page .cula-about .abx-25-journey ol{margin-top:12px}
  .about-fueltek-page .cula-about .abx-25-journey li{min-height:52px}

  .about-fueltek-page .fueltek-sales-contact-dock-v381{
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    gap:8px!important;
  }
  .about-fueltek-page:has(.ft-cookie-banner:not([hidden])) .fueltek-sales-contact-dock-v381,
  .about-fueltek-page:has(.ft-cookie-modal:not([hidden])) .fueltek-sales-contact-dock-v381{
    opacity:0!important;pointer-events:none!important;
  }
}

/* The original reduced-motion mode must remain a non-sticky reading layout. */
@media (max-width:560px) and (prefers-reduced-motion:reduce){
  .about-fueltek-page .cula-about .abx-opening,
  .about-fueltek-page .cula-about .abx-years25{height:auto}
  .about-fueltek-page .cula-about .abx-opening-sticky,
  .about-fueltek-page .cula-about .abx-years25-sticky{
    position:relative;top:auto;height:auto;min-height:560px;
  }
  .about-fueltek-page .cula-about .abx-opening-image{clip-path:inset(0)}
}