/* =========================================================
   Mobile & tablet layer (site-white). Loads LAST.
   Every rule lives inside a max-width query (or targets
   elements that only exist on small screens), so the desktop
   view (>1060px) is unchanged.
   ========================================================= */
.m-only{display:none}

/* ---------- tablet + phone (<=1060px): menu panel ---------- */
@media (max-width:1060px){
  html.nav-lock,html.nav-lock body{overflow:hidden}
  .main-nav{display:flex;flex-direction:column;bottom:0;height:auto;padding:8px 24px 28px;box-shadow:0 18px 30px rgba(17,19,21,.10);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .main-nav ul{gap:0}
  .main-nav a{font-size:20px;padding:14px 0;min-height:52px;display:flex;align-items:center;justify-content:space-between}
  .main-nav a::before{display:none}
  .main-nav li:not(.m-cta) a:not(.active)::after{content:"";display:block;position:static;width:8px;height:8px;border-right:2px solid #A0A5AC;border-top:2px solid #A0A5AC;transform:rotate(45deg);background:none;margin-right:4px}
  .main-nav a.active{color:#1F6FEB}
  .main-nav a.active::after{content:"";display:block !important;position:static;width:8px;height:8px;border-radius:50%;background:#1F6FEB;transform:none;margin-right:4px}
  .main-nav .m-util{display:block;margin-top:auto;padding-top:22px;font-size:14px;line-height:1.6;color:#5B6169}
  .main-nav .m-util b{color:#111315}
  .nav-toggle{width:48px;height:48px}
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
  .page-hero .anchors a{min-height:44px;display:inline-flex;align-items:center}
  .chips label{min-height:44px}
  .grid-3[style*="repeat(5"]{grid-template-columns:repeat(3,1fr) !important}
  .grid-3[style*="repeat(5"] .tile{min-height:0 !important}
}

/* ---------- phone (<=560px) ---------- */
@media (max-width:560px){
  /* page inset + panels */
  .container{padding:0 16px}
  html[data-variant="borders"] .section.grey,html[data-variant="borders"] .section.dark,
  html[data-variant="borders"] .cap:nth-of-type(even){margin-left:12px;margin-right:12px;border-radius:16px}
  html[data-variant="borders"] .section.grey>.container,html[data-variant="borders"] .section.dark>.container,
  html[data-variant="borders"] .cap:nth-of-type(even)>.container{padding:0 14px}
  .section{padding:56px 0}.cap{padding:56px 0}.section.tight{padding:28px 0}
  h2{font-size:30px;line-height:1.12}
  .lead{font-size:17px}
  .grid-3,.grid-2,.vm,.plants{gap:16px}
  .split{gap:24px}
  .split>*,.sec-head>*,.cta-band>*{min-width:0}

  /* menu: Enquire button + condensed utility info inside the panel */
  .main-nav{padding:4px 16px 24px}
  .main-nav .m-cta{display:block;margin-top:18px}
  .main-nav .m-cta a,.main-nav .m-cta a:hover{color:#fff;background:#111315;border-color:#111315;
    font-size:16px;min-height:52px;justify-content:center;border-bottom:0;border-radius:999px;padding:14px 22px;gap:10px}
  .nav-wrap{height:68px}
  .brand img{height:36px}

  /* home hero (dark) */
  html[data-theme][data-variant] .hero{min-height:0}
  html[data-theme][data-variant] .hero .container{padding-top:56px;padding-bottom:44px}
  html[data-theme][data-variant] .hero h1{font-size:36px;line-height:1.08;letter-spacing:-.01em}
  html[data-theme][data-variant] .hero h1 em{white-space:normal}
  html[data-theme][data-variant] .hero .lead{font-size:16.5px}
  .hero .ctas{display:flex;flex-direction:column;gap:12px;margin-top:28px}
  .hero .ctas .btn{width:100%;justify-content:center;min-height:52px}
  html[data-theme][data-variant] .hero .cert-chip{margin-top:36px;font-size:14px}
  html[data-theme][data-variant] .hero::after{right:-90px;top:-50px;width:280px;height:280px;opacity:.07}

  /* inner page heroes */
  .page-hero .container{padding-top:36px;padding-bottom:40px}
  .page-hero h1{font-size:36px;line-height:1.08}
  .page-hero .anchors{gap:8px;margin-top:26px}
  .page-hero .anchors a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;font-size:14.5px}
  html[data-theme][data-variant] .page-hero::after{left:auto;right:-80px;bottom:-80px;width:260px;height:260px;opacity:.04}
  html[data-theme][data-variant] .cta-band::after{right:-60px;top:-60px;width:190px;height:190px;opacity:.045}

  /* number boxes: 2-col grid, odd last box spans full width */
  .stats .grid{grid-template-columns:1fr 1fr !important;gap:10px}
  .stats .stat:last-child:nth-child(odd){grid-column:1/-1}
  .stat .n{font-size:34px}
  .stat .l{font-size:15px}
  html[data-variant="borders"] .stat{padding:18px 16px !important}
  .mini-stats div{flex-basis:50%;padding:16px 18px}

  /* cards / tiles */
  .card .body{padding:20px}
  .grid-3[style*="repeat(5"]{grid-template-columns:1fr 1fr !important;gap:12px}
  .grid-3[style*="repeat(5"] .tile{min-height:0 !important;padding:20px}
  .grid-3[style*="repeat(5"] .tile:last-child:nth-child(odd){grid-column:1/-1}
  .grid-3[style*="repeat(5"] .tile h3{font-size:17px !important}
  .vm[style]{grid-template-columns:1fr !important}
  .vm .item{padding:24px}
  .vm .item p[style]{font-size:18px !important}
  .tile{padding:24px}
  .info p,.tl p{font-size:15px}

  /* certificates: image above the details */
  .cert{grid-template-columns:1fr;gap:16px;padding:18px}
  .cert img{width:120px}
  .cert dl{font-size:15px}

  /* timeline: 2 readable columns */
  .timeline{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:28px}

  /* galleries / thumbs */
  .thumbs.c3{grid-template-columns:repeat(2,1fr)}
  .thumbs figcaption{font-size:12.5px}

  /* logos: 2-3 cols */
  .logos{gap:10px}
  .logos.center .logo{width:calc((100% - 10px)/2)}

  /* tables */
  .table{font-size:15px}
  .table th,.table td{padding:12px 14px}

  /* forms: full width, 16px inputs (no iOS zoom), 44px+ targets */
  .form{padding:22px 18px}
  .field label{font-size:15px}
  .field input,.field select,.field textarea{font-size:16px;min-height:50px;width:100%}
  .chips label{min-height:44px;font-size:15px;padding:0 16px}
  .chips input{width:18px;height:18px}
  .form .btn,.form button[type=submit]{width:100%;justify-content:center;min-height:52px}
  .form-note{font-size:14px}
  .cta-band{padding:30px 22px}
  .cta-band .btn{width:100%;justify-content:center;min-height:52px}

  /* footer: stacked, link columns side by side, tappable links */
  .site-footer{padding-top:56px}
  .f-grid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .f-grid>.f-brand,.f-grid>div:last-child{grid-column:1/-1}
  .f-brand p{font-size:15px}
  .site-footer ul{gap:0}
  .site-footer ul a{display:flex;align-items:center;min-height:44px}
  .site-footer .f-grid>div:last-child ul{gap:10px}
  .site-footer .f-grid>div:last-child ul a{min-height:0;display:inline}
  .site-footer .f-grid>div:last-child .btn{display:inline-flex;min-height:48px;width:100%;justify-content:center}
  .f-bottom{flex-direction:column;gap:8px}
}