/* ============================================================
   RUKAST — Responsive layer
   Checked at 1920 · 1440 · 1280 · 1024 · 768 · 430 · 390
   Mobile is composed, not shrunk: the scenes restack, the menu
   becomes a full-screen drawer, the timeline turns vertical and
   the comparison table becomes per-parameter cards.
   ============================================================ */

/* ============ 1680 px and wider — let the grid breathe ================== */
@media (min-width:1680px){
  :root{--maxw:1360px;--gutter:clamp(48px,5vw,96px)}
  .bhero__media img{height:min(48vh,480px)}
}

/* ============ ≤ 1440 px ================================================= */
@media (max-width:1440px){
  :root{--maxw:1200px}
}

/* ============ ≤ 1280 px ================================================= */
@media (max-width:1280px){
  :root{--maxw:1120px;--nav-h:68px}
  .bhero__grid{gap:clamp(24px,4vw,56px)}
  .pdp-bar__inner{grid-template-columns:repeat(2,1fr)}
}

/* ============ ≤ 1100 px ================================================= */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:repeat(2,1fr)}
  .seal-band{grid-template-columns:auto minmax(0,1fr)}
  .seal-band__mark{
    grid-column:1 / -1;padding-left:0;padding-top:22px;
    border-left:0;border-top:1px solid var(--line-dark);
  }
  .flow__steps{grid-template-columns:repeat(3,1fr);row-gap:38px}
  .flow__track,.flow__fill{display:none}
  .prev-cards{grid-template-columns:repeat(2,1fr)}
  .prev-cards > *:last-child{grid-column:1 / -1}
  .t-card__shot{height:clamp(180px,24vw,240px)}
}

/* ============ ≤ 1024 px — tablet landscape ============================== */
@media (max-width:1024px){
  .truckviz__summary{grid-template-columns:1fr}
  .truckviz__summary::after{display:none}
  .truckviz__headline{padding-right:0}
  .truckviz__diagram{grid-template-columns:1fr;grid-template-areas:"top" "truck" "flow"}
  .truck{min-height:248px}
  .truck__cab{right:-66px}
  .truck__wheel--c{right:-56px}
  .chapter__grid{grid-template-columns:1fr}
  .chapter__visual{min-height:clamp(340px,60vw,460px)}
  .home-intro{grid-template-columns:1fr}
  .pdp-grid{grid-template-columns:1fr}
  .pdp-aside{position:static}
  .gallery__tall{grid-column:span 6}
  .gallery__detail,.gallery__pano{grid-column:span 12}
}

/* ============ ≤ 900 px — drawer navigation, stacked scenes ============== */
@media (max-width:900px){
  .phero--assort .phero__grid{grid-template-columns:1fr;gap:22px}
  .assort-intro__visual{min-height:280px}
  .assort-intro__legend{position:static;margin-top:16px}
}

@media (max-width:900px){
  /* — Full-screen drawer instead of the desktop bar — */
  .burger{display:grid}
  .nav{
    position:fixed;inset:0;z-index:-1;
    width:100vw;height:100svh;
    overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:2px;
    padding:calc(var(--nav-h) + 28px) var(--gutter) calc(var(--gutter) + 20px);
    background:radial-gradient(90% 70% at 88% 4%,#1B1E23 0%,#0B0C0E 58%);
    color:#fff;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .55s var(--e-out);
  }
  body.nav-open .nav{clip-path:inset(0 0 0 0)}
  body.nav-open{overflow:hidden}
  .nav__link{
    font-family:var(--font-display);font-size:clamp(30px,8vw,44px);
    font-weight:800;letter-spacing:-.045em;padding-block:9px;
    opacity:0;transform:translateY(18px);
    transition:opacity .4s ease,transform .55s var(--e-out);
    transition-delay:calc(var(--n,0) * 55ms + 140ms);
  }
  body.nav-open .nav__link{opacity:1;transform:none}
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{color:var(--red-bright)}
  .nav .btn{
    margin-top:26px;opacity:0;transform:translateY(18px);
    transition:opacity .4s ease,transform .55s var(--e-out);transition-delay:.44s;
  }
  body.nav-open .nav .btn{opacity:1;transform:none}
  .nav__foot{
    display:grid;gap:6px;margin-top:34px;padding-top:22px;
    border-top:1px solid var(--line-dark);width:100%;
    opacity:0;transform:translateY(18px);
    transition:opacity .4s ease,transform .55s var(--e-out);transition-delay:.52s;
  }
  body.nav-open .nav__foot{opacity:1;transform:none}
  .nav__foot a{font-size:var(--fs-caption);color:rgba(255,255,255,.72)}
  .nav__foot span{font-size:var(--fs-micro);color:rgba(255,255,255,.4)}

  /* — Brand hero — */
  .bhero{padding:calc(var(--nav-h) + 4vh) var(--gutter) 9vh}
  /* The seal moves above the figures so the strip keeps the full width */
  .bhero__base{flex-direction:column-reverse;align-items:flex-end;gap:18px}
  .bhero__facts{flex:none;width:100%}
  .bhero__mark{padding-bottom:0}
  .bhero__grid{grid-template-columns:1fr;gap:clamp(20px,4vw,34px);align-items:start}
  .bhero__media{justify-content:center}
  .bhero__media img{height:min(30vh,270px)}
  .bhero__facts{grid-template-columns:repeat(2,1fr)}
  .bhero__fact{padding-right:16px}
  .bhero__fact:nth-child(odd){border-left:0;padding-left:0}
  .bhero__fact:nth-child(3),.bhero__fact:nth-child(4){border-top:1px solid var(--line-dark)}

  /* — Product scenes restack: copy above, bottle below — */
  .scene{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
    row-gap:clamp(14px,2.6vh,28px);
    padding:calc(var(--nav-h) + 3.5vh) var(--gutter) 11vh;
    align-content:start;
  }
  .scene__copy{max-width:100%}
  .scene__copy p{max-width:40ch}
  .scene__copy .eyebrow{margin-bottom:14px}
  .scene__copy h1,.scene__copy h2{margin-bottom:14px}
  .scene__actions{margin-top:22px;gap:10px}
  .scene__meta{margin-top:18px}
  .scene__media{place-items:end center;padding-right:0}
  .scene__shot{height:min(36vh,320px)}
  .wm{font-size:19vw;bottom:8px;left:calc(var(--gutter) - 2px)}
  .scene__hint{display:none}

  /* — Inner pages — */
  .phero__grid{grid-template-columns:1fr}
  .phero__strip{grid-template-columns:repeat(2,1fr)}
  .phero__strip li:nth-child(odd){border-left:0;padding-left:0}
  .phero__strip li:nth-child(3),.phero__strip li:nth-child(4){margin-top:14px}
  .co-grid,.contact-grid,.truckviz{grid-template-columns:1fr}
  .hubs{grid-template-columns:1fr}
  .pdp-hero__inner{grid-template-columns:1fr;row-gap:22px}
  .pdp-hero__caption{right:2px;font-size:8px;letter-spacing:.26em}
  .pdp-hero__crumbs{order:1}
  .pdp-hero__media{order:2;min-height:clamp(300px,52vw,420px)}
  .pdp-hero__copy{order:3}
  .pdp-hero__shot{height:clamp(260px,44vw,380px)}
  .load{grid-template-columns:1fr}
  .truckviz__flow{grid-template-columns:repeat(2,1fr)}
  .truck{min-height:260px}
  .truck__trailer{width:76%}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}

/* ============ ≤ 820 px ================================================== */
@media (max-width:820px){
  .gallery{grid-template-columns:1fr;grid-auto-rows:auto}
  .gallery__tall,.gallery__detail,.gallery__pano{grid-column:span 1;grid-row:auto}
  .gallery__tall{aspect-ratio:4/3}
  .gallery__detail{aspect-ratio:4/3}
  .gallery__pano{aspect-ratio:16/10}
}

/* ============ ≤ 768 px — tablet portrait / large phone ================== */
@media (max-width:768px){
  .truckviz__stats,.truckviz__flow{grid-template-columns:repeat(2,1fr)}
  :root{--block:clamp(56px,9vw,88px);--block-lg:clamp(68px,11vw,110px)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .mini-cards,.prev-cards{grid-template-columns:1fr}
  .prev-cards > *:last-child{grid-column:auto}
  .prev-head{flex-direction:column;align-items:flex-start;gap:18px}
  .form__row{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .ship__figures,.load{grid-template-columns:repeat(2,1fr)}
  .truckviz__stats,.truckviz__flow{grid-template-columns:repeat(2,1fr)}
  .ship__figures > div:nth-child(n+3),.load__item:nth-child(n+3){margin-top:4px}
  .spec-grid > div{padding:20px 0 24px}
  .note-row{grid-template-columns:1fr;row-gap:24px}
  .legal__facts > div{grid-template-columns:1fr;gap:6px}
  .frame__rule{left:9%}
  .frame__index{left:9%}
  .frame__caption{font-size:8px;letter-spacing:.26em;right:10px}
  .panels{grid-template-columns:1fr}
  .pdp-next{grid-template-columns:1fr}
  .photo--pano{aspect-ratio:16/10}
  .photo--tall{aspect-ratio:4/3}
  .t-card{min-height:278px}
  .t-card__shot{height:200px;right:18px;top:14px}
  .modal{place-items:end center}
  .modal__panel{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:88vh}
  .rail__spacer,.rail .btn{display:none}

  /* — Timeline: vertical, with a filling progress line — */
  .flow__steps{grid-template-columns:1fr;row-gap:0}
  .flow__step{
    display:grid;grid-template-columns:54px 1fr;gap:18px;
    padding:0 0 30px;position:relative;
  }
  .flow__step::before{
    content:"";position:absolute;left:26px;top:54px;bottom:0;width:2px;
    background:currentColor;opacity:.16;
  }
  .flow__step:last-child::before{display:none}
  .flow__num{margin-bottom:0}
  .flow__step > div{padding-top:4px}
  /* The line runs between the first and last markers, not past them. */
  .flow__track,.flow__fill{display:block;left:26px;right:auto;top:0;width:2px;height:calc(100% - 30px)}
  .flow__fill{height:calc(var(--flow-p,0) * (100% - 30px));width:2px}
}

/* ============ ≤ 620 px ================================================== */
@media (max-width:620px){
  .truckviz__summary,.truckviz__diagram{padding:20px 18px}
  .truckviz__total{font-size:clamp(2.8rem,15vw,4rem)}
  .truckviz__stats,.truckviz__flow{grid-template-columns:1fr}
  .truck__trailer{height:170px;padding:14px 14px 40px}
  .truck__pallets{gap:8px}
  .truck__pallets i{height:28px}
  .truck__cab{right:-52px;bottom:50px;width:58px;height:46px}
  .truck__trailer::after{right:-66px;width:62px;height:58px}
  .truck__wheel{width:42px;height:42px}
  .truck__wheel::after{inset:12px}
  .truck__wheel--a{left:14%}
  .truck__wheel--b{left:57%}
  .truck__wheel--c{right:-40px}
  .phero--assort{padding-top:calc(var(--nav-h) + 26px)}
  .phero--assort .phero__strip{margin-top:22px}
  .assort-intro__visual{padding:20px 18px 18px;min-height:244px}
  .assort-intro__bottles{gap:8px}
  .assort-intro__bottles img:nth-child(1),.assort-intro__bottles img:nth-child(3){height:180px}
  .assort-intro__bottles img:nth-child(2){height:198px}
  .assort-intro__legend{justify-content:flex-start;gap:6px;margin-top:14px}
  .assort-intro__legend span{font-size:9px;letter-spacing:.1em}
}

@media (max-width:620px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .seal-band{grid-template-columns:1fr;justify-items:start}
  .req-row{grid-template-columns:1fr auto;gap:4px 12px}
  .req-row dt{grid-column:1 / -1}
  .pdp-bar__inner{grid-template-columns:1fr}
  .pdp-table > div{grid-template-columns:1fr;gap:6px}
  .specs{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr;gap:34px}
}

/* ============ ≤ 520 px — phones (430 / 390) ============================= */
@media (max-width:520px){
  :root{
    --gutter:20px;
    --nav-h:64px;
    --nav-h-stuck:58px;
    --fs-display:clamp(2.25rem,9.5vw,2.9rem);
    --fs-hero:clamp(2rem,8.6vw,2.6rem);
    --fs-h1:clamp(1.95rem,8vw,2.5rem);
  }
  .stats{grid-template-columns:1fr}
  .bhero__media{gap:2px}
  .bhero__media img{height:min(24vh,200px)}
  .bhero__mark img{width:118px}
  .bhero__base{gap:14px}
  .bhero__actions .btn{flex:1 1 100%}
  .scene__actions .btn,.pdp-hero__actions .btn{flex:1 1 100%}
  .cta__actions .btn{flex:1 1 100%}
  .fab{padding:13px 16px;font-size:10px;right:14px;bottom:14px}
  .site-footer__bar{flex-direction:column;align-items:flex-start;gap:10px}
  .p-card__head{grid-template-columns:86px 1fr;min-height:180px;gap:16px}
  .p-card__shot{width:86px;height:180px}
  .seal{--seal-size:140px}
  .photo{padding:18px}
  .photo::before{width:26px;height:26px;left:18px;top:18px}
  .modal__panel{padding:24px 20px}
  .modal__close{right:14px;top:14px}
}

/* ============ ≤ 400 px — 390 px class devices =========================== */
@media (max-width:400px){
  :root{--gutter:18px}
  .ship__figures,.load,.spec-grid{grid-template-columns:1fr}
  .truckviz__stats,.truckviz__flow{grid-template-columns:1fr}
  .ship__figures > div,.load__item{padding-top:20px}
  .wm{font-size:21vw}
  .brand{font-size:17px;letter-spacing:.22em}
  .btn{padding:13px 20px}
  .t-card__shot{height:182px}
}


@media (max-width:620px){
  .truckviz__summary,.truckviz__diagram{padding:20px 18px}
  .truckviz__total{font-size:clamp(2.5rem,12vw,3.75rem)}
  .truckviz__caption{max-width:none}
  .truck{min-height:228px;padding-bottom:34px}
  .truck__cab{width:22%;min-width:74px;height:88px;bottom:46px}
  .truck__cab::before{inset:12px 12px 28px 12px}
  .truck__trailer{width:74%;height:148px;padding:12px 12px 34px}
  .truck__pallets{gap:7px}
  .truck__pallets i{height:34px;border-radius:10px 10px 8px 8px}
  .truck__legend{left:12px;bottom:10px}
  .truck__wheel{width:46px;height:46px}
  .truck__wheel::after{inset:12px}
  .truck__wheel--a{left:10%}
  .truck__wheel--b{left:49%}
  .truck__wheel--c{left:65%}
  .truckviz__flow li:not(:last-child)::after{display:none}
}

/* ============ ≤ 340 px — 320 px class devices =========================== */
@media (max-width:340px){
  :root{--gutter:14px}
  .bhero__media img{height:min(20vh,168px)}
  .bhero__mark img{width:104px}
  .btn{padding:12px 16px}
  .brand{font-size:15px;letter-spacing:.18em}
  .phero__strip{grid-template-columns:1fr}
  .phero__strip li{border-left:0!important;padding-left:0!important;margin-top:0!important}
}

/* ============ Short viewports — keep heroes usable ====================== */
@media (max-height:680px) and (min-width:901px){
  .scene__shot{height:min(64vh,520px)}
  .bhero__row img{height:min(24vh,210px)}
}

/* ============ Coarse pointers — no hover lifts ========================== */
@media (hover:none){
  .btn:hover,.card:hover,.p-card:hover,.t-card:hover,
  .mini-card:hover,.hub:hover,.photo:hover,.pdp-next a:hover{transform:none}
  .p-card:hover .p-card__shot,.t-card:hover .t-card__shot{transform:none}
}

/* ============ Print ===================================================== */
@media print{
  .site-header,.fab,.veil,.rail,.scene__hint,.bubbles,.scene__amb{display:none!important}
  body{color:#000;background:#fff}
  .scene,.bhero,.pdp-hero,.section--ink,.cta,.site-footer{background:#fff!important;color:#000!important}
  .rv{opacity:1!important;transform:none!important}
}