/* Narrow screens. Loaded last on every page. The light design is the only design
   (see work/mobile_theme.py); this adapts it: one column, stacked product windows,
   a type scale for phones. 1100px and below stacks layouts; 720px and below is phone. */
@media(max-width:1100px){
  html,body{overflow-x:clip}
  html{scroll-padding-top:84px}

  /* header: logo and menu button only */
  .header,.home-art .header{height:76px;padding:0 20px;gap:12px;justify-content:space-between}
  .desktop-nav,.header .contact-button{display:none!important}
  .menu-button{display:flex!important;position:relative;width:44px;height:44px;flex:none;color:#16151c;background:transparent;border:0}
  .menu-button span{background:#16151c!important}
  .brand .logo-ink{display:block;height:36px;width:auto}
  .brand .logo-white{display:none}
  .mobile-menu:not([hidden]),.home-art .mobile-menu:not([hidden]){background:#f5f3ef;color:#16151c;border-top:1px solid #16151c14}
  .mobile-menu a{color:#16151c;min-height:48px;display:flex;align-items:center}

  /* homepage hero: the header floats over it, so the copy starts below the header */
  .atmos-stage{min-height:0;height:auto;display:block;padding:0 0 40px;overflow:hidden}
  .stage-copy{position:relative;display:block;height:auto;min-height:0;padding:104px 20px 28px;text-align:center}
  .stage-copy h1{margin:16px 0 22px}
  .hero-lead,.hero-lead p{width:auto;max-width:560px;margin-left:auto;margin-right:auto}
  .hero-ctas{justify-content:center;flex-wrap:wrap;gap:10px}
  .stage-index{display:none}
  .hero-proof{position:relative;left:auto;right:auto;bottom:auto;margin:8px 20px 0;padding:0}
  .hero-proof ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .hero-proof li{padding:12px 8px;border-left:0}
  .hero-frame{display:none}

  /* service page hero: copy first, then the live windows */
  .page-intro:has(>.svc-stage){display:block}
  .page-intro>.svc-stage{margin:32px 0 0}

  /* stacked layouts */
  .svc-sec{grid-template-columns:minmax(0,1fr);gap:28px;padding:56px 20px;min-height:0}
  .svc-copy{position:static;width:auto;max-width:640px}
  .capability-story,.case-feature,.home-resources,.resource-text,.service-problem,.related-cards,.case-quote,.case-panel{grid-template-columns:minmax(0,1fr)}
  .cases-steps{grid-template-columns:minmax(0,1fr)}
  .work-head,.pb-head{grid-template-columns:minmax(0,1fr)}
  .pb-grid,.film-steps{grid-template-columns:minmax(0,1fr)}

  /* case studies: the desktop card has a fixed height, so its text and panel spilled out */
  .case-feature{height:auto!important;gap:20px}
  .case-panel{height:auto;overflow:visible;gap:14px}
  .case-visual{min-height:0;height:auto}
  .case-quote{gap:12px;margin-top:18px}

  /* Lab sizing card: the label sits above the figures, not over them */
  .resource-large .resource-image{height:auto;min-height:0;padding:58px 22px 22px}
  .resource-large .sizing-preview{position:static;width:auto;margin:0;inset:auto}
  .resource-badge{top:16px;left:22px;right:auto}

  /* product windows: one after another, never overlapping */
  .svc-stage{position:relative;height:auto!important;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:100%;transform:none;perspective:none}
  .svc-stage .win{position:relative!important;inset:auto!important;width:100%!important;max-width:none;height:auto!important;min-height:0;margin:0!important;transform:none!important;z-index:auto;opacity:1}

  .win-body{overflow-x:auto}
  .sheet{display:block;max-width:100%;overflow-x:auto}
  .bridge-go{flex-wrap:wrap;max-width:100%;white-space:normal}
  #fx-recipes{grid-template-columns:minmax(0,1fr)!important}
  .fx-cat{min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr)!important}
  .fx-cat button{max-width:100%;white-space:normal;text-align:left}
  .intro-actions{display:flex;flex-wrap:wrap;gap:10px}
  .hero-btn{white-space:normal;max-width:100%}
  .fx-cols{grid-template-columns:minmax(0,1fr)!important}
  .fx-work,.fx-recipes-sec{padding-left:20px;padding-right:20px}
  .fx-work{padding-top:28px;padding-bottom:48px}
  .fx-recipes-sec{padding-top:48px;padding-bottom:64px}

  .outro-orbit{display:none}
  .home-outro{padding:64px 20px;overflow:hidden}
  .outro-picker{max-width:none}
}

@media(max-width:720px){
  :root{--fs-display:clamp(44px,13.5vw,64px);--fs-h1:clamp(36px,10.5vw,46px);--fs-h2:clamp(30px,8.4vw,38px);--fs-h3:22px;--fs-lead:18px;--fs-body:16px;--fs-small:15px;--fs-label:14px}
  .hero-ctas>a{flex:1 1 150px;justify-content:center;text-align:center}
  .case-metrics{grid-template-columns:minmax(0,1fr)!important}
  p.eyebrow,.section-topline .eyebrow,.closing .eyebrow{font-size:14px!important;letter-spacing:.12em;max-width:none}
  .section-topline{display:block}
  .section-topline span{display:block;margin-top:8px;text-align:left}
  .case-metrics>div{border-left:0!important;padding-left:0!important}
  .resource-large .resource-image{padding:54px 14px 14px}
  .sizing-preview{padding:6px 12px}
  .ats-work{padding:28px 20px 48px}
  .ats-about{padding:48px 20px}
}