/* ==========================================================================
   HELIOGRAPH — responsive layer
   Loaded after style.css. Breakpoints are min-width unless noted, and target
   the sizes the design was drawn at: 320 / 375 / 480 / 768 / 1024 / 1280 /
   1440 / 1920. Fluid type and spacing do most of the work; this file handles
   structural changes, small-screen density and input-capability fallbacks.
   ========================================================================== */

/* --- 320–479px: the tightest case ---------------------------------------- */
@media (max-width:29.99em){
  :root{
    --gutter:1.15rem;
    --header-h:64px;
    --band-y:3.4rem;
  }
  .hero{min-height:100svh}
  .hero__foot{gap:1rem}
  .hero__facts{gap:.9rem 1.4rem;width:100%}
  .hero__facts > *{flex:1 1 42%}
  .scroll-cue{display:none}
  .hero__aside{gap:1.2rem}

  .section-head{margin-bottom:2rem}
  .section-head__top{gap:.8rem}

  .btn{padding:.9em 1.35em}
  .cluster{gap:.6rem}
  .cluster > .btn{flex:1 1 100%}

  .stat{padding:1.35rem 1.15rem}
  .service__row{grid-template-columns:1fr;gap:.5rem}
  .service__num{order:-1}

  .quote__text{font-size:1.25rem}
  .quotes__foot{gap:.8rem}

  .footer__bar{flex-direction:column;align-items:flex-start;gap:.7rem}
  .footer__legal{gap:.9rem}
  .menu__foot{flex-direction:column;gap:.5rem}

  .plan{padding:1.35rem}
  .to-top{width:42px;height:42px}
}

/* --- 375px and up: a touch more breathing room --------------------------- */
@media (min-width:23.4375em) and (max-width:29.99em){
  :root{--gutter:1.35rem}
  .hero__facts > *{flex:0 1 auto}
}

/* --- 480px+ -------------------------------------------------------------- */
@media (min-width:30em){
  .cta__inner{padding-inline:1rem}
  .newsletter__row{flex-wrap:nowrap}
  .newsletter__row .btn{align-self:end}
}

/* --- 768px+ (tablet) ----------------------------------------------------- */
@media (min-width:48em){
  :root{--header-h:80px}
  .work-grid{gap:clamp(1.4rem,3vw,2.4rem)}
  .page-hero__title{max-width:14ch}
}

/* --- 1024px+ (small laptop) ---------------------------------------------- */
@media (min-width:64em){
  .section-head__aside{font-size:var(--fs-body)}
  .duo--sticky .duo__media{position:sticky;top:calc(var(--header-h) + 2rem)}
  .work-grid--feature{grid-template-columns:repeat(6,1fr)}
  .work-grid--feature > :nth-child(1){grid-column:span 4}
  .work-grid--feature > :nth-child(2){grid-column:span 2}
  .work-grid--feature > :nth-child(3){grid-column:span 2}
  .work-grid--feature > :nth-child(4){grid-column:span 4}
  .work-grid--feature > :nth-child(5){grid-column:span 3}
  .work-grid--feature > :nth-child(6){grid-column:span 3}
}

/* --- 1280px+ ------------------------------------------------------------- */
@media (min-width:80em){
  :root{--wrap:88rem}
  .hero__title{max-width:15ch}
  .feature{min-height:17rem}
}

/* --- 1440px+ ------------------------------------------------------------- */
@media (min-width:90em){
  :root{--wrap:94rem;--gutter:3.5rem}
}

/* --- 1920px+ : stop the page from becoming a landscape ------------------- */
@media (min-width:120em){
  :root{
    --wrap:104rem;
    --gutter:4.5rem;
    --band-y:9.5rem;
  }
  .header__inner,.hero__inner,.hero__foot,.menu__body,.menu__foot{
    width:min(100% - var(--gutter) * 2,116rem);
  }
  .wrap--wide{width:min(100% - var(--gutter) * 2,116rem)}
  body{font-size:1.12rem}
}

/* --- short landscape (phones turned sideways) ---------------------------- */
@media (max-height:32em) and (orientation:landscape){
  .hero{min-height:auto;padding-block:calc(var(--header-h) + 2rem) 2rem}
  .hero__inner{padding-block:1rem}
  .notfound{min-height:auto;padding-block:calc(var(--header-h) + 3rem) 3rem}
  .menu{grid-template-rows:var(--header-h) 1fr auto}
  .menu__link{font-size:clamp(1.6rem,6vw,2.2rem)}
  .scroll-cue{display:none}
}

/* --- coarse pointers: nothing may depend on hover ------------------------ */
@media (hover:none){
  .service__peek{display:none}
  .work__tag{opacity:1;transform:none}
  .cursor{display:none !important}
  .lift:hover{transform:none;box-shadow:none}
  .marquee__track{animation-play-state:running !important}
  .member__media img{filter:grayscale(0)}
  .plan:hover{transform:none;box-shadow:none}
}

/* --- forced colors / high contrast --------------------------------------- */
@media (forced-colors:active){
  .btn,.filter,.plan,.feature,.value,.contact-card{border:1px solid CanvasText}
  .btn::after,.nav__link::after,.rule--spectrum,.progress__bar{background:CanvasText}
  .spectra{color:CanvasText;-webkit-text-fill-color:CanvasText}
  .cursor,.preloader,.curtain{display:none !important}
}

/* --- print --------------------------------------------------------------- */
@media print{
  .header,.menu,.preloader,.curtain,.cursor,.progress,.to-top,
  .hero__bg,.hero__beam,.hero__grain,.cta__aurora,.cta__grain,
  .particles,.scroll-cue,.marquee,.socials{display:none !important}
  html,body{background:#fff;color:#000}
  .band--deep,.hero,.cta,.footer,.page-hero,.notfound{
    background:#fff !important;color:#000 !important;
  }
  .band--deep h1,.band--deep h2,.band--deep h3,.band--deep h4,
  .hero__title,.cta__title,.page-hero__title{color:#000 !important}
  .hero,.page-hero,.notfound{min-height:auto;padding-top:1.5rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555}
  .band{padding-block:1.2rem;break-inside:avoid}
  img{max-width:100% !important}
  [data-reveal],[data-stagger] > *{opacity:1 !important;transform:none !important;clip-path:none !important}
}