/* ============================================================
   Glomarket Custom Made — Revamp Design System
   Self-contained. No Bootstrap dependency.
   ============================================================ */

:root {
  /* Brand palette */
  --brand:        #0f3d63;
  --brand-dark:   #0a2c48;
  --brand-tint:   #e9f1f8;
  --accent:       #f4713b;
  --accent-dark:  #e05a24;
  --wa:           #25d366;
  --wa-dark:      #1da851;

  /* Neutrals */
  --ink:     #16202b;
  --muted:   #5c6b7a;
  --line:    #e4e9ef;
  --bg:      #ffffff;
  --surface: #f5f8fb;

  /* Shape */
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 12px 34px rgba(15, 61, 99, .09);
  --shadow-sm: 0 4px 14px rgba(15, 61, 99, .07);
  --container: 1180px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-head: 'Poppins', var(--font-body);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a, button { -webkit-tap-highlight-color: rgba(15, 61, 99, .12); }
a { color: var(--brand); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(48px, 7vw, 90px) 0; }
.section--surface { background: var(--surface); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- Section heading ---------- */
.section-head { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 54px); text-align: center; }
.section-head .eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--accent); margin-bottom: 12px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem; line-height: 1;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(244, 113, 59, .28); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: #fff; color: var(--brand); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 1001;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, padding .25s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(15, 61, 99, .08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; color: var(--brand); font-size: 1.15rem; }
.brand img { height: 42px; width: auto; }
.brand span { line-height: 1.05; }
.brand small { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.main-nav > ul { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.main-nav a { display: block; font-family: var(--font-head); font-weight: 500; color: var(--ink); padding: 10px 16px; border-radius: 8px; font-size: .97rem; }
.main-nav a:hover, .main-nav .active > a { color: var(--brand); background: var(--brand-tint); }
.main-nav .has-dropdown { position: relative; }
.main-nav .has-dropdown > a .caret { font-size: .7rem; margin-left: 4px; opacity: .7; }

/* Invisible bridge over the gap so the menu stays open while the cursor
   travels from the "Products" link down to the dropdown items. It only
   catches the pointer while the menu is being hovered, so it can never
   block clicks when the menu is closed. */
.main-nav .has-dropdown::after {
  content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 18px; z-index: 19; pointer-events: none;
}
.main-nav .has-dropdown:hover::after,
.main-nav .has-dropdown:focus-within::after { pointer-events: auto; }

/* Mega dropdown */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s .25s; z-index: 20;
}
.main-nav .has-dropdown:hover .dropdown,
.main-nav .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transition: opacity .2s ease, transform .2s ease, visibility 0s; transform: translateX(-50%) translateY(0); }
.dropdown-group h4 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.dropdown-group ul { list-style: none; margin: 0 0 4px; padding: 0; }
.dropdown-group a { padding: 7px 10px; font-weight: 400; font-size: .93rem; color: var(--muted); border-radius: 6px; }
.dropdown-group a:hover { color: var(--brand); background: var(--surface); }

.header-cta { display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; padding: 0; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; margin: 0 auto; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(115deg, var(--brand-dark) 0%, var(--brand) 55%, #14507f 100%);
}
.hero::after { content: ""; position: absolute; right: -8%; top: -30%; width: 55%; height: 160%; background: radial-gradient(circle, rgba(244,113,59,.28), transparent 62%); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: clamp(56px, 8vw, 96px) 0; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero .lead { font-size: 1.15rem; color: rgba(255, 255, 255, .9); margin-bottom: 28px; max-width: 46ch; }
.hero .tagline { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); padding: 7px 16px; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .04em; margin-bottom: 22px; }
.hero-media img { border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.hero-stats { display: flex; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats .stat strong { display: block; font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: #fff; }
.hero-stats .stat span { font-size: .85rem; color: rgba(255, 255, 255, .8); }

/* ============================================================
   Trust bar
   ============================================================ */
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item .ico { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-tint); color: var(--brand); font-size: 1.15rem; }
.trust-item h3 { font-size: 1rem; margin: 2px 0 4px; }
.trust-item p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ============================================================
   Card grids
   ============================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Category card */
.cat-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-card .thumb { display: block; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
.cat-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat-card:hover .thumb img { transform: scale(1.05); }
.cat-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.cat-card .tag { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.cat-card h3 { margin: 6px 0 4px; font-size: 1.15rem; }
.cat-card h3 a { color: var(--ink); }
.cat-card h3 a:hover { color: var(--brand); }
.cat-card .meta { font-size: .88rem; color: var(--muted); margin: 0; }
.cat-card .arrow { margin-top: auto; padding-top: 14px; align-self: flex-start; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; }
.cat-card:hover .arrow { color: var(--accent); }

/* Feature / step cards */
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); height: 100%; }
.feature .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); font-size: 1.35rem; margin-bottom: 16px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .95rem; margin: 0; }

/* Numbered process steps */
.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px 26px; position: relative; box-shadow: var(--shadow-sm); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--accent); display: block; margin-bottom: 10px; }
.step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .93rem; margin: 0; }

/* Timeline */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.timeline .tl { text-align: center; background: var(--brand); color: #fff; border-radius: var(--radius); padding: 30px 22px; }
.timeline .tl strong { display: block; font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 4px; }
.timeline .tl span { color: var(--accent); font-weight: 600; font-family: var(--font-head); }
.timeline .tl p { color: rgba(255,255,255,.82); font-size: .9rem; margin: 8px 0 0; }

/* ============================================================
   Split (image + text)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split .eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--accent); margin-bottom: 10px; }
.split ul.checks { list-style: none; padding: 0; margin: 18px 0 26px; }
.split ul.checks li { position: relative; padding-left: 30px; margin-bottom: 10px; color: var(--ink); }
.split ul.checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: var(--brand-tint); color: var(--brand); border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }

/* ============================================================
   Product listing pages (products/*.html)
   ============================================================ */
.page-hero { background: linear-gradient(115deg, var(--brand-dark), var(--brand)); color: #fff; padding: clamp(40px, 6vw, 66px) 0; }
.page-hero .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 12px; }
.page-hero .breadcrumb a { color: rgba(255,255,255,.9); }
.page-hero h1 { color: #fff; margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,.9); max-width: 60ch; margin: 0; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card .thumb { display: block; aspect-ratio: 1 / 1; background: var(--surface); overflow: hidden; margin: 0; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-card h3 { font-size: 1rem; margin: 0; }
.product-card p { font-size: .85rem; color: var(--muted); margin: 0; }
.product-card .btn { margin-top: auto; }

/* ============================================================
   Enquiry CTA block
   ============================================================ */
.enquiry-cta { background: linear-gradient(115deg, var(--brand-dark), var(--brand)); color: #fff; border-radius: var(--radius); padding: clamp(34px, 5vw, 54px); text-align: center; position: relative; overflow: hidden; }
.enquiry-cta::after { content: ""; position: absolute; left: -6%; bottom: -40%; width: 40%; height: 150%; background: radial-gradient(circle, rgba(244,113,59,.3), transparent 60%); }
.enquiry-cta h2 { color: #fff; position: relative; }
.enquiry-cta p { color: rgba(255,255,255,.88); max-width: 54ch; margin: 0 auto 24px; position: relative; }
.enquiry-cta .btn-row { position: relative; }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.method-list { display: grid; gap: 16px; }
.method { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; box-shadow: var(--shadow-sm); }
.method .ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); font-size: 1.15rem; }
.method h3 { font-size: 1rem; margin: 0 0 4px; }
.method p, .method a { font-size: .93rem; color: var(--muted); margin: 0; display: block; }
.method a:hover { color: var(--accent); }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--font-head); font-weight: 500; font-size: .85rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: var(--surface); transition: border .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 61, 99, .12); background: #fff; }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 12px; }

.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); line-height: 0; border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 380px; border: 0; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary { cursor: pointer; padding: 18px 22px; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); font-weight: 400; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; margin: 0; color: var(--muted); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--brand-dark); color: rgba(255, 255, 255, .8); padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 44px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; font-size: .92rem; }
.footer-brand img { height: 46px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand p { font-size: .92rem; max-width: 34ch; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact i { color: var(--accent); margin-top: 4px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 20px 0; text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* ============================================================
   Floating widgets
   ============================================================ */
.wa-float { position: fixed; right: 20px; bottom: 22px; z-index: 900; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 8px 24px rgba(37, 211, 102, .45); transition: transform .2s ease; }
.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); opacity: .5; animation: wa-pulse 2.2s infinite; z-index: -1; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }

.scrolltop { position: fixed; right: 22px; bottom: 92px; z-index: 899; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 1.1rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; border: none; cursor: pointer; }
.scrolltop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scrolltop:hover { background: var(--accent); color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 460px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-bar { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  /* --- Off-canvas drawer ---------------------------------------------
     z-index 1002 keeps it above .nav-backdrop (1000) and the sticky
     header (1001). Closed state uses visibility+clip so the off-screen
     panel can never create a horizontal scrollbar. */
  .main-nav {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(360px, 88vw);
    background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s .3s;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom));
    z-index: 1002;
  }
  .main-nav.open { transform: translateX(0); visibility: visible; transition: transform .3s ease, visibility 0s 0s; }

  /* Drawer top bar (injected by revamp.js) */
  .nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 2; background: #fff;
    margin: 0 -16px 10px; padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav-drawer-head .label { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .nav-close {
    flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0;
  }
  .nav-close:active { background: var(--brand-tint); }

  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a { padding: 13px 14px; font-size: 1.02rem; border-radius: 10px; min-height: 48px; display: flex; align-items: center; }
  .main-nav .has-dropdown > a { justify-content: space-between; }
  .main-nav .has-dropdown > a .caret { transition: transform .25s ease; font-size: .85rem; opacity: 1; }
  .main-nav .has-dropdown.open > a { background: var(--brand-tint); color: var(--brand); }
  .main-nav .has-dropdown.open > a .caret { transform: rotate(180deg); }
  .main-nav .has-dropdown::after { display: none; }

  /* The desktop mega-menu becomes an in-drawer accordion. The hover /
     focus-within rules must be neutralised too: a tap on a touch device
     leaves :hover stuck, which would re-apply the absolute positioning
     and translateX(-50%) and throw the submenu off the drawer. */
  .dropdown,
  .main-nav .has-dropdown:hover .dropdown,
  .main-nav .has-dropdown:focus-within .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    width: auto; max-width: 100%; top: auto; left: auto;
    box-shadow: none; border: none; border-left: 2px solid var(--line); border-radius: 0;
    margin: 2px 0 8px 12px; padding: 2px 0 2px 10px;
    grid-template-columns: 1fr; gap: 0; display: none;
  }
  .main-nav .has-dropdown.open .dropdown { display: block; }
  .dropdown-group h4 { margin: 10px 0 2px; }
  .dropdown-group a { min-height: 44px; font-size: .95rem; padding: 10px 12px; }

  /* CTA block pinned to the bottom of the drawer (injected by revamp.js) */
  .nav-drawer-cta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .nav-drawer-cta .btn { width: 100%; }
  .nav-drawer-cta .call { text-align: center; font-size: .88rem; color: var(--muted); }
  .nav-drawer-cta .call a { font-weight: 600; }

  .header-cta .btn:not(.nav-toggle) { display: none; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 30, .55); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; z-index: 1000; }
  .nav-backdrop.show { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s 0s; }
  body.nav-lock { overflow: hidden; }

  .header-inner { height: 66px; gap: 12px; }
  .hero-media { max-width: 560px; }
}

@media (max-width: 720px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps, .timeline { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split .split-media { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .trust-bar { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .map-embed iframe { height: 300px; }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }

  /* Buttons: stack full-width, never let a long label overflow */
  .btn { white-space: normal; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-row .btn { width: 100%; }
  .btn-lg { padding: 15px 22px; font-size: 1rem; }

  /* Hero */
  .hero-inner { padding: 34px 0 44px; gap: 26px; }
  .hero-media { max-width: none; margin: 0 auto; }
  /* The desktop glow is a circle wider than a phone screen, so its edge
     reads as a hard vertical seam. Pull it up into the corner instead. */
  .hero::after { right: -30%; top: -35%; width: 110%; height: 85%; }
  .hero h1 { font-size: 1.72rem; margin-bottom: 14px; }
  .hero .lead { font-size: 1rem; margin-bottom: 22px; max-width: none; }
  .hero .tagline { font-size: .74rem; padding: 6px 13px; margin-bottom: 16px; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
  .hero-stats .stat strong { font-size: 1.12rem; }
  .hero-stats .stat span { font-size: .73rem; line-height: 1.35; display: block; }

  /* Section headings */
  .section-head { margin-bottom: 26px; text-align: left; }
  .section-head p { font-size: .96rem; }
  .section-head .eyebrow { margin-bottom: 8px; }

  /* Category cards: 2-up stays, but tighter so text has room */
  .grid { gap: 14px; }
  .cat-card .body { padding: 12px 13px 15px; }
  .cat-card h3 { font-size: .98rem; margin: 5px 0 3px; }
  /* min-height keeps titles on the same baseline when a tag wraps to 2 lines */
  .cat-card .tag { display: block; font-size: .64rem; letter-spacing: .06em; line-height: 1.25; min-height: 2.5em; }
  .cat-card .meta { font-size: .8rem; line-height: 1.45; }
  .cat-card .arrow { font-size: .82rem; padding-top: 10px; }

  .product-grid { gap: 14px; }
  .product-card .body { padding: 12px 13px 15px; gap: 9px; }
  .product-card h3 { font-size: .92rem; }
  .product-card p { font-size: .8rem; }
  .product-card .btn { padding: 11px 14px; font-size: .85rem; }

  .step, .feature { padding: 22px 18px; }
  .enquiry-cta { padding: 30px 20px; }
  .enquiry-cta p { margin-bottom: 20px; }
  .form-card { padding: 20px 16px; }
  .page-hero { padding: 30px 0 34px; }
  .page-hero .breadcrumb { font-size: .78rem; }

  .split ul.checks li { font-size: .95rem; }
  .faq summary { padding: 15px 16px; font-size: .95rem; }
  .faq details p { padding: 0 16px 16px; font-size: .93rem; }

  /* Footer */
  .site-footer { padding-top: 44px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
  .footer-brand .btn-row .btn { width: auto; }


  /* Floating widgets: smaller, clear of the safe area */
  .wa-float { width: 52px; height: 52px; font-size: 1.4rem; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .scrolltop { width: 40px; height: 40px; right: 20px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .brand { font-size: 1.02rem; gap: 9px; }
  .brand img { height: 36px; }
  .brand small { letter-spacing: .12em; font-size: .58rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero-stats { gap: 10px; }
  .hero-stats .stat strong { font-size: 1.02rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cat-card .thumb { aspect-ratio: 16 / 9; }
  .cat-card .body { padding: 15px 16px 18px; }
  .cat-card h3 { font-size: 1.08rem; }
  .cat-card .meta { font-size: .88rem; }
}


/* ---------- Touch tap targets ----------
   Footer and card links are ~24px tall by default, well under the 44px
   minimum. Pad the link box (not the list item) so the hit area grows
   without stretching the layout. Applies to any coarse pointer, so
   touch tablets get it too. */
@media (pointer: coarse) {
  .site-footer li { margin-bottom: 0; }
  .site-footer ul:not(.footer-contact) a { display: block; padding: 9px 0; }
  .footer-contact li { padding: 7px 0; }
  .footer-contact a { padding: 3px 0; }
  .cat-card .arrow { padding-top: 12px; padding-bottom: 4px; }
  .product-card .btn, .btn-block { min-height: 44px; }
  .method a { padding: 3px 0; }
  .faq summary { min-height: 52px; }
}

/* ---------- Touch devices ----------
   Hover-lift effects fire on tap and stay stuck until the next tap.
   Kept last in the file so these win the cascade. */
@media (hover: none) {
  .btn:hover, .cat-card:hover, .product-card:hover, .wa-float:hover { transform: none; }
  .cat-card:hover .thumb img, .product-card:hover .thumb img { transform: none; }
  .main-nav a:hover { background: none; }
  .main-nav .active > a { color: var(--brand); background: var(--brand-tint); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}