/* Self-hosted type — no third-party request. Latin subset, woff2, swap.
   Files live in assets/fonts/. Do not re-point these at Google Fonts: the site
   is required to be fully self-contained for offline master-copy use. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/archivo-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   KHALIFA TRADE & IMPEX — stylesheet
   Theme: Premium Grey + Mango Yellow + White
   All design tokens are declared once in :root below.
   ========================================================================== */

:root{
  --bg:#F6F5F2;
  --white:#FFFFFF;
  --ink:#14161A;
  --muted:#54565B;
  --soft:#6E6F73;
  /* --faint is the lightest ink allowed on white and must stay >=4.5:1 at the
     10-11px sizes it is used at (.micro, .crumbs, .p-cat, .badge-ghost).
     #8A8B8F was 3.40:1 and failed; #6E6F73 is 5.90:1. Same correction already
     standardised in the print catalogue palette. */
  --faint:#6E6F73;
  --line:#E2DFD9;
  --line-2:#EDEBE7;
  --line-3:#F4F2EE;
  --grey:#3E444B;
  --grey-dark:#2F343A;
  --mango:#F2C14E;
  --mango-hi:#F7CE6E;
  --mango-ink:#96650A;
  --mango-ink-hi:#7C5408;
  --shell:1280px;
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-0.02em}
p{margin:0}
ul{margin:0}
img{max-width:100%}
a{color:var(--mango-ink);text-decoration:none}
a:hover{color:var(--mango-ink-hi)}
input,textarea,select,button{font-family:inherit;font-size:15px}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--mango-ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}

/* --- type scale ----------------------------------------------------------- */
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mango-ink);text-transform:uppercase}
.kicker-light{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mango);text-transform:uppercase}
.micro{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.h-display{font-size:clamp(38px,7.2vw,90px);font-weight:900;line-height:.98;letter-spacing:-0.035em}
.h-page{font-size:clamp(30px,5.2vw,58px);font-weight:900;line-height:1.03;letter-spacing:-0.03em}
.h-section{font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.08}
.h-card{font-size:22px;font-weight:800;line-height:1.15}
.lede{font-size:16.5px;line-height:1.65;color:var(--muted)}
.body-sm{font-size:14.5px;line-height:1.6;color:var(--muted)}
.body-xs{font-size:13.5px;line-height:1.55;color:var(--soft)}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;
  padding:16px 24px;border-radius:2px;border:1px solid transparent;
  font-family:var(--display);font-weight:800;font-size:12.5px;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;
  transition:transform .18s cubic-bezier(.22,.8,.3,1),box-shadow .18s cubic-bezier(.22,.8,.3,1),background-color .18s ease,color .18s ease;
  will-change:transform;
}
.btn-primary{background:var(--mango);border-color:var(--mango);color:var(--ink)}
.btn-primary:hover{background:var(--mango-hi);border-color:var(--mango-hi);color:var(--ink)}
.btn-dark{background:var(--grey);border-color:var(--grey);color:var(--white)}
.btn-dark:hover{background:var(--grey-dark);border-color:var(--grey-dark);color:var(--white)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{color:var(--ink)}
.btn-outline-light{background:transparent;border-color:rgba(246,245,242,.4);color:var(--bg)}
.btn-outline-light:hover{color:var(--white);border-color:var(--white)}
.btn-quiet{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-quiet:hover{color:var(--ink)}
.btn-sm{padding:13px 16px;font-size:11.5px;letter-spacing:.08em}
.btn-lg{padding:17px 26px;font-size:13px}
.btn:hover,.btn:focus-visible{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 26px -14px rgba(20,22,26,.5),0 2px 6px rgba(20,22,26,.14)}
.btn:active{transform:translateY(-1px) scale(1.005);box-shadow:0 8px 16px -12px rgba(20,22,26,.45)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-cta{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
/* inline catalogue-download links are text links, not .btn — give them the same
   kind of hover response so every download entry point reacts on desktop */
a.link-cta[download]{display:inline-flex;align-items:center;gap:6px;transition:color .18s ease,transform .18s cubic-bezier(.22,.8,.3,1)}
a.link-cta[download]::before{content:"\2193";font-family:var(--mono);font-size:12px;line-height:1}
a.link-cta[download]:hover{color:var(--mango-ink-hi);transform:translateY(-1px)}

/* --- header --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(246,245,242,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-bar{max-width:var(--shell);margin:0 auto;padding:0 24px;height:78px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:46px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  padding:10px 12px;font-family:var(--display);font-weight:600;font-size:12.5px;
  line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--mango-ink)}
.nav a[aria-current="page"]{color:var(--mango-ink);border-bottom-color:var(--mango-ink)}
.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border:1px solid #D9D5CE;background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;border-radius:2px}
.header-mobile{display:none;margin-left:auto;gap:8px;align-items:center}
.header-mobile .icon-btn{width:44px;height:44px}
/* Shop stays reachable without opening the menu on tablet and phone. */
.shop-icon{height:44px;padding:0 14px;gap:7px;border:1px solid var(--mango);background:var(--mango);color:var(--ink);border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--display);font-weight:800;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:transform .18s cubic-bezier(.22,.8,.3,1),box-shadow .18s ease}
.shop-icon svg{flex-shrink:0}
/* Narrow phones: trim the row so logo + labelled Shop + search + burger still fit. */
@media(max-width:430px){
  .shop-icon{padding:0 10px;gap:5px;font-size:11px;letter-spacing:.05em}
  .header-bar{gap:10px;padding:0 16px}
  .brand img{height:38px}
  .header-mobile{gap:6px}
  .header-mobile .icon-btn{width:40px}
  .burger{width:42px;font-size:10px}
}
.shop-icon:hover,.shop-icon:focus-visible{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(20,22,26,.5)}
.shop-icon:active{transform:translateY(0)}
.burger{width:auto;min-width:64px;height:44px;padding:0 12px;white-space:nowrap;border:1px solid var(--grey);background:var(--grey);color:var(--white);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;border-radius:2px}

/* mega menu */
.mega{display:none;border-top:1px solid var(--line);background:var(--white);box-shadow:0 24px 40px -28px rgba(20,22,26,.28)}
.mega.is-open{display:block}
.mega-inner{max-width:var(--shell);margin:0 auto;padding:26px 24px 30px}
.mega-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--white)}
.mega-grid a{background:var(--white);box-shadow:0 0 0 1px var(--line-2);padding:14px 16px;display:flex;flex-direction:column;gap:5px;color:var(--ink)}
.mega-grid a:hover{background:var(--line-3)}
.mega-grid strong{font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.25}
.mega-grid span{font-size:11.5px;line-height:1.4;color:var(--soft)}

/* mobile menu */
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--white);max-height:74vh;overflow:auto}
.mobile-menu.is-open{display:block}
.mobile-inner{padding:12px 20px 24px;display:flex;flex-direction:column}
.mobile-inner>a.m-nav{padding:16px 2px;border-bottom:1px solid var(--line-2);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.mobile-inner>a.m-cat{padding:14px 2px;border-bottom:1px solid #F1EFEB;font-size:14px;line-height:1.3;color:var(--ink)}
.mobile-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--faint);padding:22px 2px 10px}
.mobile-actions{display:flex;gap:10px;padding-top:20px}
.mobile-actions .btn{flex:1}

/* Burger takes over at 1200px: the full row (logo 104 + nav 827 + actions 438
   + gaps) needs ~1421px, so below that it would silently clip against
   body{overflow-x:hidden}. */
@media(max-width:1200px){
  .nav,.header-actions{display:none}
  .header-mobile{display:flex}
}

/* --- hero ----------------------------------------------------------------- */
.hero{background:var(--grey);color:var(--bg);padding:104px 24px 88px;position:relative;overflow:hidden}
.hero-photo{position:absolute;inset:0;background-image:url(img/hero.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.55;pointer-events:none}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(62,68,75,.94) 0%,rgba(62,68,75,.86) 52%,rgba(62,68,75,.62) 100%);pointer-events:none}
.hero-grid-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 86px);pointer-events:none}
.hero-ring{position:absolute;right:-6%;top:-14%;width:520px;height:520px;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.hero-inner{max-width:var(--shell);margin:0 auto;position:relative}
.hero-badge{display:inline-block;max-width:100%;line-height:1.6;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--bg);border:1px solid rgba(242,193,78,.75);padding:9px 13px}
.hero h1{margin:28px 0 0;color:var(--bg)}
.hero-sub{font-family:var(--display);font-weight:600;font-size:clamp(15px,2.1vw,22px);line-height:1.35;color:#C7C4BE;margin-top:20px}
.hero-rule{width:64px;height:3px;background:var(--mango);margin:30px 0}
.hero h2{font-size:clamp(19px,2.5vw,28px);font-weight:700;line-height:1.25;max-width:720px;color:var(--bg)}
.hero-copy{max-width:640px;margin-top:18px;font-size:16.5px;line-height:1.65;color:#C2BFB9}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:transparent;margin-top:68px}
.hero-stat{background:var(--grey);box-shadow:0 0 0 1px rgba(255,255,255,.14);padding:22px 20px 24px;display:flex;flex-direction:column;gap:8px}
.hero-stat b{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.3;color:var(--bg)}
.hero-stat span:last-child{font-size:13.5px;line-height:1.5;color:#C2BFB9}
@media(max-width:900px){.hero{padding:88px 20px 64px}}

/* --- page banner (inner pages) -------------------------------------------- */
.page-head{background:var(--white);border-bottom:1px solid var(--line)}
.page-head-inner{max-width:var(--shell);margin:0 auto;padding:76px 24px}
.page-head-dark{background:var(--grey);color:var(--bg)}
.page-head-dark .h-page{color:var(--bg)}
.page-head-dark .lede{color:#C2BFB9}

/* --- generic sections ----------------------------------------------------- */
.section{max-width:var(--shell);margin:0 auto;padding:88px 24px 0}
.section-tight{padding-top:56px}
.section-end{padding-bottom:96px}
.section-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}

/* --- cards: pillars ------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.pillar{background:var(--white);border:1px solid var(--line);padding:32px 28px 30px;display:flex;flex-direction:column;gap:16px}
.pillar .micro{color:var(--mango-ink)}
.tick-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.tick-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--ink)}
.tick-list li::before{content:"";width:7px;height:7px;background:var(--mango);margin-top:7px;flex-shrink:0}
.pillar .link-cta{margin-top:auto;padding-top:18px}

/* --- image slots ---------------------------------------------------------- */
.media{position:relative;border:1px solid var(--line);background:var(--line-3);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.media-caption{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink);background:rgba(246,245,242,.94);padding:6px 9px}
.media-weave{background-color:#EAE8E3;background-image:repeating-linear-gradient(135deg,#EFEDE9 0 10px,#E6E4DF 10px 20px);display:flex;align-items:flex-end;padding:16px}
.media-weave span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#7C7E82;background:rgba(246,245,242,.92);padding:5px 8px}

/* --- product range grid --------------------------------------------------- */
.range{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:1px;background:transparent;margin-top:38px}
.range-card{background:var(--white);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;color:var(--ink);min-height:192px}
.range-card .media{border:0;border-bottom:1px solid var(--line);flex:0 0 auto}
.range-card .media-weave{aspect-ratio:4/3}
.range-body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 26px;flex:1 1 auto}
.range-card h3{font-size:19px;font-weight:800;line-height:1.2}
.range-card .body-xs{flex:0 0 auto}
.range-meta{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.range-card:hover .range-meta{color:var(--mango-ink)}
@media(min-width:820px){
  .range-card--flagship{grid-column:span 2}
  .range-card--flagship h3{font-size:26px}
  .range-card--second h3{font-size:22px}
}
.range-card--flagship,.range-card--second{box-shadow:inset 3px 0 0 var(--mango),0 0 0 1px var(--line)}

/* --- partner cards -------------------------------------------------------- */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:20px;margin-top:36px;align-items:stretch;grid-auto-rows:1fr}
.partner{background:var(--white);border:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.partner-logo{height:56px;width:auto;max-width:190px;object-fit:contain;object-position:left center;align-self:flex-start}
.partner h3{font-size:21px;font-weight:800;line-height:1.2;margin-top:6px}
.badge-dark{align-self:flex-start;background:var(--grey);color:var(--white);padding:7px 11px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.badge-mango{align-self:flex-start;background:var(--mango);color:var(--ink);padding:9px 13px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.territory{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint)}
.partner .link-cta{margin-top:auto;padding-top:6px}

/* --- industries + stats cards (shared hover language) --------------------- */
.card-lift,.stat{
  position:relative;border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAF8 100%);
  box-shadow:0 1px 2px rgba(20,22,26,.04);overflow:hidden;
  transition:transform .2s cubic-bezier(.22,.8,.3,1),box-shadow .2s cubic-bezier(.22,.8,.3,1),border-color .2s ease;
}
.card-lift::before,.stat::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--mango);transition:width .28s cubic-bezier(.22,.8,.3,1)}
.card-lift:hover,.card-lift:focus-visible,.stat:hover{transform:translateY(-4px) scale(1.012);border-color:#D9D5CE;box-shadow:0 20px 34px -20px rgba(20,22,26,.32),0 3px 8px rgba(20,22,26,.08)}
.card-lift:hover::before,.card-lift:focus-visible::before,.stat:hover::before{width:100%}

.industries{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:16px;margin-top:34px}
.industry{display:flex;flex-direction:column;gap:12px;padding:26px 24px 28px;color:var(--ink)}
.industry-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid #E6E3DE;border-radius:5px;background:var(--bg);color:var(--ink);transition:color .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.industry:hover .industry-ico{color:var(--mango-ink);border-color:rgba(242,193,78,.6);background:var(--white);box-shadow:0 0 0 4px rgba(242,193,78,.18)}
.industry-name{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.25;color:var(--ink);margin-top:4px}
.industry-body{font-size:13.5px;line-height:1.55;color:var(--soft)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px;margin-top:22px}
.stat{display:flex;flex-direction:column;gap:8px;padding:26px 22px 24px}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stat-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
.stat-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(242,193,78,.5);border-radius:5px;background:var(--white);color:var(--mango-ink);transition:border-color .2s ease,box-shadow .2s ease}
.stat:hover .stat-ico{border-color:rgba(242,193,78,.8);box-shadow:0 0 0 4px rgba(242,193,78,.18)}
.stat-val{font-family:var(--display);font-weight:900;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-0.03em;color:var(--mango-ink);font-variant-numeric:tabular-nums}
.stat-label{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.35;margin-top:2px}

/* --- CTA box -------------------------------------------------------------- */
.cta-box{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--mango);color:var(--ink);padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:32px;align-items:center}
.cta-box h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.08}
.cta-dark{background:var(--grey);color:var(--bg);border:0;padding:clamp(30px,4.4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:28px;align-items:center}
.cta-dark h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;line-height:1.1;color:var(--bg)}
.cta-dark p{color:#C2BFB9}

/* --- split blocks (manufacturing / about) --------------------------------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.split-2>article{background:var(--white);padding:34px 30px;display:flex;flex-direction:column;gap:16px}
.split-2 h2{font-size:28px;font-weight:800;line-height:1.1}
.tagline{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.16em;color:var(--mango-ink)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--line);background:var(--white);padding:7px 11px;font-size:13px;color:var(--muted)}
.note{font-size:13.5px;line-height:1.6;color:var(--faint);border-top:1px solid var(--line-2);padding-top:14px}
.about-block{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;background:var(--white);border:1px solid var(--line);padding:34px 30px}
.about-block h2{font-size:24px;font-weight:800;line-height:1.15}
.partner-detail{display:grid;grid-template-columns:330px minmax(0,1fr);gap:36px;background:var(--white);border:1px solid var(--line);padding:34px 30px}
.partner-detail h2{font-size:26px;font-weight:800;line-height:1.12}
.partner-detail .partner-logo{height:74px;max-width:230px}
.family-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:1px;background:transparent;margin-top:12px}
.family-grid span{background:var(--white);box-shadow:0 0 0 1px var(--line);padding:12px 14px;font-size:13.5px;color:var(--ink)}
.callout{border:1px solid var(--line);border-left:3px solid var(--grey);background:var(--white);padding:26px 28px}
@media(max-width:900px){
  .split,.split-2,.about-block,.partner-detail{grid-template-columns:1fr!important}
}

/* --- catalogue ------------------------------------------------------------ */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint)}
.crumbs a{color:var(--faint)}
.crumbs a:hover{color:var(--mango-ink)}
.crumbs [aria-current="page"]{color:var(--ink)}
.cat-head{background:var(--white);border-bottom:1px solid var(--line)}
.cat-head-inner{max-width:var(--shell);margin:0 auto;padding:24px 24px 42px}
.cat-head-grid{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;align-items:end}
.cat-banner{width:100%;border:1px solid var(--line)}
.sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;background:transparent;margin-top:18px}
.sub-grid a{background:var(--white);box-shadow:0 0 0 1px var(--line);padding:20px;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.sub-grid a:hover{background:var(--line-3)}
.sub-grid strong{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.25}
.sub-grid span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--faint)}

.catalogue{max-width:var(--shell);margin:0 auto;padding:42px 24px 96px;display:grid;grid-template-columns:262px minmax(0,1fr);gap:36px;align-items:start}
.facets{position:sticky;top:100px;display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.field input,.field select,.field textarea{padding:13px 14px;border:1px solid #D9D5CE;background:var(--white);outline:none;border-radius:2px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mango-ink)}
.facet-group{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:18px}
.facet-group>.micro{margin-bottom:4px}
.facet{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;border:0;background:transparent;padding:7px 0;font-size:13.5px;line-height:1.35;color:var(--ink);transition:color .15s ease}
.facet:hover{color:var(--mango-ink)}
.facet[aria-pressed="true"]{color:var(--mango-ink);font-weight:600}
.facet-count{font-family:var(--mono);font-size:11px;color:var(--soft)}
.aside-card{border:1px solid var(--line);background:var(--white);padding:18px;display:flex;flex-direction:column;gap:10px}
.aside-card strong{font-family:var(--display);font-weight:800;font-size:15px;line-height:1.3}
.results-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px}
.results-count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.sort-wrap{display:flex;gap:8px;align-items:center}
.sort-wrap select{padding:10px 12px;border:1px solid #D9D5CE;background:var(--white);border-radius:2px}
.notice{margin-top:18px;border:1px solid var(--line);border-left:3px solid var(--mango);background:var(--white);padding:14px 18px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.notice strong{font-family:var(--display)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px;margin-top:22px}
.p-card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .2s ease,box-shadow .2s ease}
.p-card:hover{border-color:#D9D5CE;box-shadow:0 14px 26px -18px rgba(20,22,26,.28)}
.p-card-media{display:block;position:relative;border:0;border-bottom:1px solid var(--line)}
.p-tag{position:absolute;right:0;top:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--white);background:var(--grey);padding:6px 9px}
.p-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.p-card-body h3{font-size:17.5px;font-weight:800;line-height:1.22}
.p-card-body h3 a{color:var(--ink)}
.p-card-body h3 a:hover{color:var(--mango-ink)}
.p-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint);text-transform:none}
.p-rel{align-self:flex-start;border:1px solid var(--line);padding:5px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.p-actions{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.p-actions>*{flex:1}
.empty{border:1px dashed #C9C4BC;padding:44px 28px;text-align:center;margin-top:22px;background:var(--white)}
.empty h3{font-size:20px;font-weight:800}
.load-wrap{display:flex;justify-content:center;padding-top:34px}
@media(max-width:900px){
  .catalogue{grid-template-columns:1fr}
  .facets{position:static}
}

/* --- product detail ------------------------------------------------------- */
.detail{max-width:var(--shell);margin:0 auto;padding:30px 24px 56px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.gallery{display:flex;flex-direction:column;gap:12px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.thumbs .media{aspect-ratio:1/1}
.detail .kicker{text-transform:none}
.detail h1{font-size:clamp(27px,4vw,46px);font-weight:900;line-height:1.05;margin-top:14px;letter-spacing:-0.03em}
.detail-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.badge-outline{border:1px solid var(--grey);color:var(--ink);padding:8px 12px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.badge-ghost{border:1px dashed #C9C4BC;color:var(--faint);padding:8px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em}
.detail-facts{margin-top:30px;border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:20px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:20px;margin-top:18px}
.cat-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cat-pills a{border:1px solid var(--line);background:var(--white);padding:13px 16px;font-size:13.5px;color:var(--ink)}
.cat-pills a:hover{border-color:var(--mango);color:var(--mango-ink)}
@media(max-width:900px){.detail{grid-template-columns:1fr}}

/* --- contact -------------------------------------------------------------- */
.contact-grid{max-width:var(--shell);margin:0 auto;padding:52px 24px 96px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:start}
.contact-stack{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden}
.contact-cell{background:var(--white);padding:28px 26px}
.contact-cell .big{margin-top:12px;font-family:var(--display);font-weight:700;font-size:20px;line-height:1.35}
.contact-cell a.big{color:var(--ink);font-size:22px}
.contact-cell a.big:hover{color:var(--mango-ink)}
.contact-actions{background:var(--white);padding:24px 26px;display:flex;gap:10px;flex-wrap:wrap}
.contact-actions .btn{flex:1;min-width:128px}
.form-card{background:var(--white);border:1px solid var(--line);padding:30px 28px}
.form-card h2{font-size:24px;font-weight:800;line-height:1.15}
.form-stack{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.rel-legend{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.rel-legend div{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.rel-legend b{font-family:var(--display);font-weight:700;font-size:13px;min-width:190px;color:var(--ink)}
.rel-legend span{font-size:13.5px;color:var(--soft)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* --- footer --------------------------------------------------------------- */
.site-footer{background:var(--grey);color:var(--bg);padding:64px 24px 28px;margin-top:auto}
.footer-grid{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px}
.footer-brand{display:flex;flex-direction:column;gap:16px}
.footer-brand img{height:54px;width:auto;display:block;background:var(--bg);padding:8px 12px;align-self:flex-start}
.footer-tag{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.16em;color:#C2BFB9;text-transform:uppercase}
.footer-claim{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.4;color:var(--bg);max-width:300px}
/* Secondary ink on the #3E444B footer ground: #C2BFB9 = 5.98:1 (was #A9A6A1, 4.06:1). */
.footer-col .micro{color:#C2BFB9}
.footer-links{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.footer-links a{font-size:14px;color:#DAD7D2}
.footer-links a:hover{color:var(--mango)}
.footer-links a.accent{color:var(--mango)}
/* the footer profile link is a text link, not a .btn — give it an equivalent
   hover affordance so every download entry point reacts on desktop */
.footer-links a[download]{display:inline-flex;align-items:center;gap:7px;transition:color .18s ease,transform .18s cubic-bezier(.22,.8,.3,1)}
.footer-links a[download]::before{content:"\2193";font-family:var(--mono);font-size:12px;line-height:1}
.footer-links a[download]:hover{color:#F7CE6E;transform:translateX(2px)}
.footer-contact{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.footer-contact .phone{font-family:var(--display);font-weight:700;font-size:17px;color:var(--bg)}
/* Every footer link needs a light-ground colour: the global `a` rule is
   --mango-ink (#96650A), meant for white, and rendered 1.95:1 on this panel. */
.footer-contact a:not(.btn){color:var(--bg)}
.footer-contact a:not(.btn):hover,.footer-contact .phone:hover{color:var(--mango)}
.footer-contact p{font-size:14px;line-height:1.55;color:#C2BFB9}
.footer-bottom{max-width:var(--shell);margin:44px auto 0;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.footer-bottom span{font-family:var(--mono);font-size:11px;color:#C2BFB9}

/* --- downloads page -------------------------------------------------------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;align-items:stretch}
.dl-card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--line);padding:32px 30px 30px;display:flex;flex-direction:column;gap:12px;transition:transform .2s cubic-bezier(.22,.8,.3,1),box-shadow .2s cubic-bezier(.22,.8,.3,1),border-color .2s ease}
.dl-card:hover{transform:translateY(-4px);border-color:#D9D5CE;border-top-color:var(--mango);box-shadow:0 22px 38px -22px rgba(20,22,26,.32),0 3px 8px rgba(20,22,26,.07)}
.dl-card--lead{border-top-color:var(--mango)}
.dl-card-top{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.dl-logo{width:auto;max-width:190px;object-fit:contain;object-position:left center;display:block}
.dl-name{font-family:var(--display);font-size:26px;font-weight:900;line-height:1.1;letter-spacing:-0.02em;margin-top:4px}
.dl-sub{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.3;color:var(--muted)}
.dl-body{margin-top:2px}
.dl-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--soft);text-transform:uppercase;border-top:1px solid var(--line-2);padding-top:14px;margin-top:auto}
.dl-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:14px}
.dl-btn{flex:1 1 auto;min-width:220px}
.dl-link{white-space:nowrap}
.dl-note{margin-top:34px;border:1px solid var(--line);border-left:3px solid var(--grey);background:var(--white);padding:28px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:center}
@media(max-width:620px){
  .dl-card{padding:26px 22px 24px}
  .dl-btn{min-width:0;width:100%}
}

/* --- mobile action bar ---------------------------------------------------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;grid-template-columns:repeat(4,1fr);background:var(--grey);border-top:1px solid rgba(255,255,255,.16)}
.mobile-bar a,.mobile-bar button{padding:16px 8px;text-align:center;border:0;background:transparent;color:var(--bg);font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.mobile-bar .wa{background:var(--mango);color:var(--ink)}
@media(max-width:1200px){
  .mobile-bar{display:grid}
  body{padding-bottom:54px}
}

/* --- overlays: search + enquiry ------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(62,68,75,.6);display:none;justify-content:center;padding:9vh 20px 20px}
.overlay.is-open{display:flex}
.overlay-enquiry{align-items:flex-start;padding:6vh 16px 16px;overflow:auto;z-index:220}
.search-panel{width:100%;max-width:760px;background:var(--white);border:1px solid var(--line);max-height:78vh;display:flex;flex-direction:column}
.search-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.search-bar input{flex:1;min-width:0;border:0;outline:none;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);background:transparent}
.search-results{overflow:auto}
.search-results a{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-3);color:var(--ink)}
.search-results a:hover{background:var(--line-3)}
.search-results .thumb{width:46px;height:46px;flex-shrink:0;border:1px solid var(--line);overflow:hidden}
.search-results .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-results strong{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.2}
.search-results span{font-size:11.5px;line-height:1.3;color:var(--soft)}
.search-hint{padding:16px 18px;font-size:13px;line-height:1.55;color:var(--soft)}
.modal{width:100%;max-width:620px;background:var(--bg);border:1px solid #D9D5CE}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 26px;background:var(--grey);color:var(--bg)}
.modal-head h2{font-size:24px;font-weight:800;line-height:1.15;margin-top:10px;color:var(--bg)}
.modal-head p{margin-top:8px;font-size:13.5px;line-height:1.55;color:#C2BFB9}
.modal-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:14px}
.modal-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.modal-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:4px}
.form-status{font-size:13.5px;line-height:1.6;color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--mango);background:var(--white);padding:12px 14px}

/* --- scroll reveal -------------------------------------------------------- */
@keyframes kfUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Fails OPEN: content is visible by default. The hidden state applies only
   while html.js-reveal is present, which app.js adds at run time and removes
   if anything goes wrong — so a script or IntersectionObserver failure can
   never leave content permanently invisible. */
.reveal{opacity:1}
.js-reveal .reveal{opacity:0}
.js-reveal .reveal.is-in{animation:kfUp .55s cubic-bezier(.22,.8,.3,1) both;opacity:1}
.js-reveal .reveal-stagger.is-in>*{animation:kfUp .55s cubic-bezier(.22,.8,.3,1) both}
.reveal-stagger.is-in>*:nth-child(2){animation-delay:.04s}
.reveal-stagger.is-in>*:nth-child(3){animation-delay:.08s}
.reveal-stagger.is-in>*:nth-child(4){animation-delay:.12s}
.reveal-stagger.is-in>*:nth-child(5){animation-delay:.16s}
.reveal-stagger.is-in>*:nth-child(6){animation-delay:.2s}
.reveal-stagger.is-in>*:nth-child(7){animation-delay:.24s}
.reveal-stagger.is-in>*:nth-child(n+8){animation-delay:.28s}
.no-js .reveal,.no-js .reveal-stagger{opacity:1}
/* Belt and braces: never hide for reduced-motion or print. */
@media print{.reveal,.js-reveal .reveal{opacity:1!important}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1}
  .btn:hover,.card-lift:hover,.stat:hover,.p-card:hover{transform:none}
}

/* --- large screens / TV --------------------------------------------------- */
@media(min-width:1800px){
  :root{--shell:1520px}
  body{font-size:17px}
}
@media(min-width:2400px){
  :root{--shell:1760px}
  body{font-size:18px}
}

/* ==========================================================================
   CROSS-DEVICE HARDENING
   Layout, touch, and platform fixes. No visual-identity changes: same
   palette, type, cards and spacing system at every size.
   ========================================================================== */

/* 1. Long words / long product names can never push a grid track wider than
      its column. Belt-and-braces against horizontal scroll. */
body{overflow-wrap:break-word}
.range,.partners,.industries,.stats,.product-grid,.related-grid,.sub-grid,
.mega-grid,.family-grid,.footer-grid,.cta-box,.cta-dark,.hero-stats,
.modal-fields,.modal-actions,.split,.split-2,.about-block,.partner-detail,
.detail,.catalogue,.contact-grid{min-width:0}
.range>*,.partners>*,.industries>*,.stats>*,.product-grid>*,.related-grid>*,
.sub-grid>*,.mega-grid>*,.footer-grid>*,.cta-box>*,.cta-dark>*,.hero-stats>*,
.split>*,.split-2>*,.about-block>*,.partner-detail>*,.detail>*,
.catalogue>*,.contact-grid>*{min-width:0}
.crumbs,.p-cat,.territory,.range-meta{overflow-wrap:anywhere}

/* 2. iOS Safari zooms the page when a focused field is under 16px.
      Fields render at 16px on touch-sized screens so tapping never zooms. */
@media(max-width:1020px){
  input,textarea,select,
  .field input,.field select,.field textarea,
  .search-bar input{font-size:16px}
}

/* 3. Comfortable touch targets. 44px minimum on small screens and on any
      coarse pointer (tablets, touch laptops, TV remotes). */
@media(max-width:1020px){
  .btn{min-height:46px}
  .btn-sm{min-height:46px;padding:12px 16px}
  .icon-btn{width:46px;height:46px}
  .burger{min-height:46px;min-width:68px}
  .facet{padding:12px 0;font-size:14.5px}
  .nav a,.mega-grid a,.sub-grid a,.cat-pills a,.footer-links a{min-height:44px;display:flex;align-items:center}
  /* column cards must keep their children flush left — align-items:center above
     would centre each child at its own content width, ragging the card */
  .mega-grid a,.sub-grid a{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;text-align:left}
  .footer-links a{align-items:center}
  .link-cta{display:inline-flex;align-items:center;min-height:44px}
}
@media(pointer:coarse){
  .btn{min-height:46px}
  .p-actions>*{min-height:46px}
  .facet{padding:11px 0}
}

/* 4. iPhone home-indicator safe area under the fixed mobile action bar.
      Must track the bar's own breakpoint (1200px) or the body padding is
      missing between 1020 and 1200 where the bar now shows. */
@media(max-width:1200px){
  .mobile-bar{padding-bottom:env(safe-area-inset-bottom,0px)}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom,0px))}
}

/* 5. Mobile landscape and other short viewports: reclaim vertical space so
      the sticky header plus action bar do not dominate the screen. */
@media(max-height:520px) and (max-width:1020px){
  .header-bar{height:62px}
  .brand img{height:36px}
  .hero{padding:64px 20px 48px}
  .hero-stats{margin-top:40px}
  .overlay{padding-top:4vh}
  .overlay-enquiry{padding-top:2vh}
  .search-panel{max-height:88vh}
}

/* 6. Catalogue on small screens: filters collapse behind a toggle so the
      product grid is the first thing a visitor sees. app.js injects
      #filter-toggle; with JS off the panel simply stays open. */
@media(max-width:900px){
  .catalogue{gap:24px}
  .facets{gap:18px;order:2}
  .catalogue>div:last-child{order:1}
  .facets.is-collapsed>*{display:none}
  .facets.is-collapsed #filter-toggle,
  .facets #filter-toggle{display:flex}
}
#filter-toggle{display:none;width:100%;justify-content:space-between}

/* 7. Tablet portrait: two comfortable product columns rather than a single
      wide one, and a roomier catalogue gutter. */
@media(min-width:620px) and (max-width:900px){
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .related-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

/* 8. Very narrow phones (320–360px): tighten gutters, keep type readable. */
@media(max-width:400px){
  .shell,.section,.header-bar,.page-head-inner,.cat-head-inner,
  .catalogue,.detail,.contact-grid,.mega-inner{padding-left:16px;padding-right:16px}
  .hero{padding-left:16px;padding-right:16px}
  .site-footer{padding-left:16px;padding-right:16px}
  .pillar,.partner,.form-card,.about-block,.partner-detail,
  .split-2>article,.contact-cell,.contact-actions{padding-left:20px;padding-right:20px}
  .modal-head,.modal-body{padding-left:18px;padding-right:18px}
  .btn-row{gap:10px}
  .btn-row>.btn{flex:1 1 100%}
}

/* 9. Keep the hero legible where the scrim is thinnest on narrow screens. */
@media(max-width:700px){
  .hero-scrim{background:linear-gradient(180deg,rgba(62,68,75,.9) 0%,rgba(62,68,75,.95) 100%)}
}

/* 10. Reduce motion for users who ask, and avoid sticky quirks on short
       viewports where a sticky sidebar has nowhere to travel. */
@media(max-height:620px){
  .facets{position:static}
}

/* --- shop (retail) ------------------------------------------------------- */
.btn-shop{background:var(--mango);border-color:var(--mango);color:var(--ink);gap:7px}
.btn-shop:hover{background:var(--mango-hi);border-color:var(--mango-hi);color:var(--ink)}
.btn-shop svg{flex-shrink:0}
.m-nav-shop{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--mango);color:var(--ink)!important;padding:16px 14px!important;margin-top:12px;font-weight:800!important}

.shop-hero{background:var(--bg);padding:0}
.slider{position:relative;max-width:var(--shell);margin:0 auto}
.slides{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:1672/941}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1);pointer-events:none}
.slide.is-active{opacity:1;pointer-events:auto}
.slide-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Controls live in a row BELOW the banner. This artwork is full-bleed with its
   own headlines and logos running to the extreme edges, so no in-image arrow
   position is safe at any viewport — keeping them outside guarantees the
   supplied text and logos are never covered. */
.slider-ui{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 16px 0}
.slider-arrow{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s cubic-bezier(.22,.8,.3,1),box-shadow .18s ease}
.slider-arrow:hover,.slider-arrow:focus-visible{background:var(--mango);border-color:var(--mango);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(20,22,26,.45)}
.slider-arrow:active{transform:translateY(0)}
.dots{display:flex;gap:8px;align-items:center;justify-content:center;padding:0}
.dot{box-sizing:content-box;width:26px;height:4px;border:0;padding:11px 0;background-color:#D9D5CE;background-clip:content-box;border-radius:2px;transition:background-color .2s ease,width .2s ease;cursor:pointer}
.dot:hover{background-color:var(--soft)}
.dot.is-active{background-color:var(--mango-ink-hi);width:38px}
/* Touch: arrows go UP to the 44px minimum used by every other touch control
   here (.icon-btn, .shop-icon, .burger) — never down. 38px desktop is the only
   size that can safely stay smaller, since a mouse is precise. */
@media(max-width:700px){
  .slider-arrow{width:44px;height:44px}
  .slider-ui{gap:10px}
}
}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:22px;margin-top:34px}
.shop-card{
  display:flex;flex-direction:column;background:var(--white);border-radius:8px;overflow:hidden;color:var(--ink);
  box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(20,22,26,.04);
  transition:transform .22s cubic-bezier(.22,.8,.3,1),box-shadow .22s cubic-bezier(.22,.8,.3,1);
}
.shop-card:hover,.shop-card:focus-visible{transform:translateY(-6px);box-shadow:0 0 0 1px #D9D5CE,0 26px 44px -24px rgba(20,22,26,.4),0 4px 10px rgba(20,22,26,.09)}
.shop-card-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--line-3)}
.shop-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.shop-card:hover .shop-card-media img{transform:scale(1.045)}
.shop-card-tag{position:absolute;left:0;top:0;background:var(--grey);color:var(--white);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px}
.shop-card-body{display:flex;flex-direction:column;gap:9px;padding:22px 22px 24px;flex:1}
.shop-card-brand{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--mango-ink);text-transform:uppercase}
.shop-card-name{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.18}
.shop-card-blurb{font-size:14px;line-height:1.55;color:var(--soft)}
.shop-card-cta{margin-top:auto;padding-top:14px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mango-ink);display:inline-flex;align-items:center;gap:7px}
.shop-card-cta span{transition:transform .2s cubic-bezier(.22,.8,.3,1)}
.shop-card:hover .shop-card-cta span{transform:translateX(4px)}

.shop-empty{margin-top:28px;border:1px dashed #C9C4BC;border-radius:8px;background:var(--white);padding:clamp(26px,4vw,44px)}

@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  .shop-card:hover,.shop-card:focus-visible{transform:none}
  .shop-card:hover .shop-card-media img{transform:none}
}

/* --- shop: retail listing, detail, cart --------------------------------- */
.shop-layout{max-width:var(--shell);margin:0 auto;padding:36px 24px 96px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
.shop-facets{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.facet-note{font-size:12.5px;line-height:1.5;color:var(--soft);border-top:1px solid var(--line);padding-top:14px}
.range-row{display:flex;flex-direction:column;gap:7px}
.range-row input[type=range]{width:100%;accent-color:var(--mango-ink)}
.range-out{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
@media(max-width:900px){.shop-layout{grid-template-columns:1fr}.shop-facets{position:static}}

.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:20px}
.sp-card{display:flex;flex-direction:column;background:var(--white);border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s ease,transform .2s cubic-bezier(.22,.8,.3,1)}
.sp-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #D9D5CE,0 16px 30px -20px rgba(20,22,26,.34)}
.sp-media{display:block;aspect-ratio:1/1;background:var(--line-3);overflow:hidden}
.sp-media img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#EDEBE7;background-image:repeating-linear-gradient(135deg,#F1EFEB 0 10px,#E7E5E0 10px 20px)}
.ph span{font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.06em;color:#7C7E82;background:rgba(246,245,242,.94);padding:6px 9px}
.ph-lg span{font-size:11.5px}
.sp-body{display:flex;flex-direction:column;gap:6px;padding:15px 16px 17px;flex:1}
.sp-series{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mango-ink);text-transform:uppercase}
.sp-name{font-family:var(--display);font-weight:800;font-size:16px;line-height:1.22}
.sp-name a{color:var(--ink)}
.sp-name a:hover{color:var(--mango-ink)}
.sp-sku{font-family:var(--mono);font-size:11px;color:var(--soft)}
.sp-sku-pending{color:var(--faint);font-style:italic}
.sp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:2px}
.pr-now{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink)}
.pr-mrp{font-size:13px;color:var(--soft);text-decoration:line-through}
.pr-off{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--mango-ink-hi);background:var(--line-3);padding:3px 6px;border-radius:2px}
.pr-na{font-size:13.5px;color:var(--soft)}
.av{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:2px}
.av-in{background:var(--mango);color:var(--ink)}
.av-out{background:var(--line-3);color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.av-pending{background:var(--line-3);color:var(--muted)}
.sp-actions{display:flex;gap:6px;margin-top:auto;padding-top:12px;align-items:stretch}
.sp-qty{flex:0 0 auto;width:74px;padding:9px 6px;border:1px solid #D9D5CE;background:var(--white);border-radius:2px;font-size:12.5px;color:var(--ink)}
/* both buttons share the remaining width and may shrink; min-width:0 lets them
   go below their intrinsic text width instead of overflowing the card */
.sp-actions .sp-add,.sp-actions .sp-buy{flex:1 1 0;min-width:0;padding:11px 8px;font-size:11px;letter-spacing:.05em;white-space:nowrap}
@media(max-width:1100px) and (min-width:901px){
  .sp-actions{flex-wrap:wrap}
  .sp-qty{width:100%}
  .sp-actions .sp-add,.sp-actions .sp-buy{flex:1 1 calc(50% - 3px)}
}
@media(max-width:420px){
  .sp-actions{flex-wrap:wrap}
  .sp-qty{width:100%}
  .sp-actions .sp-add,.sp-actions .sp-buy{flex:1 1 calc(50% - 3px);font-size:10.5px}
}
.sp-qty:disabled{opacity:.5}
.sp-add{flex:1}
.sp-add:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.pd-media img,.pd-media .ph{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:1px solid var(--line);border-radius:6px}
.pd-disclaimer{margin-top:10px;font-size:12px;line-height:1.5;color:var(--soft)}
.pd-info h1{font-size:clamp(24px,3.2vw,36px);font-weight:900;line-height:1.06;letter-spacing:-0.02em;margin-top:8px}
.pd-sku{display:block;margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pd-sku-pending{color:var(--faint);font-style:italic}
.pd-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:16px}
.pd-price .pr-now{font-size:30px}
.pd-price .pr-mrp{font-size:16px}
.pd-price .pr-off{font-size:13px}
.pd-incl{font-size:12.5px;color:var(--soft);margin-top:5px}
.pd-avail{margin-top:12px}
.pd-buy{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pd-note{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--soft)}
.pd-pack,.pd-spec{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
.pd-pack-list{margin:8px 0 0;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink);white-space:pre-wrap}
.pd-spec dl{margin:10px 0 0;display:flex;flex-direction:column;gap:1px}
.pd-spec dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.pd-spec dt{font-size:13px;color:var(--soft)}
.pd-spec dd{margin:0;font-size:13px;color:var(--ink)}
@media(max-width:820px){.pd-grid{grid-template-columns:1fr;gap:26px}}

.cart-btn{position:relative}
.cart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--mango-ink);color:#fff;font-family:var(--display);font-weight:700;font-size:10.5px;line-height:18px;text-align:center}
.cart-overlay{position:fixed;inset:0;z-index:210;background:rgba(62,68,75,.6);display:none;justify-content:flex-end}
.cart-overlay.is-open{display:flex}
.cart-panel{width:min(460px,100%);background:var(--bg);display:flex;flex-direction:column;max-height:100vh}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px;background:var(--grey);color:var(--bg)}
.cart-head h2{font-size:19px;font-weight:800}
.cart-body{flex:1;overflow:auto;padding:16px 22px}
.cart-empty{padding:30px 0;text-align:center;color:var(--soft);font-size:14px}
.cart-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-thumb{grid-column:1;grid-row:1/3;width:56px;height:56px;border:1px solid var(--line);overflow:hidden;border-radius:3px}
.cart-thumb img,.cart-thumb .ph{display:block;width:100%;height:100%;object-fit:cover}
.cart-thumb .ph span{font-size:8px;padding:2px 3px}
.cart-meta{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.cart-meta strong{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25}
.cart-sub{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.cart-unit{font-size:12.5px;color:var(--muted)}
.cart-ctl{grid-column:2/4;grid-row:2;display:flex;align-items:center;gap:10px;margin-top:4px}
.cart-ctl select{padding:6px 8px;border:1px solid #D9D5CE;background:var(--white);border-radius:2px;font-size:13px}
.cart-rm{border:0;background:transparent;padding:0;font-size:12px;color:var(--soft);text-decoration:underline}
.cart-rm:hover{color:var(--ink)}
.cart-line-total{grid-column:3;grid-row:1;font-family:var(--display);font-weight:800;font-size:15px;text-align:right;white-space:nowrap}
.cart-foot{border-top:1px solid var(--line);background:var(--white);padding:18px 22px 22px}
.cart-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0;font-size:14px}
.cart-row strong{font-family:var(--display);font-weight:800;font-size:16px}
.cart-note{margin-top:8px;font-size:12px;line-height:1.5;color:var(--soft)}
.cart-note-ok{color:var(--mango-ink);font-weight:600}
@media(max-width:520px){.cart-panel{width:100%}}

/* --- shop: similar products ---------------------------------------------- */
.pd-similar{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.pd-similar-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.pd-similar-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media(max-width:560px){.pd-similar-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

/* --- BADSHAH tarpaulin (shop) -------------------------------------------- */
.bd-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:30px;align-items:start}
.bd-media{border:1px solid var(--line);background:var(--line-3)}
.bd-picker{border:1px solid var(--line);background:var(--white);padding:24px;border-top:3px solid var(--mango)}
.bd-summary{margin-top:20px;border-top:1px solid var(--line-2);padding-top:18px}
.bd-sum-price{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
.bd-sum-price .pr-now{font-family:var(--display);font-weight:800;font-size:26px;color:var(--ink)}
.bd-sum-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:16px 0 0;background:var(--line)}
.bd-sum-spec>div{background:var(--white);padding:9px 11px}
.bd-sum-spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.bd-sum-spec dd{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.bd-free{display:inline-block;margin-top:14px;background:var(--mango);color:var(--ink);font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:7px 11px;border-radius:2px}
.bd-actions{margin-top:16px;padding-top:0}
.bd-table-wrap{margin-top:18px;border:1px solid var(--line);background:var(--white);overflow-x:auto}
.bd-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:660px}
.bd-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:11px 13px;border-bottom:1px solid var(--line);background:var(--line-3);white-space:nowrap}
.bd-table td{padding:10px 13px;border-bottom:1px solid var(--line-3);color:var(--ink);vertical-align:middle}
.bd-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-table tr:last-child td{border-bottom:0}
.bd-table tbody tr:hover{background:var(--line-3)}
@media(max-width:900px){
  .bd-layout{grid-template-columns:1fr}
  .bd-sum-spec{grid-template-columns:1fr}
}