/* ==========================================================================
   4S Logistics Services — responsive.css
   Mobile first: every rule below is a progressive enhancement (min-width)
   Breakpoints: 480 / 576 / 768 / 992 / 1200
   ========================================================================== */

/* ---------- >= 480px (large phones) ---------- */
@media (min-width:480px){
  body{font-size:15.5px;}
  h1{font-size:32px;}
  .sec-title{font-size:27px;}
  .hero h2{font-size:32px;}
  .banner h1{font-size:30px;}
  .btn-row{gap:14px;}
}

/* ---------- >= 576px (landscape phones) ---------- */
@media (min-width:576px){
  :root{--sec-pad:64px;--gap:20px;}
  .grid--2,.grid--4{grid-template-columns:repeat(2,1fr);}
  .strip__grid{grid-template-columns:repeat(2,1fr);}
  .card,.info-card{padding:26px 22px;}
  .form-grid{grid-template-columns:repeat(2,1fr);}
  .counter strong{font-size:34px;}
}

/* ---------- >= 768px (tablets) ---------- */
@media (min-width:768px){
  :root{--sec-pad:72px;}
  body{font-size:16px;}
  h1{font-size:38px;}
  h2{font-size:28px;}
  h3{font-size:20px;}
  .sec-title{font-size:31px;}
  .lead{font-size:17px;}

  .wrap{padding:0 24px;}

  .topbar__inner{flex-direction:row;justify-content:space-between;text-align:left;}
  .topbar__list{justify-content:flex-start;}

  .brand img{height:76px;}
  .brand__name{font-size:23px;}
  .brand__tag{font-size:23px;}

  .grid--3{grid-template-columns:repeat(3,1fr);}
  .strip__grid{grid-template-columns:repeat(3,1fr);}
  .counter-grid{grid-template-columns:repeat(4,1fr);}

  .hero__slide{padding:78px 0 86px;}
  .hero h2{font-size:40px;}
  .hero p{font-size:16.5px;}
  .hero__inner{max-width:600px;}

  .banner{padding:70px 0;}
  .banner h1{font-size:36px;}

  .media-grid{grid-template-columns:repeat(2,1fr);gap:34px;}
  .media-grid--wide{grid-template-columns:1.15fr .85fr;}

  .illus{min-height:300px;padding:30px;}
  .illus svg{max-height:230px;}

  .slider__item{flex:0 0 50%;}

  .footer__grid{grid-template-columns:repeat(2,1fr);gap:34px;}
  .footer__bottom{text-align:left;}
  .footer__bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .footer__bottom p{margin:0;}

  .map-frame iframe{height:380px;}
  .form-card{padding:30px 28px;}

  .cta h2{font-size:29px;}

  /* the sticky phone call bar is only for small screens */
  .call-bar{display:none;}
  body{padding-bottom:0;}
  .to-top{right:22px;bottom:22px;width:46px;height:46px;}
}

/* ---------- >= 992px (desktop: horizontal nav) ---------- */
@media (min-width:992px){
  :root{--sec-pad:86px;--gap:26px;}
  .sec-title{font-size:34px;}
  .sec-head{margin-bottom:44px;}
  .hero__map{opacity:.26;}

  .header__inner{min-height:100px;gap:10px;}
  .brand img{height:88px;}
  .nav-toggle{display:none;}
  .header__cta{display:inline-flex;}
  .header__cta--outline{display:none;}

  .nav{
    position:static;width:auto;height:auto;padding:0;overflow:visible;
    box-shadow:none;background:none;right:auto;margin-left:auto;
  }
  .nav__head,.nav__foot{display:none;}
  .nav-backdrop{display:none;}

  .menu{display:flex;align-items:stretch;gap:0;}
  .menu > li{border:0;position:relative;display:flex;flex:none;}
  .menu > li > a,
  .menu > li > .drop-toggle{
    display:flex;align-items:center;justify-content:center;gap:0;
    width:auto;height:82px;padding:0;white-space:nowrap;
    font-size:14.5px;line-height:1;position:relative;
  }
  .menu > li > a{padding:0 4px;}
  .menu > li > .drop-toggle .drop-link{display:flex;align-items:center;height:82px;padding:0 0 0 4px;width:auto;white-space:nowrap;}
  .caret-btn{height:82px;padding:0 4px 0 0;}
  .menu > li > a::after,
  .menu > li > .drop-toggle::after{
    content:"";position:absolute;left:4px;right:4px;bottom:24px;height:2px;
    background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--t);
  }
  .menu > li:hover > a::after,
  .menu > li:hover > .drop-toggle::after,
  .menu > li.is-active > a::after,
  .menu > li.is-active > .drop-toggle::after{transform:scaleX(1);}

  .has-drop > .drop-toggle{gap:0;}
  .drop-toggle .caret{width:auto;height:auto;background:none;}
  .has-drop.is-open .caret{background:none;}
  .drop-toggle .caret svg{width:10px;height:10px;}
  .menu > li:hover .caret svg{color:var(--red);transform:rotate(180deg);}

  .submenu{
    position:absolute;top:100%;left:0;
    min-width:246px;max-height:none;overflow:visible;
    background:#fff;border-radius:0 0 var(--radius-sm) var(--radius-sm);
    box-shadow:var(--shadow-lg);
    padding:8px 0;border-top:3px solid var(--red);
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity var(--t),transform var(--t),visibility var(--t);
  }
  .menu > li:hover > .submenu,
  .has-drop.is-open > .submenu{opacity:1;visibility:visible;transform:none;}
  .submenu a{
    padding:9px 18px;border-left:0;margin-left:0;font-size:14px;
    transition:background var(--t),color var(--t),padding var(--t);
  }
  .submenu a:hover{background:var(--soft);color:var(--red);padding-left:24px;}
  .submenu a.is-active{background:var(--soft);color:var(--red);font-weight:600;}

  .hero__slide{padding:120px 0 130px;}
  .hero h2{font-size:50px;}
  .hero__inner{max-width:660px;}
  .hero__dots{bottom:28px;}
  .hero__arrow{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:46px;height:46px;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;
    transition:var(--t);
  }
  .hero__arrow:hover{background:#fff;color:var(--blue);}
  .hero__arrow svg{width:17px;height:17px;}
  .hero__arrow--prev{left:20px;}
  .hero__arrow--next{right:20px;}

  /* strip overlaps the hero on desktop */
  .strip{margin-top:-58px;}
  .strip__item{padding:24px 22px;}

  .banner{padding:96px 0;}
  .banner h1{font-size:42px;}

  .grid--4{grid-template-columns:repeat(4,1fr);}
  .media-grid{gap:48px;}
  .slider__item{flex:0 0 33.3333%;}

  .footer{padding-top:64px;}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:34px;}

  .layout-sidebar{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start;}
  .layout-sidebar--left{grid-template-columns:330px 1fr;}
  .sticky-side{position:sticky;top:110px;}

  .counter strong{font-size:42px;}
  .cta h2{font-size:34px;}
}

/* ---------- >= 1200px ---------- */
@media (min-width:1200px){
  .wrap{padding:0 20px;}
  .hero h2{font-size:56px;}
  .sec-title{font-size:38px;}
  .menu > li > a{padding:0 6px;}
  .menu > li > .drop-toggle .drop-link{padding:0 1px 0 6px;}
  .caret-btn{padding:0 6px 0 1px;}
  .header__cta--outline{display:inline-flex;}
}

/* ---------- Print ---------- */
@media print{
  .topbar,.header,.nav,.nav-backdrop,.hero__dots,.hero__arrow,.to-top,.call-bar,.cta,.footer__social,.banner__art,.hero__map{display:none !important;}
  body{color:#000;font-size:12pt;padding:0;}
  .banner{background:none;color:#000;padding:0 0 12pt;}
  .banner h1{color:#000;}
  a{color:#000;text-decoration:underline;}
  .card,.info-card,.form-card{box-shadow:none;border:1px solid #ccc;}
}