/* Phones and small tablets. Loaded only for (max-width:1100px) or (max-height:500px), last in the cascade.
   Every rule is scoped to #nc (the <html> id) so it wins over the older layered breakpoints without !important.
   Desktop (wider than 1100px) never downloads this file. */

/* ---------- tablets and phones: the menu sheet (wherever the hamburger is shown) ---------- */
@media (max-width:1100px){
  #nc #mobile-menu[open]{display:flex;flex-direction:column;gap:26px;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;
    padding:calc(env(safe-area-inset-top,0px) + 10px) max(22px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 22px) max(22px,env(safe-area-inset-left,0px));
    background:var(--ink);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;animation:mm-sheet .32s var(--ease) both}
  #nc #mobile-menu::backdrop{background:rgba(7,22,27,.5)}
  #nc #mobile-menu .mobile-head{display:flex;align-items:center;justify-content:space-between;margin:0;min-height:56px;font-size:13px;letter-spacing:.08em;color:#a9c8cd}
  #nc #mobile-menu .dialog-close{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-size:26px;line-height:1;display:grid;place-items:center}
  #nc #mobile-menu .mm-primary{display:flex;flex-direction:column}
  #nc #mobile-menu .mm-primary a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.1);
    color:#fff;font-family:var(--display);font-size:clamp(25px,7vw,32px);font-weight:600;letter-spacing:-.03em;text-decoration:none;animation:mm-item .42s var(--ease) both;animation-delay:calc(60ms + var(--i,0) * 32ms)}
  #nc #mobile-menu .mm-primary a::after{content:'';width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.45;margin-right:6px}
  #nc #mobile-menu .mm-primary a[aria-current=page]{color:#86dbe3}
  #nc #mobile-menu .mm-primary a[aria-current=page]::after{opacity:1}
  #nc #mobile-menu .mm-label{margin:0 0 10px;font-size:13px;color:#a9c8cd}
  #nc #mobile-menu .mm-chips{display:flex;flex-wrap:wrap;gap:8px}
  #nc #mobile-menu .mm-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#e7f4f5;font-size:15px;text-decoration:none}
  #nc #mobile-menu .mm-actions{display:grid;gap:10px;margin-top:auto}
  #nc #mobile-menu .mm-actions .button{justify-content:center;min-height:54px;font-size:16px;border-radius:12px}
  #nc #mobile-menu .mm-actions .button.primary{background:#fff;color:var(--ink);border-color:#fff}
  #nc #mobile-menu .mm-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
  #nc #mobile-menu a:focus-visible,#nc #mobile-menu button:focus-visible{outline:3px solid #86dbe3;outline-offset:3px}
  #nc:has(#mobile-menu[open]){overflow:hidden}
  @keyframes mm-sheet{from{opacity:0;transform:translateY(-12px)}}
  @keyframes mm-item{from{opacity:0;transform:translateY(10px)}}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  #nc{--g:max(20px,env(safe-area-inset-left,0px));--m-radius:18px;-webkit-text-size-adjust:100%}
  #nc body{font-size:16px}
  #nc .container{width:calc(100% - 2 * var(--g));margin-inline:auto}
  #nc .topline{display:none}

  /* Header: a full-width sticky bar instead of the floating desktop pill */
  #nc .site-header,#nc .home-page .site-header{position:sticky;top:0;width:100%;margin:0;padding-top:env(safe-area-inset-top,0px);z-index:40;
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(16,53,63,.08)}
  #nc .site-header.scrolled{box-shadow:0 10px 24px -18px rgba(16,53,63,.45)}
  #nc .nav-inner,#nc .home-page .nav-inner{width:100%;height:60px;margin:0;padding:0 calc(var(--g) - 8px) 0 var(--g);gap:4px;background:transparent;border:0;border-radius:0;box-shadow:none}
  #nc .nav-inner::before,#nc .nav-inner::after{display:none}
  #nc .brand,#nc .home-page .brand{gap:10px;min-width:0;min-height:44px;margin-right:auto;flex:1 1 auto}
  #nc .brand img,#nc .home-page .brand img{width:46px;height:30px;object-fit:contain}
  #nc .brand>span,#nc .home-page .brand>span{font-size:clamp(13px,3.9vw,15px);line-height:1.1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;flex:1 1 auto;min-width:0}
  #nc .brand small{display:none}
  #nc .nav-quote,#nc .home-page .nav-quote{display:none}
  #nc .cart-link,#nc .nav-inner .circle-button,#nc #menu-toggle{flex:0 0 44px;width:44px;height:44px;margin:0;border:0;border-radius:12px;background:transparent;box-shadow:none;font-size:22px;color:var(--ink)}
  #nc .cart-link svg{width:22px;height:22px}
  #nc .cart-count{top:3px;right:2px}

  /* Type scale */
  #nc h1{font-size:clamp(34px,10.4vw,42px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
  #nc h2{font-size:clamp(27px,8vw,32px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
  #nc .lede,#nc .page-heading p,#nc main p{font-size:16px;line-height:1.6}
  #nc .micro,#nc .product-info .micro,#nc .home-product-grid .product-info .micro{font-size:12.5px;letter-spacing:.03em}
  #nc .section{padding-block:56px}
  #nc .button{min-height:50px;font-size:15px;border-radius:12px}
  #nc .actions{gap:10px}

  /* ---------- home ---------- */
  #nc .home-page .site-header{margin-bottom:0}
  #nc .cinema-hero{display:flex;flex-direction:column;padding-bottom:8px;min-height:0}
  #nc .cinema-hero .hero-top{order:0;padding:28px 0 22px;text-align:left}
  #nc .cinema-hero .hero-title{text-align:left}
  #nc .cinema-hero .hero-title .label,#nc .cinema-hero .hero-title>p{justify-content:flex-start}
  #nc .cinema-hero .hero-title h1{font-size:clamp(38px,11.6vw,46px);margin-top:12px}
  #nc .cinema-hero .hero-intro{text-align:left;margin-top:14px}
  #nc .cinema-hero .hero-intro p{margin-inline:0;max-width:34ch}
  #nc .cinema-hero .hero-intro .actions{display:grid;grid-template-columns:1fr;margin-top:22px}
  #nc .cinema-hero .hero-intro .actions .button{width:100%;justify-content:space-between;padding-inline:20px}
  #nc .cinema-hero .hero-film{order:1;position:relative;inset:auto;height:auto;aspect-ratio:4/3;width:auto;align-self:stretch;margin:0 var(--g);border-radius:var(--m-radius);overflow:hidden;background:#dcecee;isolation:isolate}
  #nc .cinema-hero .hero-film::before,#nc .cinema-hero .hero-film::after{display:none}
  #nc .cinema-hero .hero-film video,#nc .cinema-hero .hero-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 58%}
  #nc .cinema-hero .hero-foot{order:2;padding-top:16px;gap:12px;flex-wrap:wrap}
  #nc .cinema-hero .hero-foot>span{font-size:15px}
  #nc .range-ribbon .container{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;width:100%;padding-inline:var(--g);scroll-padding-inline:var(--g)}
  #nc .range-ribbon .container::-webkit-scrollbar{display:none}
  #nc .range-ribbon .container>*{flex:0 0 auto}

  /* Machine explorer: category tabs become a swipeable row of chips */
  #nc .explorer-layout{display:flex;flex-direction:column;gap:18px}
  #nc .machine-index{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(-1 * var(--g));padding:2px var(--g) 6px;scroll-padding-inline:var(--g)}
  #nc .machine-index::-webkit-scrollbar{display:none}
  #nc .machine-index>button{flex:0 0 auto;width:auto;min-height:46px;padding:0 18px;gap:0;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:15px;letter-spacing:-.01em;scroll-snap-align:start}
  #nc .machine-index>button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff;padding-left:18px;border-radius:999px}
  #nc .machine-index .index-number,#nc .machine-index .index-arrow{display:none}
  #nc .index-all{padding-top:4px;font-size:14px;min-height:44px;align-items:center}
  #nc .machine-stage{border-radius:var(--m-radius);padding:18px}
  #nc .stage-art{height:auto;aspect-ratio:5/4;max-height:52vh}
  #nc .stage-details{flex-direction:row;align-items:center;gap:12px}

  /* Home range: a swipe carousel with a progress rail (added by app.mjs) */
  #nc .home-product-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--g));padding:4px var(--g) 10px;scroll-padding-inline:var(--g)}
  #nc .home-product-grid::-webkit-scrollbar{display:none}
  #nc .home-product-grid>.product-card{flex:0 0 min(80%,330px);scroll-snap-align:start}
  #nc .swipe-progress{height:3px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
  #nc .swipe-progress i{display:block;height:100%;width:var(--w,20%);margin-left:var(--x,0%);background:var(--aqua);border-radius:3px;transition:margin-left .12s linear}
  #nc .carousel-bottom{flex-direction:column;align-items:flex-start;gap:8px;font-size:15px}
  #nc .carousel-bottom a{min-height:44px;display:inline-flex;align-items:center}

  /* ---------- product cards (catalogue, home, "also in the range") ---------- */
  #nc .product-grid{display:grid;grid-template-columns:1fr;gap:18px}
  #nc .product-card{display:flex;flex-direction:column;padding:8px 8px 14px;border-radius:var(--m-radius)}
  #nc .product-card .product-image,#nc .home-product-grid .product-image,#nc .home-page .product-image{display:block;position:relative;height:auto;aspect-ratio:4/3;border-radius:calc(var(--m-radius) - 6px);padding:0;overflow:hidden}
  #nc .product-card .product-image img,#nc .home-product-grid .product-image img,#nc .product-grid .product-image img{position:absolute;inset:0;width:100%;height:100%;padding:16px 20px;object-fit:contain}
  #nc .product-label{position:absolute;z-index:1}
  #nc .product-card .image-link{display:none}
  #nc .product-label{font-size:14px;font-weight:700;padding:6px 12px}
  #nc .product-info,#nc .home-product-grid .product-info,#nc .product-grid .product-info{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"text text text" "enq . cmp";gap:12px 8px;padding:14px 8px 0;flex-wrap:nowrap}
  #nc .product-info>div{grid-area:text;min-width:0}
  #nc .product-info h3,#nc .home-product-grid .product-info h3{font-size:21px;line-height:1.2;margin:4px 0 6px;letter-spacing:-.02em}
  #nc .product-info h3 a{display:block}
  #nc .product-info .price-tag{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
  #nc .product-info .price-now{font-size:19px}
  #nc .compare-toggle:not(.button){grid-area:cmp;width:48px;height:48px;border-radius:12px;font-size:20px}
  #nc .card-enquire{grid-area:enq;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;text-decoration:none;justify-self:start}
  #nc .card-enquire:focus-visible{outline:3px solid #1a91be;outline-offset:3px}

  /* Catalogue filters */
  #nc .catalogue-tools,#nc .filter-bar{gap:12px}
  #nc input:not([type=checkbox]):not([type=radio]):not([type=range]),#nc select,#nc textarea{font-size:16px;min-height:48px}
  #nc label.consent{display:flex;flex-direction:row;align-items:flex-start;gap:12px;font-size:14px;line-height:1.55;min-height:44px}
  #nc label.consent input{width:22px;height:22px;margin-top:1px;flex-shrink:0}
  #nc textarea{min-height:120px}

  /* ---------- product page ---------- */
  #nc .breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:14px;padding-block:12px}
  #nc .breadcrumbs::-webkit-scrollbar{display:none}
  #nc .breadcrumbs a{min-height:44px;display:inline-flex;align-items:center}
  #nc .product-detail{display:flex;flex-direction:column;gap:22px}
  #nc .gallery-stage{height:auto;aspect-ratio:1/1;max-height:68svh;border-radius:var(--m-radius);touch-action:pan-y pinch-zoom}
  #nc .gallery-stage img,#nc .gallery-stage video{width:100%;height:100%;object-fit:contain}
  #nc .gallery-stage .circle-button{width:46px;height:46px;right:12px;bottom:12px}
  #nc .gallery-caption{font-size:12px}
  #nc .gallery-thumbs{gap:8px;margin:12px 0 0}
  #nc .gallery-thumbs .thumb{width:64px;height:64px;border-radius:12px}
  #nc .product-summary h1{font-size:clamp(32px,9.6vw,40px)}
  #nc .quick-spec{gap:12px}
  #nc .qty-stepper button{width:48px;height:48px}
  #nc .qty-stepper input{height:48px;min-height:48px}
  #nc .buy-actions{display:grid;grid-template-columns:1fr;gap:10px}
  #nc .buy-actions .button,#nc .product-summary .actions .button{width:100%;justify-content:space-between}
  #nc .buy-secondary{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
  #nc .price-tag .price-was{font-size:14px}
  #nc .price-tag.large .price-now{font-size:30px}
  #nc .buy-secondary .compare-toggle{min-height:48px}
  #nc .inline-link{min-height:44px;display:inline-flex;align-items:center}
  #nc .product-accordions summary{min-height:56px}

  /* Sticky enquiry bar: compact, safe-area aware, steps aside while the page's own buttons are on screen */
  #nc .sticky-enquiry{left:0;right:0;bottom:0;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom,0px));gap:12px;transition:transform .25s var(--ease)}
  #nc .sticky-enquiry .micro{display:none}
  #nc .sticky-enquiry strong{font-size:15px;line-height:1.25}
  #nc .sticky-enquiry .button{min-height:48px;white-space:nowrap}
  #nc .sticky-enquiry.is-tucked{transform:translateY(calc(100% + 4px))}
  #nc body:has(.sticky-enquiry) .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  /* ---------- forms: one column, full-size controls ---------- */
  #nc .field-pair{display:grid;grid-template-columns:1fr;gap:16px}
  #nc .enquiry-form label,#nc .calculator-inputs label{font-size:15px}
  #nc .calculator-inputs,#nc .calculator-results{padding:22px 18px;border-radius:var(--m-radius)}
  #nc .calculator-results{overflow-wrap:anywhere}
  #nc .calculator-layout::before{inset:-20px 0 20px}
  #nc input[type=range]{min-height:44px}
  #nc .contact-layout{display:flex;flex-direction:column;gap:28px}
  #nc .contact-layout>.contact-aside{order:2}

  /* ---------- footer ---------- */
  #nc .site-footer a{min-height:44px;display:inline-flex;align-items:center}
  #nc .site-footer li a{min-height:44px}

  /* ---------- floating widgets ---------- */
  #nc .nc-dock{transition:bottom .2s,transform .25s var(--ease),opacity .25s}
  #nc .nc-dock.is-tucked{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none}
  #nc .compare-tray{bottom:calc(12px + env(safe-area-inset-bottom,0px));min-height:60px}
  #nc .compare-tray .button{min-height:44px}
  #nc #clear-compare{width:44px;height:44px}

  /* ---------- gallery viewer ---------- */
  #nc .mg-lightbox .mg-close,#nc .mg-lightbox .mg-prev,#nc .mg-lightbox .mg-next{min-width:48px;min-height:48px}
  #nc .mg-grid{gap:18px}
  #nc .mg-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--g));padding-inline:var(--g);max-width:none}
  #nc .mg-filters::-webkit-scrollbar{display:none}
  #nc .mg-filters a{flex:0 0 auto;min-height:44px}
  #nc .mg-card h3,#nc .mg-card .mg-title{font-size:21px;line-height:1.2}
  #nc .mg-lb-bar{padding:12px var(--g) calc(74px + env(safe-area-inset-bottom,0px))}
  #nc .mg-lightbox .mg-prev,#nc .mg-lightbox .mg-next{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  #nc .mg-lightbox .mg-close{top:calc(12px + env(safe-area-inset-top,0px))}
}

/* ---------- phones held sideways: keep the content window usable ---------- */
@media (orientation:landscape) and (max-height:500px){
  #nc body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  #nc .topline{display:none}
  #nc .site-header,#nc .home-page .site-header{position:sticky;top:0;margin:0 auto;width:100%}
  #nc .nav-inner,#nc .home-page .nav-inner{height:54px;border-radius:0;width:100%;max-width:none;margin:0;gap:8px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
  #nc .brand,#nc .home-page .brand{flex:1 1 auto;min-width:0}
  #nc .brand>span,#nc .home-page .brand>span{min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #nc .brand small{display:none}
  #nc .desktop-nav{display:none}
  #nc #menu-toggle{display:grid;place-items:center}
  #nc .nav-quote,#nc .home-page .nav-quote{white-space:nowrap}
  #nc .sticky-enquiry{display:none}
  #nc .cinema-hero .hero-top{padding-top:24px}
  #nc .gallery-stage{height:auto;aspect-ratio:auto;max-height:78vh}
  #nc .mg-lb-stage{padding:8px 72px 8px}
  #nc .mg-lb-stage img,#nc .mg-lb-stage video{max-height:calc(100dvh - 16px)}
  #nc .mg-lightbox[open]{grid-template-rows:1fr}
  #nc .mg-lb-bar{position:absolute;left:0;right:0;bottom:0;padding:28px 80px 12px 24px;background:linear-gradient(transparent,rgba(6,22,27,.88));pointer-events:none}
  #nc .mg-lb-bar a{pointer-events:auto}
  #nc #mobile-menu[open]{gap:18px}
  #nc #mobile-menu .mm-primary{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  #nc #mobile-menu .mm-primary a{min-height:48px;font-size:22px}
  #nc #mobile-menu .mm-actions{grid-template-columns:1fr 1fr;margin-top:0}
}

/* ---------- scroll effects: phones only, native scrolling, skipped for reduced motion ---------- */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    #nc .product-card .product-image img{animation:m-lift linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    #nc .stage-art img,#nc .business-visual img{animation:m-unmask linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    #nc .cinema-hero .hero-film video,#nc .cinema-hero .hero-film img{animation:m-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    #nc .setup-steps>*{animation:m-rise linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  }
  @keyframes m-lift{from{transform:translateY(18px) scale(.94)}}
  @keyframes m-unmask{from{clip-path:inset(10% 10% 10% 10% round 18px)}to{clip-path:inset(0 round 0)}}
  @keyframes m-drift{to{transform:scale(1.1) translateY(4%)}}
  @keyframes m-rise{from{opacity:.25;transform:translateY(24px)}}
}
@media (prefers-reduced-motion:reduce){
  #nc #mobile-menu[open],#nc #mobile-menu .mm-primary a{animation:none}
  #nc .sticky-enquiry,#nc .nc-dock{transition:none}
}

/* Product photo swipe: the new photo slides in from the side it came from. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  #nc .gallery-stage.from-right>img,#nc .gallery-stage.from-right>video{animation:m-slide-r .3s var(--ease)}
  #nc .gallery-stage.from-left>img,#nc .gallery-stage.from-left>video{animation:m-slide-l .3s var(--ease)}
  @keyframes m-slide-r{from{transform:translateX(32px);opacity:.25}}
  @keyframes m-slide-l{from{transform:translateX(-32px);opacity:.25}}
}

/* ---------- touch screens wider than a phone (landscape phones, tablets): finger-sized targets only, layout unchanged ---------- */
@media (pointer:coarse){
  #nc .cart-link,#nc .nav-inner .circle-button,#nc #menu-toggle{min-width:44px;min-height:44px}
  #nc .nav-quote,#nc .home-page .nav-quote{min-height:44px}
  #nc .site-footer a{min-height:44px;display:inline-flex;align-items:center}
  #nc .breadcrumbs a{min-height:44px;display:inline-flex;align-items:center}
  #nc .brand{min-height:44px}
  #nc .compare-toggle:not(.button){min-width:44px;min-height:44px}
}